ClientProject #2978
open
ClientProject #2748: Issue : Full Layout Implementation for Mobile, Tablet, and Desktop Responsiveness
Added by Nazmul Hossain Shovon 8 months ago.
Updated 8 months ago.
Due date:
08/22/2025 (about 8 months late)
Description
Page-Specific Filter Logic & Server Components
- Introduced page-specific filter logic for truck and Korean stock pages.
- Added new server components: TruckFilterServer and KoreanFilterServer to fetch and provide relevant filter data for their respective pages.
- Updated main stock pages (all-stock, korean-stock, stock-list, truck-stock) to use these server components and display a loading skeleton (FilterSearchSkeleton) while loading.
FilterSearch Component Enhancements
- Refactored FilterSearch to support dynamic filter options and page-specific logic.
- Added a "3rd party" filter toggle (FilterCheck) that switches between bulk and order filter data.
- Disabled the "3rd party" toggle for truck and Korean stock pages.
- Improved comboboxes to show counts and support disabling, with better state management for all filter fields.
- Added a debounce/delay (500ms) to the filter toggle button to prevent rapid toggling.
UI/UX Improvements
- Added a new FilterSearchSkeleton for loading states.
- Improved grid/collapse logic for filter fields using a custom hook (useFilterSearchGrid).
- Enhanced combobox and filter input UX, including disabling and showing counts.
Constants & Configs
- Centralized page identifiers (TRUCK_PAGE, KOREAN_PAGE, HOME_PAGE) and filter toggle delay in constants.ts.
- Modularized filter configs in filterConfigs.ts for easier maintenance and extension.
- Status changed from Pending to In Progress
- % Done changed from 0 to 90
ref:
https://github.com/pqsjapan/frontendV1.1/commit/8aa06e8788bfe7baba658b272203fce11f08fd31
Key changes:
- Refactored filter search logic: Moved filter configuration and grid logic into separate, modular files (filterConfigs.ts and useFilterSearchGrid.ts) for better maintainability and clarity.
- Dynamic filter options: The filter search now fetches and displays dynamic options for makers, models, body types, fuels, price, mileage, engine size, steering, transmission, and years.
- Improved UI responsiveness: The filter grid adapts to screen size and supports smooth expand/collapse animations.
- Enhanced Combobox: Added onChange support and improved option handling.
- Service updates: Added new service functions (getFuels, getSteerings) to provide filter data.
- Page update: The main page now loads all filter data asynchronously and passes it to the filter search component.
ref:
https://github.com/pqsjapan/frontendV1.1/commit/f62a004880a257931f857f3375cf20d072be5bc0
Summary of Key Changes:
FilterSearch Refactor :
- Replaced direct data fetching in page.tsx with a new server component FilterSearchServer that fetches all filter data and passes it to the client component.
- FilterSearch now supports toggling between "3rd party" and "order" filter data using a new checkbox (FilterCheck). When toggled, it dynamically switches filter options and fetches models from the appropriate API.
- Added state management for all filter fields, including comboboxes and input, and mapped their values to search query parameters on search.
- The combobox now displays option counts when the filter is checked and supports disabling.
UI/UX Improvements :
- Added a skeleton loader (FilterSearchSkeleton) for the filter search area to improve perceived performance during data loading.
- Improved accessibility and disabled state handling for comboboxes.
Code Structure :
- Centralized filter configuration logic to handle both "bulk" and "order" data sources.
- Updated the filter configs to include counts for all options.
- Added a new server component (FilterSearchServer.tsx) to fetch and provide all necessary filter data.
Miscellaneous :
- Updated FilterCheck to be a controlled component.
- Cleaned up and optimized state and effect usage in FilterSearch.
- % Done changed from 90 to 100
ref:
https://github.com/pqsjapan/frontendV1.1/commit/0a5d8773abda2849ecd0d53120bfa6dd1d67eae7
Summary of Key Changes
FilterSearch Component Refactor :
- Added a page prop to FilterSearch to enable page-specific filter logic.
- Disabled the "3rd party" checkbox for Truck and Korean stock pages.
- Adjusted model fetching logic to use different API endpoints based on the current page (TRUCK_PAGE, KOREAN_PAGE, HOME_PAGE).
Server Components for Filters :
Added new server components:
- TruckFilterServer for /truck-stock
- KoreanFilterServer for /korean-stock
- Updated FilterSearchServer for home/all-stock/stock-list pages
- These components fetch and pass the correct filter data to FilterSearch based on the page context.
Page Integration :
- Integrated the new server filter components into their respective pages (truck-stock, korean-stock, all-stock, stock-list).
- Wrapped filter components in Suspense with skeleton fallback for loading states.
Constants Update :
- Added TRUCK_PAGE, KOREAN_PAGE, and HOME_PAGE constants to constants.ts for page identification.
UI/UX Improvements :
- Improved skeleton loader for filter search (shows 4 fields instead of 11).
- Minor UI tweaks (e.g., always showing pointer cursor on the search button).
- Description updated (diff)
- Status changed from In Progress to Complete
ref:
https://github.com/pqsjapan/frontendV1.1/commit/c4e84a4c78fd218e9435bb3759bbdbfed14ee75a
Key changes:
- Refactored filter search UI: Extracted the filter grid logic into a new FilterGrid component and moved filter value/setter mapping to a new utils.ts helper.
- Optimized server data fetching: Updated all filter server components (FilterSearchServer, KoreanFilterServer, TruckFilterServer) to fetch filter data in parallel using Promise.all for improved performance.
- Improved filter search UX: Enhanced combobox search with local filtering and input state, and improved initial value selection from URL params.
- General code cleanup: Reduced duplication, improved state management, and made filter logic more modular and maintainable.
Also available in: Atom
PDF