Merge pull request #45 from UnBArqDsw2021-1/filtros

Filtros
UnBArqDsw2021-1 · Oct 14, 2021 · c66257d · c66257d
2 parents e3d608f + 2a0a46b
commit c66257d
Show file tree

Hide file tree

Showing 27 changed files with 409 additions and 99 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # 2021.1_G7_Mychine_App
 
-![Vercel](https://vercelbadge.vercel.app/api/UnBArqDsw2021-1/2021.1_G7_Mychine_App?style=for-the-badge)
+![Vercel](https://vercelbadge.vercel.app/api/UnBArqDsw2021-1/2021.1_G7_Mychine_App?style=for-the-badge) [![Main workflow](https://github.com/UnBArqDsw2021-1/2021.1_G7_Mychine_App/actions/workflows/main.yml/badge.svg)](https://github.com/UnBArqDsw2021-1/2021.1_G7_Mychine_App/actions/workflows/main.yml)
 
 **Código da Disciplina**: FGA0208<br>
 **Número do Grupo**: 07<br>

diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "react-dom": "17.0.2",
     "react-hook-form": "^7.15.3",
     "react-icons": "^4.2.0",
+    "react-range": "^1.8.11",
     "reflexbox": "^4.0.6",
     "styled-components": "^5.3.1",
     "swr": "^1.0.1",

diff --git a/public/img/hero.jpg b/public/img/hero.jpg
diff --git a/public/img/hero.webp b/public/img/hero.webp
diff --git a/src/UI/animations/ripple.tsx b/src/UI/animations/ripple.tsx
@@ -1,6 +1,6 @@
 import { css, keyframes } from 'styled-components';
 
-export type Color = 'primary' | 'secondary';
+export type Color = 'primary' | 'secondary' | 'black';
 
 export const ripple = keyframes`
   to {

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -6,7 +6,7 @@ type ButtonTypes = ButtonHTMLAttributes<HTMLButtonElement>;
 
 export interface IButtonProps extends ButtonTypes {
   size?: 'small' | 'regular' | 'large';
-  color?: 'primary' | 'secondary';
+  color?: 'primary' | 'secondary' | 'black';
   shadow?: boolean;
   fullWidth?: boolean;
   minimal?: boolean;

diff --git a/src/components/Button/styles.tsx b/src/components/Button/styles.tsx
@@ -36,6 +36,14 @@ const buttonStylesModifiers = (theme: DefaultTheme) => ({
         #f7971e 100%
       );
     `,
+    black: css`
+      background-image: linear-gradient(
+        to right,
+        #000000 0%,
+        #434343 51%,
+        #000000 100%
+      );
+    `,
   },
   shadow: css`
     box-shadow: ${theme.shadows.medium};

diff --git a/src/components/Cart/CartItem/index.tsx b/src/components/Cart/CartItem/index.tsx
@@ -15,7 +15,7 @@ const CartItems = ({ item }: ICartItemProps) => {
   return (
     <S.CartItem>
       <Image
-        src="/img/hero.jpg"
+        src="/img/hero.webp"
         width={50}
         height={50}
         alt="product image"

diff --git a/src/components/FormFields/Checkbox/index.tsx b/src/components/FormFields/Checkbox/index.tsx
@@ -22,12 +22,12 @@ const Checkbox = forwardRef<HTMLInputElement, ICheckboxProps>((props, ref) => {
     <S.Checkbox>
       <S.Input
         type="checkbox"
-        id={name}
+        id={`${name}${props?.value}`}
         ref={ref}
         {...methods?.register(name)}
         {...props}
       />
-      <S.Label htmlFor={name}>{label}</S.Label>
+      <S.Label htmlFor={`${name}${props?.value}`}>{label}</S.Label>
       {error && <Error>{error?.message}</Error>}
     </S.Checkbox>
   );

diff --git a/src/components/Hero/styles.tsx b/src/components/Hero/styles.tsx
@@ -22,7 +22,7 @@ export const HeroContainer = styled.div`
     width: 100%;
     left: 0;
     right: 0;
-    background-image: url(/img/hero.jpg);
+    background-image: url(/img/hero.webp);
     /* background-position: center; */
     background-repeat: no-repeat;
     background-size: cover;

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -7,7 +7,6 @@ import { FaUserCircle } from 'react-icons/fa';
 import { GoSignOut } from 'react-icons/go';
 
 import CartIcon from '@components/Cart/CartIcon';
-import Logo from '@public/img/logo.svg';
 
 import * as S from './styles';
 
@@ -29,11 +28,13 @@ const Navbar = () => {
         <Link href="/" passHref>
           <S.Logo>
             <Image
-              src={Logo}
+              src="/img/logo.svg"
               width={75}
               height={75}
               objectFit="contain"
               alt="logo"
+              placeholder="blur"
+              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8="
             />
             <h1>MYCHINE</h1>
           </S.Logo>

diff --git a/src/components/ProductCard/index.tsx b/src/components/ProductCard/index.tsx
@@ -26,11 +26,13 @@ const ProductCard = (item: IProductCardProps) => {
       <Link href="/" passHref>
         <S.Image>
           <Image
-            src="/img/hero.jpg"
+            src="/img/hero.webp"
             width="100%"
             height="100%"
             layout="responsive"
             objectFit="cover"
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8="
           />
         </S.Image>
       </Link>

diff --git a/src/components/ProductCard/styles.tsx b/src/components/ProductCard/styles.tsx
@@ -11,8 +11,8 @@ export const Card = styled.div`
 
     color: ${theme.colors.darkGray};
     font-weight: ${theme.font.weight.medium};
-    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px,
-      rgb(60 64 67 / 15%) 0px 1px 3px 1px;
+    box-shadow: rgb(0 0 0 / 2%) 0px 1px 3px 0px,
+      rgb(27 31 35 / 15%) 0px 0px 0px 1px;
     background-color: white;
     overflow: hidden;
 

diff --git a/src/components/ProductFilters/index.tsx b/src/components/ProductFilters/index.tsx
@@ -1,22 +1,104 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
+import { useForm } from 'react-hook-form';
+import { useFilter } from '@contexts/Filter';
+
+import Button from '@components/Button';
 import Checkbox from '@components/FormFields/Checkbox';
+import RangeInput from '@components/RangeInput';
 
 import * as S from './styles';
 
+interface FormFields {
+  orderByPrice: string;
+  priceRange: { minPrice: number; maxPrice: number };
+}
+
 const ProductFilters = () => {
+  const { filters, setFilters, removeFilter, clearFilters } = useFilter();
+  const { register, watch, reset, setValue, getValues } = useForm<FormFields>();
+
+  register('priceRange');
+  const orderByPrice = register('orderByPrice');
+
   return (
     <S.FilterbarWrapper>
       <S.FilterBar>
+        {Object?.keys(filters)?.length > 0 ? (
+          <S.FilterOption>
+            <Button
+              size="small"
+              color="black"
+              shadow={false}
+              onClick={() => {
+                clearFilters();
+                reset();
+              }}
+            >
+              Limpar filtros
+            </Button>
+          </S.FilterOption>
+        ) : null}
         <S.FilterOption>
           <label>Ordenar por</label>
-          <Checkbox name="sortby" label="Menor preço" />
-          <Checkbox name="sortby2" label="Maior preço" />
+          <Checkbox
+            type="radio"
+            value="ASC"
+            label="Menor preço"
+            {...orderByPrice}
+            onChange={(e) => {
+              orderByPrice.onChange(e);
+              setFilters({
+                ...filters,
+                orderByPrice: getValues('orderByPrice'),
+              });
+            }}
+            onClick={() => {
+              if (getValues('orderByPrice') === 'ASC') {
+                setValue('orderByPrice', null);
+                removeFilter('orderByPrice');
+              }
+            }}
+            checked={watch('orderByPrice') === 'ASC'} // NÃO TIRA!
+          />
+          <Checkbox
+            type="radio"
+            value="DESC"
+            label="Maior preço"
+            {...orderByPrice}
+            onChange={(e) => {
+              orderByPrice.onChange(e);
+              setFilters({
+                ...filters,
+                orderByPrice: getValues('orderByPrice'),
+              });
+            }}
+            onClick={() => {
+              if (getValues('orderByPrice') === 'DESC') {
+                setValue('orderByPrice', null);
+                removeFilter('orderByPrice');
+              }
+            }}
+          />
         </S.FilterOption>
         <S.FilterOption>
-          <label>Categoria</label>
-          <Checkbox name="sortby3" label="Category 1" />
-          <Checkbox name="sortby4" label="Category 2" />
-          <Checkbox name="sortby4" label="Category 3" />
+          <label>Preço</label>
+          <RangeInput
+            min={0}
+            max={10000}
+            step={100}
+            initialValue={[0, 9999]}
+            formatValue={(val) => `$${val}`}
+            onFinalChange={(prices) => {
+              setValue('priceRange', {
+                minPrice: prices[0],
+                maxPrice: prices[1],
+              });
+              setFilters({
+                ...filters,
+                ...getValues('priceRange'),
+              });
+            }}
+          />
         </S.FilterOption>
       </S.FilterBar>
     </S.FilterbarWrapper>

diff --git a/src/components/ProductFilters/styles.tsx b/src/components/ProductFilters/styles.tsx
@@ -1,17 +1,14 @@
 import styled, { css } from 'styled-components';
 
 export const FilterbarWrapper = styled.div`
-  ${({ theme }) => css`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: ${theme.spacings.large};
-    padding-top: 0;
-
-    @media (max-width: 800px) {
-      display: none;
-    }
-  `}
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-top: 0;
+
+  @media (max-width: 800px) {
+    display: none;
+  }
 `;
 
 export const FilterBar = styled.div`
@@ -21,16 +18,10 @@ export const FilterBar = styled.div`
     display: flex;
     flex-direction: column;
     min-width: 250px;
-    padding: ${theme.spacings.medium};
-    background-color: ${theme.colors.lightGray};
+    padding: ${theme.spacings.large};
+    border-radius: 5px;
     background-color: white;
-    background-image: radial-gradient(
-      circle 621px at 25.3% 13.8%,
-      rgba(255, 255, 255, 1) 0%,
-      rgba(234, 236, 255, 1) 90%
-    );
-    box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px,
-      rgb(0 0 0 / 30%) 0px 1px 3px -1px;
+    box-shadow: ${theme.shadows.large};
 
     button {
       margin-bottom: ${theme.spacings.small};

diff --git a/src/components/ProductList/index.tsx b/src/components/ProductList/index.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from 'next/router';
+import { useFilter } from '@contexts/Filter';
 import { product } from '@prisma/client';
 
 import Loader from '@components/Loader';
@@ -10,21 +10,24 @@ import { getProducts } from '@services/productsServices';
 import * as S from './styles';
 
 const ProductList = () => {
-  const router = useRouter();
-  const { data, isLoading } = useRequest<product[]>(getProducts(router.query));
+  const { filters } = useFilter();
+  const { data, isLoading } = useRequest<product[]>(getProducts(filters));
 
   return (
     <S.Content>
       <SearchBar automaticSearch variant="darkGray" />
       {!isLoading ? (
         <S.ListContainer>
           {data?.map((item) => (
-            <ProductCard {...item} />
+            <ProductCard {...item} key={item.productId} />
           ))}
         </S.ListContainer>
       ) : (
-        <Loader size="large" rings={2} />
+        <Loader size="large" />
       )}
+      {(!isLoading && !data) || data?.length === 0 ? (
+        <Loader text="Nenhum produto encontrado" size="large" />
+      ) : null}
     </S.Content>
   );
 };

diff --git a/src/components/ProductList/styles.tsx b/src/components/ProductList/styles.tsx
@@ -5,8 +5,11 @@ export const Content = styled.div`
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
+    border-radius: 5px;
     padding: ${theme.spacings.large};
-    padding-top: 0;
+    margin-bottom: ${theme.spacings.xlarge};
+    background: white;
+    box-shadow: ${theme.shadows.large};
   `}
 `;