Hotfix/merge bugs (SOS-RS#183)

* fix: shelter list item duplicate code after merge

* fix: order in filter select menu, filter supplies by category and useSupplies interface

* fix: update shelter validation schema and created useAuthRoles hook to reduce complexity of code

Author: fagundesjg

src/components/Authenticated/Authenticated.tsx

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

src/components/DialogSelector/DialogSelector.tsx

@@ -52,18 +52,6 @@ const DialogSelector = (props: IDialogSelectorProps) => {
             Quantidade
           </label>
           <div className="flex gap-2 items-center justify-center py-2">
-            <Button
-              onClick={(event) => {
-                event.preventDefault();
-                setQuantity((prev) => {
-                  const newQuantity = Math.max(prev - 1, 0);
-                  return newQuantity;
-                });
-              }}
-              className="bg-blue-700 text-white hover:bg-blue-600 active:bg-blue-500 px-8"
-            >
-              -
-            </Button>
             <Input
               type="number"
               name="quantity"
@@ -72,18 +60,9 @@ const DialogSelector = (props: IDialogSelectorProps) => {
               placeholder="Quantidade"
               min={0}
             />
-            <Button
-              onClick={(event) => {
-                event.preventDefault();
-                setQuantity((prev) => prev + 1);
-              }}
-              className="bg-blue-700 text-white hover:bg-blue-600 active:bg-blue-500 px-8"
-            >
-              +
-            </Button>
           </div>
         </div>
-        <div className="px-2 py-4 max-h-[50vh] overflow-y-auto">
+        <div className="px-2 max-h-[50vh] overflow-y-auto">
           <RadioGroup
             value={selectedItem}
             onValueChange={(v) => setSelectedItem(v)}

src/hooks/index.ts

@@ -10,6 +10,7 @@ import { useSupplies } from './useSupplies';
 import { useViaCep } from './useViaCep';
 import { usePartners } from './usePartners';
 import { useGithubContributors } from './useGithubContributors';
+import { useAuthRoles } from './useAuthRoles';
 
 export {
   useShelters,
@@ -24,4 +25,5 @@ export {
   useViaCep,
   usePartners,
   useGithubContributors,
+  useAuthRoles,
 };

src/hooks/useAuthRoles/index.ts

@@ -0,0 +1,3 @@
+import { useAuthRoles } from './useAuthRoles';
+
+export { useAuthRoles };

src/hooks/useAuthRoles/useAuthRoles.tsx

@@ -0,0 +1,25 @@
+import { useContext } from 'react';
+
+import { SessionContext } from '@/contexts';
+import { AccessLevel } from '@/service/sessions/types';
+
+const MappedRoles: Record<AccessLevel, AccessLevel[]> = {
+  Admin: ['Admin'],
+  DistributionCenter: ['Admin', 'DistributionCenter'],
+  Staff: ['Admin', 'Staff'],
+  User: ['Admin', 'Staff', 'DistributionCenter', 'User'],
+};
+
+const useAuthRoles = (...roles: AccessLevel[]) => {
+  const { session } = useContext(SessionContext);
+
+  if (
+    !session ||
+    !roles.some((role) => MappedRoles[role].includes(session.accessLevel))
+  )
+    return false;
+
+  return true;
+};
+
+export { useAuthRoles };

src/hooks/useSupplies/types.ts

@@ -0,0 +1,12 @@
+export interface IUseSuppliesData {
+  id: string;
+  name: string;
+  supplyCategory: IUseSuppliesDataCategory;
+  createdAt: Date;
+  updatedAt: null;
+}
+
+export interface IUseSuppliesDataCategory {
+  id: string;
+  name: string;
+}

src/hooks/useSupplies/useSupplies.tsx

@@ -1,9 +1,9 @@
-import { ISupply } from '@/service/supply/types';
 import { useFetch } from '../useFetch';
 import { PaginatedQueryPath } from '../usePaginatedQuery/paths';
+import { IUseSuppliesData } from './types';
 
 const useSupplies = () => {
-  return useFetch<ISupply[]>(PaginatedQueryPath.Supplies, {
+  return useFetch<IUseSuppliesData[]>(PaginatedQueryPath.Supplies, {
     initialValue: [],
     cache: true,
   });

src/pages/EditShelterSupply/EditShelterSupply.tsx

@@ -11,17 +11,20 @@ import { IDialogSelectorProps } from '@/components/DialogSelector/types';
 import { ISupplyRowItemProps } from './components/SupplyRow/types';
 import { ShelterSupplyServices } from '@/service';
 import { useToast } from '@/components/ui/use-toast';
-import { ISupply, SupplyPriority } from '@/service/supply/types';
+import { SupplyPriority } from '@/service/supply/types';
 import { IUseShelterDataSupply } from '@/hooks/useShelter/types';
 import { clearCache } from '@/api/cache';
+import { IUseSuppliesData } from '@/hooks/useSupplies/types';
 
 const EditShelterSupply = () => {
   const navigate = useNavigate();
   const { shelterId = '-1' } = useParams();
   const { toast } = useToast();
   const { data: shelter, loading, refresh } = useShelter(shelterId);
   const { data: supplies } = useSupplies();
-  const [filteredSupplies, setFilteredSupplies] = useState<ISupply[]>([]);
+  const [filteredSupplies, setFilteredSupplies] = useState<IUseSuppliesData[]>(
+    []
+  );
   const [searchValue, setSearchValue] = useState<string>('');
   const [, setSearch] = useThrottle<string>(
     {
@@ -60,7 +63,8 @@ const EditShelterSupply = () => {
     );
   }, [shelter?.shelterSupplies]);
   const supplyGroups = useMemo(
-    () => group<ISupply>(filteredSupplies ?? [], 'supplyCategory.name'),
+    () =>
+      group<IUseSuppliesData>(filteredSupplies ?? [], 'supplyCategory.name'),
     [filteredSupplies]
   );
 
@@ -193,15 +197,17 @@ const EditShelterSupply = () => {
           </div>
           <div className="flex flex-col gap-2 w-full my-4">
             {Object.entries(supplyGroups).map(([key, values], idx) => {
-              const items: ISupplyRowItemProps[] = values.map((v) => {
-                const supply = shelterSupplyData[v.id];
-                return {
-                  id: v.id,
-                  name: v.name,
-                  quantity: supply?.quantity,
-                  priority: supply?.priority,
-                };
-              }).sort((a, b) => a.name.localeCompare(b.name));
+              const items: ISupplyRowItemProps[] = values
+                .map((v) => {
+                  const supply = shelterSupplyData[v.id];
+                  return {
+                    id: v.id,
+                    name: v.name,
+                    quantity: supply?.quantity,
+                    priority: supply?.priority,
+                  };
+                })
+                .sort((a, b) => a.name.localeCompare(b.name));
               return (
                 <SupplyRow
                   key={idx}

src/pages/EditShelterSupply/components/SupplyRowInfo/SupplyRowInfo.tsx

@@ -22,7 +22,7 @@ const SupplyRowInfo = (props: ISupplyRowInfoProps) => {
       <div className="flex justify-end items-center gap-2">
         <CircleStatus className={className} />
         <p className="text-muted-foreground text-nowrap pl-1">{label}</p>
-        {Boolean(quantity) && <Badge className="bg-gray-700">{quantity}</Badge>}
+        {Boolean(quantity) && <Badge variant="secondary">{quantity}</Badge>}
       </div>
     </div>
   );