feat: edit shelter supply item quantity (#170)

Author: kelvinsb

src/components/DialogSelector/DialogSelector.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 
 import {
   Dialog,
@@ -12,6 +12,7 @@ import { IDialogSelectorProps } from './types';
 import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
 import { Label } from '../ui/label';
 import { Button } from '../ui/button';
+import { Input } from '../ui/input';
 
 const DialogSelector = (props: IDialogSelectorProps) => {
   const {
@@ -21,10 +22,23 @@ const DialogSelector = (props: IDialogSelectorProps) => {
     description,
     options,
     value,
+    quantity: quantityProp,
     onSave,
     isSubmitting,
   } = props;
   const [selectedItem, setSelectedItem] = useState<string>(value);
+  const selectedItemRef = useRef<string>(value); // to prevent dated prop values bug on the previous line
+  const [quantity, setQuantity] = useState<number>(quantityProp);
+  const quantityRef = useRef<number>(quantityProp);
+
+  if (quantityRef.current !== quantityProp) {
+    setQuantity(quantityProp);
+    quantityRef.current = quantityProp;
+  }
+  if (selectedItemRef.current !== value) {
+    setSelectedItem(value);
+    selectedItemRef.current = value;
+  }
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
@@ -33,15 +47,57 @@ const DialogSelector = (props: IDialogSelectorProps) => {
           <DialogTitle className="text-base font-medium">{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
+        <div className="flex flex-col">
+          <label htmlFor="quantity" className="text-muted-foreground">
+            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"
+              value={quantity}
+              onChange={(event) => setQuantity(+event.target.value)}
+              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">
           <RadioGroup
             value={selectedItem}
             onValueChange={(v) => setSelectedItem(v)}
           >
             {options.map((option, idx) => (
               <div key={idx} className="flex items-center space-x-2 py-2">
-                <RadioGroupItem value={option.value} id="r1" />
-                <Label htmlFor="r1">{option.label}</Label>
+                <RadioGroupItem
+                  value={option.value}
+                  id={option.value}
+                  className="cursor-pointer"
+                />
+                <Label htmlFor={option.value} className="cursor-pointer">
+                  {option.label}
+                </Label>
               </div>
             ))}
           </RadioGroup>
@@ -50,7 +106,9 @@ const DialogSelector = (props: IDialogSelectorProps) => {
           <Button
             className="w-full bg-blue-700 text-white hover:bg-blue-600 active:bg-blue-500"
             size="sm"
-            onClick={() => (onSave ? onSave(selectedItem) : undefined)}
+            onClick={() =>
+              onSave ? onSave(selectedItem, quantity) : undefined
+            }
             loading={isSubmitting}
           >
             Salvar

src/components/DialogSelector/types.ts

@@ -10,6 +10,7 @@ export interface IDialogSelectorProps {
   options: IDialogSelectorItemProps[];
   value: string;
   isSubmitting?: boolean;
-  onSave?: (value: string) => void;
+  onSave?: (value: string, newQuantity: number) => void;
   onClose?: () => void;
+  quantity: number;
 }

src/pages/EditShelterSupply/EditShelterSupply.tsx

@@ -30,8 +30,16 @@ const EditShelterSupply = () => {
         if (v) {
           setFilteredSupplies(
             supplies.filter((s) =>
-              s.name.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '')
-                .includes(v.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
+              s.name
+                .toLowerCase()
+                .normalize('NFD')
+                .replace(/[\u0300-\u036f]/g, '')
+                .includes(
+                  v
+                    .toLowerCase()
+                    .normalize('NFD')
+                    .replace(/[\u0300-\u036f]/g, '')
+                )
             )
           );
         } else setFilteredSupplies(supplies);
@@ -43,7 +51,7 @@ const EditShelterSupply = () => {
   const [loadingSave, setLoadingSave] = useState<boolean>(false);
   const [modalData, setModalData] = useState<Pick<
     IDialogSelectorProps,
-    'value' | 'onSave'
+    'value' | 'onSave' | 'quantity'
   > | null>();
   const shelterSupplyData = useMemo(() => {
     return (shelter?.shelterSupplies ?? []).reduce(
@@ -61,7 +69,8 @@ const EditShelterSupply = () => {
       setModalOpened(true);
       setModalData({
         value: `${item.priority ?? SupplyPriority.NotNeeded}`,
-        onSave: (v) => {
+        quantity: item.quantity ?? 0,
+        onSave: (v, quantity) => {
           const isNewSupply = item.priority === undefined;
           setLoadingSave(true);
 
@@ -85,14 +94,18 @@ const EditShelterSupply = () => {
               shelterId,
               supplyId: item.id,
               priority: +v,
+              quantity,
             })
               .then(successCallback)
               .catch(errorCallback)
               .finally(() => {
                 setLoadingSave(false);
               });
           } else {
-            ShelterSupplyServices.update(shelterId, item.id, { priority: +v })
+            ShelterSupplyServices.update(shelterId, item.id, {
+              priority: +v,
+              quantity,
+            })
               .then(successCallback)
               .catch(errorCallback)
               .finally(() => {

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

@@ -22,9 +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>
-        {quantity && (
-          <Badge className="bg-gray-700">{quantity}</Badge>
-        )}
+        {Boolean(quantity) && <Badge className="bg-gray-700">{quantity}</Badge>}
       </div>
     </div>
   );

src/service/shelterSupply/types.ts

@@ -11,7 +11,7 @@ export interface IShelterSupply {
 }
 
 export type IUpdateShelterSupply = Partial<
-  Pick<IShelterSupply, 'priority' | 'shelterId' | 'supplyId'>
+  Pick<IShelterSupply, 'priority' | 'shelterId' | 'supplyId' | 'quantity'>
 >;
 
 export type ICreateShelterSupply = Pick<