55 refresh after submit

src/app/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import MiniCreatePost from "@/components/MiniCreatePost"
+import CreatePost from "@/components/CreatePost"
 import PostFeed from "@/components/PostFeed"
 import { INFINITE_SCROLL_PAGINATION_RESULTS } from "@/config"
 import { getAuthSession } from "@/lib/auth"
@@ -23,7 +23,11 @@ const page = async ({ params }: PageProps) => {
         include: {
           author: true,
           votes: true,
-          comments: true,
+          comments: {
+            include: {
+              _count: true,
+            },
+          },
           subject: true,
         },
         orderBy: {
@@ -44,7 +48,7 @@ const page = async ({ params }: PageProps) => {
         {subject.name}
       </h1>
 
-      <MiniCreatePost session={session} />
+      <CreatePost session={session} />
 
       <PostFeed initialPosts={subject.posts} subjectAcronym={subject.acronym} />
     </>

src/app/[slug]/q/page.tsx

@@ -1,7 +1,7 @@
 import { INFINITE_SCROLL_PAGINATION_RESULTS } from "@/config"
 import { getAuthSession } from "@/lib/auth"
 import { db } from "@/lib/db"
-import MiniCreateQuestion from "@/components/MiniCreateQuestion"
+import CreateQuestion from "@/components/CreateQuestion"
 import QuestionFeed from "@/components/QuestionFeed"
 import { notFound } from "next/navigation"
 
@@ -41,7 +41,7 @@ const page = async ({ params }: PageProps) => {
         {subject.name} - Preguntes
       </h1>
 
-      <MiniCreateQuestion session={session} subjectId={subject.id} />
+      <CreateQuestion session={session} subjectId={subject.id} />
 
       <QuestionFeed
         initialQuestions={subject.questions}

src/app/api/subject/answer/create/route.ts

@@ -23,7 +23,7 @@ export async function POST(req: Request) {
         authorId: session.user.id,
       },
     })
-    return new Response("Answer created", { status: 201 })
+    return new Response(JSON.stringify(questionId), { status: 201 })
   } catch (error) {
     if (error instanceof z.ZodError) {
       return new Response(error.message, { status: 422 })

src/components/MiniCreateQuestion.tsx → src/components/CreateAnswer.tsx

@@ -6,14 +6,12 @@ import { FC } from "react"
 import UserAvatar from "./UserAvatar"
 import Editor from "@/components/Editor"
 
-interface MiniCreateQuestionProps {
+interface CreateAnswer {
   session: Session | null
   subjectId: string
+  questionId: string
 }
-const MiniCreateQuestion: FC<MiniCreateQuestionProps> = ({
-  session,
-  subjectId,
-}) => {
+const CreateAnswer: FC<CreateAnswer> = ({ session, subjectId, questionId }) => {
   return (
     <div className="overflow-hidden rounded-md bg-white shadow">
       <div className="h-auto px-6 py-4 flex flex-col justify-between">
@@ -28,25 +26,16 @@ const MiniCreateQuestion: FC<MiniCreateQuestionProps> = ({
             <span className="absolute bottom-1 right-1 transform translate-x-1/2 translate-y-1/2 rounded-full w-3 h-3 bg-green-500 outline outline-2 outline-white" />
           </div>
           {/* form */}
-          <div className="flex-grow">
-            <div className="h-full">
-              <Editor subjectId={subjectId} contentType={"question"} />
-            </div>
-          </div>
-        </div>
-
-        <div className="flex justify-end">
-          <Button
-            type="submit"
-            className="w-full sm:w-auto mt-2"
-            form="subject-question-form"
-          >
-            Compartir
-          </Button>
+          <Editor
+            subjectId={subjectId}
+            contentType={"answer"}
+            questionId={questionId}
+            formId="question-answer-form"
+          />
         </div>
       </div>
     </div>
   )
 }
 
-export default MiniCreateQuestion
+export default CreateAnswer

src/components/MiniCreateComment.tsx → src/components/CreateComment.tsx

@@ -8,16 +8,16 @@ import axios from "axios"
 import { useMutation } from "@tanstack/react-query"
 import { toast } from "@/hooks/use-toast"
 
-interface MiniCreateComment {
+interface CreateComment {
   session: Session | null
   postId: string
 }
 
-const MiniCreateComment: FC<MiniCreateComment> = ({ session, postId }) => {
+const CreateComment: FC<CreateComment> = ({ session, postId }) => {
   const [content, setContent] = useState("")
 
   // Define the mutation function using useMutation hook
-  const { mutate: createComment } = useMutation({
+  const { mutate: createComment, isLoading } = useMutation({
     mutationFn: async () => {
       const { data } = await axios.post("/api/subject/comment/create", {
         content: content,
@@ -26,14 +26,18 @@ const MiniCreateComment: FC<MiniCreateComment> = ({ session, postId }) => {
       return data
     },
     onSuccess: ({}) => {
-      // Handle success and show toast
       toast({
         description: `Comment created successfully`,
       })
-      // You can add any additional handling specific to your needs here
+      setContent("")
+      window.location.reload()
     },
     onError: ({}) => {
-      // Handle error if needed
+      toast({
+        title: "Something went wrong",
+        description: `The comment could not be created. Please try again later.`,
+        variant: "destructive",
+      })
     },
   })
 
@@ -72,8 +76,8 @@ const MiniCreateComment: FC<MiniCreateComment> = ({ session, postId }) => {
           <Button
             type="submit"
             className="w-full sm:w-auto mt-2"
-            form="subject-question-form"
             onClick={handleSubmit}
+            isLoading={isLoading}
           >
             Compartir
           </Button>
@@ -83,4 +87,4 @@ const MiniCreateComment: FC<MiniCreateComment> = ({ session, postId }) => {
   )
 }
 
-export default MiniCreateComment
+export default CreateComment

src/components/MiniCreatePost.tsx → src/components/CreatePost.tsx

@@ -7,11 +7,11 @@ import UserAvatar from "./UserAvatar"
 import Link from "next/link"
 import { buttonVariants } from "@/components/ui/Button"
 
-interface MiniCreatePostProps {
+interface CreatePostProps {
   session: Session | null
 }
 
-const MiniCreatePost: FC<MiniCreatePostProps> = ({ session }) => {
+const CreatePost: FC<CreatePostProps> = ({ session }) => {
   const router = useRouter()
   const pathname = usePathname()
 
@@ -51,4 +51,4 @@ const MiniCreatePost: FC<MiniCreatePostProps> = ({ session }) => {
   )
 }
 
-export default MiniCreatePost
+export default CreatePost

src/components/MiniCreateAnswer.tsx → src/components/CreateQuestion.tsx

@@ -1,21 +1,15 @@
 "use client"
 
 import { Session } from "next-auth"
-import { Button } from "@/components/ui/Button"
 import { FC } from "react"
 import UserAvatar from "./UserAvatar"
 import Editor from "@/components/Editor"
 
-interface MiniCreateAnswer {
+interface CreateQuestionProps {
   session: Session | null
   subjectId: string
-  questionId: string
 }
-const MiniCreateAnswer: FC<MiniCreateAnswer> = ({
-  session,
-  subjectId,
-  questionId,
-}) => {
+const CreateQuestion: FC<CreateQuestionProps> = ({ session, subjectId }) => {
   return (
     <div className="overflow-hidden rounded-md bg-white shadow">
       <div className="h-auto px-6 py-4 flex flex-col justify-between">
@@ -30,29 +24,15 @@ const MiniCreateAnswer: FC<MiniCreateAnswer> = ({
             <span className="absolute bottom-1 right-1 transform translate-x-1/2 translate-y-1/2 rounded-full w-3 h-3 bg-green-500 outline outline-2 outline-white" />
           </div>
           {/* form */}
-          <div className="flex-grow">
-            <div className="h-full">
-              <Editor
-                subjectId={subjectId}
-                contentType={"answer"}
-                questionId={questionId}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="flex justify-end">
-          <Button
-            type="submit"
-            className="w-full sm:w-auto mt-2"
-            form="subject-question-form"
-          >
-            Compartir
-          </Button>
+          <Editor
+            subjectId={subjectId}
+            contentType={"question"}
+            formId="subject-question-form"
+          />
         </div>
       </div>
     </div>
   )
 }
 
-export default MiniCreateAnswer
+export default CreateQuestion