Fix/develop bugs (#90)

* fix: cache bug (invalite cache on create/update operation)

* feat: added update many shelter supplies and admin rule

Author: fagundesjg

src/api/api.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosRequestHeaders, InternalAxiosRequestConfig } from 'axios';
-import { getCacheRequestData, handleCacheResponse } from './cache';
+import { clearCache, getCacheRequestData, handleCacheResponse } from './cache';
 
 const api = axios.create({
   baseURL: import.meta.env.VITE_API_URL ?? 'http://localhost:4000/',
@@ -31,6 +31,7 @@ api.interceptors.response.use(
   },
   (error) => {
     if (error.response && error.response.status === 401) {
+      clearCache(false);
       localStorage.removeItem('token');
     }
     return Promise.reject(error);

src/api/cache.ts

@@ -16,15 +16,19 @@ function checkCacheHasExpired(
   return new Date().getTime() - timestamp >= ttl;
 }
 
-function clearExpiredCache() {
-  log('cache - checando caches expirados...');
+function clearCache(onlyExpired: boolean = true) {
+  log(
+    onlyExpired
+      ? 'cache - checando caches expirados...'
+      : 'cache - limpando cache...'
+  );
   Object.keys(localStorage)
     .filter((key: string) => key.startsWith('cache:'))
     .forEach((key) => {
       const data = localStorage.getItem(key);
       if (data) {
         const { timestamp } = JSON.parse(data);
-        if (checkCacheHasExpired(timestamp)) {
+        if (!onlyExpired || checkCacheHasExpired(timestamp)) {
           localStorage.removeItem(key);
         }
       }
@@ -74,6 +78,6 @@ function handleCacheResponse(resp: AxiosResponse<any, any>) {
   }
 }
 
-clearExpiredCache();
+clearCache();
 
-export { handleCacheResponse, getCacheRequestData };
+export { handleCacheResponse, getCacheRequestData, clearCache };

src/components/Authenticated/Authenticated.tsx

@@ -1,11 +1,21 @@
 import { Fragment, useContext } from 'react';
 
 import { SessionContext } from '@/contexts';
+import { IAuthenticatedProps } from './types';
+import { AccessLevel } from '@/service/sessions/types';
 
-const Authenticated = ({ children }: { children?: React.ReactNode }) => {
+const MappedRoles: Record<AccessLevel, AccessLevel[]> = {
+  Admin: ['Admin'],
+  DistributionCenter: ['Admin', 'DistributionCenter'],
+  Staff: ['Admin', 'Staff'],
+  User: ['Admin', 'Staff', 'DistributionCenter', 'User'],
+};
+
+const Authenticated = ({ children, role = 'User' }: IAuthenticatedProps) => {
   const { session } = useContext(SessionContext);
 
-  if (!session) return <Fragment />;
+  if (!session || !MappedRoles[role].includes(session.accessLevel))
+    return <Fragment />;
 
   return <div className="contents">{children}</div>;
 };

src/components/Authenticated/types.ts

@@ -0,0 +1,6 @@
+import { AccessLevel } from '@/service/sessions/types';
+
+export interface IAuthenticatedProps {
+  role?: AccessLevel;
+  children?: React.ReactNode;
+}

src/components/CardAboutShelter/CardAboutShelter.tsx

@@ -30,11 +30,11 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
             check(shelter.petFriendly) ? (
               shelter.petFriendly ? (
                 <p>
-                  O abrigo <b className="text-green-600">aceita</b> animais
+                  O abrigo <b>aceita</b> animais
                 </p>
               ) : (
                 <p>
-                  O abrigo <b className="text-red-600">não</b> aceita animais
+                  O abrigo <b>não</b> aceita animais
                 </p>
               )
             ) : (

src/pages/CreateShelter/CreateShelter.tsx

@@ -16,6 +16,7 @@ import { ICreateShelter } from '@/service/shelter/types';
 import { toast } from '@/components/ui/use-toast';
 import { ShelterServices } from '@/service';
 import { withAuth } from '@/hocs';
+import { clearCache } from '@/api/cache';
 
 const CreateShelterComponent = () => {
   const navigate = useNavigate();
@@ -33,6 +34,7 @@ const CreateShelterComponent = () => {
       address: '',
       shelteredPeople: 0,
       capacity: 0,
+      verified: false,
       petFriendly: false,
       contact: null,
       pix: null,
@@ -57,6 +59,7 @@ const CreateShelterComponent = () => {
     onSubmit: async (values, { resetForm }) => {
       try {
         await ShelterServices.create(values);
+        clearCache(false);
         toast({
           title: 'Cadastro feita com sucesso',
         });

src/pages/CreateSupply/CreateSupply.tsx

@@ -18,6 +18,7 @@ import { ICreateSupply, SupplyPriority } from '@/service/supply/types';
 import { getSupplyPriorityProps } from '@/lib/utils';
 import { ShelterSupplyServices, SupplyServices } from '@/service';
 import { ICreateShelterSupply } from '@/service/shelterSupply/types';
+import { clearCache } from '@/api/cache';
 
 const CreateSupply = () => {
   const navigate = useNavigate();
@@ -60,6 +61,7 @@ const CreateSupply = () => {
           priority: +values.priority,
           shelterId,
         });
+        clearCache(false);
         toast({
           title: 'Item cadastrado com sucesso',
         });

src/pages/EditShelterSupply/EditShelterSupply.tsx

@@ -13,6 +13,7 @@ import { ShelterSupplyServices } from '@/service';
 import { useToast } from '@/components/ui/use-toast';
 import { ISupply, SupplyPriority } from '@/service/supply/types';
 import { IUseShelterDataSupply } from '@/hooks/useShelter/types';
+import { clearCache } from '@/api/cache';
 
 const EditShelterSupply = () => {
   const navigate = useNavigate();
@@ -66,6 +67,7 @@ const EditShelterSupply = () => {
           const successCallback = () => {
             setModalOpened(false);
             setModalData(null);
+            clearCache(false);
             refresh();
           };
 

src/pages/Home/components/Filter/Filter.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useMemo } from 'react';
 import Select from 'react-select';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
@@ -15,38 +16,99 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import {
-  IFilterFormProps,
+  IFilterFormikProps,
   IFilterProps,
   ShelterAvailabilityStatus,
 } from './types';
 import { priorityOptions } from '@/lib/utils';
 import { ISupply, SupplyPriority } from '@/service/supply/types';
-import { useCallback } from 'react';
+
+const ShelterAvailabilityStatusMapped: Record<
+  ShelterAvailabilityStatus,
+  string
+> = {
+  available: 'Abrigo Disponivel',
+  unavailable: 'Abrigo Indisponivel',
+  waiting: 'Sem informação de disponibilidade',
+};
+
+const priorityOpts = Object.entries(priorityOptions).reduce(
+  (prev, [priority, label]) =>
+    priority === `${SupplyPriority.NotNeeded}`
+      ? prev
+      : { ...prev, [priority]: label },
+  {} as Record<SupplyPriority, string>
+);
 
 const Filter = (props: IFilterProps) => {
   const { data, onClose, onSubmit, open } = props;
   const { data: supplies, loading: loadingSupplies } = useSupplies();
   const { data: supplyCategories, loading: loadingSupplyCategories } =
     useSupplyCategories();
-  const { handleSubmit, values, setFieldValue } = useFormik<IFilterFormProps>({
-    initialValues: data,
-    enableReinitialize: true,
-    validateOnChange: false,
-    validateOnBlur: false,
-    validateOnMount: false,
-    validationSchema: Yup.object().shape({
-      search: Yup.string(),
-    }),
-    onSubmit,
-  });
+  const mappedSupplyCategories = useMemo(() => {
+    return supplyCategories.reduce(
+      (prev, current) => ({ ...prev, [current.id]: current }),
+      {} as Record<string, ISupplyCategory>
+    );
+  }, [supplyCategories]);
+  const mappedSupplies = useMemo(() => {
+    return supplies.reduce(
+      (prev, current) => ({ ...prev, [current.id]: current }),
+      {} as Record<string, ISupply>
+    );
+  }, [supplies]);
+  const { handleSubmit, values, setFieldValue } = useFormik<IFilterFormikProps>(
+    {
+      initialValues: {
+        priority: {
+          value: data.priority ?? SupplyPriority.Urgent,
+          label: priorityOpts[data.priority ?? SupplyPriority.Urgent],
+        },
+        search: data.search,
+        shelterStatus: data.shelterStatus.map((s) => ({
+          label: ShelterAvailabilityStatusMapped[s],
+          value: s,
+        })),
+        supplyCategories: data.supplyCategoryIds.map((id) => ({
+          label: mappedSupplyCategories[id]?.name,
+          value: id,
+        })),
+        supplies: data.supplyIds.map((id) => ({
+          value: id,
+          label: mappedSupplies[id]?.name,
+        })),
+      },
+      enableReinitialize: true,
+      validateOnChange: false,
+      validateOnBlur: false,
+      validateOnMount: false,
+      validationSchema: Yup.object().shape({
+        search: Yup.string(),
+      }),
+      onSubmit: (values) => {
+        const { priority, search, shelterStatus, supplies, supplyCategories } =
+          values;
+        onSubmit({
+          priority: priority?.value ? +priority.value : null,
+          search,
+          shelterStatus: shelterStatus.map((s) => s.value),
+          supplyCategoryIds: supplyCategories.map((s) => s.value),
+          supplyIds: supplies.map((s) => s.value),
+        });
+      },
+    }
+  );
 
   const handleToggleShelterStatus = useCallback(
-    (checked: boolean, value: ShelterAvailabilityStatus) => {
+    (checked: boolean, status: ShelterAvailabilityStatus) => {
       setFieldValue(
         'shelterStatus',
         checked
-          ? [...values.shelterStatus, value]
-          : values.shelterStatus.filter((s) => s !== value)
+          ? [
+              ...values.shelterStatus,
+              { label: ShelterAvailabilityStatusMapped[status], value: status },
+            ]
+          : values.shelterStatus.filter((s) => s.value !== status)
       );
     },
     [setFieldValue, values.shelterStatus]
@@ -88,31 +150,38 @@ const Filter = (props: IFilterProps) => {
                 </label>
                 <Select
                   placeholder="Selecione"
-                  options={Object.entries(priorityOptions).map(
-                    ([priority, label]) => ({ label, value: priority } as any)
+                  value={{
+                    label:
+                      priorityOpts[
+                        values.priority?.value ?? SupplyPriority.Urgent
+                      ],
+                    value: values.priority?.value ?? SupplyPriority.Needing,
+                  }}
+                  options={Object.entries(priorityOpts).map(
+                    ([priority, label]) => ({ label, value: +priority } as any)
                   )}
-                  onChange={(
-                    v: { label: string; value: SupplyPriority } | null
-                  ) => setFieldValue('priority', v?.value)}
+                  onChange={(v) => {
+                    const newValue = {
+                      ...v,
+                      value: v ? +v.value : SupplyPriority.Urgent,
+                    };
+                    setFieldValue('priority', newValue);
+                  }}
                 />
               </div>
               <div className="flex flex-col gap-1 w-full">
                 <label className="text-muted-foreground text-sm md:text-lg font-medium">
                   Categoria
                 </label>
                 <Select
+                  value={values.supplyCategories}
                   placeholder="Selecione"
                   isMulti
                   options={supplyCategories.map((el: ISupplyCategory) => ({
                     label: el.name,
                     value: el.id,
                   }))}
-                  onChange={(v) =>
-                    setFieldValue(
-                      'supplyCategoryIds',
-                      v.map((s) => s.value)
-                    )
-                  }
+                  onChange={(v) => setFieldValue('supplyCategories', v)}
                 />
               </div>
               <div className="flex flex-col w-full">
@@ -122,16 +191,12 @@ const Filter = (props: IFilterProps) => {
                 <Select
                   placeholder="Selecione"
                   isMulti
+                  value={values.supplies}
                   options={supplies.map((el: ISupply) => ({
                     label: el.name,
                     value: el.id,
                   }))}
-                  onChange={(v) =>
-                    setFieldValue(
-                      'supplyIds',
-                      v.map((s) => s.value)
-                    )
-                  }
+                  onChange={(v) => setFieldValue('supplies', v)}
                 />
               </div>
             </div>
@@ -148,7 +213,9 @@ const Filter = (props: IFilterProps) => {
                     onChange={(ev) =>
                       handleToggleShelterStatus(ev.target.checked, 'available')
                     }
-                    defaultChecked={values.shelterStatus.includes('available')}
+                    defaultChecked={values.shelterStatus.some(
+                      (s) => s.value === 'available'
+                    )}
                   />
                   Abrigo Disponivel
                 </label>
@@ -164,8 +231,8 @@ const Filter = (props: IFilterProps) => {
                         'unavailable'
                       )
                     }
-                    defaultChecked={values.shelterStatus.includes(
-                      'unavailable'
+                    defaultChecked={values.shelterStatus.some(
+                      (s) => s.value === 'unavailable'
                     )}
                   />
                   Abrigo Indisponível
@@ -179,9 +246,11 @@ const Filter = (props: IFilterProps) => {
                     onChange={(ev) =>
                       handleToggleShelterStatus(ev.target.checked, 'waiting')
                     }
-                    defaultChecked={values.shelterStatus.includes('waiting')}
+                    defaultChecked={values.shelterStatus.some(
+                      (s) => s.value === 'waiting'
+                    )}
                   />
-                  Aguardando disponibilidade
+                  Sem informação de disponibilidade
                 </label>
               </div>
             </div>