refactor: quiz logic and add question edit dialog (#209)

* feat: refactor quiz question management with new form components and editing capabilities

* feat: refactor quiz logic for improved session management and question navigation

* feat: enhance quiz validation and error handling with new utility functions

* refactor: update zod import syntax for consistency

* refactor: consolidate quiz utility functions and improve guest mode handling

* fix: edge case when deleting question would cause question card to disappear

* refactor: improve layout structure in question form container

* chore: apply review suggestions

Author: Antoni-Czaplicki

package-lock.json

@@ -35,6 +35,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-focus-scope": "^1.1.8",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.14",

package.json

@@ -1,6 +1,7 @@
 "use client";
 
 import { Icon } from "@iconify/react";
+import { FileQuestionMarkIcon } from "lucide-react";
 import Link from "next/link";
 import { ViewTransition, startTransition, useContext, useEffect } from "react";
 import ReactPlayer from "react-player";
@@ -19,6 +20,13 @@ import { QuizHistoryDialog } from "@/components/quiz/quiz-history-dialog";
 import { QuizInfoCard } from "@/components/quiz/quiz-info-card";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Card, CardContent } from "@/components/ui/card";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
 import { cn } from "@/lib/utils";
 
 interface QuizPageClientProps {
@@ -47,8 +55,8 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
     masteredCount,
     totalQuestions,
     timerStore,
-    answers,
   } = stats;
+  const answers = quiz.current_session?.answers ?? [];
   const { isHost: isContinuityHost, peerConnections } = continuity;
   const {
     nextAction,
@@ -57,7 +65,7 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
     setSelectedAnswers,
     toggleHistory,
     toggleBrainrot,
-    goToPreviousQuestion,
+    togglePreviousQuestion,
   } = actions;
 
   const {
@@ -124,29 +132,47 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
         >
           <div className="min-w-0 lg:col-span-2">
             <ViewTransition name={`quiz-open-${quiz.id}`} update="h-full">
-              <QuestionCard
-                quizId={quiz.id}
-                question={currentQuestion}
-                selectedAnswers={selectedAnswers}
-                setSelectedAnswers={(newSelected) => {
-                  // If question is not multiple, unselect everything except the new
-                  if (currentQuestion !== null && !currentQuestion.multiple) {
-                    setSelectedAnswers(
-                      newSelected.length > 0 ? [newSelected[0]] : [],
-                    );
-                  } else {
-                    setSelectedAnswers(newSelected);
-                  }
-                }}
-                answers={answers}
-                questionChecked={questionChecked}
-                nextAction={nextAction}
-                isQuizFinished={isQuizFinished}
-                restartQuiz={resetProgress}
-                goToPreviousQuestion={goToPreviousQuestion}
-                isHistoryQuestion={isHistoryQuestion}
-                canGoBack={canGoBack}
-              />
+              {quiz.questions.length === 0 ? (
+                <Card>
+                  <CardContent>
+                    <Empty>
+                      <EmptyHeader>
+                        <EmptyMedia variant="icon">
+                          <FileQuestionMarkIcon />
+                        </EmptyMedia>
+                        <EmptyTitle>Brak pytań</EmptyTitle>
+                        <EmptyDescription>
+                          W tym quizie nie ma jeszcze żadnych pytań.
+                        </EmptyDescription>
+                      </EmptyHeader>
+                    </Empty>
+                  </CardContent>
+                </Card>
+              ) : (
+                <QuestionCard
+                  quizId={quiz.id}
+                  question={currentQuestion}
+                  selectedAnswers={selectedAnswers}
+                  setSelectedAnswers={(newSelected) => {
+                    // If question is not multiple, unselect everything except the new
+                    if (currentQuestion !== null && !currentQuestion.multiple) {
+                      setSelectedAnswers(
+                        newSelected.length > 0 ? [newSelected[0]] : [],
+                      );
+                    } else {
+                      setSelectedAnswers(newSelected);
+                    }
+                  }}
+                  answers={answers}
+                  questionChecked={questionChecked}
+                  nextAction={nextAction}
+                  isQuizFinished={isQuizFinished}
+                  restartQuiz={resetProgress}
+                  togglePreviousQuestion={togglePreviousQuestion}
+                  isHistoryQuestion={isHistoryQuestion}
+                  canGoBack={canGoBack}
+                />
+              )}
             </ViewTransition>
           </div>
           <ViewTransition name="quiz-info" update="h-full">

src/app/quiz/[quizId]/client.tsx

@@ -4,6 +4,7 @@ import { cookies } from "next/headers";
 import { Suspense } from "react";
 
 import { Loader } from "@/components/loader";
+import { quizDetailQueryKey } from "@/components/quiz/helpers/utils";
 import { Card, CardContent } from "@/components/ui/card";
 import { API_URL } from "@/lib/api";
 import { AUTH_COOKIES } from "@/lib/auth/constants";
@@ -27,14 +28,10 @@ export default async function QuizPage({
 
   const services = new ServiceRegistry(API_URL, {}, accessToken);
 
-  const include = ["user_settings", "current_session"];
-
   await queryClient.prefetchQuery({
-    queryKey: ["quiz", quizId, "details", { include }],
+    queryKey: quizDetailQueryKey(quizId),
     queryFn: async () => {
-      return await services.quiz.getQuiz(quizId, {
-        include,
-      });
+      return await services.quiz.getQuizWithProgress(quizId);
     },
   });
 

src/app/quiz/[quizId]/page.tsx

@@ -3,5 +3,7 @@ export type { ImageButtonProps, ImagePreviewProps } from "./image";
 
 export { ExplanationDialog, ExplanationButton } from "./explanation-dialog";
 
-export { QuestionForm } from "./question-form";
+export { QuestionFormContainer } from "./question-form-container";
+export { QuestionFormHeader } from "./question-form-header";
+export { QuestionFormContent } from "./question-form-content";
 export { AnswerForm } from "./answer-form";