Index: client/src/Dashboard/components/CalendarPopover.jsx =================================================================== --- client/src/Dashboard/components/CalendarPopover.jsx (revision 657dee5534c7954f690825f1b493d4b9de59c835) +++ client/src/Dashboard/components/CalendarPopover.jsx (revision 657dee5534c7954f690825f1b493d4b9de59c835) @@ -0,0 +1,97 @@ +import React, { useRef, useEffect } from "react"; +import "cally"; + +const CalendarPopover = ({ isOpen, onClose, onDateSelect, selectedDate }) => { + const popoverRef = useRef(null); + const calendarRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event) => { + if (popoverRef.current && !popoverRef.current.contains(event.target)) { + onClose(); + } + }; + if (isOpen) { + document.addEventListener("mousedown", handleClickOutside); + } + // Cleanup the event listener + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [isOpen, onClose]); + + // Effect to set the calendar's initial value when it opens + useEffect(() => { + if (isOpen && calendarRef.current && selectedDate) { + const date = new Date(selectedDate); + const timezoneOffset = date.getTimezoneOffset() * 60000; + const adjustedDate = new Date(date.getTime() - timezoneOffset); + calendarRef.current.value = adjustedDate.toISOString().split("T")[0]; + } + }, [isOpen, selectedDate]); + + useEffect(() => { + const calendarEl = calendarRef.current; + + const handleDateChange = (event) => { + if (event.target.value) { + const selected = new Date(event.target.value + "T00:00:00"); + onDateSelect(selected); + onClose(); + } + }; + + if (isOpen && calendarEl) { + calendarEl.addEventListener("change", handleDateChange); + } + + return () => { + if (calendarEl) { + calendarEl.removeEventListener("change", handleDateChange); + } + }; + }, [isOpen, onDateSelect, onClose]); + if (!isOpen) { + return null; + } + + const today = new Date(); + const timezoneOffset = today.getTimezoneOffset() * 60000; // Get timezone offset in milliseconds + const adjustedDate = new Date(today.getTime() - timezoneOffset); // Adjust to UTC + const maxDate = adjustedDate.toISOString().split("T")[0]; + + return ( +
+ + + + + + + + + +
+ ); +}; + +export default CalendarPopover; Index: client/src/Dashboard/components/Forum.jsx =================================================================== --- client/src/Dashboard/components/Forum.jsx (revision 8beb957641baef47d38e53ccc506cc6dad95c451) +++ client/src/Dashboard/components/Forum.jsx (revision 657dee5534c7954f690825f1b493d4b9de59c835) @@ -8,5 +8,5 @@ import { DatePicker } from "react-daisyui-timetools"; import "react-datepicker/dist/react-datepicker.css"; - +import CalendarPopover from "./CalendarPopover"; const Forum = () => { const navigate = useNavigate(); @@ -14,4 +14,5 @@ const [loading, setLoading] = useState(true); const [loadingMore, setLoadingMore] = useState(false); + const [isCalendarOpen, setIsCalendarOpen] = useState(false); const [totalPages, setTotalPages] = useState(1); const [page, setPage] = useState(0); @@ -135,6 +136,4 @@ // Clear all filters and reset to default const clearFilters = async () => { - console.log("Clearing filters, using defaults:", defaultFilters); - // Show visual confirmation that filters are being cleared setLoading(true); @@ -170,17 +169,17 @@ {/* Sticky Header Section */}
-
-
-

+
+
+

Forum Posts

-
+
@@ -198,15 +198,35 @@ {/* Filter Navbar */} -
-
+
+
{/* Mobile Filter Toggle */}
-

Filters

+

+ Filters + {/* Active filter count indicator */} + {(filters.topic !== "all" || + filters.dateSort !== "newest" || + filters.selectedDate || + filters.commentSort !== "none" || + (filters.searchText && filters.searchText.trim())) && ( + + { + [ + filters.topic !== "all", + filters.dateSort !== "newest", + filters.selectedDate, + filters.commentSort !== "none", + filters.searchText && filters.searchText.trim(), + ].filter(Boolean).length + } + + )} +

)}
@@ -382,12 +430,14 @@
- {/* Active Filters Display */} -
+ {/* Active Filters Display - Improved Mobile Layout */} +
{filters.topic !== "all" && ( - - Topic:{" "} - {filters.topic === "general" - ? "General" - : "Daily Challenge"} + + Topic: + + {filters.topic === "general" + ? "General" + : "Daily Challenge"} +
) : ( -
+
{posts.map((post) => (
- {(post.author_name === user.name || - post.author_name === user.username || - user.isModerator) && ( - - )} - -
+
+ {(post.author_name === user.name || + post.author_name === user.username || + user.isModerator) && ( + + )} +

{ navigate(`/dashboard/forum-detail/${post.id}`, { @@ -551,72 +615,71 @@ {post.title}

-
- -
-

- + +

+

By{" "} - + {post.author_name} - - - • - - - {new Date(post.date_created).toLocaleDateString( - "en-US", - { + · + + {new Date( + post.date_created + ).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", - } - )} + })} + +

+
+ +
+ + {post.topic === "general" + ? "General" + : "Daily Challenge"} + {post.challengeTitle && ( + + {post.challengeTitle} + + )} +
+ +

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

- {/* Topic Badge */} - - {post.topic === "general" - ? "General" - : "Daily Challenge"} - - - {/* Challenge Title Badge */} - {post.challengeTitle && ( - - {post.challengeTitle} - - )} -
- -

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

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

- {post.comment_count} -

- Comment +
+
{ + navigate( + `/dashboard/forum-detail/${post.id}`, + { + state: { post }, + } + ); + }} + > +

+ {post.comment_count} +

+ Comment +
+
@@ -626,7 +689,7 @@ {!loading && totalPages > 1 && ( -
+