From 2531fd0d08c4b2bb7b76582ea0d4ec6aa270141d Mon Sep 17 00:00:00 2001 From: Swoyam Date: Sun, 12 Oct 2025 15:16:39 +0530 Subject: [PATCH 1/3] Removed Filter logic from client side --- src/client/src/components/layout/Body.js | 29 +++++++----- src/client/src/components/layout/Main.js | 18 +++++-- .../src/components/problems/ProblemGrid.js | 47 ++++--------------- src/client/src/services/api.js | 6 +-- 4 files changed, 41 insertions(+), 59 deletions(-) diff --git a/src/client/src/components/layout/Body.js b/src/client/src/components/layout/Body.js index 764138a..3359d5c 100644 --- a/src/client/src/components/layout/Body.js +++ b/src/client/src/components/layout/Body.js @@ -1,21 +1,26 @@ import React from "react"; import ProblemGrid from "../problems/ProblemGrid"; -import Pagination from "./Pagination"; // Add this import +import Pagination from "./Pagination"; import "../../styles/layout/Body.css"; -const Body = ({ - problems, - loading, - error, - filters, - currentPage, - totalPages, - onPageChange +const Body = ({ + problems, + loading, + error, + filters, + currentPage, + totalPages, + onPageChange, + hasActiveFilters, }) => { if (loading) { return (
-
Loading problems...
+
+ {hasActiveFilters + ? "Loading filtered problems..." + : "Loading problems..."} +
); } @@ -34,7 +39,7 @@ const Body = ({ return (
- + { const PROBLEMS_PER_PAGE = 50; + // Check if any filters are active + const hasActiveFilters = useMemo(() => { + return !!(filters.company || filters.timePeriod || filters.difficulty); + }, [filters]); + useEffect(() => { const loadProblems = async () => { setLoading(true); try { + // ALWAYS pass filters to API - backend will ignore empty ones const data = await fetchProblems(currentPage, PROBLEMS_PER_PAGE, filters); setProblems(data); setError(null); // Estimate total pages based on response if (data.length < PROBLEMS_PER_PAGE) { - setTotalPages(currentPage); + setTotalPages(currentPage); // This is the last page } else { - setTotalPages(currentPage + 1); + setTotalPages(currentPage + 1); // There might be more pages } } catch (err) { setError("Failed to fetch problems. Please try again later."); @@ -41,10 +47,12 @@ const Main = () => { }; loadProblems(); - }, [currentPage, filters]); + }, [currentPage, filters]); // Re-fetch when page OR filters change - // Extract unique company names from problems + // Extract unique company names from ALL problems (initial load for dropdown) const companies = useMemo(() => { + // We need to load companies separately or keep the existing approach + // For now, let's keep the current implementation const companySet = new Set(); problems.forEach((problem) => { if (problem.companies) { @@ -63,7 +71,6 @@ const Main = () => { const handlePageChange = (page) => { setCurrentPage(page); - // Scroll to top when page changes window.scrollTo({ top: 0, behavior: 'smooth' }); }; @@ -82,6 +89,7 @@ const Main = () => { currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} + hasActiveFilters={hasActiveFilters} />
); diff --git a/src/client/src/components/problems/ProblemGrid.js b/src/client/src/components/problems/ProblemGrid.js index 5de0095..86e3ce2 100644 --- a/src/client/src/components/problems/ProblemGrid.js +++ b/src/client/src/components/problems/ProblemGrid.js @@ -1,58 +1,27 @@ -import React, { useMemo } from "react"; +import React from "react"; import ProblemCard from "./ProblemCard"; import "../../styles/components/ProblemGrid.css"; -const ProblemGrid = ({ problems, filters }) => { - const filteredProblems = useMemo(() => { - if (!filters.company && !filters.timePeriod && !filters.difficulty) { - return problems; - } +const ProblemGrid = ({ problems, hasActiveFilters }) => { - return problems.filter((problem) => { - // Company filter - if ( - filters.company && - (!problem.companies || !problem.companies[filters.company]) - ) { - return false; - } - - // Time period filter - only apply if both company and time period are selected - if (filters.company && filters.timePeriod) { - if ( - !problem.companies?.[filters.company]?.includes(filters.timePeriod) - ) { - return false; - } - } - - // Difficulty filter - if ( - filters.difficulty && - problem.difficulty !== Number(filters.difficulty) - ) { - return false; - } - - return true; - }); - }, [problems, filters]); - - if (filteredProblems.length === 0) { + if (problems.length === 0) { return (

No problems found matching your criteria.

+ {hasActiveFilters && ( +

Try adjusting your filters or clearing them to see all problems.

+ )}
); } return (
- {filteredProblems.map((problem) => ( + {problems.map((problem) => ( ))}
); }; -export default ProblemGrid; +export default ProblemGrid; \ No newline at end of file diff --git a/src/client/src/services/api.js b/src/client/src/services/api.js index b57069a..762d1c6 100644 --- a/src/client/src/services/api.js +++ b/src/client/src/services/api.js @@ -10,13 +10,13 @@ export const fetchProblems = async (page = 1, limit = 50, filters = {}) => { // Add filter parameters if they exist if (filters.company) { - params.append('companies', filters.company); + params.append('company', filters.company); } if (filters.difficulty) { - params.append('difficulties', filters.difficulty); + params.append('difficulty', filters.difficulty); } if (filters.timePeriod) { - params.append('tags', filters.timePeriod); + params.append('tag', filters.timePeriod); } const response = await fetch(`${API_BASE_URL}/problems?${params}`); From 9f5a6d859883a0713075b8030b3d980f572148e8 Mon Sep 17 00:00:00 2001 From: Swoyam Date: Sun, 12 Oct 2025 16:01:59 +0530 Subject: [PATCH 2/3] List implementation --- src/client/src/App.js | 2 +- src/client/src/components/layout/Body.js | 11 +- src/client/src/components/layout/Main.js | 5 +- .../src/components/layout/ViewToggle.js | 25 +++ .../src/components/problems/ProblemGrid.js | 21 ++- .../src/components/problems/ProblemList.js | 53 +++++++ .../src/styles/components/ProblemCard.css | 60 +++---- .../src/styles/components/ProblemGrid.css | 12 +- .../src/styles/components/ProblemList.css | 146 ++++++++++++++++++ src/client/src/styles/layout/Body.css | 15 +- src/client/src/styles/layout/ViewToggle.css | 28 ++++ 11 files changed, 325 insertions(+), 53 deletions(-) create mode 100644 src/client/src/components/layout/ViewToggle.js create mode 100644 src/client/src/components/problems/ProblemList.js create mode 100644 src/client/src/styles/components/ProblemList.css create mode 100644 src/client/src/styles/layout/ViewToggle.css diff --git a/src/client/src/App.js b/src/client/src/App.js index 10f3213..23f2ce2 100644 --- a/src/client/src/App.js +++ b/src/client/src/App.js @@ -14,7 +14,7 @@ function App() { } /> } /> -