feat(frontend): image creation and quiz creation connected to backend

bounswe · Dec 15, 2024 · 15d928e · 15d928e
1 parent 1a7ba62
commit 15d928e
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 20 deletions.
diff --git a/frontend/src/components/common/utils.tsx b/frontend/src/components/common/utils.tsx
@@ -86,6 +86,7 @@ export const convertQuizResponseToQuiz = (quizResponse: QuizResponse): Quiz => {
       tags: quizResponse.tags,
       timestamp: formatTimeAgo(quizResponse.created_at),
       created_at: quizResponse.created_at,
+      picture: quizResponse.title_image,
       level: quizResponse.level,
       times_taken: quizResponse.times_taken,
     },

diff --git a/frontend/src/components/quiz/create-quiz-metadata.tsx b/frontend/src/components/quiz/create-quiz-metadata.tsx
@@ -46,6 +46,7 @@ export default function CreateQuizMetadata({
       description,
       level,
       tags: tagNames,
+      title_image: file,
     });
   }, [title, description, level, tags]);
 

diff --git a/frontend/src/components/quiz/quiz-card.tsx b/frontend/src/components/quiz/quiz-card.tsx
@@ -147,7 +147,7 @@ export default function QuizCard({
         </div>
         <Divider className="mt-1.5 bg-zinc-200" />
       </CardHeader>
-      <div className="flex flex-row justify-between items-center mb-5">
+      <div className="flex flex-row justify-between items-center mb-4 ml-4 mr-4">
         {picture ? (
           <img
             src={picture}
@@ -157,6 +157,7 @@ export default function QuizCard({
               height: "200px",
               objectFit: "cover",
               objectPosition: "center",
+              borderRadius: "10px",
             }}
             onClick={() => navigate(`/quiz/${id}/details`)}
           />

diff --git a/frontend/src/pages/quiz-creation.tsx b/frontend/src/pages/quiz-creation.tsx
@@ -30,23 +30,41 @@ export default function QuizCreation() {
   const handleSubmit = () => {
     setIsLoading(true);
     const token = getToken("access");
-    const formData: QuizCreationModel = {
-      quiz: quizHeader,
-      questions: quizQuestions,
-    };
+    const formData = new FormData();
+
+    // Add quiz details
+    formData.append("title", quizHeader.title);
+    formData.append("description", quizHeader.description);
+    formData.append("level", quizHeader.level);
+    formData.append("tags", JSON.stringify(quizHeader.tags));
+
+    // Add title image if exists
+    if (quizHeader.title_image) {
+      formData.append("title_image", quizHeader.title_image);
+    }
+
+    formData.append(
+      `questions`,
+      JSON.stringify(
+        quizQuestions,
+      )
+    );
+    console.log("Form data:", formData);
+
     axios
       .post(`${BASE_URL}/quiz/create/`, formData, {
         headers: {
           Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json",
+          "Content-Type": "multipart/form-data",
         },
       })
       .then((response) => {
         console.log(response);
         navigate("/quizzes");
       })
       .catch((error) => {
-        console.log(error);
+        console.error(error);
+        setIsLoading(false);
       });
   };