Integrate sorting query parameters into question table

Author: bensohh

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

@@ -72,21 +72,22 @@ export default function Home() {
 
   // Include States for Create/Edit Modal (TODO: Sean)
 
-  // When the page is initialised, fetch all the questions ONCE and display in table
+  // When the page is initialised, fetch all the questions and display in table
+  // When the dependencies/states change, the useEffect hook will trigger to re-fetch the questions
   useEffect(() => {
     if (!isLoading) {
       setIsLoading(true);
     }
 
-    GetQuestions(currentPage, limit).then((data) => {
+    GetQuestions(currentPage, limit, sortBy).then((data) => {
       setQuestions(data.questions);
       setTotalCount(data.totalCount);
       setTotalPages(data.totalPages);
       setCurrentPage(data.currentPage);
       setLimit(data.limit);
       setIsLoading(false);
     });
-  }, [limit, currentPage]);
+  }, [limit, currentPage, sortBy]);
 
   // Table column specification
   const columns: TableProps<Question>["columns"] = [
@@ -167,8 +168,6 @@ export default function Home() {
     current,
     pageSize
   ) => {
-    console.log(current);
-    console.log(pageSize);
     setCurrentPage(current);
     setLimit(pageSize);
   };

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

@@ -24,7 +24,8 @@ export interface QuestionListResponse {
 // GET request to fetch all the questions (TODO: Ben --> Fetch with filtering/sorting etc)
 export const GetQuestions = async (
   currentPage?: number,
-  limit?: number
+  limit?: number,
+  sortBy?: string
 ): Promise<QuestionListResponse> => {
   let query_url = `${process.env.NEXT_PUBLIC_API_URL}questions`;
   let query_params = "";
@@ -37,6 +38,13 @@ export const GetQuestions = async (
     query_params += `${query_params.length > 0 ? "&" : "?"}limit=${limit}`;
   }
 
+  if (sortBy) {
+    const [field, order] = sortBy.split(" ");
+    query_params += `${
+      query_params.length > 0 ? "&" : "?"
+    }sortField=${field}&sortValue=${order}`;
+  }
+
   query_url += query_params;
   const response = await fetch(query_url);
   const data = await response.json();

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

@@ -78,49 +78,49 @@ export const CategoriesOption = [
 export const DifficultyOption = [
   {
     label: "Easy",
-    value: "Easy",
+    value: "easy",
   },
   {
     label: "Medium",
-    value: "Medium",
+    value: "medium",
   },
   {
     label: "Hard",
-    value: "Hard",
+    value: "hard",
   },
 ];
 
 export const OrderOption = [
   {
     label: "Id (ASC)",
-    value: "Id (ASC)",
+    value: "id asc",
   },
   {
     label: "Id (DESC)",
-    value: "Id (DESC)",
+    value: "id desc",
   },
   {
     label: "Most Recent",
-    value: "Most Recent",
+    value: "createdAt desc",
   },
   {
     label: "Oldest",
-    value: "Oldest",
+    value: "createdAt asc",
   },
   {
     label: "Alphabetical (A-Z)",
-    value: "Alphabetical (A-Z)", // TODO: Edit the values based on backend in the future
+    value: "title asc",
   },
   {
     label: "Alphabetical (Z-A)",
-    value: "Alphabetical (Z-A)", // TODO: Edit the values based on backend in the future
+    value: "title desc",
   },
   {
     label: "Difficulty (ASC)",
-    value: "Difficulty (ASC)",
+    value: "complexity asc",
   },
   {
     label: "Difficulty (DESC)",
-    value: "Difficulty (DESC)",
+    value: "complexity desc",
   },
 ];