Xory/anum-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change: everything

Browse source
This commit is contained in:
Xory 2026-02-07 16:12:58 +02:00
parent 1e09c02cb9
commit a49c5d8bcc
15 changed files with 1107 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

108
app/routes/create.tsx
View file

@ -1,92 +1,90 @@
import { useState } from "react";
import { useNavigate } from "react-router";
import { Form, useActionData, useNavigate } from "react-router";
import { useLocation } from "react-router";
import { redirect, type ActionFunctionArgs } from "react-router";
// server-side action so we don't have to use clearnet for front-backend comms
// praise cloudflare
export async function action({ request, context }: ActionFunctionArgs) {
const formData = await request.formData();
const env = context.cloudflare.env as { API: Fetcher };
const postTitle = formData.get("title") as string;
const postContent = formData.get("content") as string;
const parentId = formData.get("parentId") as string;
// internal url uses ternary operator
const path = parentId
? `/posts/${parentId}/reply`
: "/posts/add";
const response = await env.API.fetch(new Request(`http://internal${path}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
// forward cookies or auth won't work
"Cookie": request.headers.get("Cookie") || "",
},
body: JSON.stringify({
title: postTitle,
content: postContent,
}),
}));
if (!response.ok) {
const error = await response.text();
return { error: `Failed to create post: ${response.status} - ${error}` };
}
return redirect("/");
}
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>
<div className="w-[92vw] md:w-[60vw] min-h-[60vh] md:min-h-0 md:h-[50vh] flex flex-col absolute top-1/2 left-1/2 p-4 md: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-xl md: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">
<Form className="flex-1 flex flex-col gap-4" method="post">
<div className="flex flex-col md:flex-row gap-2 md:items-center">
<label htmlFor="title" className="px-1 font-semibold">Post Title</label>
<input
type="text"
id="title"
name="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)}
required
/>
</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)}
name="content"
className="flex-1 min-h-[120px] md:min-h-0 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"
required
/>
</div>
<div className="flex gap-2 items-center">
<label htmlFor="title" className="px-1 font-semibold">Parent Post ID (leave empty if none)</label>
<div className="flex flex-col md:flex-row gap-2 md:items-center">
<label htmlFor="parentId" className="px-1 font-semibold">Parent Post ID (leave empty if none)</label>
<input
type="text"
id="title"
name="parentId"
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>
<button className="bg-white text-black font-bold rounded-xl p-2 md:ml-auto w-full md:w-auto transition ease-in-out duration-300 hover:scale-125" type="submit">Create Post</button>
</div>
</form>
</Form>
</div>
);
}