81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
import { redirect, unstable_createFileUploadHandler, unstable_parseMultipartFormData } from "@remix-run/node";
|
|
import { useLoaderData, Form } from "@remix-run/react";
|
|
import prisma from "~/utils/db.server";
|
|
|
|
export async function action({ request, params }) {
|
|
const threadId = params.threadId;
|
|
|
|
const clonedData = request.clone();
|
|
const formData = await clonedData.formData();
|
|
const post = formData.get("post");
|
|
|
|
const fileUploadHandler = unstable_createFileUploadHandler({
|
|
directory: './public/uploads/',
|
|
maxPartSize: 500000,
|
|
file: ({ filename }) => filename,
|
|
});
|
|
|
|
const multiPartformdata = await unstable_parseMultipartFormData(request, fileUploadHandler);
|
|
let imageName;
|
|
multiPartformdata.get("image") !== null ? imageName = multiPartformdata.get("image").name : imageName = null;
|
|
|
|
const createPost = await prisma.post.create({
|
|
data: {
|
|
comment: post,
|
|
imageName: imageName,
|
|
postId: parseInt(threadId),
|
|
},
|
|
});
|
|
|
|
return redirect(`/threads/${threadId}`);
|
|
};
|
|
|
|
export async function loader({ params }) {
|
|
const threadId = params.threadId;
|
|
const thread = await prisma.thread.findUnique({
|
|
where: {
|
|
id: Number(threadId),
|
|
},
|
|
include: {
|
|
posts: true,
|
|
},
|
|
});
|
|
|
|
return thread;
|
|
}
|
|
|
|
export default function Thread() {
|
|
const data = useLoaderData();
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<span><strong>{data.title}</strong> Post id: <strong>{data.id}</strong> Created at: <strong>{data.createdAt}</strong> Reply count: <strong>{data.posts.length}</strong></span>
|
|
<br />
|
|
<a href={`/${data.imageName}`} target="_blank"><img src={`/uploads/${data.imageName}`} alt="post image" width={240} /></a>
|
|
<p>{data.post}</p>
|
|
<hr />
|
|
<ul>
|
|
{data.posts.map(post =>
|
|
<li key={post.id}>
|
|
<span>Reply id: <strong>{post.id}</strong> Replied at: <strong>{post.createdAt}</strong></span>
|
|
<br />
|
|
{post.imageName !== 'null' ? <img width={240} src={`/uploads/${post.imageName}`} alt="post image" /> : ''}
|
|
<p>{post.comment}</p>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
<Form method="post" encType="multipart/form-data">
|
|
<label htmlFor="text-input">
|
|
Post: <input required minLength={3} name="post" type="text" />
|
|
</label>
|
|
<label htmlFor="image-upload">
|
|
Image: <input type="file" name="image" id="image-upload" />
|
|
</label>
|
|
<button type="submit">Submit</button>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
|