feat: Quiz edit

quizeek/src/app/(app)/auth/quiz/[quizId]/edit/page.tsx

@@ -1,5 +1,16 @@
-const Page = async () => {
-  return <p>Quiz edit</p>;
+import QuizForm from '@/components/quiz/quiz-form/quiz-form';
+import { getEditableQuiz } from '@/db/queries';
+
+type PageParams = {
+  params: Promise<{
+    quizId: string;
+  }>;
+};
+
+const Page = async ({ params }: PageParams) => {
+  const editableQuiz = await getEditableQuiz((await params).quizId);
+
+  return <QuizForm editableQuiz={editableQuiz} />;
 };
 
 export default Page;

quizeek/src/components/quiz/detail/quiz-activate-dialog.tsx

@@ -34,7 +34,7 @@ export const QuizActivateDialog = ({ quiz }: QuizActivateDialogProps) => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button>Activate</Button>
+        <Button className="w-20">Activate</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

quizeek/src/components/quiz/detail/quiz-detail-actions.tsx

@@ -4,10 +4,10 @@ import ActionButton from '@/components/action-button';
 import { SignInButton } from '@/components/sign-in-button';
 import { Button } from '@/components/ui/button';
 import { QuizWithUser } from '@/db/schema/quiz';
-import { useCreateQuizAttemptMutation } from '@/hooks';
+import { useCreateQuizAttemptMutation, useDeleteQuizMutation } from '@/hooks';
 import { User } from 'next-auth';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import { redirect, useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 
 import { QuizActivateDialog } from './quiz-activate-dialog';
@@ -24,6 +24,8 @@ export const QuizDetailActions = ({ user, quiz }: QuizDetailActionsProps) => {
 
   const createQuizAttempt = useCreateQuizAttemptMutation();
 
+  const deleteQuizMutation = useDeleteQuizMutation();
+
   const takeQuiz = async () => {
     await createQuizAttempt.mutateAsync(quiz.id, {
       onSuccess: async (attemptId: string) => {
@@ -35,6 +37,18 @@ export const QuizDetailActions = ({ user, quiz }: QuizDetailActionsProps) => {
     });
   };
 
+  const deleteQuiz = async () => {
+    await deleteQuizMutation.mutateAsync(quiz.id, {
+      onSuccess: async () => {
+        toast.success('Successfully deleted quiz');
+        redirect('/auth/profile');
+      },
+      onError: (e) => {
+        toast.error(e.message);
+      },
+    });
+  };
+
   return (
     <>
       {!user && (
@@ -44,9 +58,17 @@ export const QuizDetailActions = ({ user, quiz }: QuizDetailActionsProps) => {
       {!quiz.isActive && isOwner && (
         <div className="self-end ml-auto flex flex-col md:flex-row gap-2">
           <Link href={`/auth/quiz/${quiz.id}/edit`}>
-            <Button>Edit</Button>
+            <Button className="w-20">Edit</Button>
           </Link>
           <QuizActivateDialog quiz={quiz} />
+          <ActionButton
+            className="w-20"
+            variant="destructive"
+            onClick={deleteQuiz}
+            isLoading={deleteQuizMutation.isPending}
+          >
+            Delete
+          </ActionButton>
         </div>
       )}
 

quizeek/src/components/quiz/detail/quiz-detail-my-attempts.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent, CardTitle } from '@/components/ui/card';
-import { getMyQuizAttempts } from '@/db/queries/quiz-attempt';
+import { getMyQuizAttempts } from '@/db/queries';
 import { QuizWithUser } from '@/db/schema/quiz';
 import { toLocalDateTimeString } from '@/utils/date';
 import { SquareArrowRight } from 'lucide-react';

quizeek/src/components/quiz/detail/quiz-detail-other-attempts.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent, CardTitle } from '@/components/ui/card';
-import { getOtherQuizAttempts } from '@/db/queries/quiz-attempt';
+import { getOtherQuizAttempts } from '@/db/queries';
 import { QuizWithUser } from '@/db/schema/quiz';
 import { toLocalDateTimeString } from '@/utils/date';
 import { CircleUserRound } from 'lucide-react';

quizeek/src/components/quiz/quiz-form/quiz-form.tsx

@@ -8,8 +8,13 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion';
 import { Form } from '@/components/ui/form';
-import { QuizForm as QuizFormData, quizFormSchema } from '@/db/schema/quiz';
+import {
+  EditableQuiz,
+  QuizForm as QuizFormData,
+  quizFormSchema,
+} from '@/db/schema/quiz';
 import { useSubmitQuizFormMutation } from '@/hooks/quiz';
+import { toQuizDuration } from '@/utils';
 import { useUploadThing } from '@/utils/uploadthing';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { redirect } from 'next/navigation';
@@ -20,15 +25,33 @@ import { toast } from 'sonner';
 import QuizInfoFormPart from './quiz-info-form-part';
 import QuizQuestionsFormPart from './quiz-questions-form-part';
 
-const QuizForm = () => {
+type QuizFormProps = {
+  editableQuiz?: EditableQuiz;
+};
+
+const QuizForm = ({ editableQuiz }: QuizFormProps) => {
   const [files, setFiles] = useState<File[]>([]);
 
   const form = useForm<QuizFormData>({
     resolver: zodResolver(quizFormSchema),
     defaultValues: {
-      title: '',
-      isActive: false,
-      questions: [],
+      title: editableQuiz?.title ?? '',
+      description: editableQuiz?.description ?? '',
+      duration: toQuizDuration(editableQuiz?.timeLimitSeconds),
+      isActive: editableQuiz?.isActive ?? false,
+      imageUrl: editableQuiz?.imageUrl ?? undefined,
+      questions:
+        editableQuiz?.questions.map((q) => ({
+          id: q.id,
+          text: q.text ?? '',
+          number: q.number,
+          choices: q.choices.map((c) => ({
+            id: c.id,
+            text: c.text,
+            points: c.points,
+            isCorrect: c.isCorrect,
+          })),
+        })) ?? [],
     },
   });
 
@@ -42,7 +65,7 @@ const QuizForm = () => {
 
   const onSubmit = async (data: QuizFormData) => {
     await submitQuizFormMutation.mutateAsync(
-      { data, file: files[0], startUpload },
+      { id: editableQuiz?.id, data, file: files[0], startUpload },
       {
         onSuccess: async (quizId) => {
           toast.success('Successfully submitted form');

quizeek/src/components/quiz/quiz-form/quiz-questions-form-part.tsx

@@ -81,7 +81,7 @@ const QuizQuestionsFormPart = () => {
     key: string,
     value: T
   ) => {
-    setQuestions(
+    setQuestions((questions) =>
       questions.map((q) =>
         q.id === questionId
           ? {
@@ -227,14 +227,20 @@ const QuizQuestionsFormPart = () => {
                               decimalScale={0}
                               placeholder="Points"
                               value={choice.points}
-                              onChange={(e) =>
+                              onChange={(e) => {
                                 updateChoice(
                                   question.id,
                                   choice.id,
                                   'points',
                                   parseInt(e.currentTarget.value)
-                                )
-                              }
+                                );
+                                updateChoice(
+                                  question.id,
+                                  choice.id,
+                                  'isCorrect',
+                                  parseInt(e.currentTarget.value) > 0
+                                );
+                              }}
                             />
                             <span className="text-destructive md:absolute md:-bottom-5">
                               {
@@ -249,7 +255,7 @@ const QuizQuestionsFormPart = () => {
                               <Switch
                                 id={`${question.id}-choice-${choice.id}-isCorrect`}
                                 name={`${question.id}-choice-${choice.id}-isCorrect`}
-                                value={choice.text}
+                                checked={choice.isCorrect}
                                 onCheckedChange={(v) =>
                                   updateChoice(
                                     question.id,

quizeek/src/db/queries/index.ts

@@ -1,6 +1,6 @@
 // export * from './answer';
 // export * from './choice';
 // export * from './question';
-// export * from './quiz-attempt';
 // export * from './user';
 export * from './quiz';
+export * from './quiz-attempt';

quizeek/src/db/queries/quiz-attempt.ts

@@ -1,4 +1,5 @@
 import { auth } from '@/auth';
+import { handleError } from '@/utils';
 import { and, eq, getTableColumns, lt, ne, sql } from 'drizzle-orm';
 
 import { db } from '..';
@@ -35,8 +36,8 @@ export const getMyQuizAttempts = async (
       .orderBy(sql`${quizAttempts.timestamp} desc`);
 
     return myQuizAttempts;
-  } catch {
-    throw new Error('Failed to load quiz attempts.');
+  } catch (error) {
+    throw handleError(error);
   }
 };
 
@@ -67,7 +68,7 @@ export const getOtherQuizAttempts = async (
       .orderBy(sql`${quizAttempts.timestamp} desc`);
 
     return otherQuizAttempts;
-  } catch {
-    throw new Error('Failed to load quiz attempts.');
+  } catch (error) {
+    throw handleError(error);
   }
 };

quizeek/src/db/queries/quiz.ts

@@ -1,10 +1,12 @@
 'use server';
 
 import { auth } from '@/auth';
+import { InvalidSessionError } from '@/models';
+import { handleError } from '@/utils';
 import { and, eq, getTableColumns, like, or } from 'drizzle-orm';
 
 import { db } from '..';
-import { quizes, QuizWithUser } from '../schema/quiz';
+import { EditableQuiz, quizes, QuizWithUser } from '../schema/quiz';
 import { quizAttempts } from '../schema/quiz-attempt';
 import { users } from '../schema/user';
 
@@ -24,8 +26,8 @@ export const getActiveQuizes = async (
     });
 
     return dbQuizes;
-  } catch {
-    throw new Error('Failed to load quizes.');
+  } catch (error) {
+    throw handleError(error);
   }
 };
 
@@ -39,8 +41,8 @@ export const getQuizById = async (
     });
 
     return quiz;
-  } catch {
-    throw new Error('Failed to load quiz.');
+  } catch (error) {
+    throw handleError(error);
   }
 };
 
@@ -64,8 +66,8 @@ export const getMyQuizes = async (
     });
 
     return dbQuizes;
-  } catch {
-    throw new Error('Failed to load quizes.');
+  } catch (error) {
+    throw handleError(error);
   }
 };
 
@@ -97,7 +99,35 @@ export const getTakenQuizes = async (
       );
 
     return dbQuizes;
-  } catch {
-    throw new Error('Failed to load quizes.');
+  } catch (error) {
+    throw handleError(error);
+  }
+};
+
+export const getEditableQuiz = async (id: string): Promise<EditableQuiz> => {
+  try {
+    const session = await auth();
+
+    const dbQuiz = await db.query.quizes.findFirst({
+      where: and(
+        eq(quizes.id, id),
+        eq(quizes.createdBy, session?.user.id ?? '')
+      ),
+      with: {
+        questions: {
+          with: {
+            choices: true,
+          },
+        },
+      },
+    });
+
+    if (!dbQuiz) {
+      throw new InvalidSessionError('User is not creator of the quiz');
+    }
+
+    return dbQuiz;
+  } catch (error) {
+    throw handleError(error);
   }
 };

quizeek/src/db/schema/quiz.ts

@@ -3,7 +3,7 @@ import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
 import { v7 as uuid } from 'uuid';
 import { z } from 'zod';
 
-import { questions } from './question';
+import { questions, QuestionWithChoices } from './question';
 import { quizAttempts } from './quiz-attempt';
 import { User, users } from './user';
 
@@ -30,6 +30,8 @@ export type Quiz = InferSelectModel<typeof quizes>;
 
 export type QuizWithUser = Quiz & { creator: User };
 
+export type EditableQuiz = Quiz & { questions: QuestionWithChoices[] };
+
 export const quizFormSchema = z.object({
   title: z
     .string({ required_error: 'Title can not be empty' })

quizeek/src/hooks/quiz.ts

@@ -1,10 +1,12 @@
 import { SubmitQuizFormMutationType } from '@/models';
 import { activateQuizAction, submitQuizFormAction } from '@/server-actions';
+import { deleteQuizAction } from '@/server-actions/quiz/delete-quiz-action';
 import { useMutation } from '@tanstack/react-query';
 
 export const useSubmitQuizFormMutation = () =>
   useMutation({
     mutationFn: async ({
+      id,
       data,
       file,
       startUpload,
@@ -18,11 +20,16 @@ export const useSubmitQuizFormMutation = () =>
         }
       }
 
-      return await submitQuizFormAction(data);
+      return await submitQuizFormAction(data, id);
     },
   });
 
 export const useActivateQuizMutation = () =>
   useMutation({
     mutationFn: activateQuizAction,
   });
+
+export const useDeleteQuizMutation = () =>
+  useMutation({
+    mutationFn: deleteQuizAction,
+  });

quizeek/src/models/quiz.ts

@@ -2,6 +2,7 @@ import { QuizForm } from '@/db/schema/quiz';
 import { ClientUploadedFileData } from 'uploadthing/types';
 
 export type SubmitQuizFormMutationType = {
+  id?: string;
   data: QuizForm;
   file: File;
   startUpload: (

quizeek/src/server-actions/quiz-attempt/create-quiz-attempt-action.ts

@@ -3,7 +3,7 @@
 import { auth } from '@/auth';
 import { db } from '@/db';
 import { quizAttempts } from '@/db/schema/quiz-attempt';
-import { handleServerActionError } from '@/utils';
+import { handleError } from '@/utils';
 
 export const createQuizAttemptAction = async (
   quizId: string
@@ -18,6 +18,6 @@ export const createQuizAttemptAction = async (
 
     return createdQuiz[0].id;
   } catch (error) {
-    return handleServerActionError(error);
+    throw handleError(error);
   }
 };