diff --git a/packages/nextjs/app/admin/_components/SubmissionCard.tsx b/packages/nextjs/app/admin/_components/SubmissionCard.tsx new file mode 100644 index 0000000..ff6da46 --- /dev/null +++ b/packages/nextjs/app/admin/_components/SubmissionCard.tsx @@ -0,0 +1,100 @@ +"use client"; + +import { useState } from "react"; +import { useRouter } from "next/navigation"; +import { useMutation } from "@tanstack/react-query"; +import { Address } from "~~/components/scaffold-eth"; +import { Submission } from "~~/services/database/repositories/submissions"; +import { postMutationFetcher } from "~~/utils/react-query"; +import { notification } from "~~/utils/scaffold-eth"; + +function getFormattedDateTime(date: Date) { + const month = String(date.getMonth() + 1).padStart(2, "0"); + const day = String(date.getDate()).padStart(2, "0"); + const year = date.getFullYear(); + const hours = date.getHours(); + const minutes = String(date.getMinutes()).padStart(2, "0"); + + return `${month}/${day}/${year} ${hours}:${minutes}`; +} + +export const SubmissionCard = ({ submission }: { submission: Submission }) => { + const [newComment, setNewComment] = useState(""); + const { mutateAsync: postNewComment } = useMutation({ + mutationFn: (newComment: { comment: string }) => + postMutationFetcher(`/api/submissions/${submission.id}/comments`, { body: newComment }), + }); + const { refresh } = useRouter(); + + const clientFormAction = async (formData: FormData) => { + try { + const comment = formData.get("comment") as string; + if (!comment) { + notification.error("Please fill the comment"); + return; + } + + if (comment.length > 255) { + notification.error("Comment is too long"); + return; + } + + await postNewComment({ comment }); + + notification.success("Comment submitted successfully!"); + setNewComment(""); + refresh(); + } catch (error: any) { + if (error instanceof Error) { + notification.error(error.message); + return; + } + notification.error("Something went wrong"); + } + }; + + return ( +
+
+

{submission.title}

+ {submission.linkToRepository && ( + + {submission.linkToRepository} + + )} +

{submission.description}

+ {submission.builder &&
} +
+ +
{submission.comments.length} comments
+
+ {submission.comments?.map(comment => ( +
+
+
+

{comment.comment}

+

{comment.createdAt ? getFormattedDateTime(new Date(comment.createdAt)) : "-"}

+
+
+ ))} +
+
+
+