feat: added shelter category

risaddex · May 17, 2024 · e17170f · e17170f
1 parent 4bbc984
commit e17170f
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 105 deletions.
diff --git a/src/components/Authenticated/Authenticated.tsx b/src/components/Authenticated/Authenticated.tsx
@@ -3,10 +3,14 @@ import { Fragment } from 'react';
 import { IAuthenticatedProps } from './types';
 import { useAuthRoles } from '@/hooks';
 
-const Authenticated = ({ children, role = 'User' }: IAuthenticatedProps) => {
+const Authenticated = ({
+  children,
+  bypass = false,
+  role = 'User',
+}: IAuthenticatedProps) => {
   const isAuthenticated = useAuthRoles(role);
 
-  if (!isAuthenticated) return <Fragment />;
+  if (!bypass && !isAuthenticated) return <Fragment />;
 
   return <div className="contents">{children}</div>;
 };

diff --git a/src/components/Authenticated/types.ts b/src/components/Authenticated/types.ts
@@ -2,5 +2,6 @@ import { AccessLevel } from '@/service/sessions/types';
 
 export interface IAuthenticatedProps {
   role?: AccessLevel;
+  bypass?: boolean;
   children?: React.ReactNode;
 }
diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -7,6 +7,7 @@ import {
   Info,
   LinkIcon,
   Menu,
+  ShieldAlert,
 } from 'lucide-react';
 
 import { SessionServices } from '@/service';
@@ -49,27 +50,35 @@ const BurgerMenu = () => {
           <BurguerMenuItem
             label="Sobre nós"
             link="/sobre-nos"
-            icon={<Info className="w-4 h-4" />}
+            icon={<Info className="w-5 h-5" />}
           />
           <BurguerMenuItem
             label="Cadastrar abrigo"
             link="https://forms.gle/2S7L2gR529Dc8P3T9"
-            icon={<CirclePlus className="w-4 h-4" />}
+            icon={<CirclePlus className="w-5 h-5" />}
+            openExternal={true}
+          />
+          <BurguerMenuItem
+            label="Canal de Denúncias"
+            link="https://contatoseguro.com.br/sos_rs"
+            icon={<ShieldAlert className="w-5 h-5" />}
+            openExternal={true}
           />
           <BurguerMenuItem
             label="Como Ajudar"
             link="https://www.instagram.com/reel/C613CfGuh4b"
-            icon={<CircleHelp className="w-4 h-4" />}
+            icon={<CircleHelp className="w-5 h-5" />}
+            openExternal={true}
           />
           <BurguerMenuItem
             label="Política de Privacidade"
             link="/politica-de-privacidade"
-            icon={<Info className="w-4 h-4" />}
+            icon={<Info className="w-5 h-5" />}
           />
           <BurguerMenuItem
             label="Apoiadores"
             link="/apoiadores"
-            icon={<HeartHandshake className="w-4 h-4" />}
+            icon={<HeartHandshake className="w-5 h-5" />}
           />
           <Separator />
           {partners.length > 0 && (

diff --git a/src/components/BurgerMenu/components/BurguerMenuItem/BurguerMenuItem.tsx b/src/components/BurgerMenu/components/BurguerMenuItem/BurguerMenuItem.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ExternalLink } from 'lucide-react';
 
 import { IBurguerMenuItemProps } from './types';
 import { cn } from '@/lib/utils';
@@ -7,22 +8,31 @@ const BurguerMenuItem = React.forwardRef<
   HTMLAnchorElement,
   IBurguerMenuItemProps
 >((props, ref) => {
-  const { icon, label, onClick, link, className = '', ...rest } = props;
+  const {
+    icon,
+    label,
+    onClick,
+    link,
+    className = '',
+    openExternal,
+    ...rest
+  } = props;
 
   return (
     <a
       ref={ref}
       href={link}
-      target="_blank"
       className={cn(
         'hover:font-semibold flex gap-2 items-center text-zinc-600 [&_svg]:stroke-zinc-500',
         className
       )}
       onClick={onClick}
       {...rest}
+      target={openExternal ? '_blank' : undefined}
     >
       {icon}
       {label}
+      {openExternal && <ExternalLink className="w-3 h-3" />}
     </a>
   );
 });

diff --git a/src/components/BurgerMenu/components/BurguerMenuItem/types.ts b/src/components/BurgerMenu/components/BurguerMenuItem/types.ts
@@ -3,5 +3,6 @@ export interface IBurguerMenuItemProps
   label: string;
   icon?: React.ReactNode;
   link?: string;
+  openExternal?: boolean;
   onClick?: () => void;
 }
diff --git a/src/components/CardAboutShelter/CardAboutShelter.tsx b/src/components/CardAboutShelter/CardAboutShelter.tsx
@@ -13,6 +13,8 @@ import { Card } from '../ui/card';
 import { ICardAboutShelter } from './types';
 import { InfoRow } from './components';
 import { checkAndFormatAddress } from './utils';
+import { ShelterCategory } from '@/hooks/useShelter/types';
+import { Fragment } from 'react/jsx-runtime';
 
 const CardAboutShelter = (props: ICardAboutShelter) => {
   const { shelter } = props;
@@ -33,42 +35,46 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
         {Boolean(shelter.zipCode) && (
           <InfoRow icon={<MapPinned />} label="CEP:" value={shelter.zipCode} />
         )}
-        <InfoRow
-          icon={<PawPrint />}
-          label={
-            check(shelter.petFriendly) ? (
-              shelter.petFriendly ? (
-                <p>
-                  O abrigo <b>aceita</b> animais
-                </p>
-              ) : (
-                <p>
-                  O abrigo <b>não</b> aceita animais
-                </p>
-              )
-            ) : (
-              <b>Não informado se aceita animais</b>
-            )
-          }
-        />
-        <InfoRow
-          icon={<HandHeart />}
-          label="Pessoas abrigadas:"
-          value={
-            check(shelter.shelteredPeople)
-              ? `${shelter.shelteredPeople} pessoas`
-              : 'Não informado'
-          }
-        />
-        <InfoRow
-          icon={<UsersRound />}
-          label="Capacidade do abrigo:"
-          value={
-            check(shelter.capacity)
-              ? `${shelter.capacity} pessoas`
-              : 'Não informado'
-          }
-        />
+        {shelter.category === ShelterCategory.Shelter && (
+          <Fragment>
+            <InfoRow
+              icon={<PawPrint />}
+              label={
+                check(shelter.petFriendly) ? (
+                  shelter.petFriendly ? (
+                    <p>
+                      O abrigo <b>aceita</b> animais
+                    </p>
+                  ) : (
+                    <p>
+                      O abrigo <b>não</b> aceita animais
+                    </p>
+                  )
+                ) : (
+                  <b>Não informado se aceita animais</b>
+                )
+              }
+            />
+            <InfoRow
+              icon={<HandHeart />}
+              label="Pessoas abrigadas:"
+              value={
+                check(shelter.shelteredPeople)
+                  ? `${shelter.shelteredPeople} pessoas`
+                  : 'Não informado'
+              }
+            />
+            <InfoRow
+              icon={<UsersRound />}
+              label="Capacidade do abrigo:"
+              value={
+                check(shelter.capacity)
+                  ? `${shelter.capacity} pessoas`
+                  : 'Não informado'
+              }
+            />
+          </Fragment>
+        )}
         <InfoRow
           icon={<Smartphone />}
           label="Contato:"

diff --git a/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx b/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx
@@ -18,7 +18,6 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
     ) : isLink ? (
       <a
         href={value}
-        target="_blank"
         className="text-blue-500 break-all cursor-pointer hover:underline"
       >
         {value}

diff --git a/src/hooks/useShelter/types.ts b/src/hooks/useShelter/types.ts
@@ -1,3 +1,8 @@
+export enum ShelterCategory {
+  Shelter = 'Shelter',
+  DistributionCenter = 'DistributionCenter',
+}
+
 export interface IUseShelterData {
   id: string;
   name: string;
@@ -17,6 +22,8 @@ export interface IUseShelterData {
   latitude?: string | null;
   longitude?: string | null;
   shelterSupplies: IUseShelterDataSupply[];
+  category: ShelterCategory;
+  actived: boolean;
   createdAt: string;
   updatedAt?: string | null;
 }

diff --git a/src/hooks/useShelters/types.ts b/src/hooks/useShelters/types.ts
@@ -1,4 +1,5 @@
 import { ShelterTagType } from '@/pages/Home/components/ShelterListItem/types';
+import { ShelterCategory } from '../useShelter/types';
 
 export interface IUseSheltersData {
   id: string;
@@ -18,6 +19,8 @@ export interface IUseSheltersData {
   verified: boolean;
   latitude?: string | null;
   longitude?: string | null;
+  category: ShelterCategory;
+  actived: boolean;
   createdAt: string;
   updatedAt?: string | null;
   shelterSupplies: IUseSheltersDataSupplyData[];

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,3 +1,4 @@
+import { ShelterCategory } from '@/hooks/useShelter/types';
 import { IUseSheltersDataSupplyData } from '@/hooks/useShelters/types';
 import {
   ShelterTagInfo,
@@ -41,11 +42,18 @@ function nameStatusPriority(priority: SupplyPriority) {
   if (priority === SupplyPriority.Remaining) return 'Disponível para doação';
 }
 
-function getAvailabilityProps(
-  capacity?: number | null,
-  shelteredPeople?: number | null
-) {
-  if (capacity && (shelteredPeople || shelteredPeople === 0)) {
+function getAvailabilityProps(props: {
+  capacity?: number | null;
+  shelteredPeople?: number | null;
+  category: ShelterCategory;
+}) {
+  const { category, capacity, shelteredPeople } = props;
+  if (category === ShelterCategory.DistributionCenter) {
+    return {
+      availability: 'Centro de Distribuição',
+      className: 'text-green-600',
+    };
+  } else if (capacity && (shelteredPeople || shelteredPeople === 0)) {
     if (shelteredPeople < capacity)
       return {
         availability: 'Abrigo disponível',

diff --git a/src/pages/Home/components/Filter/Filter.tsx b/src/pages/Home/components/Filter/Filter.tsx
@@ -149,14 +149,14 @@ const Filter = (props: IFilterProps) => {
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="rounded-md overflow-y-scroll max-h-[90vh]">
+      <DialogContent className="rounded-md overflow-y-scroll max-h-[85vh] mt-8">
         <DialogHeader>
           <DialogTitle className="text-base font-medium">
             Faça sua busca:
           </DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit}>
-          <div className="pl-4 pr-4 pb-4 flex flex-col max-w-5xl w-full items-start h-full">
+          <div className="pl-4 pr-4 pb-4 flex flex-col max-w-5xl w-full items-start">
             <div className="flex flex-col gap-2 w-full my-4">
               <SearchInput
                 value={values.search}

diff --git a/src/pages/Home/components/ShelterListItem/ShelterListItem.tsx b/src/pages/Home/components/ShelterListItem/ShelterListItem.tsx
@@ -19,13 +19,36 @@ import { VerifiedBadge } from '@/components/VerifiedBadge/VerifiedBadge.tsx';
 import { IUseSheltersDataSupplyData } from '@/hooks/useShelters/types';
 import { ShelterSupplyCategoryRow } from '../ShelterSupplyCategoryRow';
 
+const Wrapper = ({
+  children,
+  active,
+  link,
+}: {
+  children: React.ReactNode;
+  link: string;
+  active: boolean;
+}) => {
+  if (active) return <Link to={link}>{children}</Link>;
+  else
+    return (
+      <div className="[&>div]:hover:bg-white [&_*]:text-muted-foreground [&>div]:blur-[1px]">
+        {children}
+      </div>
+    );
+};
+
 const ShelterListItem = (props: IShelterListItemProps) => {
   const { data } = props;
   const { capacity, shelteredPeople } = data;
   const { availability, className: availabilityClassName } =
     useMemo<IShelterAvailabilityProps>(
-      () => getAvailabilityProps(capacity, shelteredPeople),
-      [capacity, shelteredPeople]
+      () =>
+        getAvailabilityProps({
+          capacity,
+          shelteredPeople,
+          category: data.category,
+        }),
+      [capacity, shelteredPeople, data.category]
     );
 
   const tags: ShelterTagInfo<IUseSheltersDataSupplyData[]> = useMemo(() => {
@@ -45,7 +68,7 @@ const ShelterListItem = (props: IShelterListItemProps) => {
     : '(sem informação)';
 
   return (
-    <Link to={`/abrigo/${data.id}`} target="_blank">
+    <Wrapper link={`/abrigo/${data.id}`} active={data.actived}>
       <div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative hover:bg-accent">
         <div className="inline-flex justify-between">
           <div className="flex flex-row items-center gap-1">
@@ -58,9 +81,11 @@ const ShelterListItem = (props: IShelterListItemProps) => {
               </div>
             )}
           </div>
-          <Button size="sm" variant="ghost">
-            <ChevronRight className="h-5 w-5" />
-          </Button>
+          {data.actived && (
+            <Button size="sm" variant="ghost">
+              <ChevronRight className="h-5 w-5" />
+            </Button>
+          )}
         </div>
         <h6 className={cn('font-semibold text-md', availabilityClassName)}>
           {availability}
@@ -88,7 +113,7 @@ const ShelterListItem = (props: IShelterListItemProps) => {
           Atualizado em {updatedAtDate}
         </small>
       </div>
-    </Link>
+    </Wrapper>
   );
 };