Index: backend/controllers/forumController.js =================================================================== --- backend/controllers/forumController.js (revision 8922144d9fac2a429ee51c518f8b7a0267780bd7) +++ backend/controllers/forumController.js (revision f25586dfdba4538cd7064e7e0bd2162b272c75d6) @@ -164,20 +164,19 @@ console.log("Received query params:", req.query); console.log("Request URL:", req.originalUrl); - + // Extract parameters with strict type checking and debug output const page = req.query.page !== undefined ? parseInt(req.query.page) : 0; - const limit = req.query.limit !== undefined ? parseInt(req.query.limit) : 20; - + const limit = + req.query.limit !== undefined ? parseInt(req.query.limit) : 20; + // Topic needs special handling const topic = req.query.topic || null; console.log(`Topic parameter received: "${topic}"`); - + const sort = req.query.sort || null; const date = req.query.date || null; const commentSort = req.query.commentSort || null; const search = req.query.search || null; - - console.log("Parsed parameters:", { page, limit, topic, sort, date, commentSort, search }); - + const skip = page * limit; const take = limit; @@ -185,24 +184,17 @@ // Build filter conditions const whereCondition = {}; - + // Filter by topic if provided - if (topic && topic !== 'all') { - console.log(`Filtering by topic: "${topic}" (type: ${typeof topic})`); - - // Force string comparison with trim to handle potential whitespace issues - const trimmedTopic = topic.toString().trim(); - console.log(`Trimmed topic: "${trimmedTopic}"`); - - // Debug all current topics in database - console.log("DEBUG - Will now run a direct DB query to check topics"); - + if (topic && topic !== "all") { try { - // This will log the actual filtered posts count directly from the database + const trimmedTopic = topic.trim(); const dbPosts = await prisma.forum_posts.findMany({ where: { topic: trimmedTopic }, - select: { id: true } + select: { id: true }, }); - console.log(`DIRECT DB QUERY: Found ${dbPosts.length} posts with topic "${trimmedTopic}"`); - + console.log( + `DIRECT DB QUERY: Found ${dbPosts.length} posts with topic "${trimmedTopic}"` + ); + // Set the correct topic filter whereCondition.topic = trimmedTopic; @@ -212,16 +204,17 @@ whereCondition.topic = topic; } - + console.log("Final whereCondition.topic set to:", whereCondition.topic); } - + // Filter by specific date if provided if (date) { console.log(`Filtering by specific date: "${date}"`); - + try { // Create a date object from the provided date string const selectedDate = new Date(date); - + console.log("SELECTED DATE", selectedDate); + // Ensure the date is valid if (isNaN(selectedDate.getTime())) { @@ -229,32 +222,7 @@ } else { // Set to beginning of the day (midnight) - selectedDate.setHours(0, 0, 0, 0); - - // Calculate the end of the day (next day midnight) - const nextDay = new Date(selectedDate); - nextDay.setDate(nextDay.getDate() + 1); - - console.log(`Date range: ${selectedDate.toISOString()} to ${nextDay.toISOString()}`); - + // Add to where condition - whereCondition.date_created = { - gte: selectedDate, - lt: nextDay - }; - - // Verify with a direct database query to check post count for this date - try { - const dateCheckResult = await prisma.forum_posts.count({ - where: { - date_created: { - gte: selectedDate, - lt: nextDay - } - } - }); - console.log(`DIRECT DB CHECK: Found ${dateCheckResult} posts on date ${date}`); - } catch (err) { - console.error("Error in direct DB date check:", err); - } + whereCondition.date_created = selectedDate; } } catch (err) { @@ -267,5 +235,5 @@ const searchTerm = search.trim(); console.log(`Filtering by search text: "${searchTerm}"`); - + // Use Prisma's OR condition to search in both title and content // Case-insensitive search using contains with mode: 'insensitive' @@ -275,26 +243,23 @@ title: { contains: searchTerm, - mode: 'insensitive' - } + mode: "insensitive", + }, }, { content: { contains: searchTerm, - mode: 'insensitive' - } - } - ] + mode: "insensitive", + }, + }, + ], }; - + // If we already have other conditions, combine them with AND if (Object.keys(whereCondition).length > 0) { - whereCondition.AND = [ - { ...whereCondition }, - searchCondition - ]; - + whereCondition.AND = [{ ...whereCondition }, searchCondition]; + // Clear the original conditions since they're now in AND - Object.keys(whereCondition).forEach(key => { - if (key !== 'AND') { + Object.keys(whereCondition).forEach((key) => { + if (key !== "AND") { delete whereCondition[key]; } @@ -304,42 +269,49 @@ Object.assign(whereCondition, searchCondition); } - + console.log("Search condition applied:", JSON.stringify(searchCondition)); } - + console.log("Using where condition:", JSON.stringify(whereCondition)); - + // Determine ordering - using an array to support multiple sorting criteria let orderBy = []; - + // First, handle comment popularity sorting if specified - if (commentSort === 'most-popular') { + if (commentSort === "most-popular") { console.log("Applying MOST popular sorting"); - orderBy.push({ comment_count: 'desc' }); - + orderBy.push({ comment_count: "desc" }); + // Add date as secondary sort to make results consistent - orderBy.push({ date_created: 'desc' }); - console.log("Added secondary date sorting (newest first) for consistency"); - } else if (commentSort === 'least-popular') { + orderBy.push({ date_created: "desc" }); + console.log( + "Added secondary date sorting (newest first) for consistency" + ); + } else if (commentSort === "least-popular") { console.log("Applying LEAST popular sorting"); - orderBy.push({ comment_count: 'asc' }); - + orderBy.push({ comment_count: "asc" }); + // Add date as secondary sort to make results consistent - orderBy.push({ date_created: 'desc' }); - console.log("Added secondary date sorting (newest first) for consistency"); - } + orderBy.push({ date_created: "desc" }); + console.log( + "Added secondary date sorting (newest first) for consistency" + ); + } // Only apply date sorting as primary sort if comment sorting isn't specified else { // Always apply date sorting (either as primary or secondary criterion) - if (sort === 'oldest') { + if (sort === "oldest") { console.log("Applying oldest first date sorting as primary criterion"); - orderBy.push({ date_created: 'asc' }); + orderBy.push({ date_created: "asc" }); } else { console.log("Applying newest first date sorting as primary criterion"); - orderBy.push({ date_created: 'desc' }); - } - } - + orderBy.push({ date_created: "desc" }); + } + } + console.log("Final sort order:", JSON.stringify(orderBy)); + const totalCount = await prisma.forum_posts.count({ + where: whereCondition, + }); // Fetch posts with filters @@ -358,5 +330,5 @@ }, }); - + const forumPosts = allPosts.map((post) => ({ ...post, @@ -369,23 +341,27 @@ orderBy, skip, - take - }); - + take, + }); + // Log topic distribution to help debug topic filtering issues - if (topic && topic !== 'all') { + if (topic && topic !== "all") { const topicsInResult = {}; - forumPosts.forEach(post => { + forumPosts.forEach((post) => { topicsInResult[post.topic] = (topicsInResult[post.topic] || 0) + 1; }); - + console.log("TOPIC DISTRIBUTION IN RESULTS:", topicsInResult); - + // Check if filtering was successful - const nonMatchingCount = forumPosts.filter(post => post.topic !== topic).length; + const nonMatchingCount = forumPosts.filter( + (post) => post.topic !== topic + ).length; if (nonMatchingCount > 0) { - console.warn(`WARNING: Found ${nonMatchingCount} posts with wrong topic in results!`); - } - } - + console.warn( + `WARNING: Found ${nonMatchingCount} posts with wrong topic in results!` + ); + } + } + // Log sorting analysis to help with debugging if (forumPosts.length > 0) { @@ -393,17 +369,21 @@ if (commentSort) { console.log("COMMENT COUNT ANALYSIS:"); - const counts = forumPosts.map(p => p.comment_count); - console.log(`- Min: ${Math.min(...counts)}, Max: ${Math.max(...counts)}`); - } - + const counts = forumPosts.map((p) => p.comment_count); + console.log( + `- Min: ${Math.min(...counts)}, Max: ${Math.max(...counts)}` + ); + } + // Date sorting and filtering analysis console.log("DATE ANALYSIS:"); - const dates = forumPosts.map(p => new Date(p.date_created).getTime()); - + const dates = forumPosts.map((p) => new Date(p.date_created).getTime()); + if (dates.length > 0) { const minDate = new Date(Math.min(...dates)); const maxDate = new Date(Math.max(...dates)); - console.log(`- Posts date range: ${minDate.toISOString()} to ${maxDate.toISOString()}`); - + console.log( + `- Posts date range: ${minDate.toISOString()} to ${maxDate.toISOString()}` + ); + // If specific date filter was applied, verify it's working if (date) { @@ -412,46 +392,58 @@ const nextDay = new Date(filterDate); nextDay.setDate(nextDay.getDate() + 1); - - console.log(`- Specific date filter: ${filterDate.toISOString()} to ${nextDay.toISOString()}`); - + + console.log( + `- Specific date filter: ${filterDate.toISOString()} to ${nextDay.toISOString()}` + ); + // Check if all posts are within the filtered date range - const postsInRange = forumPosts.filter(p => { + const postsInRange = forumPosts.filter((p) => { const postDate = new Date(p.date_created); return postDate >= filterDate && postDate < nextDay; }); - - console.log(`- Posts matching date filter: ${postsInRange.length}/${forumPosts.length}`); - + + console.log( + `- Posts matching date filter: ${postsInRange.length}/${forumPosts.length}` + ); + if (postsInRange.length < forumPosts.length) { - console.warn('⚠️ WARNING: Some posts do not match the date filter!'); + console.warn( + "⚠️ WARNING: Some posts do not match the date filter!" + ); } } } else { - console.log('- No posts to analyze dates'); - } - + console.log("- No posts to analyze dates"); + } + // First three posts details - console.log(`FIRST THREE POSTS:`, forumPosts.slice(0, 3).map(p => ({ - id: p.id, - topic: p.topic, - comments: p.comment_count, - date: new Date(p.date_created).toISOString().split('T')[0] - }))); + console.log( + `FIRST THREE POSTS:`, + forumPosts.slice(0, 3).map((p) => ({ + id: p.id, + topic: p.topic, + comments: p.comment_count, + date: new Date(p.date_created).toISOString().split("T")[0], + })) + ); } // Set cache control headers to prevent caching - res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private'); - res.set('Pragma', 'no-cache'); - res.set('Expires', '0'); - + res.set("Cache-Control", "no-store, no-cache, must-revalidate, private"); + res.set("Pragma", "no-cache"); + res.set("Expires", "0"); + // Add response information to help debug the filtering - res.set('X-Total-Posts', forumPosts.length.toString()); - res.set('X-Filter-Topic', topic || 'none'); - res.set('X-Filter-Applied', JSON.stringify(whereCondition)); - res.set('X-Sort-Order', JSON.stringify(orderBy)); - - console.log(`RESPONSE: Sending ${forumPosts.length} posts with filter:`, whereCondition); - - res.status(200).json(forumPosts); + res.set("X-Total-Posts", forumPosts.length.toString()); + res.set("X-Filter-Topic", topic || "none"); + res.set("X-Filter-Applied", JSON.stringify(whereCondition)); + res.set("X-Sort-Order", JSON.stringify(orderBy)); + + console.log( + `RESPONSE: Sending ${forumPosts.length} posts with filter:`, + whereCondition + ); + + res.status(200).json({ forumPosts, totalCount }); } catch (err) { console.error("Server error:", err); Index: client/src/Dashboard/components/Forum.jsx =================================================================== --- client/src/Dashboard/components/Forum.jsx (revision 8922144d9fac2a429ee51c518f8b7a0267780bd7) +++ client/src/Dashboard/components/Forum.jsx (revision f25586dfdba4538cd7064e7e0bd2162b272c75d6) @@ -14,4 +14,5 @@ const [loading, setLoading] = useState(true); const [loadingMore, setLoadingMore] = useState(false); + const [totalPages, setTotalPages] = useState(1); const [page, setPage] = useState(0); const [hasMore, setHasMore] = useState(true); @@ -26,19 +27,14 @@ const { user } = useAuth(); - // Filter states - // Default filters used throughout the component 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 + topic: "all", + dateSort: "newest", + selectedDate: null, + commentSort: "none", + searchText: "", }; - // Initialize filters state with the default values const [filters, setFilters] = useState({ ...defaultFilters }); const [showFilters, setShowFilters] = useState(false); - - console.log(user); const showModal = (message, type = "info", postId = null) => { @@ -60,16 +56,5 @@ // Only fetch posts on component mount useEffect(() => { - // Always use the default filters for the initial fetch - console.log("Initial fetch with default filters"); fetchPosts(0, false, { ...defaultFilters }); - - // Adding event listener to help with debugging - window.addEventListener("forumFilterDebug", () => { - console.log("Current filters:", filters); - }); - - return () => { - window.removeEventListener("forumFilterDebug", () => {}); - }; }, []); @@ -86,24 +71,13 @@ } - // Use the provided filters or the current state - // Make sure to use a new object to avoid reference issues const filtersToApply = activeFilters ? { ...activeFilters } : { ...filters }; - console.log( - `FETCH POSTS: Page=${pageNum}, Append=${append}, Filters:`, - JSON.stringify(filtersToApply) - ); - - // Validate filters to ensure they're not null or undefined Object.keys(filtersToApply).forEach((key) => { if (filtersToApply[key] === undefined) { - console.warn(`Filter value for ${key} is undefined, setting to null`); filtersToApply[key] = null; } }); - - console.log("Sending filters to API:", filtersToApply); const response = await getForumPosts( @@ -112,254 +86,22 @@ filtersToApply ); - // The response is already the data due to the apiClient interceptor - let data = response || []; - console.log("Fetched forum posts:", data); - console.log("Total posts fetched:", data.length); - console.log("API returned data for filters:", filtersToApply); - - // COMPREHENSIVE CLIENT-SIDE FILTERING WORKAROUND - // Apply client-side filtering for any filter that the server might have missed - let appliedClientSideFiltering = false; - - // 1. Filter by topic if needed - if ( - filtersToApply.topic && - filtersToApply.topic !== "all" && - data.length > 0 - ) { - // Check if we need topic filtering by seeing if any posts don't match the requested topic - const nonMatchingPosts = data.some( - (post) => post.topic !== filtersToApply.topic - ); - - if (nonMatchingPosts) { - console.log( - "Applying client-side topic filtering for:", - filtersToApply.topic - ); - const beforeCount = data.length; - data = data.filter((post) => post.topic === filtersToApply.topic); - console.log( - `Client-side topic filtered: ${beforeCount} → ${data.length} posts` - ); - appliedClientSideFiltering = true; - } + 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); } - // 2. Apply comment popularity sorting if needed - if ( - filtersToApply.commentSort && - filtersToApply.commentSort !== "none" && - data.length > 1 - ) { - // Check if the data is already properly sorted by comment count - const isAlreadySorted = (() => { - // For "most-popular", check if posts are sorted in descending order by comment_count - if (filtersToApply.commentSort === "most-popular") { - for (let i = 0; i < data.length - 1; i++) { - if (data[i].comment_count < data[i + 1].comment_count) { - return false; // Found an out-of-order pair - } - } - } - // For "least-popular", check if posts are sorted in ascending order by comment_count - else if (filtersToApply.commentSort === "least-popular") { - for (let i = 0; i < data.length - 1; i++) { - if (data[i].comment_count > data[i + 1].comment_count) { - return false; // Found an out-of-order pair - } - } - } - return true; // Data is properly sorted - })(); - - if (!isAlreadySorted) { - console.log( - `Applying client-side ${filtersToApply.commentSort} sorting` - ); - - data = [...data].sort((a, b) => { - if (filtersToApply.commentSort === "most-popular") { - // Sort by comment count (high to low), then by date (new to old) - return ( - b.comment_count - a.comment_count || - new Date(b.date_created) - new Date(a.date_created) - ); - } else { - // Sort by comment count (low to high), then by date (new to old) - return ( - a.comment_count - b.comment_count || - new Date(b.date_created) - new Date(a.date_created) - ); - } - }); - - console.log("Applied client-side popularity sorting"); - appliedClientSideFiltering = true; - } - } - - // 3. Apply specific date filtering if needed - if (filtersToApply.selectedDate && data.length > 0) { - console.log( - `Checking for specific date filtering:`, - filtersToApply.selectedDate - ); - - try { - // Create date objects for comparison (start and end of selected day) - // Handle both Date objects and string representations - const filterDate = - filtersToApply.selectedDate instanceof Date - ? new Date(filtersToApply.selectedDate) - : new Date(String(filtersToApply.selectedDate)); - - // Validate date before proceeding - if (!isNaN(filterDate.getTime())) { - filterDate.setHours(0, 0, 0, 0); // Start of day - - const nextDay = new Date(filterDate); - nextDay.setDate(nextDay.getDate() + 1); // Start of next day - - // Count posts outside the date range - const invalidDateCount = data.filter((post) => { - const postDate = new Date(post.date_created); - return postDate < filterDate || postDate >= nextDay; - }).length; - - if (invalidDateCount > 0) { - console.log( - `Found ${invalidDateCount} posts outside of selected date. Applying client-side date filtering.` - ); - - // Filter to include only posts from the selected date - const beforeCount = data.length; - data = data.filter((post) => { - const postDate = new Date(post.date_created); - return postDate >= filterDate && postDate < nextDay; - }); - - console.log( - `Client-side date filtered: ${beforeCount} → ${data.length} posts` - ); - appliedClientSideFiltering = true; - } else { - console.log("All posts already match the selected date filter"); - } - } else { - console.error( - "Invalid date selected for filtering:", - filtersToApply.selectedDate - ); - } - } catch (err) { - console.error("Error in date filtering:", err); - } - } - - // 4. Apply text search filtering if needed - if ( - filtersToApply.searchText && - filtersToApply.searchText.trim() && - data.length > 0 - ) { - const searchTerm = filtersToApply.searchText.trim().toLowerCase(); - console.log(`Applying client-side text search for: "${searchTerm}"`); - - const beforeCount = data.length; - data = data.filter((post) => { - const titleMatch = - post.title && post.title.toLowerCase().includes(searchTerm); - const contentMatch = - post.content && post.content.toLowerCase().includes(searchTerm); - return titleMatch || contentMatch; - }); - - console.log( - `Client-side text search filtered: ${beforeCount} → ${data.length} posts` - ); - appliedClientSideFiltering = true; - } - - // 5. Apply date sorting if needed (and if comment sorting wasn't applied) - if ( - filtersToApply.dateSort && - data.length > 1 && - (!filtersToApply.commentSort || filtersToApply.commentSort === "none") - ) { - // Check if the data is already properly sorted by date - const isDateSorted = (() => { - if (filtersToApply.dateSort === "oldest") { - // Check if sorted ascending by date (oldest first) - for (let i = 0; i < data.length - 1; i++) { - if ( - new Date(data[i].date_created) > - new Date(data[i + 1].date_created) - ) { - return false; - } - } - } else { - // Check if sorted descending by date (newest first) - for (let i = 0; i < data.length - 1; i++) { - if ( - new Date(data[i].date_created) < - new Date(data[i + 1].date_created) - ) { - return false; - } - } - } - return true; - })(); - - if (!isDateSorted) { - console.log( - `Applying client-side date sorting: ${filtersToApply.dateSort}` - ); - - data = [...data].sort((a, b) => { - const dateA = new Date(a.date_created); - const dateB = new Date(b.date_created); - - if (filtersToApply.dateSort === "oldest") { - // Sort by date (oldest first) - return dateA - dateB; - } else { - // Sort by date (newest first) - return dateB - dateA; - } - }); - - console.log("Applied client-side date sorting"); - appliedClientSideFiltering = true; - } - } - - if (appliedClientSideFiltering) { - console.log( - "CLIENT-SIDE FILTERING APPLIED - Final post count:", - data.length - ); - } - - if (append) { - setPosts((prevPosts) => [...prevPosts, ...data]); - } else { - setPosts(data); - } - - // Check if there are more posts to load - setHasMore(data.length === postsPerPage); setPage(pageNum); } catch (error) { console.error("Error fetching forum posts:", error); - // Show error details in console for debugging if (error.response) { console.error("Error response:", error.response); } - // Set empty posts array if there was an error if (!append) { setPosts([]); @@ -371,30 +113,13 @@ }; - const loadMore = async () => { - const nextPage = page + 1; - // Explicitly pass current filters to ensure they're applied when loading more - await fetchPosts(nextPage, true, filters); - }; - // 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 }; - console.log("Applying filters:", currentFilters); - - // Show visual confirmation that filters are being applied + setLoading(true); - // Log the current filter state - console.log("FILTER APPLICATION - Current filter state:", { - filters, - currentFilters, - page: 0, - }); - - // Reset to page 0 when applying new filters setPage(0); - // Force a small delay to ensure state updates have propagated setTimeout(async () => { try { @@ -473,5 +198,5 @@ {/* Filter Navbar */} -
+
{/* Mobile Filter Toggle */} @@ -515,4 +240,9 @@ setFilters({ ...filters, searchText: e.target.value }) } + onKeyDown={(e) => { + if (e.key === "Enter") { + applyFilters(); + } + }} className="input input-sm input-bordered w-full text-sm" /> @@ -524,4 +254,5 @@ Topic + - { - // Ensure we're storing a valid Date object - if (date) { - try { - // Create a valid date object - const validDate = new Date(date); - // Check if it's a valid date - if (!isNaN(validDate.getTime())) { - setFilters({ ...filters, selectedDate: validDate }); - } else { - console.error("Invalid date selected:", date); +
+ { + // Ensure we're storing a valid Date object + if (date) { + try { + // Create a valid date object + const validDate = new Date(date); + // Check if it's a valid 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 }); } - } catch (err) { - console.error("Error processing date:", err); + } else { + // Handle clearing the date setFilters({ ...filters, selectedDate: null }); } - } else { - // Handle clearing the date - setFilters({ ...filters, selectedDate: null }); - } - }} - placeholder="Select date" - maxDate={new Date()} - dateFormat="MM/dd/yyyy" - showYearDropdown - showMonthDropdown - isClearable={true} - /> + }} + placeholder={filters.selectedDate || "Select date"} + maxDate={new Date()} + dateFormat="MM/dd/yyyy" + showYearDropdown + showMonthDropdown + isClearable={true} + /> +
@@ -618,20 +355,26 @@ {/* Clear Filters & Apply Buttons */} -
+
- + {(filters.topic !== "all" || + filters.dateSort !== "newest" || + filters.selectedDate || + filters.commentSort !== "none" || + (filters.searchText && filters.searchText.trim())) && ( + + )}
@@ -642,37 +385,97 @@
{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"} + )} @@ -822,20 +625,68 @@ )} - {/* Load More Button */} - {hasMore && ( -
+ {!loading && totalPages > 1 && ( +
+ + {Array.from( + { length: Math.min(3, totalPages) }, + (_, idx) => ( + + ) + )} + + {totalPages > 3 && ( + ... + )} + + {page > 2 && page < totalPages - 1 && ( + + )} + + {totalPages > 3 && ( + + )} + +
Index: client/src/Dashboard/components/ManageChallenges.jsx =================================================================== --- client/src/Dashboard/components/ManageChallenges.jsx (revision 8922144d9fac2a429ee51c518f8b7a0267780bd7) +++ client/src/Dashboard/components/ManageChallenges.jsx (revision f25586dfdba4538cd7064e7e0bd2162b272c75d6) @@ -61,7 +61,9 @@ } } else { + console.log(currentPage); const data = await getAllTasks(currentPage, PAGE_SIZE); setChallenges(data.challenges); setTotalPages(data.totalPages); + console.log(totalPages); if (calendarRef.current) { @@ -100,4 +102,5 @@ const handleViewAll = async () => { setLoading(true); + setSearchParams({}); try { const data = await getAllTasks(1, PAGE_SIZE); @@ -357,10 +360,12 @@
))} - + {searchParams.get("date") && ( + + )}
) : ( @@ -369,9 +374,20 @@
)} - {!loading && challenges.length > 1 && ( -
- {Array.from({ length: totalPages }, (_, idx) => ( + {!loading && totalPages > 1 && ( +
+ {/* Previous Arrow */} + + + {/* First 3 page numbers */} + {Array.from({ length: Math.min(3, totalPages) }, (_, idx) => ( + )} + + {/* Last page button if more than 3 pages */} + {totalPages > 3 && ( + + )} + + {/* Next Arrow */} +
)} @@ -388,5 +445,5 @@
- {/* Modal (unchanged) */} + {/* Modal*/} {modal.isOpen && (
-
-
-

- Your Published Posts -

-
-
- {filteredApprovedPosts.length > 0 ? (
Index: client/src/index.css =================================================================== --- client/src/index.css (revision 8922144d9fac2a429ee51c518f8b7a0267780bd7) +++ client/src/index.css (revision f25586dfdba4538cd7064e7e0bd2162b272c75d6) @@ -112,4 +112,9 @@ --sidebar-ring: oklch(0.556 0 0); } +.custom-datepicker input { + border: none !important; + background: transparent !important; + box-shadow: none !important; +} @layer base { Index: client/src/services/forumService.js =================================================================== --- client/src/services/forumService.js (revision 8922144d9fac2a429ee51c518f8b7a0267780bd7) +++ client/src/services/forumService.js (revision f25586dfdba4538cd7064e7e0bd2162b272c75d6) @@ -5,26 +5,26 @@ page = Number(page) || 0; limit = Number(limit) || 20; - + // Add timestamp to prevent caching const timestamp = new Date().getTime(); let url = `/forum/posts?page=${page}&limit=${limit}&_t=${timestamp}`; - + // Add filters to the URL if they exist if (filters) { console.log("Service processing filters:", JSON.stringify(filters)); - + // Add topic filter - make sure it's really topic=daily-challenge, not topic=daily%2Dchallenge - if (filters.topic && filters.topic !== 'all') { + if (filters.topic && filters.topic !== "all") { console.log(`Adding topic filter: ${filters.topic}`); url += `&topic=${filters.topic}`; } - + // Add sort filter - always include date sort preference if (filters.dateSort) { console.log(`Adding date sort filter: ${filters.dateSort}`); url += `&sort=${filters.dateSort}`; - + // Log the expected behavior - if (filters.dateSort === 'oldest') { + if (filters.dateSort === "oldest") { console.log("Expecting posts sorted with oldest first"); } else { @@ -32,31 +32,40 @@ } } - + // Add specific date filter if (filters.selectedDate) { try { // Ensure we have a proper Date object - const dateObj = filters.selectedDate instanceof Date ? - filters.selectedDate : - new Date(String(filters.selectedDate)); - + const dateObj = + filters.selectedDate instanceof Date + ? filters.selectedDate + : new Date(String(filters.selectedDate)); + // Validate the date before proceeding if (!isNaN(dateObj.getTime())) { - const formattedDate = dateObj.toISOString().split('T')[0]; + const formattedDate = dateObj.toISOString().split("T")[0]; console.log(`Adding specific date filter: ${formattedDate}`); url += `&date=${formattedDate}`; - + // Log combined filter details when using specific date with other filters - if (filters.topic && filters.topic !== 'all') { - console.log(`COMBINED FILTERS: Topic=${filters.topic} with specific date=${formattedDate}`); - } - - if (filters.commentSort && filters.commentSort !== 'none') { - console.log(`COMBINED FILTERS: Specific date=${formattedDate} with ${filters.commentSort} sorting`); - } - - if (filters.dateSort === 'oldest') { - console.log(`COMBINED FILTERS: Specific date=${formattedDate} with oldest-first sorting`); - console.log('NOTE: When using specific date, time-of-day ordering still applies'); + if (filters.topic && filters.topic !== "all") { + console.log( + `COMBINED FILTERS: Topic=${filters.topic} with specific date=${formattedDate}` + ); + } + + if (filters.commentSort && filters.commentSort !== "none") { + console.log( + `COMBINED FILTERS: Specific date=${formattedDate} with ${filters.commentSort} sorting` + ); + } + + if (filters.dateSort === "oldest") { + console.log( + `COMBINED FILTERS: Specific date=${formattedDate} with oldest-first sorting` + ); + console.log( + "NOTE: When using specific date, time-of-day ordering still applies" + ); } } else { @@ -67,21 +76,25 @@ } } - + // Add comment sort filter - if (filters.commentSort && filters.commentSort !== 'none') { + if (filters.commentSort && filters.commentSort !== "none") { console.log(`Adding comment sort filter: ${filters.commentSort}`); url += `&commentSort=${filters.commentSort}`; - + // Add debug info about the expected effect - if (filters.commentSort === 'most-popular') { + if (filters.commentSort === "most-popular") { console.log("Expecting posts sorted by highest comment count first"); - } else if (filters.commentSort === 'least-popular') { + } else if (filters.commentSort === "least-popular") { console.log("Expecting posts sorted by lowest comment count first"); } - + // Log the combined filter details - if (filters.topic && filters.topic !== 'all') { - console.log(`COMBINED FILTERS: Topic=${filters.topic} with ${filters.commentSort} sorting`); - console.log(`Expected behavior: First filter by ${filters.topic}, then sort by comment count`); + if (filters.topic && filters.topic !== "all") { + console.log( + `COMBINED FILTERS: Topic=${filters.topic} with ${filters.commentSort} sorting` + ); + console.log( + `Expected behavior: First filter by ${filters.topic}, then sort by comment count` + ); } } @@ -92,32 +105,30 @@ console.log(`Adding text search filter: "${filters.searchText.trim()}"`); url += `&search=${searchTerm}`; - + // Log combined filter details when using search with other filters - if (filters.topic && filters.topic !== 'all') { - console.log(`COMBINED FILTERS: Topic=${filters.topic} with text search="${filters.searchText.trim()}"`); - } - + if (filters.topic && filters.topic !== "all") { + console.log( + `COMBINED FILTERS: Topic=${ + filters.topic + } with text search="${filters.searchText.trim()}"` + ); + } + if (filters.selectedDate) { - console.log(`COMBINED FILTERS: Text search="${filters.searchText.trim()}" with specific date filtering`); + console.log( + `COMBINED FILTERS: Text search="${filters.searchText.trim()}" with specific date filtering` + ); } } } - + console.log("Making API request to:", url); - + try { // Use apiClient to ensure authentication works properly const apiResponse = await apiClient.get(url); - + // We'll only use this log to see what's coming from the API - console.log(`API topic filter analysis:`, { - requestedFilter: filters && filters.topic ? filters.topic : 'all', - receivedPosts: apiResponse ? apiResponse.length : 0, - postsWithRequestedTopic: apiResponse ? apiResponse.filter(p => - (filters && filters.topic && filters.topic !== 'all') ? - p.topic === filters.topic : true - ).length : 0 - }); - + // Check sorting accuracy and filtering correctness if (apiResponse && apiResponse.length > 1) { @@ -126,17 +137,18 @@ try { // Ensure we have a proper Date object - const filterDate = filters.selectedDate instanceof Date ? - new Date(filters.selectedDate) : - new Date(String(filters.selectedDate)); - + const filterDate = + filters.selectedDate instanceof Date + ? new Date(filters.selectedDate) + : new Date(String(filters.selectedDate)); + // Only proceed if we have a valid date if (!isNaN(filterDate.getTime())) { filterDate.setHours(0, 0, 0, 0); // Normalize to start of day - + const nextDay = new Date(filterDate); nextDay.setDate(nextDay.getDate() + 1); - + // Check if all posts are from the selected date - const invalidDatePosts = apiResponse.filter(post => { + const invalidDatePosts = apiResponse.filter((post) => { try { const postDate = new Date(post.date_created); @@ -147,17 +159,26 @@ } }); - + if (invalidDatePosts.length > 0) { - console.log(`⚠️ SPECIFIC DATE FILTER ISSUE: Found ${invalidDatePosts.length} posts outside selected date range`); - console.log('First mismatched post:', { + console.log( + `⚠️ SPECIFIC DATE FILTER ISSUE: Found ${invalidDatePosts.length} posts outside selected date range` + ); + console.log("First mismatched post:", { id: invalidDatePosts[0].id, date: new Date(invalidDatePosts[0].date_created).toISOString(), - expectedDate: filterDate.toISOString().split('T')[0] + expectedDate: filterDate.toISOString().split("T")[0], }); } else { - console.log(`✓ Specific date filter applied correctly: All posts are from ${filterDate.toISOString().split('T')[0]}`); + console.log( + `✓ Specific date filter applied correctly: All posts are from ${ + filterDate.toISOString().split("T")[0] + }` + ); } } else { - console.error("Invalid date object for filtering validation:", filters.selectedDate); + console.error( + "Invalid date object for filtering validation:", + filters.selectedDate + ); } } catch (err) { @@ -165,16 +186,20 @@ } } - + // 2. Analyze comment popularity sorting - if (filters && filters.commentSort && filters.commentSort !== 'none') { + if (filters && filters.commentSort && filters.commentSort !== "none") { let isPopularitySorted = true; for (let i = 0; i < apiResponse.length - 1; i++) { - if (filters.commentSort === 'most-popular') { - if (apiResponse[i].comment_count < apiResponse[i + 1].comment_count) { + if (filters.commentSort === "most-popular") { + if ( + apiResponse[i].comment_count < apiResponse[i + 1].comment_count + ) { isPopularitySorted = false; break; } - } else if (filters.commentSort === 'least-popular') { - if (apiResponse[i].comment_count > apiResponse[i + 1].comment_count) { + } else if (filters.commentSort === "least-popular") { + if ( + apiResponse[i].comment_count > apiResponse[i + 1].comment_count + ) { isPopularitySorted = false; break; @@ -182,12 +207,16 @@ } } - - console.log(`Popularity sort check (${filters.commentSort}): ${isPopularitySorted ? '✓ CORRECT' : '⚠️ NEEDS CLIENT FIXING'}`); - + + console.log( + `Popularity sort check (${filters.commentSort}): ${ + isPopularitySorted ? "✓ CORRECT" : "⚠️ NEEDS CLIENT FIXING" + }` + ); + if (!isPopularitySorted) { - console.log('Will rely on client-side sorting for popularity'); - } - } - + console.log("Will rely on client-side sorting for popularity"); + } + } + // 3. Analyze date sorting (if comment sort is not active) else if (filters && filters.dateSort) { @@ -196,6 +225,6 @@ const dateA = new Date(apiResponse[i].date_created).getTime(); const dateB = new Date(apiResponse[i + 1].date_created).getTime(); - - if (filters.dateSort === 'oldest') { + + if (filters.dateSort === "oldest") { if (dateA > dateB) { isDateSorted = false; @@ -210,29 +239,42 @@ } } - - console.log(`Date sort check (${filters.dateSort}): ${isDateSorted ? '✓ CORRECT' : '⚠️ NEEDS CLIENT FIXING'}`); - + + console.log( + `Date sort check (${filters.dateSort}): ${ + isDateSorted ? "✓ CORRECT" : "⚠️ NEEDS CLIENT FIXING" + }` + ); + if (!isDateSorted) { - console.log('Will rely on client-side sorting for date ordering'); - } - } - + console.log("Will rely on client-side sorting for date ordering"); + } + } + // Log first few posts with dates to help with debugging if (apiResponse.length > 0) { - console.log("Date ordering check:", apiResponse.slice(0, 3).map(p => ({ - id: p.id, - date: new Date(p.date_created).toISOString(), - comments: p.comment_count - }))); - } - } - - console.log(`API response for ${url}:`, apiResponse ? apiResponse.length : 0, "posts"); + console.log( + "Date ordering check:", + apiResponse.slice(0, 3).map((p) => ({ + id: p.id, + date: new Date(p.date_created).toISOString(), + comments: p.comment_count, + })) + ); + } + } + + console.log( + `API response for ${url}:`, + apiResponse ? apiResponse.length : 0, + "posts" + ); if (apiResponse && apiResponse.length > 0) { // Log a sample of topics to verify what we're getting - const topicSample = apiResponse.slice(0, 3).map(p => ({id: p.id, topic: p.topic, title: p.title})); + const topicSample = apiResponse + .slice(0, 3) + .map((p) => ({ id: p.id, topic: p.topic, title: p.title })); console.log("First 3 posts:", topicSample); } - + return apiResponse; } catch (err) {