implemented pagination for FAQs display. Dark Mode and Mobile View ar…

…e untested
UofT-Frosh-Orientation · Jun 16, 2024 · c7a8b73 · c7a8b73
1 parent 59973c1
commit c7a8b73
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 8 deletions.
diff --git a/client/src/pages/FAQ/FAQ.jsx b/client/src/pages/FAQ/FAQ.jsx
@@ -1,4 +1,4 @@
-import { React, useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getQuestions } from './functions';
 import './FAQ.scss';
@@ -15,7 +15,7 @@ import { SnackbarContext } from '../../util/SnackbarProvider';
 import LoadingAnimation from '../../components/misc/LoadingAnimation/LoadingAnimation';
 
 const PageFAQ = () => {
-  const { darkMode, setDarkModeStatus } = useContext(DarkModeContext);
+  const { darkMode } = useContext(DarkModeContext);
   const [activeIndex, setActiveIndex] = useState(0);
   const [isSearch, setIsSearch] = useState(false);
   const [isMultiSearch, setIsMultiSearch] = useState(false);
@@ -31,6 +31,10 @@ const PageFAQ = () => {
   const [errorLoading, setErrorLoading] = useState(false);
   const { setSnackbar } = useContext(SnackbarContext);
 
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5;
+
   const loadQuestions = async () => {
     const data = await getQuestions(setSnackbar);
     if (!data) {
@@ -78,6 +82,29 @@ const PageFAQ = () => {
     loadQuestions();
   }, []);
 
+  useEffect(() => {
+    // Reset current page to 1 when category (activeIndex) changes
+    setCurrentPage(1);
+  }, [activeIndex]);
+
+  // Calculate total pages
+  const totalPages = Math.ceil((allQuestions[activeIndex]?.length || 0) / itemsPerPage);
+
+  // Handle page change
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  // Get current page questions
+  const currentQuestions = allQuestions[activeIndex]?.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage,
+  );
+
+  console.log('Current Page:', currentPage);
+  console.log('Total Pages:', totalPages);
+  console.log('Current Questions:', currentQuestions);
+
   return (
     <div>
       <div>
@@ -128,10 +155,15 @@ const PageFAQ = () => {
               }`}
             >
               <FAQCategoryAccordions
-                allQuestions={allQuestions}
+                currentQuestions={currentQuestions}
                 activeIndex={activeIndex}
                 setActiveIndex={setActiveIndex}
               />
+              <PaginationControls
+                currentPage={currentPage}
+                totalPages={totalPages}
+                handlePageChange={handlePageChange}
+              />
             </div>
             <div
               className={`faq-display-questions-container ${
@@ -174,7 +206,7 @@ const FAQPageHeader = ({
   setActiveIndex,
   questionCategories,
 }) => {
-  const { darkMode, setDarkModeStatus } = useContext(DarkModeContext);
+  const { darkMode } = useContext(DarkModeContext);
   const filterQuestions = (questions, query) => {
     if (!query) {
       return questions;
@@ -311,9 +343,9 @@ FAQButtons.propTypes = {
   questionCategories: PropTypes.array.isRequired,
 };
 
-const FAQCategoryAccordions = ({ allQuestions, activeIndex }) => {
-  if (allQuestions[activeIndex] === undefined) return <></>;
-  const questionsAccordion = allQuestions[activeIndex].map((question, index) => (
+const FAQCategoryAccordions = ({ currentQuestions, activeIndex }) => {
+  if (!currentQuestions) return <></>;
+  const questionsAccordion = currentQuestions.map((question, index) => (
     <div key={index} className={'faq-accordion-wrapper'}>
       <FAQAccordionWrapper scheduleData={question} openStatus={false} activeIndex={activeIndex} />
     </div>
@@ -322,7 +354,7 @@ const FAQCategoryAccordions = ({ allQuestions, activeIndex }) => {
 };
 
 FAQCategoryAccordions.propTypes = {
-  allQuestions: PropTypes.array.isRequired,
+  currentQuestions: PropTypes.array.isRequired,
   activeIndex: PropTypes.number.isRequired,
 };
 
@@ -421,4 +453,24 @@ FAQDisplayAllSearchQuestion.propTypes = {
   questions: PropTypes.array.isRequired,
 };
 
+const PaginationControls = ({ currentPage, totalPages, handlePageChange }) => (
+  <div className="pagination-controls">
+    {Array.from({ length: totalPages }, (_, i) => (
+      <button
+        key={i + 1}
+        onClick={() => handlePageChange(i + 1)}
+        className={currentPage === i + 1 ? 'active' : ''}
+      >
+        {i + 1}
+      </button>
+    ))}
+  </div>
+);
+
+PaginationControls.propTypes = {
+  currentPage: PropTypes.number.isRequired,
+  totalPages: PropTypes.number.isRequired,
+  handlePageChange: PropTypes.func.isRequired,
+};
+
 export { PageFAQ };
diff --git a/client/src/pages/FAQ/FAQ.scss b/client/src/pages/FAQ/FAQ.scss
@@ -284,3 +284,30 @@
   text-align: center;
   color: var(--text-dynamic);
 }
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+
+  button {
+    margin: 0 5px;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    background-color: var(--purple);
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+
+    &:hover {
+      background-color: var(--light-purple);
+      color: var(--purple-shades-dark);
+    }
+
+    &.active {
+      background-color: var(--purple-shades-dark);
+      color: white;
+    }
+  }
+}