Staging (#251)

* [fix] Config readme * wip: loading * Delete yarn.lock * refact: created shelter list view component in home page * Fix: mobile UI has broken for mobile devices (#22) *Fix: mobile UI has broken for mobile devices * fix: remove chip as fixed as no wrap property * chore: add shelter card clickable * chore: remove Fragment component * build: add set sm as max mobile dimension sm: 425px * style: add responsive layout * refactor: filter page * fix: priority * fix: filter parameters * fix: fixed volunteer supply that had been fulfilled displaying on shelter page * fix: improve readability * feat: hidden filter button if filter is empty * feat: cache in axios request * fix: cache search params * feat: cache clean on searchs * wip: donation tags * fix: clean search params * Update README.md [fix] Retirando a seção Funcionalidades e Backlog * fix: donation tags / componentized the urgent supplies section * fix: removed empty shelter tags empty row * feat: full edit shelter and improved interface of pet friendly in shelter page * refact: add live link and tech stack to readme * Fix/develop bugs (#90) * fix: cache bug (invalite cache on create/update operation) * feat: added update many shelter supplies and admin rule * Add license (#81) Closes #65. * fix: app port (#80) * docs: added shadcn/ui reference * fix for volunteer shelter title (#95) * treat contact link as a proper link * simplified href * docs: add discord link on readme * Normalizes search string in supply filter so it ignores accents (#125) * normalized search string to ignore accents * revert removed button * add a copy to clipboard button to PIX and contact info (#124) * add a copy to clipboard button to PIX and contact info * use && operator instead of ternary * Substitui onClick e useNavigate por <Link> para melhorar acessibilidade (#128) * replaced navigate in favour of html link and added card hover * fixed lint warnings * fix: change shelter title style (#106) Prevents badge misalignment on very large titles * Add new feature and creating LoadingSkeleton (#115) * Add new feature and creating LoadingSkeleton * fix/add: add favicon and canonical metatag (#136) * fix/add: add favicon and canonical metatag * fix: fixed the path * refactor: changed order of shelters to updated at instead priority sum (#137) * Remove zod dependency (#143) * replaced zod validation with yup * removed zod dependency from package.json * sort dependencies * fixed validation schema variable name * removed .shape() and added .strict() * deleted unused file * Added burger menu to home page (#149) * Implemented Burger menu * commented unused components * feat: Update BurgerMenu to display user's name when logged in * removed comments * implemented login and logout button * Feat/partners (#155) * fix: menu bar with api partners * fix: menu bar with api partners * fix: remove unused session in burguer menu / removed import all icons from lucide and use link icon instead custom icons * [BUG] Botão de Limpar Filtro sumindo após remover input de busca (#147) * fix: clean filter button disappearing after removing search input manually * fix: removing log * Modificação nas telas de abrigos para adicionar cidades (#110) * feat: filter shlters by cities * feat: city on shelter forms, info and list * feat: shelter city quantities on filter * fix: wrong conditional * fix: bug that removing city filter on home doesnt affect the filter * feat: new address fields on shelter forms * feat: useDebouncedValue, useViaCep * feat: adapt useFetch for conditional paths and different response * feat: address fields required and zipCode triggering viaCep * feat: address fields required on update shelter * feat: address fields on shelter details when theres no address field * fix: suggestions(shorthand, optional chaining, separated zipCode, formatted city on list) * feat: sticky footer on filter dialog * fix: reset errors on zipcode search; copy filter change * fix: timeoutId not assigned value; InfoRow copy can copy undefined * Campo de quantidade adicionado quando adicionar suprimento a um abrigo (#46) * feat(shelter-supply): input to add quantity supply * feat(shelter-supply): show quantity supply at Shelter page and EditShelter page * resolve conflict --------- Co-authored-by: Lipe <[email protected]> * feat: google analytics * feat: edit shelter supply item quantity (#170) * fix: send address field formatted (#171) * feat: add a template to log bugs/defects (#168) * feat: add a template to log bugs/defects * Feat/privacy terms about us (#169) * feat: privacy policy page * feat: done about us page * fix: removed redundant value check in info row component * fix: ordering the list of items on the shelter edit page (#166) * feat: Melhoria no esquema de cores dos chip's e ajuste de acessibilidade (#162) * feat: new text colors with adjusted light var colors * feat: change chip element tag to span and improve a11y * feat: added update date information to shelter page (#159) * Adding update date to shelter page * (Aditional) Informing when no update date for shelter in main page * feat: ajuste de textos de voluntários e doações (#129) * hotfix: shelter list item broken div tag * Feat/back navigation to home (#177) * feat: added back navigation to home when click in header label * Hotfix/merge bugs (#183) * fix: shelter list item duplicate code after merge * fix: order in filter select menu, filter supplies by category and useSupplies interface * fix: update shelter validation schema and created useAuthRoles hook to reduce complexity of code * fix: conflicts with master branch * feat: dev and staging gh actions * wip * feat: done supporters page * feat: added shelter category (#250) Co-authored-by: José Fagundes <[email protected]> --------- Co-authored-by: helenapaixao <[email protected]> Co-authored-by: José Fagundes <[email protected]> Co-authored-by: Luccas Specht <[email protected]> Co-authored-by: MatheusDubin <[email protected]> Co-authored-by: danmqs <[email protected]> Co-authored-by: Giovanni Bassi <[email protected]> Co-authored-by: Felipe Monteiro <[email protected]> Co-authored-by: André Ferraz <[email protected]> Co-authored-by: Sombrio <[email protected]> Co-authored-by: Filipe Pacheco de Fraga <[email protected]> Co-authored-by: Daniel Marques <[email protected]> Co-authored-by: Matheus Dubin Da Silveira <[email protected]> Co-authored-by: Miguel Dalberto <[email protected]> Co-authored-by: Pablo A. Maximo <[email protected]> Co-authored-by: Marcos Nascimento <[email protected]> Co-authored-by: Gilmar José <[email protected]> Co-authored-by: Kelvin <[email protected]> Co-authored-by: Jhonatan David <[email protected]> Co-authored-by: Alexander Scheibler <[email protected]> Co-authored-by: Giovani Andrino Carnaval <[email protected]> Co-authored-by: Thiago Oliveira <[email protected]> Co-authored-by: Henrique Uhlmann Gobbi <[email protected]> Co-authored-by: Janderson Soares <[email protected]>
SOS-RS · May 18, 2024 · c7f37dd · c7f37dd
1 parent 8854303
commit c7f37dd
Show file tree

Hide file tree

Showing 14 changed files with 206 additions and 104 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,22 +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-5 h-5" />}
           />
           <BurguerMenuItem
             label="Apoiadores"

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>
   );
 };