92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router";
|
|
import { useLocation } from "react-router";
|
|
|
|
export default function CreatePostPage() {
|
|
const location = useLocation();
|
|
const stateParentId = location.state?.parentId;
|
|
const [postTitle, setPostTitle] = useState("");
|
|
const [postContent, setPostContent] = useState("");
|
|
const [parentId, setParentId] = useState(stateParentId || "");
|
|
const navigate = useNavigate();
|
|
|
|
console.log(stateParentId);
|
|
console.log(parentId);
|
|
|
|
async function createPost() {
|
|
if (parentId) {
|
|
const response = await fetch(`http://localhost:8787/posts/${parentId}/reply`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
title: postTitle,
|
|
content: postContent // god bless HTTPS
|
|
}),
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Got ${response.status} when trying to log in.`)
|
|
}
|
|
navigate("/");
|
|
} else {
|
|
const response = await fetch("http://localhost:8787/posts/add", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
title: postTitle,
|
|
content: postContent // god bless HTTPS
|
|
}),
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Got ${response.status} when trying to log in.`)
|
|
}
|
|
navigate("/");
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="w-[60vw] h-[50vh] flex flex-col absolute top-1/2 left-1/2 p-8 -translate-x-1/2 -translate-y-1/2 shadow-black/40 shadow-2xl rounded-2xl bg-[#171717] text-[#fafafa] transition ease-in-out duration-300">
|
|
<h1 className="text-2xl font-black text-center mb-4">Create Post</h1>
|
|
|
|
<form className="flex-1 flex flex-col gap-4" action={createPost}>
|
|
<div className="flex gap-2 items-center">
|
|
<label htmlFor="title" className="px-1 font-semibold">Post Title</label>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
className="bg-transparent border-[1px] border-white/40 rounded-xl p-2 focus:border-white outline-none flex-1 hover:border-white/60 transition ease-in-out duration-200"
|
|
onChange={(e) => setPostTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col gap-2">
|
|
<label htmlFor="content" className="px-1 font-semibold">Post Contents</label>
|
|
<textarea
|
|
id="content"
|
|
className="flex-1 bg-transparent border-[1px] border-white/40 rounded-xl p-3 focus:border-white outline-none resize-none hover:border-white/60 transition ease-in-out duration-200"
|
|
onChange={(e) => setPostContent(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2 items-center">
|
|
<label htmlFor="title" className="px-1 font-semibold">Parent Post ID (leave empty if none)</label>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
className="bg-transparent border-[1px] border-white/40 rounded-xl p-2 focus:border-white outline-none hover:border-white/60 transition ease-in-out duration-200"
|
|
value={parentId}
|
|
onChange={(e) => setParentId(e.target.value)}
|
|
/>
|
|
|
|
<button className="bg-white text-black font-bold rounded-xl p-2 ml-auto transition ease-in-out duration-300 hover:scale-125" role="submit">Create Post</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|