refactor: donation history page (#346)

Refatoração da tela de doações

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "axios": "^1.6.8",

src/components/BurgerMenu/BurgerMenu.tsx

@@ -10,16 +10,16 @@ import {
   ShieldAlert,
   X,
 } from 'lucide-react';
+import clsx from 'clsx';
 
 import { SessionServices } from '@/service';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { BurguerMenuItem } from './components';
 import { Separator } from '../ui/separator';
 import { SessionContext } from '@/contexts';
 import { usePartners } from '@/hooks';
-import { DialogClose } from '@radix-ui/react-dialog';
 import { Button } from '../ui/button';
-import { DialogFooter } from '../ui/dialog';
+import { DialogClose, DialogFooter } from '../ui/dialog';
 
 const BurgerMenu = () => {
   const { session } = useContext(SessionContext);
@@ -63,6 +63,12 @@ const BurgerMenu = () => {
             link="/sobre-nos"
             icon={<Info className="w-5 h-5" />}
           />
+          <BurguerMenuItem
+            label="Minhas Doações"
+            link="/doacoes"
+            icon={<HeartHandshake className="w-5 h-5" />}
+            className={clsx({ hidden: !session })}
+          />
           <BurguerMenuItem
             label="Cadastrar abrigo"
             link="https://forms.gle/2S7L2gR529Dc8P3T9"

src/components/DonationCart/DonationCart.tsx

@@ -27,7 +27,10 @@ const DonationCart = (props: IDonationCart) => {
 
   return (
     <Sheet open={opened} onOpenChange={onClose}>
-      <SheetContent side="right" className="z-[120] flex flex-col pb-0 px-0">
+      <SheetContent
+        side="right"
+        className="z-[120] flex flex-col pb-0 px-0 overflow-y-auto"
+      >
         {donationOrderId ? (
           <DonationSuccess donationOrderId={donationOrderId} />
         ) : (

src/components/DonationCart/components/DonationSuccess/DonationSuccess.tsx

@@ -22,10 +22,6 @@ const DonationSuccess = React.forwardRef<HTMLDivElement, IDonationSuccessProps>(
     if (loading)
       return <Loader className="stroke-gray-500 w-6 h-6 animate-spin" />;
 
-    const handleRedirect = () => {
-      navigate(`/abrigo/${donation.shelter.id}/doacoes`);
-    };
-
     return (
       <div ref={ref} className={cn('contents', className)} {...rest}>
         <SheetHeader className="px-4">
@@ -80,7 +76,7 @@ const DonationSuccess = React.forwardRef<HTMLDivElement, IDonationSuccessProps>(
           <Button
             className="w-full"
             variant="destructive"
-            onClick={handleRedirect}
+            onClick={() => navigate('/doacoes')}
           >
             Verificar histórico de doações
           </Button>

src/components/Loader/Loader.tsx

@@ -0,0 +1,12 @@
+import { Loader2 } from 'lucide-react';
+import { ILoader } from './types';
+
+const Loader = (props: ILoader) => {
+  const { loading, children } = props;
+
+  if (loading) return <Loader2 className="w-5 h-5 animate-spin" />;
+
+  return children;
+};
+
+export { Loader };

src/components/Loader/index.ts

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

src/components/Loader/types.ts

@@ -0,0 +1,4 @@
+export interface ILoader {
+  loading: boolean;
+  children?: React.ReactNode;
+}

src/components/index.ts

@@ -17,6 +17,7 @@ import { BurgerMenu } from './BurgerMenu';
 import { BackToTop } from './BackToTop';
 import { DonationCartIcon } from './DonationCartIcon';
 import { DonationCart } from './DonationCart';
+import { Loader } from './Loader';
 
 export {
   LoadingScreen,
@@ -38,4 +39,5 @@ export {
   BackToTop,
   DonationCartIcon,
   DonationCart,
+  Loader,
 };

src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/hooks/index.ts

@@ -13,6 +13,7 @@ import { useGithubContributors } from './useGithubContributors';
 import { useAuthRoles } from './useAuthRoles';
 import { useSupporters } from './useSupporters';
 import { useDonationOrder } from './useDonationOrder';
+import { useDonations } from './useDonations';
 
 export {
   useShelters,
@@ -30,4 +31,5 @@ export {
   useAuthRoles,
   useSupporters,
   useDonationOrder,
+  useDonations,
 };

src/hooks/useDonations/types.ts

@@ -1,3 +1,6 @@
+import { DonateOrderStatus } from '@/service/donationOrder/types';
+import { SupplyMeasure } from '../useShelter/types';
+
 export interface IUseDonationsData {
   page: number;
   perPage: number;
@@ -8,18 +11,18 @@ export interface IUseDonationsData {
 export interface IDonationsData {
   id: string;
   userId: string;
-  status: string;
+  status: DonateOrderStatus;
   shelter: {
     id: string;
     name: string;
   };
   donationOrderSupplies: {
     quantity: number;
     supply: {
-      measure: string;
+      measure: SupplyMeasure;
       name: string;
     };
-  };
+  }[];
   createdAt: string;
   updatedAt: string;
 }

src/hooks/useDonations/useDonations.tsx

@@ -2,8 +2,15 @@ import { useFetch } from '../useFetch';
 import { PaginatedQueryPath } from '../usePaginatedQuery/paths';
 import { IUseDonationsData } from './types';
 
-const useDonations = (shelterId: string) => {
-  return useFetch<IUseDonationsData>(`${PaginatedQueryPath.DonationOrder}`);
+const useDonations = () => {
+  return useFetch<IUseDonationsData>(`${PaginatedQueryPath.DonationOrder}`, {
+    initialValue: {
+      count: 0,
+      page: 1,
+      perPage: 20,
+      results: [],
+    },
+  });
 };
 
 export { useDonations };

src/lib/utils.ts

@@ -1,9 +1,11 @@
 import { ShelterCategory, SupplyMeasure } from '@/hooks/useShelter/types';
 import { IUseSheltersDataSupplyData } from '@/hooks/useShelters/types';
+import { ShelterAvailabilityStatus } from '@/pages/Home/components/Filter/types';
 import {
   ShelterTagInfo,
   ShelterTagType,
 } from '@/pages/Home/components/ShelterListItem/types';
+import { DonateOrderStatus } from '@/service/donationOrder/types';
 import { SupplyPriority } from '@/service/supply/types';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -158,6 +160,19 @@ const SupplyMeasureMap: Record<SupplyMeasure, string> = {
   Unit: 'un',
 };
 
+const ShelterAvailabilityStatusMap: Record<ShelterAvailabilityStatus, string> =
+  {
+    available: 'Abrigo Disponivel',
+    unavailable: 'Abrigo Indisponivel',
+    waiting: 'Sem informação de disponibilidade',
+  };
+
+const DonationStatusMap: Record<DonateOrderStatus, string> = {
+  [DonateOrderStatus.Canceled]: 'Cancelado',
+  [DonateOrderStatus.Pending]: 'Pendente',
+  [DonateOrderStatus.Complete]: 'Entregue',
+};
+
 export {
   cn,
   getAvailabilityProps,
@@ -169,4 +184,6 @@ export {
   normalizedCompare,
   checkIsNull,
   SupplyMeasureMap,
+  ShelterAvailabilityStatusMap,
+  DonationStatusMap,
 };