feat: added all supplies in edit shelter supply and renamed editer shelter supply page

Author: fagundesjg

src/App.tsx

@@ -1,13 +1,13 @@
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom';
 
-import { Routes } from "./routes/Routes";
-import { SessionProvider } from "./contexts";
+import { Routes } from './routes/Routes';
+import { SessionProvider } from './contexts';
 
 const App = () => {
   return (
     <BrowserRouter>
       <SessionProvider>
-        <Routes />;
+        <Routes />
       </SessionProvider>
     </BrowserRouter>
   );

src/components/Chip/Chip.tsx

@@ -5,20 +5,23 @@ import { cva } from 'class-variance-authority';
 const Chip = React.forwardRef<HTMLDivElement, IChipProps>((props, ref) => {
   const { label, className, variant = 'info', ...rest } = props;
 
-  const variants = cva('px-4 py-1 text-nowrap font-semibold rounded-3xl', {
-    variants: {
-      variant: {
-        warn: 'bg-light-yellow',
-        success: 'bg-light-green',
-        danger: 'bg-light-red',
-        alert: 'bg-light-orange',
-        info: 'bg-light-blue',
+  const variants = cva(
+    'px-4 py-1 text-nowrap font-normal text-sm md:text-md rounded-3xl',
+    {
+      variants: {
+        variant: {
+          warn: 'bg-light-yellow',
+          success: 'bg-light-green',
+          danger: 'bg-light-red',
+          alert: 'bg-light-orange',
+          info: 'bg-light-blue',
+        },
       },
-    },
-    defaultVariants: {
-      variant: 'info',
-    },
-  });
+      defaultVariants: {
+        variant: 'info',
+      },
+    }
+  );
 
   return (
     <div ref={ref} {...rest} className={variants({ className, variant })}>

src/components/DialogSelector/DialogSelector.tsx

@@ -30,9 +30,7 @@ const DialogSelector = (props: IDialogSelectorProps) => {
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="rounded-md">
         <DialogHeader>
-          <DialogTitle>
-            <h1 className="text-base font-medium">{title}</h1>
-          </DialogTitle>
+          <DialogTitle className="text-base font-medium">{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
         <div className="px-2 py-4 max-h-[50vh] overflow-y-auto">

src/lib/utils.ts

@@ -68,7 +68,7 @@ function getSupplyPriorityProps(priority: SupplyPriority) {
     case SupplyPriority.Remaining:
       return {
         label: 'Disponível para doação',
-        className: 'bg-light-green',
+        className: 'bg-light-green text-gray-100',
       };
     case SupplyPriority.Needing:
       return {

src/pages/ShelterItem/ShelterItem.tsx renamed to src/pages/EditShelterSupply/EditShelterSupply.tsx

@@ -12,10 +12,12 @@ 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 { IUseShelterDataSupply } from '@/hooks/useShelter/types';
 
-const ShelterItem = () => {
+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[]>([]);
@@ -41,36 +43,60 @@ const ShelterItem = () => {
     IDialogSelectorProps,
     'value' | 'onSave'
   > | null>();
-  const { toast } = useToast();
-
+  const shelterSupplyData = useMemo(() => {
+    return (shelter?.shelterSupplies ?? []).reduce(
+      (prev, current) => ({ ...prev, [current.supply.id]: current }),
+      {} as Record<string, IUseShelterDataSupply>
+    );
+  }, [shelter?.shelterSupplies]);
   const supplyGroups = useMemo(
     () => group<ISupply>(filteredSupplies ?? [], 'supplyCategory.name'),
     [filteredSupplies]
   );
 
   const handleClickSupplyRow = useCallback(
     (item: ISupplyRowItemProps) => {
+      console.log('Item: ', item);
       setModalOpened(true);
       setModalData({
-        value: `${item.priority}`,
+        value: `${item.priority ?? SupplyPriority.UnderControl}`,
         onSave: (v) => {
+          const isNewSupply = item.priority === undefined;
           setLoadingSave(true);
-          ShelterSupplyServices.update(shelterId, item.id, { priority: +v })
-            .then(() => {
-              setModalOpened(false);
-              setModalData(null);
-              refresh();
+
+          const successCallback = () => {
+            setModalOpened(false);
+            setModalData(null);
+            refresh();
+          };
+
+          const errorCallback = (err: any) => {
+            toast({
+              variant: 'destructive',
+              title: 'Ocorreu um erro ao atualizar a categoria do suprimento',
+              description: `${err}`,
+            });
+          };
+
+          if (isNewSupply) {
+            ShelterSupplyServices.create({
+              shelterId,
+              supplyId: item.id,
+              priority: +v,
             })
-            .catch((err) => {
-              toast({
-                variant: 'destructive',
-                title: 'Ocorreu um erro ao atualizar a categoria do suprimento',
-                description: `${err}`,
+              .then(successCallback)
+              .catch(errorCallback)
+              .finally(() => {
+                setLoadingSave(false);
               });
-            })
-            .finally(() => {
-              setLoadingSave(false);
-            });
+          } else {
+            ShelterSupplyServices.update(shelterId, item.id, { priority: +v })
+              .then(successCallback)
+              .catch(errorCallback)
+              .finally(() => {
+                setLoadingSave(false);
+              });
+          }
         },
       });
     },
@@ -151,23 +177,29 @@ const ShelterItem = () => {
             />
           </div>
           <div className="flex flex-col gap-2 w-full my-4">
-            {Object.entries(supplyGroups).map(([key, values], idx) => (
-              <SupplyRow
-                key={idx}
-                name={key}
-                items={values.map((v) => ({
+            {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,
-                  priority: 0, //v.priority,
-                }))}
-                onClick={handleClickSupplyRow}
-              />
-            ))}
+                  priority: supply?.priority,
+                };
+              });
+              return (
+                <SupplyRow
+                  key={idx}
+                  name={key}
+                  items={items}
+                  onClick={handleClickSupplyRow}
+                />
+              );
+            })}
           </div>
         </div>
       </div>
     </Fragment>
   );
 };
 
-export { ShelterItem };
+export { EditShelterSupply };

src/pages/ShelterItem/components/SupplyRow/SupplyRow.tsx renamed to src/pages/EditShelterSupply/components/SupplyRow/SupplyRow.tsx

@@ -1,3 +1,4 @@
+import { SupplyPriority } from '@/service/supply/types';
 import { SupplyRowInfo } from '../SupplyRowInfo';
 import { ISupplyRowProps } from './types';
 
@@ -12,7 +13,7 @@ const SupplyRow = (props: ISupplyRowProps) => {
           <SupplyRowInfo
             key={idy}
             name={item.name}
-            priority={item.priority}
+            priority={item.priority ?? SupplyPriority.UnderControl}
             onClick={() => (onClick ? onClick(item) : undefined)}
           />
         ))}

src/pages/ShelterItem/components/SupplyRow/index.ts renamed to src/pages/EditShelterSupply/components/SupplyRow/index.ts

@@ -3,7 +3,7 @@ import { SupplyPriority } from '@/service/supply/types';
 export interface ISupplyRowItemProps {
   id: string;
   name: string;
-  priority: SupplyPriority;
+  priority?: SupplyPriority;
 }
 
 export interface ISupplyRowProps {