Configure sorting and filtering via difficulty and title

Author: bensohh

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

@@ -36,12 +36,15 @@ export default function Home() {
   const [questions, setQuestions] = useState<Question[] | undefined>(undefined); // Store the questions
   const [totalCount, setTotalCount] = useState<number | undefined>(undefined); // Store the total count of questions
   const [totalPages, setTotalPages] = useState<number | undefined>(undefined); // Store the total number of pages
-  const [currentPage, setCurrentPage] = useState<number | undefined>(undefined); // Store the current page
+  const [currentPage, setCurrentPage] = useState<number | undefined>(1); // Store the current page
   const [limit, setLimit] = useState<number | undefined>(10); // Store the quantity of questions to be displayed
   const [isLoading, setIsLoading] = useState<boolean>(true); // Store the states related to table's loading
 
   // Filtering States
   const [search, setSearch] = useState<string | undefined>(undefined); // Store the search
+  const [delayedSearch, setDelayedSearch] = useState<string | undefined>(
+    undefined
+  ); // Store the delayed search value
   const [categories, setCategories] = useState<string[]>([]); // Store the selected filter categories
   const [difficulty, setDifficulty] = useState<string[]>([]); // Store the selected difficulty level
   const [sortBy, setSortBy] = useState<string | undefined>(undefined); // Store the selected sorting parameter
@@ -79,15 +82,26 @@ export default function Home() {
       setIsLoading(true);
     }
 
-    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, sortBy]);
+    GetQuestions(currentPage, limit, sortBy, difficulty, delayedSearch).then(
+      (data) => {
+        setQuestions(data.questions);
+        setTotalCount(data.totalCount);
+        setTotalPages(data.totalPages);
+        setCurrentPage(data.currentPage);
+        setLimit(data.limit);
+        setIsLoading(false);
+      }
+    );
+  }, [limit, currentPage, sortBy, difficulty, delayedSearch]); // 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(() => {
+    const timeout = setTimeout(() => {
+      setDelayedSearch(search);
+      setCurrentPage(1); // Reset the current page
+    }, 800);
+    return () => clearTimeout(timeout);
+  }, [search]);
 
   // Table column specification
   const columns: TableProps<Question>["columns"] = [
@@ -148,6 +162,7 @@ export default function Home() {
   // Handler for change in multi-select categories option
   const handleCategoriesChange = (value: string[]) => {
     setCategories(value);
+    setCurrentPage(1); // Reset the current page
   };
 
   // Handler for clearing the filtering options
@@ -159,9 +174,9 @@ export default function Home() {
   };
 
   // Handler for filtering (TODO)
-  const handleFilter = async () => {
-    success("Filtered Successfully!");
-  };
+  // const handleFilter = async () => {
+  //   success("Filtered Successfully!");
+  // };
 
   // Handler for show size change for pagination
   const onShowSizeChange: PaginationProps["onShowSizeChange"] = (
@@ -202,6 +217,7 @@ export default function Home() {
                     prefix={<SearchOutlined />}
                     onChange={(e) => setSearch(e.target.value)}
                     value={search}
+                    allowClear
                   />
                 </Col>
                 <Col span={6}>
@@ -215,12 +231,15 @@ export default function Home() {
                     value={categories}
                   />
                 </Col>
-                <Col span={4}>
+                <Col span={6}>
                   <Select
                     mode="multiple"
                     allowClear
                     placeholder="Difficulty"
-                    onChange={(value: string[]) => setDifficulty(value)}
+                    onChange={(value: string[]) => {
+                      setDifficulty(value);
+                      setCurrentPage(1); //Reset the currentpage since filter params changed
+                    }}
                     options={DifficultyOption}
                     className="difficulty-select"
                     value={difficulty}
@@ -236,15 +255,17 @@ export default function Home() {
                     value={sortBy}
                   />
                 </Col>
-                <Col span={4}>
-                  <Button onClick={handleClear}>Clear</Button>
-                  <Button
+                <Col span={2}>
+                  <Button onClick={handleClear} className="clear-button">
+                    Clear
+                  </Button>
+                  {/* <Button
                     type="primary"
                     className="filter-button"
                     onClick={handleFilter}
                   >
                     Filter
-                  </Button>
+                  </Button> */}
                 </Col>
               </Row>
             </div>
@@ -254,6 +275,7 @@ export default function Home() {
                 columns={columns}
                 loading={isLoading}
                 pagination={{
+                  current: currentPage,
                   total: totalCount,
                   showSizeChanger: true,
                   onShowSizeChange: onShowSizeChange,

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

@@ -25,7 +25,9 @@ export interface QuestionListResponse {
 export const GetQuestions = async (
   currentPage?: number,
   limit?: number,
-  sortBy?: string
+  sortBy?: string,
+  difficulty?: string[],
+  title?: string
 ): Promise<QuestionListResponse> => {
   let query_url = `${process.env.NEXT_PUBLIC_API_URL}questions`;
   let query_params = "";
@@ -45,6 +47,20 @@ export const GetQuestions = async (
     }sortField=${field}&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 (title && title != "") {
+    const urlEncodedTitle = encodeURIComponent(title);
+    query_params += `${
+      query_params.length > 0 ? "&" : "?"
+    }title=${urlEncodedTitle}`;
+  }
+
+  // TODO: (Ryan) Filtering via categories
+
   query_url += query_params;
   const response = await fetch(query_url);
   const data = await response.json();

apps/question-service/src/app/styles.scss

@@ -44,6 +44,10 @@
   box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) !important;
 }
 
+.clear-button {
+  width: 100%;
+}
+
 .categories-multi-select,
 .difficulty-select,
 .order-select {