Merge branch 'ben/integrate-backend-api' into delete-button

Author: chiaryan

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

@@ -6,6 +6,8 @@ import {
   Input,
   Layout,
   message,
+  Pagination,
+  PaginationProps,
   Row,
   Select,
   Table,
@@ -61,6 +63,10 @@ export default function Home() {
 
   // Table States
   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 [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
@@ -103,15 +109,16 @@ export default function Home() {
       setIsLoading(true);
     }
 
-    GetQuestions().then((data) => {
-      setQuestions(data);
+    GetQuestions(currentPage, limit).then((data) => {
+      setQuestions(data.questions);
+      setTotalCount(data.totalCount);
+      setTotalPages(data.totalPages);
+      setCurrentPage(data.currentPage);
+      setLimit(data.limit);
       setIsLoading(false);
     });
-  };
-  // Include States for Create/Edit Modal (TODO: Sean)
-
-  // When the page is initialised, fetch all the questions ONCE and display in table
-  useEffect(loadQuestions, []);
+  }
+  useEffect(loadQuestions, [limit, currentPage]);
 
   // Table column specification
   const columns: TableProps<Question>["columns"] = [
@@ -154,7 +161,7 @@ export default function Home() {
       title: "Actions",
       key: "actions",
       dataIndex: "id",
-      render: (id: string) => (
+      render: (id: number) => (
         <div>
           {/* TODO (Sean): Include Logic to handle retrieving of editable data here and display in a modal component */}
           <Button className="edit-button" icon={<EditOutlined />}></Button>
@@ -198,6 +205,22 @@ export default function Home() {
     success("Filtered Successfully!");
   };
 
+  // Handler for show size change for pagination
+  const onShowSizeChange: PaginationProps["onShowSizeChange"] = (
+    current,
+    pageSize
+  ) => {
+    console.log(current);
+    console.log(pageSize);
+    setCurrentPage(current);
+    setLimit(pageSize);
+  };
+
+  // Handler for change in page jumper
+  const onPageJump: PaginationProps["onChange"] = (pageNumber) => {
+    setCurrentPage(pageNumber);
+  };
+
   return (
     <div>
       {contextHolder}
@@ -274,6 +297,13 @@ export default function Home() {
                 dataSource={questions}
                 columns={columns}
                 loading={isLoading}
+                pagination={{
+                  total: totalCount,
+                  showSizeChanger: true,
+                  onShowSizeChange: onShowSizeChange,
+                  // showQuickJumper: true,
+                  onChange: onPageJump,
+                }}
               />
             </div>
           </div>

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

@@ -1,5 +1,5 @@
 export interface Question {
-  id: string;
+  id: number;
   docRefId: string;
   title: string;
   description?: string;
@@ -12,9 +12,33 @@ export interface Question {
   testCases?: string[];
 }
 
+export interface QuestionListResponse {
+  totalCount: number;
+  totalPages: number;
+  currentPage: number;
+  limit: number;
+  hasNextPage: boolean;
+  questions: Question[];
+}
+
 // GET request to fetch all the questions (TODO: Ben --> Fetch with filtering/sorting etc)
-export const GetQuestions = async (): Promise<Question[]> => {
-  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}questions`);
+export const GetQuestions = async (
+  currentPage?: number,
+  limit?: number
+): Promise<QuestionListResponse> => {
+  let query_url = `${process.env.NEXT_PUBLIC_API_URL}questions`;
+  let query_params = "";
+
+  if (currentPage) {
+    query_params += `?offset=${(currentPage - 1) * 10}`;
+  }
+
+  if (limit) {
+    query_params += `${query_params.length > 0 ? "&" : "?"}limit=${limit}`;
+  }
+
+  query_url += query_params;
+  const response = await fetch(query_url);
   const data = await response.json();
   return data;
 };