├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── core
    │   ├── api.ts
    │   ├── types.ts
    │   ├── utils.ts
    │   └── hooks.ts
    ├── index.tsx
    ├── components
    │   ├── FilterToggle.tsx
    │   ├── Select.tsx
    │   ├── CollapsibleList.tsx
    │   ├── SearchBar.tsx
    │   ├── ItemsContainer.tsx
    │   ├── PriceFilter.tsx
    │   └── ColorFilters.tsx
    ├── global.css
    └── Root.tsx
├── README.md
├── .gitignore
├── tsconfig.json
├── package.json
└── server
    ├── index.js
    └── data.js


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abacaj/react-simple-filter-sort-ecommerce/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abacaj/react-simple-filter-sort-ecommerce/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abacaj/react-simple-filter-sort-ecommerce/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/core/api.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import { QueryClient } from 'react-query';
 3 | 
 4 | const apiClient = axios.create({
 5 |   baseURL: 'http://localhost:3001',
 6 | });
 7 | 
 8 | const queryClient = new QueryClient();
 9 | 
10 | export { apiClient, queryClient };
11 | 


--------------------------------------------------------------------------------
/src/core/types.ts:
--------------------------------------------------------------------------------
 1 | export type Product = {
 2 |   name: string;
 3 |   color: string[];
 4 |   price: number;
 5 |   category: string;
 6 |   src: string;
 7 | };
 8 | 
 9 | export type ProductRespone = {
10 |   products: Product[];
11 |   maxPrice: number;
12 | };
13 | 
14 | export type ProductSort = 'name' | 'priceAsc' | 'priceDesc';
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Repo for video
 2 | 
 3 | [React JS filter, search and sort items using react-router v6](https://youtu.be/c3WSziz_u_o)
 4 | 
 5 | 1. run yarn install
 6 | 2. run yarn server
 7 | 3. run yarn start
 8 | 
 9 | # Getting Started with Create React App
10 | 
11 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
12 | 


--------------------------------------------------------------------------------
/src/core/utils.ts:
--------------------------------------------------------------------------------
 1 | export function getUniqueValues<T, V>(items: V[], key: keyof V): Array<T> {
 2 |   const set: Set<T> = new Set();
 3 | 
 4 |   items.forEach((item) => {
 5 |     const value = item[key];
 6 | 
 7 |     if (Array.isArray(value)) {
 8 |       value.forEach((v: T) => set.add(v));
 9 |     } else {
10 |       set.add(value as unknown as T);
11 |     }
12 |   });
13 | 
14 |   return Array.from(set);
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": "./src",
 4 |     "target": "es5",
 5 |     "lib": ["dom", "dom.iterable", "esnext"],
 6 |     "allowJs": true,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": true,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "noFallthroughCasesInSwitch": true,
13 |     "module": "esnext",
14 |     "moduleResolution": "node",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "noEmit": true,
18 |     "jsx": "react-jsx"
19 |   },
20 |   "include": ["src"]
21 | }
22 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import Root from 'Root';
 4 | import 'global.css';
 5 | import { BrowserRouter } from 'react-router-dom';
 6 | import { QueryClientProvider } from 'react-query';
 7 | import { queryClient } from 'core/api';
 8 | 
 9 | const root = ReactDOM.createRoot(
10 |   document.getElementById('root') as HTMLElement,
11 | );
12 | 
13 | root.render(
14 |   <React.StrictMode>
15 |     <QueryClientProvider client={queryClient}>
16 |       <BrowserRouter>
17 |         <Root />
18 |       </BrowserRouter>
19 |     </QueryClientProvider>
20 |   </React.StrictMode>,
21 | );
22 | 


