Get category dynamically

Author: guanquann

frontend/src/components/QuestionImageContainer/index.tsx

@@ -5,7 +5,7 @@ import { Button, ImageList, ImageListItem } from "@mui/material";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
 import { toast } from "react-toastify";
 
-import { questionClient } from "../../utils/api";
+import { createImageUrls } from "../../reducers/questionReducer";
 import QuestionImage from "../QuestionImage";
 import QuestionImageDialog from "../QuestionImageDialog";
 
@@ -64,23 +64,16 @@ const QuestionImageContainer: React.FC<QuestionImageContainerProps> = ({
       return;
     }
 
-    try {
-      const response = await questionClient.post("/images", formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-        withCredentials: false,
-      });
-
-      const data = response.data;
-      for (const imageUrl of data.imageUrls) {
-        setUploadedImagesUrl((prev) => [...prev, imageUrl]);
+    createImageUrls(formData).then((res) => {
+      if (res) {
+        for (const imageUrl of res.imageUrls) {
+          setUploadedImagesUrl((prev) => [...prev, imageUrl]);
+        }
+        toast.success("File uploaded successfully");
+      } else {
+        toast.error("Error uploading file");
       }
-
-      toast.success("File uploaded successfully");
-    } catch {
-      toast.error("Error uploading file");
-    }
+    });
   };
 
   if (uploadedImagesUrl.length === 0) {

frontend/src/pages/NewQuestion/index.tsx

@@ -1,12 +1,20 @@
-import { useState } from "react";
+import { useState, useReducer } from "react";
 import { useNavigate } from "react-router-dom";
-import { Autocomplete, Button, IconButton, Stack, TextField } from "@mui/material";
+import {
+  Autocomplete,
+  Button,
+  IconButton,
+  Stack,
+  TextField,
+} from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import axios from "axios";
+import reducer, {
+  createQuestion,
+  initialState,
+} from "../../reducers/questionReducer";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
-import { questionClient } from "../../utils/api";
 import { complexityList } from "../../utils/constants";
 import AppMargin from "../../components/AppMargin";
 import QuestionMarkdown from "../../components/QuestionMarkdown";
@@ -17,52 +25,60 @@ import QuestionDetail from "../../components/QuestionDetail";
 const NewQuestion = () => {
   const navigate = useNavigate();
 
+  const [state, dispatch] = useReducer(reducer, initialState);
+
   const [title, setTitle] = useState<string>("");
   const [markdownText, setMarkdownText] = useState<string>("");
-  const [selectedComplexity, setselectedComplexity] = useState<string | null>(null);
+  const [selectedComplexity, setselectedComplexity] = useState<string | null>(
+    null
+  );
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [uploadedImagesUrl, setUploadedImagesUrl] = useState<string[]>([]);
   const [isPreviewQuestion, setIsPreviewQuestion] = useState<boolean>(false);
 
   const handleBack = () => {
-    if (title || markdownText || selectedComplexity || selectedCategories.length > 0) {
-      if (!confirm("Are you sure you want to leave this page? All process will be lost.")) {
+    if (
+      title ||
+      markdownText ||
+      selectedComplexity ||
+      selectedCategories.length > 0
+    ) {
+      if (
+        !confirm(
+          "Are you sure you want to leave this page? All process will be lost."
+        )
+      ) {
         return;
       }
     }
     navigate("/questions");
   };
 
   const handleSubmit = async () => {
-    if (!title || !markdownText || !selectedComplexity || selectedCategories.length === 0) {
+    if (
+      !title ||
+      !markdownText ||
+      !selectedComplexity ||
+      selectedCategories.length === 0
+    ) {
       toast.error("Please fill in all fields");
       return;
     }
 
-    try {
-      await questionClient.post(
-        "/",
-        {
-          title,
-          description: markdownText,
-          complexity: selectedComplexity,
-          category: selectedCategories,
-        },
-        {
-          withCredentials: false,
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }
-      );
+    const result = await createQuestion(
+      {
+        title,
+        description: markdownText,
+        complexity: selectedComplexity,
+        categories: selectedCategories,
+      },
+      dispatch
+    );
+
+    if (result) {
       navigate("/questions");
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        const message = error.response?.data.message || "Failed to create question";
-        toast.error(message);
-      } else {
-        toast.error("Failed to create question");
-      }
+    } else {
+      toast.error(state.selectedQuestionError || "Failed to create question");
     }
   };
 
@@ -99,7 +115,9 @@ const NewQuestion = () => {
             onChange={(e, newcomplexitySelected) => {
               setselectedComplexity(newcomplexitySelected);
             }}
-            renderInput={(params) => <TextField {...params} label="Complexity" />}
+            renderInput={(params) => (
+              <TextField {...params} label="Complexity" />
+            )}
           />
 
           <QuestionCategoryAutoComplete
@@ -112,7 +130,10 @@ const NewQuestion = () => {
             setUploadedImagesUrl={setUploadedImagesUrl}
           />
 
-          <QuestionMarkdown markdownText={markdownText} setMarkdownText={setMarkdownText} />
+          <QuestionMarkdown
+            markdownText={markdownText}
+            setMarkdownText={setMarkdownText}
+          />
         </>
       )}
 
@@ -125,7 +146,10 @@ const NewQuestion = () => {
           color="secondary"
           fullWidth
           disabled={
-            !title && !markdownText && !selectedComplexity && selectedCategories.length === 0
+            !title &&
+            !markdownText &&
+            !selectedComplexity &&
+            selectedCategories.length === 0
           }
           onClick={() => setIsPreviewQuestion((prev) => !prev)}
         >

frontend/src/pages/QuestionEdit/index.tsx

@@ -8,14 +8,13 @@ import {
   TextField,
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import axios from "axios";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
-import { questionClient } from "../../utils/api";
 import { complexityList } from "../../utils/constants";
 import reducer, {
   getQuestionById,
+  updateQuestionById,
   initialState,
 } from "../../reducers/questionReducer";
 import AppMargin from "../../components/AppMargin";
@@ -82,32 +81,31 @@ const QuestionEdit = () => {
       return;
     }
 
-    try {
-      await questionClient.put(
-        `/${state.selectedQuestion.id}`,
-        {
-          title,
-          description: markdownText,
-          complexity: selectedComplexity,
-          category: selectedCategories,
-        },
-        {
-          withCredentials: false,
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }
-      );
+    if (
+      !title ||
+      !markdownText ||
+      !selectedComplexity ||
+      selectedCategories.length === 0
+    ) {
+      toast.error("Please fill in all fields");
+      return;
+    }
 
+    const result = await updateQuestionById(
+      state.selectedQuestion.id,
+      {
+        title,
+        description: markdownText,
+        complexity: selectedComplexity,
+        categories: selectedCategories,
+      },
+      dispatch
+    );
+
+    if (result) {
       navigate("/questions");
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        const message =
-          error.response?.data.message || "Failed to update question";
-        toast.error(message);
-      } else {
-        toast.error("Failed to update question");
-      }
+    } else {
+      toast.error(state.selectedQuestionError || "Failed to update question");
     }
   };