Index: client/src/Dashboard/components/UserPosts.jsx =================================================================== --- client/src/Dashboard/components/UserPosts.jsx (revision c068f07d27ceff3fc17804c41ea3ec5eb9391502) +++ client/src/Dashboard/components/UserPosts.jsx (revision 7dfa29a5574569bc8df8510da09be04ef54a46f3) @@ -5,4 +5,6 @@ import { getAllPostsByUser } from "@/services/forumService.js"; import commentIcon from "../../assets/images/comment.svg"; +import { DatePicker } from "react-daisyui-timetools"; +import "react-datepicker/dist/react-datepicker.css"; const UserPosts = () => { @@ -12,6 +14,112 @@ const [loading, setLoading] = useState(true); const [activeTab, setActiveTab] = useState("published"); - const [searchQuery, setSearchQuery] = useState(""); const navigate = useNavigate(); + + // Filter states + const defaultFilters = { + topic: "all", // "all", "general", "daily-challenge" + dateSort: "newest", // "newest", "oldest" + selectedDate: null, // specific date filter + commentSort: "none", // "none", "most-popular", "least-popular" + searchText: "", // text search in title and content + }; + + const [filters, setFilters] = useState({ ...defaultFilters }); + const [appliedFilters, setAppliedFilters] = useState({ ...defaultFilters }); + const [showFilters, setShowFilters] = useState(false); + + // Apply filters to posts + const applyFiltersToApprovedPosts = (posts, activeFilters) => { + let filteredPosts = [...posts]; + + // 1. Apply text search filter + if (activeFilters.searchText && activeFilters.searchText.trim()) { + const searchTerm = activeFilters.searchText.trim().toLowerCase(); + filteredPosts = filteredPosts.filter((post) => { + const titleMatch = + post.title && post.title.toLowerCase().includes(searchTerm); + const contentMatch = + post.content && post.content.toLowerCase().includes(searchTerm); + return titleMatch || contentMatch; + }); + } + + // 2. Apply topic filter + if (activeFilters.topic && activeFilters.topic !== "all") { + filteredPosts = filteredPosts.filter( + (post) => post.topic === activeFilters.topic + ); + } + + // 3. Apply specific date filter + if (activeFilters.selectedDate) { + try { + const filterDate = + activeFilters.selectedDate instanceof Date + ? new Date(activeFilters.selectedDate) + : new Date(String(activeFilters.selectedDate)); + + if (!isNaN(filterDate.getTime())) { + filterDate.setHours(0, 0, 0, 0); + const nextDay = new Date(filterDate); + nextDay.setDate(nextDay.getDate() + 1); + + filteredPosts = filteredPosts.filter((post) => { + const postDate = new Date(post.date_created); + return postDate >= filterDate && postDate < nextDay; + }); + } + } catch (err) { + console.error("Error in date filtering:", err); + } + } + + // 4. Apply comment popularity sorting + if (activeFilters.commentSort && activeFilters.commentSort !== "none") { + filteredPosts = filteredPosts.sort((a, b) => { + if (activeFilters.commentSort === "most-popular") { + return ( + b.comment_count - a.comment_count || + new Date(b.date_created) - new Date(a.date_created) + ); + } else { + return ( + a.comment_count - b.comment_count || + new Date(b.date_created) - new Date(a.date_created) + ); + } + }); + } + // 5. Apply date sorting (if comment sorting wasn't applied) + else if (activeFilters.dateSort) { + filteredPosts = filteredPosts.sort((a, b) => { + const dateA = new Date(a.date_created); + const dateB = new Date(b.date_created); + + if (activeFilters.dateSort === "oldest") { + return dateA - dateB; + } else { + return dateB - dateA; + } + }); + } + + return filteredPosts; + }; + + // Apply all selected filters + const applyFilters = () => { + console.log("Applying filters:", filters); + const currentFilters = { ...filters }; + setAppliedFilters(currentFilters); + }; + + // Clear all filters and reset to default + const clearFilters = () => { + console.log("Clearing filters, using defaults:", defaultFilters); + const freshDefaultFilters = { ...defaultFilters }; + setFilters(freshDefaultFilters); + setAppliedFilters(freshDefaultFilters); + }; useEffect(() => { if (user) { @@ -39,18 +147,9 @@ }, [user?.id]); - const filteredApprovedPosts = approvedPosts.filter((post) => { - const searchLower = searchQuery.toLowerCase(); - const postDate = new Date(post.date_created).toLocaleDateString("en-US", { - year: "numeric", - month: "short", - day: "numeric", - }); - - return ( - post.title.toLowerCase().includes(searchLower) || - post.content.toLowerCase().includes(searchLower) || - postDate.toLowerCase().includes(searchLower) - ); - }); + // Apply filters to get filtered posts + const filteredApprovedPosts = applyFiltersToApprovedPosts( + approvedPosts, + appliedFilters + ); if (loading) { @@ -63,260 +162,50 @@ return ( -
- {/* Tab Navigation */} -
-
- - +
+
+ {/* Sticky Header Section */} +
+
+
+

+ Your Posts +

+
+ + +
+
+
-
-
-
- {activeTab == "published" && ( - <> - setSearchQuery(e.target.value)} - /> - - - - - )} -
-
- - {/* Tab Content */} -
- {activeTab === "published" && ( -
-
-
-

- Your Published Posts -

-
-
- - {filteredApprovedPosts.length > 0 ? ( -
- {filteredApprovedPosts.map((post) => ( -
-
-
-

{ - navigate(`/dashboard/forum-detail/${post.id}`, { - state: { post, from: "/dashboard/user-posts" }, - }); - }} - > - {post.title} -

-
-

- {post.content && post.content.length > 150 - ? post.content.slice(0, 150) + "..." - : post.content} -

-
- - - - {new Date(post.date_created).toLocaleDateString( - "en-US", - { - year: "numeric", - month: "short", - day: "numeric", - } - )} -
- -
-
-
- {post.comment_count} - Comment -
-
-
-
-
- ))} -
- ) : ( -
-
+ + {/* Tab Navigation */} +
+
+
+
+
-

- No published posts found. -

-

- Start creating content to see your published posts here! -

-
- )} -
- )} - - {activeTab === "pending" && ( -
-
-
-

- Awaiting Approval -

-
-
- - {pendingPosts.length > 0 ? ( -
- {pendingPosts.map((post) => ( -
-
- -
-

- {post.title} -

-

- {post.content} -

- -
- - - - Submitted{" "} - {new Date(post.created_at).toLocaleDateString("en-US", { - year: "numeric", - month: "short", - day: "numeric", - })} -
- -
-
-
-
- Under Review -
-
-
-
-
- ))} -
- ) : ( -
-
- + + Published ({filteredApprovedPosts.length}) + + + +
+
+ + {/* Filters only show for published tab */} + {activeTab === "published" && ( + <> + {/* Mobile Filter Toggle */} +
+

Filters

+
-

- All clear! No posts waiting for review. -

-

- Your submissions will appear here while awaiting approval. -

-
+ + {/* Filter Controls */} +
+
+ {/* Search Filter - Takes 2 columns to be wider */} +
+ + + setFilters({ ...filters, searchText: e.target.value }) + } + className="input input-sm input-bordered w-full text-sm" + /> +
+ + {/* Topic Filter */} +
+ + +
+ + {/* Date Sort */} +
+ + +
+ + {/* Specific Date Filter */} +
+ + { + if (date) { + try { + const validDate = new Date(date); + if (!isNaN(validDate.getTime())) { + setFilters({ + ...filters, + selectedDate: validDate, + }); + } else { + console.error("Invalid date selected:", date); + setFilters({ ...filters, selectedDate: null }); + } + } catch (err) { + console.error("Error processing date:", err); + setFilters({ ...filters, selectedDate: null }); + } + } else { + setFilters({ ...filters, selectedDate: null }); + } + }} + placeholder="Select date" + maxDate={new Date()} + dateFormat="MM/dd/yyyy" + showYearDropdown + showMonthDropdown + isClearable={true} + /> +
+ + {/* Comment Sort */} +
+ + +
+ + {/* Clear Filters & Apply Buttons */} +
+ +
+ + +
+
+
+ + {/* Active Filters Display */} +
+ {filters.topic !== "all" && ( + + Topic:{" "} + {filters.topic === "general" + ? "General" + : "Daily Challenge"} + + )} + {filters.searchText && filters.searchText.trim() && ( + + Search: "{filters.searchText.trim()}" + + )} + {filters.dateSort !== "newest" && ( + + Sort:{" "} + {filters.dateSort === "oldest" + ? "Oldest First" + : "Most Recent"} + + )} + {filters.selectedDate && ( + + Date:{" "} + {filters.selectedDate instanceof Date + ? filters.selectedDate.toLocaleDateString() + : new Date(filters.selectedDate).toLocaleDateString()} + + )} + {filters.commentSort !== "none" && ( + + {filters.commentSort === "most-popular" + ? "Most Popular" + : "Least Popular"} + + )} +
+
+ )}
- )} +
+ + {/* Main Content Area */} +
+ {loading ? ( +
+ +
+ ) : ( +
+
+
+ {/* Tab Content */} +
+ {activeTab === "published" && ( +
+
+
+

+ Your Published Posts +

+
+
+ + {filteredApprovedPosts.length > 0 ? ( +
+ {filteredApprovedPosts.map((post) => ( +
+
+
+

{ + navigate( + `/dashboard/forum-detail/${post.id}`, + { + state: { + post, + from: "/dashboard/user-posts", + }, + } + ); + }} + > + {post.title} +

+
+ + {/* Topic Badge */} +
+ + {post.topic === "general" + ? "General" + : "Daily Challenge"} + +
+ +

+ {post.content && post.content.length > 150 + ? post.content.slice(0, 150) + "..." + : post.content} +

+
+ + + + {new Date( + post.date_created + ).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + })} +
+ +
+
+
+ {post.comment_count} + Comment +
+
+
+
+
+ ))} +
+ ) : ( +
+
+ + + +
+

+ No published posts found. +

+

+ {appliedFilters.searchText || + appliedFilters.topic !== "all" || + appliedFilters.selectedDate || + appliedFilters.commentSort !== "none" + ? "Try adjusting your filters to see more posts." + : "Start creating content to see your published posts here!"} +

+ {(appliedFilters.searchText || + appliedFilters.topic !== "all" || + appliedFilters.selectedDate || + appliedFilters.commentSort !== "none") && ( + + )} +
+ )} +
+ )} + + {activeTab === "pending" && ( +
+
+
+

+ Awaiting Approval +

+
+
+ + {pendingPosts.length > 0 ? ( +
+ {pendingPosts.map((post) => ( +
+
+ +
+

+ {post.title} +

+

+ {post.content} +

+ +
+ + + + Submitted{" "} + {new Date( + post.created_at + ).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + })} +
+ +
+
+
+
+ Under Review +
+
+
+
+
+ ))} +
+ ) : ( +
+
+ + + +
+

+ All clear! No posts waiting for review. +

+

+ Your submissions will appear here while awaiting + approval. +

+
+ )} +
+ )} +
+
+
+
+ )} +