From fc9bf6057ce28bcc13f94c1c11dd2340d9c6e7b0 Mon Sep 17 00:00:00 2001
From: Vanessa Lai <vlaiyz2605@gmail.com>
Date: Tue, 6 Aug 2024 21:42:17 +0800
Subject: [PATCH] fixed forum filter bugs

---
 src/pages/forum/Forum.jsx              | 30 +++++++++++++++-----------
 src/pages/forum/filter/ForumFilter.jsx | 13 +++++------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/pages/forum/Forum.jsx b/src/pages/forum/Forum.jsx
index f9fcb91..7bf52ce 100644
--- a/src/pages/forum/Forum.jsx
+++ b/src/pages/forum/Forum.jsx
@@ -9,9 +9,10 @@ import ForumList from '../../components/forumcards/ForumList';
 import './Forum.css';
 
 function ForumPage() {
-    const { currentUser } = useAuth();
     const [forumPosts, setForumPosts] = useState([]);
     const [filteredPosts, setFilteredPosts] = useState([]);
+    const [sortOrder, setSortOrder] = useState('');
+    const [searchQuery, setSearchQuery] = useState('');
 
     const fetchForumPosts = async () => {
         try {
@@ -59,20 +60,25 @@ function ForumPage() {
         return new Date(now.setDate(diff)).setHours(0, 0, 0, 0);
     };
 
-    const handleFilterChange = useCallback(({ tags, sortOrder, searchQuery }) => {
+    const calculateFeaturedScore = (product) => {
+        const { weeklyClicks, likes, comments } = product;
+        return (weeklyClicks * 0.5) + (likes * 0.3) + (comments * 0.2);
+    };
+
+    const filterAndSortPosts = useCallback(({ tags, sortOrder, searchQuery }) => {
         let filtered = forumPosts;
 
-        if (tags.length > 0) {
+        if (tags && tags.length > 0) {
             filtered = filtered.filter(post =>
                 tags.some(tag => post.tags.includes(tag))
             );
         }
 
         if (searchQuery) {
-            const lowerCaseQuery = searchQuery.toLowerCase();
+            const lowerQuery = searchQuery.toLowerCase();
             filtered = filtered.filter(post =>
-                post.title.toLowerCase().includes(lowerCaseQuery) ||
-                post.description.toLowerCase().includes(lowerCaseQuery)
+                post.title.toLowerCase().includes(lowerQuery) ||
+                post.description.toLowerCase().includes(lowerQuery)
             );
         }
 
@@ -83,17 +89,17 @@ function ForumPage() {
         }
 
         setFilteredPosts(filtered);
+        setSortOrder(sortOrder);
+        setSearchQuery(searchQuery);
     }, [forumPosts]);
 
-    const calculateFeaturedScore = (product) => {
-        const { weeklyClicks, likes, comments } = product;
-        return (weeklyClicks * 0.5) + (likes * 0.3) + (comments * 0.2);
-    };
-
     return (
         <Format content={
             <div className='forum'>
-                <ForumFilter onFilterChange={handleFilterChange} />
+                <ForumFilter 
+                    onFilterChange={filterAndSortPosts}
+                    onSortChange={(order) => filterAndSortPosts({ tags: [], sortOrder: order, searchQuery })}
+                />
                 <div className='forum-main'>
                     <ForumList heading="Forum" forums={filteredPosts} />
                 </div>
diff --git a/src/pages/forum/filter/ForumFilter.jsx b/src/pages/forum/filter/ForumFilter.jsx
index 2e34314..7fc3e5f 100644
--- a/src/pages/forum/filter/ForumFilter.jsx
+++ b/src/pages/forum/filter/ForumFilter.jsx
@@ -1,13 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../../Auth';
-
 import SearchBar from '../../../components/searchbar/Searchbar';
 import './ForumFilter.css';
 
-function ForumFilter({ onFilterChange }) {
-    const navigate = useNavigate();
-    const { currentUser } = useAuth();
+function ForumFilter({ onFilterChange, onSortChange }) {
     const [selectedTags, setSelectedTags] = useState([]);
     const [sortOrder, setSortOrder] = useState('');
     const [query, setQuery] = useState('');
@@ -24,11 +21,11 @@ function ForumFilter({ onFilterChange }) {
 
     const handleSortChange = (e) => {
         setSortOrder(e.target.value);
+        onSortChange(e.target.value);
     };
 
     const handleInputChange = (e) => {
-        const value = e.target.value;
-        setQuery(value);
+        setQuery(e.target.value);
     };
 
     const handleSearch = (e) => {
@@ -38,7 +35,7 @@ function ForumFilter({ onFilterChange }) {
 
     useEffect(() => {
         onFilterChange({ tags: selectedTags, sortOrder, searchQuery: query });
-    }, [selectedTags, sortOrder, query]);
+    }, [selectedTags, sortOrder, query, onFilterChange]);
 
     return (
         <div className='forum-filter'>
@@ -68,7 +65,7 @@ function ForumFilter({ onFilterChange }) {
                     </select>
                 </div>
             </div>
-            <div  className='forum-searchbar'>
+            <div className='forum-searchbar'>
                 <SearchBar
                     placeholder={"Search Forum Posts..."}
                     handleSearch={handleSearch}