Merge pull request #11 from ildecimo/develop

product filters

src/components/ProductFilters.tsx

@@ -0,0 +1,44 @@
+import { Box, Switch } from '@bigcommerce/big-design';
+import { useState } from 'react';
+import { type SimpleProduct } from 'types';
+
+import { ProductSearch } from '~/components/ProductSearch';
+
+interface ProductFiltersProps {
+  setFilteredProducts: (value: SimpleProduct[]) => void;
+  products: SimpleProduct[];
+}
+
+export const ProductFilters = ({
+  setFilteredProducts,
+  products,
+}: ProductFiltersProps) => {
+  const [switchOn, setSwitchOn] = useState(false);
+
+  const handleSwitch = () => {
+    setSwitchOn(!switchOn);
+    let filteredProducts = products;
+
+    if (!switchOn) {
+      filteredProducts = products.filter((product) => {
+        return product.reviews_count > 0;
+      });
+    }
+
+    setFilteredProducts(filteredProducts);
+  };
+
+  return (
+    <Box border="box" padding="small" borderRadius="normal">
+      <ProductSearch
+        products={products}
+        setFilteredProducts={setFilteredProducts}
+      />
+
+      <div className="mt-4 flex">
+        <span className="mr-6 font-bold">Show only products with reviews</span>
+        <Switch onChange={handleSwitch} checked={switchOn} />
+      </div>
+    </Box>
+  );
+};

src/components/ProductList.tsx

@@ -3,13 +3,15 @@
 import { type SimpleProduct } from 'types';
 
 import { Badge, Table } from '@bigcommerce/big-design';
+import { ArrowLongRightIcon } from '@heroicons/react/20/solid';
 import Image from 'next/image';
+import { useState } from 'react';
 
 import { Breadcrumbs } from '~/components/Breadcrumbs';
 import { NextLink } from '~/components/NextLink';
+import { ProductFilters } from '~/components/ProductFilters';
 import { StarRating } from '~/components/StarRating';
 
-import { ArrowLongRightIcon } from '@heroicons/react/20/solid';
 import { convertToUDS } from '~/utils/utils';
 
 interface ProductListProps {
@@ -37,11 +39,19 @@ const ReviewsAverage = ({ product }: ReviewsAverageProps) => {
 };
 
 const ProductList = ({ products }: ProductListProps) => {
+  const [filteredProducts, setFilteredProducts] = useState(products);
+
   return (
     <div>
       <Breadcrumbs>
         <Breadcrumbs.Text>All Products</Breadcrumbs.Text>
       </Breadcrumbs>
+      <div className="my-6">
+        <ProductFilters
+          products={products}
+          setFilteredProducts={setFilteredProducts}
+        />
+      </div>
       <div className="mt-10">
         <Table
           stickyHeader
@@ -112,7 +122,7 @@ const ProductList = ({ products }: ProductListProps) => {
               ),
             },
           ]}
-          items={products}
+          items={filteredProducts}
         />
       </div>
     </div>

src/components/ProductSearch.tsx

@@ -0,0 +1,43 @@
+import { Form, FormGroup, Input } from '@bigcommerce/big-design';
+import { useState } from 'react';
+
+import { type SimpleProduct } from 'types';
+
+interface ProductSearchProps {
+  setFilteredProducts: (value: SimpleProduct[]) => void;
+  products: SimpleProduct[];
+}
+
+export const ProductSearch = ({
+  setFilteredProducts,
+  products,
+}: ProductSearchProps) => {
+  const [value, setValue] = useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+
+    const filteredProducts = products.filter((product) => {
+      return product.name
+        .toLowerCase()
+        .includes(event.target.value.toLowerCase());
+    });
+
+    setFilteredProducts(filteredProducts);
+  };
+
+  return (
+    <Form>
+      <FormGroup>
+        <Input
+          label="Search products by name"
+          onChange={handleChange}
+          placeholder="Search"
+          type="text"
+          value={value}
+          required
+        />
+      </FormGroup>
+    </Form>
+  );
+};