Merge pull request #70 from data-students/55-refresh-after-submit

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