Implement categories filter

Author: chiaryan

apps/question-service/src/app/page.tsx

@@ -82,7 +82,7 @@ export default function Home() {
       setIsLoading(true);
     }
 
-    GetQuestions(currentPage, limit, sortBy, difficulty, delayedSearch).then(
+    GetQuestions(currentPage, limit, sortBy, difficulty, categories, delayedSearch).then(
       (data) => {
         setQuestions(data.questions);
         setTotalCount(data.totalCount);
@@ -92,7 +92,7 @@ export default function Home() {
         setIsLoading(false);
       }
     );
-  }, [limit, currentPage, sortBy, difficulty, delayedSearch]); // TODO: (Ryan) Add dependencies for categories and edit the GetQuestion service function
+  }, [limit, currentPage, sortBy, difficulty, delayedSearch, categories]); // TODO: (Ryan) Add dependencies for categories and edit the GetQuestion service function
 
   // Delay the fetching of data only after user stops typing for awhile
   useEffect(() => {

apps/question-service/src/app/services/question.ts

@@ -1,3 +1,5 @@
+import { stringify } from 'querystring'
+
 export interface Question {
   id: number;
   docRefId: string;
@@ -26,43 +28,42 @@ export const GetQuestions = async (
   currentPage?: number,
   limit?: number,
   sortBy?: string,
-  difficulty?: string[],
+  difficulties?: string[],
+  categories?: string[],
   title?: string
 ): Promise<QuestionListResponse> => {
   let query_url = `${process.env.NEXT_PUBLIC_API_URL}questions`;
-  let query_params = "";
+  const params: NodeJS.Dict<number | string | string[]> = {}
 
   if (currentPage) {
-    query_params += `?offset=${(currentPage - 1) * 10}`;
+    params.offset = (currentPage - 1) * 10;
   }
 
   if (limit) {
-    query_params += `${query_params.length > 0 ? "&" : "?"}limit=${limit}`;
+    params.limit = limit;
   }
 
   if (sortBy) {
     const [field, order] = sortBy.split(" ");
-    query_params += `${
-      query_params.length > 0 ? "&" : "?"
-    }sortField=${field}&sortValue=${order}`;
+    params.sortField = field;
+    params.sortValue = order;
   }
 
-  if (difficulty && difficulty.length > 0) {
-    const value = difficulty.join(","); // Change them from ["easy", "medium"] to "easy,medium"
-    query_params += `${query_params.length > 0 ? "&" : "?"}complexity=${value}`;
+  if (difficulties && difficulties.length > 0) {
+    params.complexity = difficulties;
   }
-
+  
   if (title && title != "") {
     const urlEncodedTitle = encodeURIComponent(title);
-    query_params += `${
-      query_params.length > 0 ? "&" : "?"
-    }title=${urlEncodedTitle}`;
+    params.title = urlEncodedTitle
   }
-
+  
   // TODO: (Ryan) Filtering via categories
+  if (categories && categories.length > 0) {
+    params.categories = categories;
+  }
 
-  query_url += query_params;
-  const response = await fetch(query_url);
+  const response = await fetch(`${query_url}?${stringify(params)}`);
   const data = await response.json();
   return data;
 };

apps/question-service/src/app/utils/SelectOptions.ts

@@ -1,13 +1,16 @@
 export const CategoriesOption = [
-  { label: "Array", value: "Array" },
-  { label: "String", value: "String" },
+  { label: "Arrays", value: "Arrays" },
+  { label: "Algorithms", value: "Algorithms" },
+  { label: "Data Structures", value: "Data Structures" },
+  { label: "Strings", value: "Strings" },
+  { label: "Recursion", value: "Recursion" },
   { label: "Hash Table", value: "Hash Table" },
   { label: "Dynamic Programming", value: "Dynamic Programming" },
   { label: "Math", value: "Math" },
   { label: "Sorting", value: "Sorting" },
   { label: "Greedy", value: "Greedy" },
   { label: "Depth-First Search", value: "Depth-First Search" },
-  { label: "Database", value: "Database" },
+  { label: "Databases", value: "Databases" },
   { label: "Binary Search", value: "Binary Search" },
   { label: "Matrix", value: "Matrix" },
   { label: "Breadth-First Search", value: "Breadth-First Search" },