--------------------------------------------------------------------------------
/src/components/FilterToggle.tsx:
--------------------------------------------------------------------------------
 1 | export default function FilterToggle({
 2 |   visible,
 3 |   active,
 4 |   onClear,
 5 |   onApply,
 6 | }: {
 7 |   visible: boolean;
 8 |   active: boolean;
 9 |   onClear: () => void;
10 |   onApply: () => void;
11 | }) {
12 |   if (active) {
13 |     return (
14 |       <button onClick={onClear} className="btn ph3 pv1 br3 f6 ba b--moon-gray">
15 |         Clear filter
16 |       </button>
17 |     );
18 |   }
19 | 
20 |   if (visible) {
21 |     return (
22 |       <button onClick={onApply} className="btn ph3 pv1 br3 f6 ba b--moon-gray">
23 |         Apply filter
24 |       </button>
25 |     );
26 |   }
27 | 
28 |   return null;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/core/hooks.ts:
--------------------------------------------------------------------------------
 1 | import { apiClient } from 'core/api';
 2 | import { useQuery, UseQueryResult } from 'react-query';
 3 | import { ProductRespone } from 'core/types';
 4 | import { useSearchParams } from 'react-router-dom';
 5 | 
 6 | export function useItems(): UseQueryResult<ProductRespone> {
 7 |   const [search] = useSearchParams({
 8 |     sort: 'name',
 9 |     minPrice: '0',
10 |     maxPrice: '10000',
11 |   });
12 | 
13 |   return useQuery(
14 |     ['items', search.toString()],
15 |     () =>
16 |       apiClient
17 |         .get('items', {
18 |           params: search,
19 |         })
20 |         .then((res) => res.data),
21 |     {
22 |       staleTime: 120000,
23 |     },
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Select.tsx:
--------------------------------------------------------------------------------
 1 | interface SelectOption {
 2 |   label: string;
 3 |   value: string;
 4 | }
 5 | 
 6 | export default function Select({
 7 |   options,
 8 |   label,
 9 |   name,
10 |   defaultValue = '',
11 |   onChange,
12 | }: {
13 |   options: SelectOption[];
14 |   label: string;
15 |   name: string;
16 |   defaultValue?: string;
17 |   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
18 | }) {
19 |   return (
20 |     <div>
21 |       <select
22 |         onChange={onChange}
23 |         name={name}
24 |         defaultValue={defaultValue}
25 |         className="select ph2 pv1 br2 bn"
26 |       >
27 |         <option value="" disabled>
28 |           {label}
29 |         </option>
30 |         {options.map((option, key) => (
31 |           <option key={key} value={option.value}>
32 |             {option.label}
33 |           </option>
34 |         ))}
35 |       </select>
36 |     </div>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/CollapsibleList.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | export default function CollapsibleList({
 4 |   title,
 5 |   children,
 6 |   actionButton,
 7 |   defaultVisible,
 8 | }: {
 9 |   title: string;
10 |   children: React.ReactNode;
11 |   actionButton?: React.ReactNode;
12 |   defaultVisible?: boolean;
13 | }) {
14 |   const [visible, setVisible] = useState(defaultVisible);
15 | 
16 |   return (
17 |     <div className="pv4 bb b--black-10">
18 |       <div className={'flex items-start justify-between relative mb2'}>
19 |         <button
20 |           onClick={() => setVisible((visible) => !visible)}
21 |           className={
22 |             'btn bn b pa0 tl w-100 bg-transparent hover-light-purple' +
23 |             (visible ? ' light-purple' : '')
24 |           }
25 |         >
26 |           {title}
27 |         </button>
28 |         <div className="absolute absolute-center-y right-0">{actionButton}</div>
29 |       </div>
30 |       {visible ? <ul className="list pa0 ma0">{children}</ul> : null}
31 |     </div>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/SearchBar.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { RiSearch2Line } from 'react-icons/ri';
 3 | import { useSearchParams } from 'react-router-dom';
 4 | import { debounce } from 'lodash';
 5 | 
 6 | export default function SearchBar() {
 7 |   const [focused, setFocused] = useState(false);
 8 |   const [search, setSearch] = useSearchParams();
 9 |   const onSearchChange = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
10 |     const text = e.target.value;
11 | 
12 |     if (text.length === 0) {
13 |       search.delete('query');
14 |       setSearch(search, {
15 |         replace: true,
16 |       });
17 |     } else {
18 |       search.set('query', text);
19 |       setSearch(search, {
20 |         replace: true,
21 |       });
22 |     }
23 |   }, 350);
24 | 
25 |   return (
26 |     <div
27 |       className={'flex search items-center pb2' + (focused ? ' focused' : '')}
28 |     >
29 |       <label htmlFor="search" className="flex mr2">
30 |         <RiSearch2Line className={'gray' + (focused ? ' light-purple' : '')} />
31 |       </label>
32 |       <input
33 |         onBlur={() => setFocused(false)}
34 |         onFocus={() => setFocused((focus) => !focus)}
35 |         onChange={onSearchChange}
36 |         defaultValue={search.get('query') ?? ''}
37 |         id="search"
38 |         name="search"
39 |         className="bn outline-0"
40 |         type="search"
41 |         placeholder="Find items by name..."
42 |       />
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/ItemsContainer.tsx:
--------------------------------------------------------------------------------
 1 | import { useItems } from 'core/hooks';
 2 | import { BarLoader } from 'react-spinners';
 3 | 
 4 | export default function ItemsContainer() {
 5 |   const getProducts = useItems();
 6 |   const products = getProducts.data?.products ?? [];
 7 | 
 8 |   if (getProducts.isLoading) {
 9 |     return (
10 |       <div className="flex w-75">
11 |         <BarLoader height={8} width="100%" />
12 |       </div>
13 |     );
14 |   }
15 | 
16 |   return (
17 |     <div className="w-75">
18 |       <div className="flex flex-wrap product-grid pt2">
19 |         {products.map((product) => {
20 |           return (
21 |             <div key={product.name} className="w-100 w-50-l ph3">
22 |               <a className="link black hover-light-purple" href="/t">
23 |                 <div className="flex flex-column h-100">
24 |                   <img
25 |                     style={{ objectFit: 'cover', height: '420px' }}
26 |                     alt=""
27 |                     loading="lazy"
28 |                     className="img flex-auto bg-gray"
29 |                     src={product.src}
30 |                   />
31 | 
32 |                   <div className="pt3 pb5 flex flex-column">
33 |                     <b className="mb1">{product.name}</b>
34 |                     <i className="mb3 gray">{product.color.join(', ')}</i>
35 |                     <p className="ma0 b black">${product.price / 100}</p>
36 |                   </div>
37 |                 </div>
38 |               </a>
39 |             </div>
40 |           );
41 |         })}
42 |       </div>
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-filter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@radix-ui/react-checkbox": "^0.1.5",
 7 |     "@radix-ui/react-icons": "^1.1.1",
 8 |     "@radix-ui/react-slider": "^0.1.4",
 9 |     "@testing-library/jest-dom": "^5.14.1",
10 |     "@testing-library/react": "^13.0.0",
11 |     "@testing-library/user-event": "^13.2.1",
12 |     "@types/jest": "^27.0.1",
13 |     "@types/node": "^16.7.13",
14 |     "@types/react": "^18.0.0",
15 |     "@types/react-dom": "^18.0.0",
16 |     "axios": "^0.27.2",
17 |     "cors": "^2.8.5",
18 |     "express": "^4.18.1",
19 |     "lodash": "^4.17.21",
20 |     "react": "^18.1.0",
21 |     "react-dom": "^18.1.0",
22 |     "react-icons": "^4.3.1",
23 |     "react-query": "^3.39.0",
24 |     "react-router-dom": "^6.3.0",
25 |     "react-scripts": "5.0.1",
26 |     "react-spinners": "^0.11.0",
27 |     "tachyons": "^4.12.0",
28 |     "typescript": "^4.4.2",
29 |     "web-vitals": "^2.1.0"
30 |   },
31 |   "scripts": {
32 |     "start": "react-scripts start",
33 |     "build": "react-scripts build",
34 |     "test": "react-scripts test",
35 |     "eject": "react-scripts eject",
36 |     "server": "node ./server/index.js"
37 |   },
38 |   "eslintConfig": {
39 |     "extends": [
40 |       "react-app",
41 |       "react-app/jest"
42 |     ]
43 |   },
44 |   "browserslist": {
45 |     "production": [
46 |       ">0.2%",
47 |       "not dead",
48 |       "not op_mini all"
49 |     ],
50 |     "development": [
51 |       "last 1 chrome version",
52 |       "last 1 firefox version",
53 |       "last 1 safari version"
54 |     ]
55 |   },
56 |   "devDependencies": {
57 |     "@types/lodash": "^4.14.182"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
  1 | @import '~tachyons/css/tachyons.min.css';
  2 | 
  3 | :root {
  4 |   --color-primary: #a463f2;
  5 |   --color-gray-dark: #ccc;
  6 |   --color-gray: #f9fafb;
  7 | 
  8 |   --font-primary: 'Inter', sans-serif;
  9 | }
 10 | 
 11 | html,
 12 | body {
 13 |   font-family: var(--font-primary);
 14 | }
 15 | 
 16 | .bg-gray {
 17 |   background-color: var(--color-gray);
 18 | }
 19 | 
 20 | .color-gray {
 21 |   color: var(--color-gray);
 22 | }
 23 | 
 24 | .btn {
 25 |   cursor: pointer;
 26 | }
 27 | 
 28 | .absolute-center-y {
 29 |   top: 50%;
 30 |   transform: translateY(-50%);
 31 | }
 32 | 
 33 | .item-grid {
 34 |   margin-left: -1rem;
 35 |   margin-right: -1rem;
 36 | }
 37 | 
 38 | .w15 {
 39 |   width: 1.5rem;
 40 | }
 41 | 
 42 | .h15 {
 43 |   height: 1.5rem;
 44 | }
 45 | 
 46 | .w125 {
 47 |   width: 1.25rem;
 48 | }
 49 | 
 50 | .h125 {
 51 |   height: 1.25rem;
 52 | }
 53 | 
 54 | .checkbox {
 55 |   box-shadow: 0 0 0 1.5px var(--color-gray-dark);
 56 | }
 57 | 
 58 | .checkbox:hover,
 59 | .checkbox:focus {
 60 |   border-color: var(--color-primary);
 61 |   box-shadow: 0 0 0 1.5px var(--color-primary);
 62 | }
 63 | 
 64 | .checkbox:hover .checkbox__icon,
 65 | .checkbox:focus .checkbox__icon {
 66 |   color: var(--color-primary);
 67 | }
 68 | 
 69 | .checkbox [data-state='checked'] {
 70 |   display: flex;
 71 | }
 72 | 
 73 | .search {
 74 |   box-shadow: 0 2px 0 0 var(--color-gray-dark);
 75 | }
 76 | 
 77 | .search.focused {
 78 |   box-shadow: 0 2px 0 0 var(--color-primary);
 79 | }
 80 | 
 81 | .slider[data-orientation='horizontal'] {
 82 |   height: 20px;
 83 | }
 84 | 
 85 | .slider__track,
 86 | .slider__range {
 87 |   height: 3px;
 88 | }
 89 | 
 90 | .slider__range {
 91 |   content: '';
 92 |   display: block;
 93 |   position: absolute;
 94 | }
 95 | 
 96 | .slider__thumb {
 97 |   box-shadow: 0 0 0 2px var(--color-primary);
 98 | }
 99 | 
100 | .slider__thumb:hover {
101 |   background-color: var(--color-primary);
102 | }
103 | 
104 | .select {
105 |   box-shadow: 0 0 0 2px var(--color-gray-dark);
106 | }
107 | 
108 | .select:focus {
109 |   box-shadow: 0 0 0 2px var(--color-primary);
110 | }
111 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
18 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
19 |     <link
20 |       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;900&display=swap"
21 |       rel="stylesheet"
22 |     />
23 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
24 |     <!--
25 |       Notice the use of %PUBLIC_URL% in the tags above.
26 |       It will be replaced with the URL of the `public` folder during the build.
27 |       Only files inside the `public` folder can be referenced from the HTML.
28 | 
29 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
30 |       work correctly both with client-side routing and a non-root public URL.
31 |       Learn how to configure a non-root public URL by running `npm run build`.
32 |     -->
33 |     <title>React App</title>
34 |   </head>
35 |   <body class="bg-gray">
36 |     <noscript>You need to enable JavaScript to run this app.</noscript>
37 |     <div id="root"></div>
38 |     <!--
39 |       This HTML file is a template.
40 |       If you open it directly in the browser, you will see an empty page.
41 | 
42 |       You can add webfonts, meta tags, or analytics to this file.
43 |       The build step will place the bundled scripts into the <body> tag.
44 | 
45 |       To begin the development, run `npm start` or `yarn start`.
46 |       To create a production bundle, use `npm run build` or `yarn build`.
47 |     -->
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const cors = require('cors');
 3 | const { isNil } = require('lodash');
 4 | const data = require('./data');
 5 | 
 6 | const app = express();
 7 | 
 8 | app.use(cors());
 9 | app.use(express.json());
10 | app.use(express.urlencoded({ extended: true }));
11 | 
12 | function containsColors(colors, product) {
13 |   // base case, do not skip products when there are no color filters
14 |   if (!colors) return true;
15 | 
16 |   const selectedColors = new Set(colors.split(','));
17 |   const productColors = product.color;
18 | 
19 |   // check if any of the product colors are in the filter
20 |   for (const color of productColors) {
21 |     if (selectedColors.has(color)) {
22 |       return true;
23 |     }
24 |   }
25 | 
26 |   // does not contain any of the filtered colors, skip this product
27 |   return false;
28 | }
29 | 
30 | function applyFilters(products, { query, sort, colors, minPrice, maxPrice }) {
31 |   const filteredProducts = [];
32 | 
33 |   // skip products based on filters
34 |   for (const product of products) {
35 |     if (query && !product.name.toLowerCase().includes(query.toLowerCase())) {
36 |       continue;
37 |     }
38 | 
39 |     if (!containsColors(colors, product)) {
40 |       continue;
41 |     }
42 | 
43 |     if (!isNil(minPrice) && product.price / 100 < minPrice) {
44 |       continue;
45 |     }
46 | 
47 |     if (!isNil(maxPrice) && product.price / 100 > maxPrice) {
48 |       continue;
49 |     }
50 | 
51 |     filteredProducts.push(product);
52 |   }
53 | 
54 |   return filteredProducts.sort((a, b) => {
55 |     const { name, price } = a;
56 |     const { name: nameB, price: priceB } = b;
57 | 
58 |     switch (sort) {
59 |       case 'priceDesc':
60 |         return priceB - price;
61 |       case 'priceAsc':
62 |         return price - priceB;
63 |       default:
64 |         return name.localeCompare(nameB);
65 |     }
66 |   });
67 | }
68 | 
69 | app.get('/items', (req, res) => {
70 |   // compute the max price for the filter
71 |   const maxPrice = Math.round(
72 |     Math.max(...data.map((product) => product.price)),
73 |   );
74 | 
75 |   // fake the request to a backend search service like solr or elasticsearch
76 |   setTimeout(() => {
77 |     res.json({ products: applyFilters(data, req.query), maxPrice });
78 |   }, 250);
79 | });
80 | 
81 | app.listen(3001, () => {
82 |   console.info('server listening on: 3001');
83 | });
84 | 


--------------------------------------------------------------------------------
/src/components/PriceFilter.tsx:
--------------------------------------------------------------------------------
 1 | import * as Slider from '@radix-ui/react-slider';
 2 | import { useState } from 'react';
 3 | import { useSearchParams } from 'react-router-dom';
 4 | import CollapsibleList from 'components/CollapsibleList';
 5 | import FilterToggle from 'components/FilterToggle';
 6 | 
 7 | function PriceFilter({ maxPrice }: { maxPrice: number }) {
 8 |   const [visible, setVisible] = useState(false);
 9 |   const [search, setSearch] = useSearchParams();
10 |   const defaultValues = [
11 |     parseInt(search.get('minPrice') ?? '0'),
12 |     parseInt(search.get('maxPrice') ?? `${maxPrice}`),
13 |   ];
14 |   const [values, setValues] = useState(defaultValues);
15 |   const filterActive = search.get('minPrice') !== null;
16 |   const onApplyFilter = () => {
17 |     search.set('minPrice', `${values[0]}`);
18 |     search.set('maxPrice', `${values[1]}`);
19 |     setSearch(search, {
20 |       replace: true,
21 |     });
22 |   };
23 | 
24 |   return (
25 |     <CollapsibleList
26 |       title="Price"
27 |       actionButton={
28 |         <FilterToggle
29 |           visible={visible}
30 |           active={filterActive}
31 |           onApply={onApplyFilter}
32 |           onClear={() => {
33 |             search.delete('minPrice');
34 |             search.delete('maxPrice');
35 |             // clear local state
36 |             setValues([0, maxPrice]);
37 | 
38 |             // clear url state
39 |             setSearch(search, {
40 |               replace: true,
41 |             });
42 |           }}
43 |         />
44 |       }
45 |     >
46 |       <li>
47 |         <div className="mv2">
48 |           <div className="flex">
49 |             <div className="flex-auto">
50 |               <div className="flex mb2 justify-center fw5">
51 |                 ${values[0]} - ${values[1]}
52 |               </div>
53 |               <Slider.Root
54 |                 onValueChange={(values) => {
55 |                   setValues([values[0], values[1]]);
56 |                   setVisible(true);
57 |                 }}
58 |                 className="flex items-center relative mw-100 slider"
59 |                 value={values}
60 |                 min={0}
61 |                 max={maxPrice}
62 |                 step={50}
63 |                 minStepsBetweenThumbs={1}
64 |               >
65 |                 <Slider.Track className="slider__track bg-moon-gray relative flex-auto">
66 |                   <Slider.Range className="slider__range bg-light-purple" />
67 |                 </Slider.Track>
68 |                 <Slider.Thumb className="slider__thumb db w1 h1 bg-white br-100" />
69 |                 <Slider.Thumb className="slider__thumb db w1 h1 bg-white br-100" />
70 |               </Slider.Root>
71 |             </div>
72 |           </div>
73 |         </div>
74 |       </li>
75 |     </CollapsibleList>
76 |   );
77 | }
78 | 
79 | export default function PriceFilterContainer({
80 |   maxPrice,
81 | }: {
82 |   maxPrice: number;
83 | }) {
84 |   if (maxPrice === 0) return null;
85 | 
86 |   return <PriceFilter maxPrice={maxPrice} />;
87 | }
88 | 


--------------------------------------------------------------------------------
/src/components/ColorFilters.tsx:
--------------------------------------------------------------------------------
 1 | import CollapsibleList from 'components/CollapsibleList';
 2 | import { getUniqueValues } from 'core/utils';
 3 | import { useState } from 'react';
 4 | import { useItems } from 'core/hooks';
 5 | import * as Checkbox from '@radix-ui/react-checkbox';
 6 | import { CheckIcon } from '@radix-ui/react-icons';
 7 | import { useSearchParams } from 'react-router-dom';
 8 | import FilterToggle from 'components/FilterToggle';
 9 | import { Product } from 'core/types';
10 | 
11 | export default function ColorFilters() {
12 |   const [search, setSearch] = useSearchParams();
13 |   const filteredColors = search.get('colors')?.split(',') ?? [];
14 |   const [colors, setColors] = useState(filteredColors);
15 |   const getItems = useItems();
16 |   const items = getItems.data?.products ?? [];
17 |   const allColors = getUniqueValues<string, Product>(items, 'color');
18 |   const groupedItems = allColors
19 |     .map((color) => ({
20 |       label: color,
21 |       name: color,
22 |       value: color,
23 |     }))
24 |     .sort((a, b) => a.name.localeCompare(b.name));
25 |   const onColorChange = (color: string) => (checked: Checkbox.CheckedState) => {
26 |     let _colors = colors.slice();
27 | 
28 |     if (checked) {
29 |       _colors.push(color);
30 |     } else {
31 |       _colors = _colors.filter((_color) => _color !== color);
32 |     }
33 | 
34 |     setColors(_colors);
35 |   };
36 |   const hasFilters = filteredColors.length > 0;
37 | 
38 |   return (
39 |     <CollapsibleList
40 |       defaultVisible={hasFilters}
41 |       title="Color"
42 |       actionButton={
43 |         <FilterToggle
44 |           visible={colors.length > 0}
45 |           active={hasFilters}
46 |           onApply={() => {
47 |             search.set('colors', colors.join(','));
48 |             setSearch(search, {
49 |               replace: true,
50 |             });
51 |           }}
52 |           onClear={() => {
53 |             search.delete('colors');
54 |             setColors([]);
55 |             setSearch(search, {
56 |               replace: true,
57 |             });
58 |           }}
59 |         />
60 |       }
61 |     >
62 |       {groupedItems
63 |         .filter((f) => {
64 |           if (filteredColors.length === 0) {
65 |             return true;
66 |           }
67 | 
68 |           return filteredColors.includes(f.value);
69 |         })
70 |         .map((field, key) => (
71 |           <li key={key} className="pv2">
72 |             <div className="flex items-center">
73 |               <Checkbox.Root
74 |                 id={field.name}
75 |                 name={field.name}
76 |                 disabled={hasFilters}
77 |                 onCheckedChange={onColorChange(field.value)}
78 |                 checked={colors.includes(field.value)}
79 |                 className="checkbox lh-solid flex items-center justify-center pa0 bg-white w125 h125 br2 bn"
80 |               >
81 |                 <Checkbox.Indicator>
82 |                   <CheckIcon className="checkbox__icon w125 h125" />
83 |                 </Checkbox.Indicator>
84 |               </Checkbox.Root>
85 |               <label htmlFor={field.name} className="ml3 fw5 f5">
86 |                 {field.label}
87 |               </label>
88 |             </div>
89 |           </li>
90 |         ))}
91 |     </CollapsibleList>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/Root.tsx:
--------------------------------------------------------------------------------
  1 | import { useMemo } from 'react';
  2 | import SearchBar from 'components/SearchBar';
  3 | import Select from 'components/Select';
  4 | import { useItems } from 'core/hooks';
  5 | import ItemsContainer from 'components/ItemsContainer';
  6 | import { useSearchParams } from 'react-router-dom';
  7 | import ColorFilters from 'components/ColorFilters';
  8 | import PriceFilter from 'components/PriceFilter';
  9 | 
 10 | export default function Root() {
 11 |   const [search, setSearch] = useSearchParams();
 12 |   const getItems = useItems();
 13 |   const items = useMemo(() => getItems.data?.products ?? [], [getItems.data]);
 14 |   const itemCounts = useMemo(
 15 |     () =>
 16 |       items.reduce<Record<string, number>>((initial, item) => {
 17 |         if (!isNaN(initial[item.category])) {
 18 |           initial[item.category] += 1;
 19 |         } else {
 20 |           initial[item.category] = 1;
 21 |         }
 22 | 
 23 |         return initial;
 24 |       }, {}),
 25 |     [items],
 26 |   );
 27 |   const maxPrice = (getItems.data?.maxPrice ?? 0) / 100;
 28 | 
 29 |   return (
 30 |     <div className="mw9 center ph4 bg-white min-vh-100 br bl b--light-gray">
 31 |       <div className="flex bb b--black-10 justify-between items-center mb4">
 32 |         <h1>New arrivals</h1>
 33 | 
 34 |         <div className="mr3 ml-auto">
 35 |           <SearchBar />
 36 |         </div>
 37 | 
 38 |         <Select
 39 |           onChange={(e) => {
 40 |             search.set('sort', e.target.value);
 41 |             setSearch(search, {
 42 |               replace: true,
 43 |             });
 44 |           }}
 45 |           label="Sort by"
 46 |           name="sort"
 47 |           options={[
 48 |             {
 49 |               label: 'Name',
 50 |               value: 'name',
 51 |             },
 52 |             {
 53 |               label: 'Price High',
 54 |               value: 'priceDesc',
 55 |             },
 56 |             {
 57 |               label: 'Price Low',
 58 |               value: 'priceAsc',
 59 |             },
 60 |           ]}
 61 |         />
 62 |       </div>
 63 | 
 64 |       <div className="flex">
 65 |         <div className="w-25 mr4">
 66 |           <div style={{ position: 'sticky', top: '20px' }}>
 67 |             <ul className="list pa0 ma0 pb3 bb b--black-10">
 68 |               <li className="f6 fw5 silver mb2">
 69 |                 <div className="flex justify-between">
 70 |                   Filters
 71 |                   <span>{items.length} Products</span>
 72 |                 </div>
 73 |               </li>
 74 |               <li>
 75 |                 <button className="btn bn fw5 pa0 pv2 w-100 tl bg-transparent hover-light-purple flex justify-between">
 76 |                   Bags
 77 |                   <span>{itemCounts['bags'] ?? 0}</span>
 78 |                 </button>
 79 |               </li>
 80 |               <li>
 81 |                 <button className="btn bn fw5 pa0 pv2 w-100 tl bg-transparent hover-light-purple flex justify-between">
 82 |                   Shoes
 83 |                   <span>{itemCounts['shoes'] ?? 0}</span>
 84 |                 </button>
 85 |               </li>
 86 |               <li>
 87 |                 <button className="btn bn fw5 pa0 pv2 w-100 tl bg-transparent hover-light-purple flex justify-between">
 88 |                   Jackets
 89 |                   <span>{itemCounts['jackets'] ?? 0}</span>
 90 |                 </button>
 91 |               </li>
 92 |             </ul>
 93 | 
 94 |             <ColorFilters />
 95 |             <PriceFilter maxPrice={maxPrice} />
 96 |           </div>
 97 |         </div>
 98 | 
 99 |         <ItemsContainer />
100 |       </div>
101 |     </div>
102 |   );
103 | }
104 | 


--------------------------------------------------------------------------------
/server/data.js:
--------------------------------------------------------------------------------
  1 | module.exports = [
  2 |   {
  3 |     name: 'Tiny pouch',
  4 |     color: ['Blue', 'Silver'],
  5 |     price: 10000,
  6 |     category: 'bags',
  7 |     src: 'https://images.unsplash.com/photo-1594223274512-ad4803739b7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1057&q=80',
  8 |   },
  9 |   {
 10 |     name: 'Some tote',
 11 |     color: ['Red'],
 12 |     price: 15000,
 13 |     category: 'bags',
 14 |     src: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80',
 15 |   },
 16 |   {
 17 |     name: 'Quilted bag',
 18 |     color: ['Brown'],
 19 |     price: 10000,
 20 |     category: 'bags',
 21 |     src: 'https://images.unsplash.com/photo-1598532163257-ae3c6b2524b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1063&q=80',
 22 |   },
 23 |   {
 24 |     name: 'Fancy bag',
 25 |     color: ['Gray', 'Gold'],
 26 |     price: 25000,
 27 |     category: 'bags',
 28 |     src: 'https://images.unsplash.com/photo-1559563458-527698bf5295?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
 29 |   },
 30 |   {
 31 |     name: 'Backpack hiking',
 32 |     color: ['Blue'],
 33 |     price: 8900,
 34 |     category: 'bags',
 35 |     src: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
 36 |   },
 37 |   {
 38 |     name: 'Best clutch',
 39 |     color: ['Pink'],
 40 |     price: 12500,
 41 |     category: 'bags',
 42 |     src: 'https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1771&q=80',
 43 |   },
 44 |   {
 45 |     name: 'Prada bag',
 46 |     color: ['Silver'],
 47 |     price: 35000,
 48 |     category: 'bags',
 49 |     src: 'https://images.unsplash.com/photo-1609172795052-05bf80681031?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
 50 |   },
 51 |   {
 52 |     name: 'Cool satchel',
 53 |     color: ['Purple'],
 54 |     price: 10000,
 55 |     category: 'bags',
 56 |     src: 'https://images.unsplash.com/photo-1605733513597-a8f8341084e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1829&q=80',
 57 |   },
 58 |   {
 59 |     name: 'Some yellow bag',
 60 |     color: ['Yellow'],
 61 |     price: 15000,
 62 |     category: 'bags',
 63 |     src: 'https://images.unsplash.com/photo-1612902456551-333ac5afa26e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80',
 64 |   },
 65 |   {
 66 |     name: 'YSL bag',
 67 |     color: ['Red'],
 68 |     price: 90000,
 69 |     category: 'bags',
 70 |     src: 'https://images.unsplash.com/photo-1587467512961-120760940315?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80',
 71 |   },
 72 |   {
 73 |     name: 'Ferragamo bag',
 74 |     color: ['Orange'],
 75 |     price: 150000,
 76 |     category: 'bags',
 77 |     src: 'https://images.unsplash.com/photo-1590874103328-eac38a683ce7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80',
 78 |   },
 79 |   {
 80 |     name: 'Gucci bag',
 81 |     color: ['Black'],
 82 |     price: 120000,
 83 |     category: 'bags',
 84 |     src: 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1769&q=80',
 85 |   },
 86 |   {
 87 |     name: 'Travel backpack',
 88 |     color: ['Black'],
 89 |     price: 10000,
 90 |     category: 'bags',
 91 |     src: 'https://images.unsplash.com/photo-1594299447935-e5b840f54b9b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80',
 92 |   },
 93 |   {
 94 |     name: 'Dior bag',
 95 |     color: ['Silver'],
 96 |     price: 50000,
 97 |     category: 'bags',
 98 |     src: 'https://images.unsplash.com/photo-1589731119540-c4586781dae1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
 99 |   },
100 |   {
101 |     name: 'Simple backpack',
102 |     color: ['Brown'],
103 |     price: 5900,
104 |     category: 'bags',
105 |     src: 'https://images.unsplash.com/photo-1622560482379-c9813322e95a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80',
106 |   },
107 |   {
108 |     name: 'Knapsack',
109 |     color: ['Gray', 'Green'],
110 |     price: 7900,
111 |     category: 'bags',
112 |     src: 'https://images.unsplash.com/photo-1474376962954-d8a681cc53b2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
113 |   },
114 |   {
115 |     name: 'Dior leather backpack',
116 |     color: ['Black'],
117 |     price: 25000,
118 |     category: 'bags',
119 |     src: 'https://images.unsplash.com/photo-1607045821521-9e014d43403c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
120 |   },
121 |   {
122 |     name: 'Vinta backpack',
123 |     color: ['Black'],
124 |     price: 15000,
125 |     category: 'bags',
126 |     src: 'https://images.unsplash.com/photo-1491637639811-60e2756cc1c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1028&q=80',
127 |   },
128 |   {
129 |     name: 'LV leather bag',
130 |     color: ['Brown'],
131 |     price: 45000,
132 |     category: 'bags',
133 |     src: 'https://images.unsplash.com/photo-1583623733237-4d5764a9dc82?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
134 |   },
135 |   {
136 |     name: 'Backpack',
137 |     color: ['Brown'],
138 |     price: 10000,
139 |     category: 'bags',
140 |     src: 'https://images.unsplash.com/photo-1559195690-236f5fab61a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
141 |   },
142 |   {
143 |     name: 'Sling bag',
144 |     color: ['Black'],
145 |     price: 25000,
146 |     category: 'bags',
147 |     src: 'https://images.unsplash.com/photo-1511598800709-141ed22fcefc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=986&q=80',
148 |   },
149 |   {
150 |     name: 'Fancy sneakers',
151 |     color: ['White'],
152 |     price: 15000,
153 |     category: 'shoes',
154 |     src: 'https://images.unsplash.com/photo-1587563871167-1ee9c731aefb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2031&q=80',
155 |   },
156 |   {
157 |     name: 'Leather dress shoes',
158 |     color: ['Brown'],
159 |     price: 8900,
160 |     category: 'shoes',
161 |     src: 'https://images.unsplash.com/photo-1531310197839-ccf54634509e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=930&q=80',
162 |   },
163 |   {
164 |     name: 'Airmax sneakers',
165 |     color: ['White'],
166 |     price: 12500,
167 |     category: 'shoes',
168 |     src: 'https://images.unsplash.com/photo-1514989940723-e8e51635b782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
169 |   },
170 |   {
171 |     name: 'Leather boots',
172 |     color: ['White'],
173 |     price: 10000,
174 |     category: 'shoes',
175 |     src: 'https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
176 |   },
177 |   {
178 |     name: 'Long sleeve jacket',
179 |     color: ['Brown'],
180 |     price: 8900,
181 |     category: 'jackets',
182 |     src: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80',
183 |   },
184 |   {
185 |     name: 'Leather jacket',
186 |     color: ['Black'],
187 |     price: 9500,
188 |     category: 'jackets',
189 |     src: 'https://images.unsplash.com/photo-1521223890158-f9f7c3d5d504?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=980&q=80',
190 |   },
191 |   {
192 |     name: 'Suit jacket',
193 |     color: ['Green'],
194 |     price: 17500,
195 |     category: 'jackets',
196 |     src: 'https://images.unsplash.com/photo-1592878940526-0214b0f374f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80',
197 |   },
198 |   {
199 |     name: 'Denim jacket',
200 |     color: ['Blue'],
201 |     price: 10000,
202 |     category: 'jackets',
203 |     src: 'https://images.unsplash.com/photo-1611312449408-fcece27cdbb7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=969&q=80',
204 |   },
205 | ];
206 | 


--------------------------------------------------------------------------------