Index: backend/controllers/forumController.js =================================================================== --- backend/controllers/forumController.js (revision 4a2a8f2b734d9ee6556912a7296d0ccb5eed0b05) +++ backend/controllers/forumController.js (revision 7202388d9140af7bd10bdac16f89d111e5129655) @@ -166,5 +166,6 @@ const getForumPosts = async (req, res) => { try { - const page = parseInt(req.query.page) || 0; + console.log("Called"); + const page = parseInt(req.query.page) - 1 || 0; const limit = parseInt(req.query.limit) || 20; const commentSort = req.query.commentSort; Index: backend/controllers/reviewController.js =================================================================== --- backend/controllers/reviewController.js (revision 4a2a8f2b734d9ee6556912a7296d0ccb5eed0b05) +++ backend/controllers/reviewController.js (revision 7202388d9140af7bd10bdac16f89d111e5129655) @@ -246,5 +246,5 @@ authorName: postToApprove.author_name, authorId: postToApprove.author_id, - dateCreated: postToApprove.created_at, + dateCreated: new Date(), commentCount: postToApprove.comment_count || 0, topic: postToApprove.topic, Index: client/src/App.jsx =================================================================== --- client/src/App.jsx (revision 4a2a8f2b734d9ee6556912a7296d0ccb5eed0b05) +++ client/src/App.jsx (revision 7202388d9140af7bd10bdac16f89d111e5129655) @@ -15,4 +15,5 @@ import ManageChallenges from "./Dashboard/components/ManageChallenges"; import CreateNewChallenge from "./Dashboard/components/CreateNewChallenge"; +// import { ForumSearchParamsProvider } from "./contexts/ForumSearchParamsContext"; import UserPosts from "./Dashboard/components/userPosts"; Index: client/src/Dashboard/DashboardLayout.jsx =================================================================== --- client/src/Dashboard/DashboardLayout.jsx (revision 4a2a8f2b734d9ee6556912a7296d0ccb5eed0b05) +++ client/src/Dashboard/DashboardLayout.jsx (revision 7202388d9140af7bd10bdac16f89d111e5129655) @@ -1,4 +1,5 @@ -import React from "react"; -import { Outlet } from "react-router-dom"; +import React, { useState } from "react"; + +import { Outlet, useSearchParams } from "react-router-dom"; import Navbar from "./components/Navbar"; Index: client/src/Dashboard/components/Forum.jsx =================================================================== --- client/src/Dashboard/components/Forum.jsx (revision 4a2a8f2b734d9ee6556912a7296d0ccb5eed0b05) +++ client/src/Dashboard/components/Forum.jsx (revision 7202388d9140af7bd10bdac16f89d111e5129655) @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useState, useEffect, useCallback } from "react"; +import { useNavigate, useSearchParams } from "react-router-dom"; import commentIcon from "../../assets/images/comment.svg"; import trashIcon from "../../assets/images/delete.svg"; // Add this import @@ -9,4 +9,5 @@ import "react-datepicker/dist/react-datepicker.css"; import CalendarPopover from "./CalendarPopover"; +// import { useForumSearchParams } from "../../contexts/ForumSearchParamsContext"; const Forum = () => { const navigate = useNavigate(); @@ -14,7 +15,8 @@ const [loading, setLoading] = useState(true); const [loadingMore, setLoadingMore] = useState(false); + const [forumSearchParams, setForumSearchParams] = useSearchParams(); const [isCalendarOpen, setIsCalendarOpen] = useState(false); const [totalPages, setTotalPages] = useState(1); - const [page, setPage] = useState(0); + const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(true); const [modal, setModal] = useState({ @@ -36,5 +38,13 @@ }; - const [filters, setFilters] = useState({ ...defaultFilters }); + const [filters, setFilters] = useState(() => { + const initialFilters = { ...defaultFilters }; + for (const [key, value] of forumSearchParams.entries()) { + if (key in initialFilters) { + initialFilters[key] = value; + } + } + return initialFilters; + }); const [showFilters, setShowFilters] = useState(false); @@ -56,98 +66,104 @@ // Only fetch posts on component mount + + const fetchPosts = useCallback( + async (pageNum = 0, append = false, activeFilters = null) => { + try { + if (!append) { + setLoading(true); + } else { + setLoadingMore(true); + } + + const filtersToApply = activeFilters + ? { ...activeFilters } + : { ...filters }; + + Object.keys(filtersToApply).forEach((key) => { + if (filtersToApply[key] === undefined) { + filtersToApply[key] = null; + } + }); + + const response = await getForumPosts( + pageNum, + postsPerPage, + filtersToApply + ); + const { forumPosts, totalCount } = response; + setTotalPages(Math.max(1, Math.ceil(totalCount / postsPerPage))); + setHasMore(pageNum < Math.ceil(totalCount / postsPerPage) - 1); + + if (append) { + setPosts((prevPosts) => [...prevPosts, ...posts]); + } else { + setPosts(forumPosts); + } + + setPage(pageNum); + } catch (error) { + console.error("Error fetching forum posts:", error); + + if (error.response) { + console.error("Error response:", error.response); + } + + if (!append) { + setPosts([]); + } + } finally { + setLoading(false); + setLoadingMore(false); + } + }, + [postsPerPage] + ); useEffect(() => { - fetchPosts(0, false, { ...defaultFilters }); - }, []); - - const fetchPosts = async ( - pageNum = 0, - append = false, - activeFilters = null - ) => { - try { - if (!append) { - setLoading(true); - } else { - setLoadingMore(true); + const pageFromUrl = parseInt(forumSearchParams.get("page") || "1", 10); + const filtersFromUrl = { ...defaultFilters }; + for (const [key, value] of forumSearchParams.entries()) { + if (key in filtersFromUrl) { + filtersFromUrl[key] = value; } - - const filtersToApply = activeFilters - ? { ...activeFilters } - : { ...filters }; - - Object.keys(filtersToApply).forEach((key) => { - if (filtersToApply[key] === undefined) { - filtersToApply[key] = null; - } - }); - - const response = await getForumPosts( - pageNum, - postsPerPage, - filtersToApply - ); - const { forumPosts, totalCount } = response; - setTotalPages(Math.max(1, Math.ceil(totalCount / postsPerPage))); - setHasMore(pageNum < Math.ceil(totalCount / postsPerPage) - 1); - - if (append) { - setPosts((prevPosts) => [...prevPosts, ...posts]); - } else { - setPosts(forumPosts); + } + + setFilters(filtersFromUrl); + fetchPosts(pageFromUrl, false, filtersFromUrl); + }, [forumSearchParams, fetchPosts]); + + // Apply all selected filters + const applyFilters = () => { + const newSearchParams = new URLSearchParams(); + + for (const [key, value] of Object.entries(filters)) { + if (value && value !== defaultFilters[key]) { + newSearchParams.set(key, value); } - - setPage(pageNum); - } catch (error) { - console.error("Error fetching forum posts:", error); - - if (error.response) { - console.error("Error response:", error.response); - } - - if (!append) { - setPosts([]); - } - } finally { - setLoading(false); - setLoadingMore(false); } + newSearchParams.set("page", "1"); + setForumSearchParams(newSearchParams); }; - - // Apply all selected filters - const applyFilters = async () => { - // Make a copy of the current filters to ensure we're using the latest state - const currentFilters = { ...filters }; - + const handleRemoveFilter = (filterKeyToRemove) => { + const newSearchParams = new URLSearchParams(forumSearchParams); + const newFilters = { + ...filters, + [filterKeyToRemove]: defaultFilters[filterKeyToRemove], + }; + newSearchParams.delete(filterKeyToRemove); + newSearchParams.set("page", "1"); + setForumSearchParams(newSearchParams); + setFilters(newFilters); + }; + + const clearFilters = async () => { setLoading(true); - setPage(0); - - setTimeout(async () => { - try { - console.log("Starting fetchPosts with filters:", currentFilters); - await fetchPosts(0, false, currentFilters); - console.log("Filters applied successfully"); - } catch (err) { - console.error("Error applying filters:", err); - } - }, 100); - }; - - // Clear all filters and reset to default - const clearFilters = async () => { - // Show visual confirmation that filters are being cleared - setLoading(true); - - // Update the filters state with a fresh copy of default filters const freshDefaultFilters = { ...defaultFilters }; setFilters(freshDefaultFilters); - - // Reset to page 0 and fetch with default filters after a small delay - setPage(0); - - // Force a small delay to ensure state updates have propagated - setTimeout(async () => { - await fetchPosts(0, false, freshDefaultFilters); - }, 100); + setForumSearchParams({ page: "1" }); + + setPage(1); + + await fetchPosts(1, false, freshDefaultFilters); }; @@ -156,10 +172,16 @@ await deleteForumPost(postId); - // Refresh the posts after deletion with current filters - await fetchPosts(0, false, { ...filters }); + await fetchPosts(1, false, { ...filters }); showModal("Post deleted successfully.", "success"); } catch (error) { console.error("Error deleting post:", error); } + }; + const formatFilterLabel = (value) => { + if (!value) return ""; + return value + .split("-") + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(" "); }; @@ -465,6 +487,5 @@
{filters.topic !== "all" && ( - - Topic: + {filters.topic === "general" @@ -475,9 +496,5 @@ type="button" className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none" - onClick={() => { - const newFilters = { ...filters, topic: "all" }; - setFilters(newFilters); - fetchPosts(0, false, newFilters); - }} + onClick={() => handleRemoveFilter("topic")} aria-label="Remove topic filter" > @@ -487,6 +504,5 @@ )} {filters.searchText && filters.searchText.trim() && ( - - Search: + "{filters.searchText.trim()}" @@ -495,9 +511,5 @@ type="button" className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none" - onClick={() => { - const newFilters = { ...filters, searchText: "" }; - setFilters(newFilters); - fetchPosts(0, false, newFilters); - }} + onClick={() => handleRemoveFilter("searchText")} aria-label="Remove search filter" > @@ -507,22 +519,12 @@ )} {filters.dateSort !== "newest" && ( - - Sort: + - {filters.dateSort === "oldest" - ? "Oldest First" - : "Most Recent"} + {formatFilterLabel(filters.dateSort)}