Remove multiselect and use a fix set of categories

Author: nicolelim02

backend/question-service/src/controllers/questionController.ts

@@ -251,12 +251,27 @@ export const readCategories = async (
   res: Response,
 ): Promise<void> => {
   try {
-    const uniqueCats = await Question.distinct("category");
-
-    res.status(200).json({
-      message: CATEGORIES_RETRIEVED_MESSAGE,
-      categories: sortAlphabetically(uniqueCats),
-    });
+    // const uniqueCats = await Question.distinct("category");
+
+    // res.status(200).json({
+    //   message: CATEGORIES_RETRIEVED_MESSAGE,
+    //   categories: sortAlphabetically(uniqueCats),
+    // });
+    res
+      .status(200)
+      .json({
+        message: CATEGORIES_RETRIEVED_MESSAGE,
+        categories: [
+          "Strings",
+          "Algorithms",
+          "Data Structures",
+          "Bit Manipulation",
+          "Recursion",
+          "Databases",
+          "Arrays",
+          "Brainteaser",
+        ],
+      });
   } catch (error) {
     res.status(500).json({ message: SERVER_ERROR_MESSAGE, error });
   }

frontend/src/components/QuestionCategoryAutoComplete/index.tsx

@@ -24,31 +24,31 @@ const QuestionCategoryAutoComplete: React.FC<
   return (
     <Autocomplete
       multiple
-      freeSolo
       options={state.questionCategories}
       sx={{ marginTop: 2 }}
       value={selectedCategories}
       onChange={(_e, newCategoriesSelected) => {
-        const newValue =
-          newCategoriesSelected[newCategoriesSelected.length - 1];
-        if (typeof newValue === "string" && newValue.startsWith(`Add: "`)) {
-          const newCategory = newValue.slice(6, -1);
-          state.questionCategories.push(newCategory);
-          setSelectedCategories((prev) => [...prev, newCategory]);
-        } else {
-          setSelectedCategories(newCategoriesSelected);
-        }
+        // const newValue =
+        //   newCategoriesSelected[newCategoriesSelected.length - 1];
+        // if (typeof newValue === "string" && newValue.startsWith(`Add: "`)) {
+        //   const newCategory = newValue.slice(6, -1);
+        //   state.questionCategories.push(newCategory);
+        //   setSelectedCategories((prev) => [...prev, newCategory]);
+        // } else {
+        //   setSelectedCategories(newCategoriesSelected);
+        // }
+        setSelectedCategories(newCategoriesSelected);
       }}
       filterOptions={(options, params) => {
         const filtered = filter(options, params);
 
-        const { inputValue } = params;
+        // const { inputValue } = params;
 
-        const isExisting = options.some((option) => inputValue === option);
+        // const isExisting = options.some((option) => inputValue === option);
 
-        if (inputValue !== "" && !isExisting) {
-          filtered.push(`Add: "${inputValue}"`);
-        }
+        // if (inputValue !== "" && !isExisting) {
+        //   filtered.push(`Add: "${inputValue}"`);
+        // }
 
         return filtered;
       }}

frontend/src/pages/Home/index.tsx

@@ -49,7 +49,7 @@ const Home: React.FC = () => {
   }
   const { findMatch, loading } = match;
 
-  const isSmallerThan1100px = useMediaQuery('(max-width:1100px)');
+  const isSmallerThan1100px = useMediaQuery("(max-width:1100px)");
 
   useEffect(() => {
     getQuestionCategories(dispatch);
@@ -138,11 +138,9 @@ const Home: React.FC = () => {
               sx={{ backgroundColor: "white" }}
             >
               <Autocomplete
-                multiple
-                disableCloseOnSelect
                 options={complexityList}
                 onChange={(_, selectedOptions) => {
-                  setComplexities(selectedOptions);
+                  setComplexities(selectedOptions ? [selectedOptions] : []);
                 }}
                 renderInput={(params) => <TextField {...params} />}
                 renderTags={(tagValue, getTagProps) =>
@@ -178,11 +176,9 @@ const Home: React.FC = () => {
               sx={{ backgroundColor: "white" }}
             >
               <Autocomplete
-                multiple
-                disableCloseOnSelect
                 options={state.questionCategories}
                 onChange={(_, selectedOptions) => {
-                  setCategories(selectedOptions);
+                  setCategories(selectedOptions ? [selectedOptions] : []);
                 }}
                 renderInput={(params) => <TextField {...params} />}
                 renderTags={(tagValue, getTagProps) =>
@@ -218,11 +214,9 @@ const Home: React.FC = () => {
               sx={{ backgroundColor: "white" }}
             >
               <Autocomplete
-                multiple
-                disableCloseOnSelect
                 options={languageList}
                 onChange={(_, selectedOptions) => {
-                  setLanguages(selectedOptions);
+                  setLanguages(selectedOptions ? [selectedOptions] : []);
                 }}
                 renderInput={(params) => <TextField {...params} />}
                 renderTags={(tagValue, getTagProps) =>