fix: removed empty shelter tags empty row

Author: fagundesjg

src/lib/utils.ts

@@ -129,7 +129,6 @@ function groupShelterSuppliesByTag(data: IUseSheltersDataSupplyData[]) {
 
   data.forEach((shelterSupply) => {
     Object.keys(grouped).forEach((key: string) => {
-      console.log(shelterSupply.supply);
       if (shelterSupply.tags.includes(key as ShelterTagType)) {
         grouped[key as ShelterTagType].push(shelterSupply);
       }

src/pages/EditShelterSupply/EditShelterSupply.tsx

@@ -56,7 +56,6 @@ const EditShelterSupply = () => {
 
   const handleClickSupplyRow = useCallback(
     (item: ISupplyRowItemProps) => {
-      console.log('Item: ', item);
       setModalOpened(true);
       setModalData({
         value: `${item.priority ?? SupplyPriority.NotNeeded}`,

src/pages/Home/components/ShelterListItem/ShelterListItem.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { format } from 'date-fns';
 import { useNavigate } from 'react-router-dom';
 import { ChevronRight } from 'lucide-react';
@@ -33,6 +33,14 @@ const ShelterListItem = (props: IShelterListItemProps) => {
     return groupShelterSuppliesByTag(data.shelterSupplies);
   }, [data.shelterSupplies]);
 
+  const getChipProps = useCallback((s: IUseSheltersDataSupplyData) => {
+    const { className } = getSupplyPriorityProps(s.priority);
+    return {
+      label: s.supply.name,
+      className,
+    };
+  }, []);
+
   return (
     <div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative">
       <Button size="sm" variant="ghost" className="absolute top-4 right-4">
@@ -60,36 +68,15 @@ const ShelterListItem = (props: IShelterListItemProps) => {
         <>
           <ShelterSupplyCategoryRow
             title="Necessita volunários:"
-            tags={tags.NeedVolunteers.map((t) => {
-              const { className } = getSupplyPriorityProps(t.priority);
-              return {
-                ...t,
-                label: t.supply.name,
-                className,
-              };
-            })}
+            tags={tags.NeedVolunteers.map(getChipProps)}
           />
           <ShelterSupplyCategoryRow
             title="Necessita urgente doações de:"
-            tags={tags.NeedDonations.map((t) => {
-              const { className } = getSupplyPriorityProps(t.priority);
-              return {
-                ...t,
-                label: t.supply.name,
-                className,
-              };
-            })}
+            tags={tags.NeedDonations.map(getChipProps)}
           />
           <ShelterSupplyCategoryRow
             title="Sobrando para doações:"
-            tags={tags.RemainingSupplies.map((t) => {
-              const { className } = getSupplyPriorityProps(t.priority);
-              return {
-                ...t,
-                label: t.supply.name,
-                className,
-              };
-            })}
+            tags={tags.RemainingSupplies.map(getChipProps)}
           />
         </>
       )}

src/pages/Home/components/ShelterSupplyCategoryRow/ShelterSupplyCategoryRow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Separator } from '@/components/ui/separator';
 import { IShelterSupplyCategoryRowProps } from './types';
@@ -11,6 +11,8 @@ const ShelterSupplyCategoryRow = React.forwardRef<
 >((props, ref) => {
   const { description, tags, title, className = '', ...rest } = props;
 
+  if (tags.length === 0) return <Fragment />;
+
   return (
     <div className={cn('flex flex-col gap-3', className)} ref={ref} {...rest}>
       <Separator className="mt-2" />