diff --git a/client/src/assets/judges/tyler.png b/client/src/assets/judges/tyler.png new file mode 100644 index 00000000..943b61a9 Binary files /dev/null and b/client/src/assets/judges/tyler.png differ diff --git a/client/src/assets/judges/will.jpg b/client/src/assets/judges/will.jpg new file mode 100644 index 00000000..bed897fd Binary files /dev/null and b/client/src/assets/judges/will.jpg differ diff --git a/client/src/pages/FAQ/FAQ.jsx b/client/src/pages/FAQ/FAQ.jsx index 27d898ba..ccd86ae4 100644 --- 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'; @@ -16,7 +16,7 @@ import LoadingAnimation from '../../components/misc/LoadingAnimation/LoadingAnim import Dragon from '../../assets/faq/dragon.svg'; 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); @@ -32,6 +32,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) { @@ -79,6 +83,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 (