fix: donation tags / componentized the urgent supplies section

Author: fagundesjg

src/components/ShelterListItem/ShelterListItem.tsx

@@ -2,7 +2,7 @@ import { LoadingScreen } from './LoadingScreen';
 import { Header } from './Header';
 import { Alert } from './Alert';
 import { CardAboutShelter } from './CardAboutShelter';
-import { ShelterListItem } from './ShelterListItem';
+import { ShelterListItem } from '../pages/Home/components/ShelterListItem';
 import { NoFoundSearch } from './NoFoundSearch';
 import { CircleStatus } from './CircleStatus';
 import { DialogSelector } from './DialogSelector';

src/components/index.ts

@@ -1,3 +1,5 @@
+import { ShelterTagType } from '@/pages/Home/components/ShelterListItem/types';
+
 export interface IUseSheltersData {
   id: string;
   name: string;
@@ -17,8 +19,12 @@ export interface IUseSheltersData {
 }
 
 export interface IUseSheltersDataSupplyData {
-  supply: { name: string, supplyCategory: { name: string}};
+  supply: {
+    name: string;
+    supplyCategory: { name: string };
+  };
   priority: number;
+  tags: ShelterTagType[];
 }
 
 export interface IUseShelterOptions {

src/hooks/useShelters/types.ts

@@ -1,3 +1,8 @@
+import { IUseSheltersDataSupplyData } from '@/hooks/useShelters/types';
+import {
+  ShelterTagInfo,
+  ShelterTagType,
+} from '@/pages/Home/components/ShelterListItem/types';
 import { SupplyPriority } from '@/service/supply/types';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -114,6 +119,31 @@ function group<T extends Record<string, any>>(
   return data;
 }
 
+function groupShelterSuppliesByTag(data: IUseSheltersDataSupplyData[]) {
+  const initialGroup: ShelterTagInfo<IUseSheltersDataSupplyData[]> = {
+    NeedDonations: [],
+    NeedVolunteers: [],
+    RemainingSupplies: [],
+  };
+  const grouped: ShelterTagInfo<IUseSheltersDataSupplyData[]> = initialGroup;
+
+  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);
+      }
+    });
+  });
+
+  return Object.entries(grouped).reduce((prev, [category, values]) => {
+    return {
+      ...prev,
+      [category]: values.sort((a, b) => a.priority - b.priority),
+    };
+  }, initialGroup);
+}
+
 export {
   cn,
   getAvailabilityProps,
@@ -123,4 +153,5 @@ export {
   colorStatusPriority,
   nameStatusPriority,
   priorityOptions,
+  groupShelterSuppliesByTag,
 };

src/lib/utils.ts

@@ -0,0 +1,105 @@
+import { useMemo } from 'react';
+import { format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
+import { ChevronRight } from 'lucide-react';
+
+import {
+  IShelterListItemProps,
+  IShelterAvailabilityProps,
+  ShelterTagInfo,
+} from './types';
+import {
+  cn,
+  getAvailabilityProps,
+  getSupplyPriorityProps,
+  groupShelterSuppliesByTag,
+} from '@/lib/utils';
+import { Button } from '../../../../components/ui/button';
+import { VerifiedBadge } from '@/components/VerifiedBadge/VerifiedBadge.tsx';
+import { IUseSheltersDataSupplyData } from '@/hooks/useShelters/types';
+import { ShelterSupplyCategoryRow } from '../ShelterSupplyCategoryRow';
+
+const ShelterListItem = (props: IShelterListItemProps) => {
+  const { data, onClick } = props;
+  const { capacity, shelteredPeople } = data;
+  const navigate = useNavigate();
+  const { availability, className: availabilityClassName } =
+    useMemo<IShelterAvailabilityProps>(
+      () => getAvailabilityProps(capacity, shelteredPeople),
+      [capacity, shelteredPeople]
+    );
+
+  const tags: ShelterTagInfo<IUseSheltersDataSupplyData[]> = useMemo(() => {
+    return groupShelterSuppliesByTag(data.shelterSupplies);
+  }, [data.shelterSupplies]);
+
+  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">
+        <ChevronRight className="h-5 w-5" />
+      </Button>
+      <div
+        className="flex items-center gap-1"
+        onClick={() => navigate(`/abrigo/${data.id}`)}
+      >
+        <h3
+          className="font-semibold text-lg  hover:cursor-pointer hover:text-slate-500"
+          onClick={onClick}
+        >
+          {data.name}
+        </h3>
+        {data.verified && <VerifiedBadge />}
+      </div>
+      <h6 className={cn('font-semibold text-md', availabilityClassName)}>
+        {availability}
+      </h6>
+      <h6 className="text-muted-foreground text-sm md:text-lg font-medium">
+        {data.address}
+      </h6>
+      {data.shelterSupplies.length > 0 && (
+        <>
+          <ShelterSupplyCategoryRow
+            title="Necessita volunários:"
+            tags={tags.NeedVolunteers.map((t) => {
+              const { className } = getSupplyPriorityProps(t.priority);
+              return {
+                ...t,
+                label: t.supply.name,
+                className,
+              };
+            })}
+          />
+          <ShelterSupplyCategoryRow
+            title="Necessita urgente doações de:"
+            tags={tags.NeedDonations.map((t) => {
+              const { className } = getSupplyPriorityProps(t.priority);
+              return {
+                ...t,
+                label: t.supply.name,
+                className,
+              };
+            })}
+          />
+          <ShelterSupplyCategoryRow
+            title="Sobrando para doações:"
+            tags={tags.RemainingSupplies.map((t) => {
+              const { className } = getSupplyPriorityProps(t.priority);
+              return {
+                ...t,
+                label: t.supply.name,
+                className,
+              };
+            })}
+          />
+        </>
+      )}
+      {data.updatedAt && (
+        <small className="text-sm md:text-md font-light text-muted-foreground mt-2">
+          Atualizado em {format(data.updatedAt, 'dd/MM/yyyy HH:mm')}
+        </small>
+      )}
+    </div>
+  );
+};
+
+export { ShelterListItem };

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

@@ -5,6 +5,15 @@ export interface IShelterAvailabilityProps {
   className: string;
 }
 
+export type ShelterTagType =
+  | 'NeedVolunteers'
+  | 'NeedDonations'
+  | 'RemainingSupplies';
+
+export type ShelterTagInfo<T = any> = {
+  [key in ShelterTagType]: T;
+};
+
 export interface IShelterListItemProps {
   data: IUseSheltersData;
   onClick?: () => void;

src/components/ShelterListItem/index.ts renamed to src/pages/Home/components/ShelterListItem/index.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Separator } from '@/components/ui/separator';
+import { IShelterSupplyCategoryRowProps } from './types';
+import { Chip } from '@/components';
+import { cn } from '@/lib/utils';
+
+const ShelterSupplyCategoryRow = React.forwardRef<
+  HTMLDivElement,
+  IShelterSupplyCategoryRowProps
+>((props, ref) => {
+  const { description, tags, title, className = '', ...rest } = props;
+
+  return (
+    <div className={cn('flex flex-col gap-3', className)} ref={ref} {...rest}>
+      <Separator className="mt-2" />
+      <p className="text-muted-foreground text-sm md:text-lg font-medium">
+        {title}
+      </p>
+      {description && <p>{description}</p>}
+      <div className="flex gap-2 flex-wrap">
+        {tags.map((s, idx) => (
+          <Chip key={idx} {...s} />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+export { ShelterSupplyCategoryRow };

src/components/ShelterListItem/types.ts renamed to src/pages/Home/components/ShelterListItem/types.ts

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

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

@@ -0,0 +1,8 @@
+import { IChipProps } from '@/components/Chip/types';
+
+export interface IShelterSupplyCategoryRowProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  title: string;
+  description?: string;
+  tags: IChipProps[];
+}