Change match criteria from multiselect to single select

Author: ruiqi7

backend/matching-service/src/handlers/matchHandler.ts

@@ -16,9 +16,9 @@ export interface MatchUser {
 
 export interface MatchRequest {
   user: MatchUser;
-  complexities: string[];
-  categories: string[];
-  languages: string[];
+  complexity: string;
+  category: string;
+  language: string;
   timeout: number;
 }
 
@@ -37,7 +37,7 @@ export const sendMatchRequest = async (
   requestId: string,
   rejectedPartnerId?: string
 ): Promise<boolean> => {
-  const { user, complexities, categories, languages, timeout } = matchRequest;
+  const { user, complexity, category, language, timeout } = matchRequest;
 
   const matchItem: MatchRequestItem = {
     id: requestId,
@@ -47,12 +47,7 @@ export const sendMatchRequest = async (
     rejectedPartnerId: rejectedPartnerId,
   };
 
-  const sent = await sendToQueue(
-    complexities[0],
-    categories[0],
-    languages[0],
-    matchItem
-  );
+  const sent = await sendToQueue(complexity, category, language, matchItem);
   return sent;
 };
 

frontend/src/contexts/MatchContext.tsx

@@ -23,9 +23,9 @@ type MatchUser = {
 };
 
 type MatchCriteria = {
-  complexities: string[];
-  categories: string[];
-  languages: string[];
+  complexity: string;
+  category: string;
+  language: string;
   timeout: number;
 };
 
@@ -67,9 +67,9 @@ enum MatchPaths {
 
 type MatchContextType = {
   findMatch: (
-    complexities: string[],
-    categories: string[],
-    languages: string[],
+    complexity: string,
+    category: string,
+    language: string,
     timeout: number
   ) => void;
   stopMatch: () => void;
@@ -297,9 +297,9 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   };
 
   const findMatch = (
-    complexities: string[],
-    categories: string[],
-    languages: string[],
+    complexity: string,
+    category: string,
+    language: string,
     timeout: number
   ) => {
     if (!matchUser) {
@@ -318,19 +318,19 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
       MatchEvents.MATCH_REQUEST,
       {
         user: matchUser,
-        complexities: complexities,
-        categories: categories,
-        languages: languages,
+        complexity: complexity,
+        category: category,
+        language: language,
         timeout: timeout,
       },
       (requested: boolean) => {
         clearTimeout(requestTimeout);
         setTimeout(() => setLoading(false), 500);
         if (requested) {
           setMatchCriteria({
-            complexities,
-            categories,
-            languages,
+            complexity: complexity,
+            category: category,
+            language: language,
             timeout,
           });
           appNavigate(MatchPaths.MATCHING);
@@ -388,9 +388,9 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
 
     const rematchRequest = {
       user: matchUser,
-      complexities: matchCriteria.complexities,
-      categories: matchCriteria.categories,
-      languages: matchCriteria.languages,
+      complexities: matchCriteria.complexity,
+      categories: matchCriteria.category,
+      languages: matchCriteria.language,
       timeout: matchCriteria.timeout,
     };
     matchSocket.emit(
@@ -416,9 +416,9 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     }
 
     findMatch(
-      matchCriteria.complexities,
-      matchCriteria.categories,
-      matchCriteria.languages,
+      matchCriteria.complexity,
+      matchCriteria.category,
+      matchCriteria.language,
       matchCriteria.timeout
     );
   };

frontend/src/pages/Home/index.tsx

@@ -34,9 +34,9 @@ import Loader from "../../components/Loader";
 import { toast } from "react-toastify";
 
 const Home: React.FC = () => {
-  const [complexities, setComplexities] = useState<string[]>([]);
-  const [categories, setCategories] = useState<string[]>([]);
-  const [languages, setLanguages] = useState<string[]>([]);
+  const [complexity, setComplexity] = useState<string>("");
+  const [category, setCategory] = useState<string>("");
+  const [language, setLanguage] = useState<string>("");
   const [timeout, setTimeout] = useState<number | undefined>(30);
 
   const [isQueryingQnDB, setIsQueryingQnDB] = useState<boolean>(false);
@@ -58,7 +58,7 @@ const Home: React.FC = () => {
   useEffect(() => {
     if (isQueryingQnDB) {
       if (state.questions.length > 0) {
-        findMatch(complexities, categories, languages, timeout!);
+        findMatch(complexity, category, language, timeout!);
       } else {
         toast.error(QUESTION_DOES_NOT_EXIST_ERROR);
       }
@@ -139,8 +139,8 @@ const Home: React.FC = () => {
             >
               <Autocomplete
                 options={complexityList}
-                onChange={(_, selectedOptions) => {
-                  setComplexities(selectedOptions ? [selectedOptions] : []);
+                onChange={(_, selectedOption) => {
+                  setComplexity(selectedOption || "");
                 }}
                 renderInput={(params) => <TextField {...params} />}
                 renderTags={(tagValue, getTagProps) =>
@@ -177,8 +177,8 @@ const Home: React.FC = () => {
             >
               <Autocomplete
                 options={state.questionCategories}
-                onChange={(_, selectedOptions) => {
-                  setCategories(selectedOptions ? [selectedOptions] : []);
+                onChange={(_, selectedOption) => {
+                  setCategory(selectedOption || "");
                 }}
                 renderInput={(params) => <TextField {...params} />}
                 renderTags={(tagValue, getTagProps) =>
@@ -215,8 +215,8 @@ const Home: React.FC = () => {
             >
               <Autocomplete
                 options={languageList}
-                onChange={(_, selectedOptions) => {
-                  setLanguages(selectedOptions ? [selectedOptions] : []);
+                onChange={(_, selectedOption) => {
+                  setLanguage(selectedOption || "");
                 }}
                 renderInput={(params) => <TextField {...params} />}
                 renderTags={(tagValue, getTagProps) =>
@@ -284,13 +284,13 @@ const Home: React.FC = () => {
             !timeout ||
             timeout < minMatchTimeout ||
             timeout > maxMatchTimeout ||
-            complexities.length == 0 ||
-            categories.length == 0 ||
-            languages.length == 0
+            !complexity ||
+            !category ||
+            !language
           }
           onClick={() => {
             setIsQueryingQnDB(true);
-            getQuestionList(1, 10, "", complexities, categories, dispatch);
+            getQuestionList(1, 10, "", [complexity], [category], dispatch);
           }}
         >
           {isQueryingQnDB ? <CircularProgress /> : "Find my match!"}