feat: added dedicated volunteers section to home and shelter pages

Author: MatheusDubin

src/components/ShelterListItem/ShelterListItem.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { ChevronRight } from 'lucide-react';
 
 import { IShelterListItemProps, IShelterAvailabilityProps } from './types';
-import { cn, getAvailabilityProps, getSupplyPriorityProps } from '@/lib/utils';
+import { cn, getAvailabilityProps, getCategoriesToFilterVolunteers, getSupplyPriorityProps } from '@/lib/utils';
 import { Separator } from '../ui/separator';
 import { Chip } from '../Chip';
 import { Button } from '../ui/button';
@@ -22,13 +22,20 @@ const ShelterListItem = (props: IShelterListItemProps) => {
     );
 
   const tags = useMemo(
-    () =>
-      data.shelterSupplies
-        .filter((s) => s.priority >= SupplyPriority.Needing)
-        .sort((a, b) => b.priority - a.priority),
+    () => {
+      return data.shelterSupplies?.filter((s) => !getCategoriesToFilterVolunteers().some(c => c.includes(s.supply?.supplyCategory?.name.toLowerCase())))
+        .sort((a, b) => b.priority - a.priority).slice(0, 10)
+    },
     [data.shelterSupplies]
   );
 
+  const volunteerTags = useMemo(
+    () => {
+      return data.shelterSupplies?.filter((s) => getCategoriesToFilterVolunteers().some(c => c.includes(s.supply?.supplyCategory?.name.toLowerCase()))).reverse()
+    },
+    [data.shelterSupplies]
+  )
+
   return (
     <div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative">
       <Button
@@ -57,21 +64,41 @@ const ShelterListItem = (props: IShelterListItemProps) => {
         {data.address}
       </h6>
       {data.shelterSupplies.length > 0 && (
-        <div className="flex flex-col gap-3">
-          <Separator className="mt-2" />
-          <p className="text-muted-foreground text-sm md:text-lg font-medium">
-            Precisa urgente de doações de:
-          </p>
-          <div className="flex gap-2 flex-wrap">
-            {tags.map((s, idx) => (
-              <Chip
-                className={getSupplyPriorityProps(s.priority).className}
-                key={idx}
-                label={s.supply.name}
-              />
-            ))}
+        <>
+          <div className="flex flex-col gap-3">
+            <Separator className="mt-2" />
+            <p className="text-muted-foreground text-sm md:text-lg font-medium">
+              Status voluntários:
+            </p>
+            <div className="flex gap-2 flex-wrap">
+              {volunteerTags.length == 0 ?
+                <p> Não informado. <i> (Pode ser adicionado ao clickar no abrigo) </i></p>
+                :
+                volunteerTags.map((s, idx) => (
+                  <Chip
+                    className={getSupplyPriorityProps(s.priority).className}
+                    key={idx}
+                    label={s.supply.name}
+                  />
+                ))}
+            </div>
+          </div>
+          <div className="flex flex-col gap-3">
+            <Separator className="mt-2" />
+            <p className="text-muted-foreground text-sm md:text-lg font-medium">
+              Necessita urgente de doações de:
+            </p>
+            <div className="flex gap-2 flex-wrap">
+              {tags.map((s, idx) => (
+                <Chip
+                  className={getSupplyPriorityProps(s.priority).className}
+                  key={idx}
+                  label={s.supply.name}
+                />
+              ))}
+            </div>
           </div>
-        </div>
+        </>
       )}
       {data.updatedAt && (
         <small className="text-sm md:text-md font-light text-muted-foreground mt-2">

src/hooks/useShelters/types.ts

@@ -17,6 +17,6 @@ export interface IUseSheltersData {
 }
 
 export interface IUseSheltersDataSupplyData {
-  supply: { name: string };
+  supply: { name: string, supplyCategory: { name: string}};
   priority: number;
 }

src/lib/utils.ts

@@ -106,6 +106,10 @@ function group<T extends Record<string, any>>(
   return data;
 }
 
+function getCategoriesToFilterVolunteers(): string[] {
+  return ['voluntariado', 'especialistas e profissionais']
+}
+
 export {
   cn,
   getAvailabilityProps,
@@ -114,4 +118,5 @@ export {
   variantStatusPriority,
   colorStatusPriority,
   nameStatusPriority,
+  getCategoriesToFilterVolunteers,
 };

src/pages/Shelter/Shelter.tsx

@@ -2,15 +2,16 @@ import { useMemo } from 'react';
 import { ChevronLeft, Pencil } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { CardAboutShelter, Header, LoadingScreen } from '@/components';
+import { CardAboutShelter, Chip, Header, LoadingScreen } from '@/components';
 import { useShelter } from '@/hooks';
 import { IShelterAvailabilityProps } from '@/components/ShelterListItem/types';
-import { cn, getAvailabilityProps, group } from '@/lib/utils';
+import { cn, getAvailabilityProps, getCategoriesToFilterVolunteers, getSupplyPriorityProps, group } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { ShelterCategoryItems } from './components';
 import { IShelterCategoryItemsProps } from './components/ShelterCategoryItems/types';
 import { SupplyPriority } from '@/service/supply/types';
 import { VerifiedBadge } from '@/components/VerifiedBadge/VerifiedBadge.tsx';
+import { IUseShelterDataSupply } from '@/hooks/useShelter/types';
 
 const Shelter = () => {
   const params = useParams();
@@ -20,8 +21,9 @@ const Shelter = () => {
   const { data: shelters } = useShelter(id);
 
   const shelterCategories: IShelterCategoryItemsProps[] = useMemo(() => {
-    const grouped = group(shelters?.shelterSupplies ?? [], 'priority');
+    const grouped = group(shelter?.shelterSupplies?.filter((s) => !getCategoriesToFilterVolunteers().some(c => c.includes(s.supply?.supplyCategory?.name?.toLowerCase()))) ?? [], 'priority');
     delete grouped[SupplyPriority.NotNeeded];
+
     return Object.entries(grouped)
       .sort(([a], [b]) => (+a > +b ? -1 : 1))
       .map(([key, values]) => ({
@@ -30,6 +32,10 @@ const Shelter = () => {
       }));
   }, [shelters.shelterSupplies]);
 
+  const volunteerTags: IUseShelterDataSupply[] = useMemo(() => {
+    return shelter?.shelterSupplies?.filter((s) => getCategoriesToFilterVolunteers().some(c => c.includes(s.supply?.supplyCategory?.name?.toLowerCase()))).reverse()
+  }, [shelter.shelterSupplies])
+
   const { availability, className: availabilityClassName } =
     useMemo<IShelterAvailabilityProps>(
       () => getAvailabilityProps(shelter?.capacity, shelter?.shelteredPeople),
@@ -93,6 +99,23 @@ const Shelter = () => {
           </div>
         </div>
         <div className="flex flex-col gap-8 p-4 ">
+
+        <div className="flex flex-col gap-3">
+            <div className="flex gap-2 items-center">
+              <h3>
+                Voluntários
+              </h3>
+            </div>
+            <div className="flex gap-2 flex-wrap">
+              {volunteerTags.map((v, idx) => (
+                <Chip
+                  className={getSupplyPriorityProps(v.priority).className}
+                  key={idx}
+                  label={v.supply.name}
+                />
+              ))}
+            </div>
+          </div>
           {shelterCategories.map((categoryProps, idx) => (
             <ShelterCategoryItems key={idx} {...categoryProps} />
           ))}