Modificação nas telas de abrigos para adicionar cidades (SOS-RS#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

Author: kelvinsb

src/components/CardAboutShelter/CardAboutShelter.tsx

@@ -5,24 +5,34 @@ import {
   PawPrint,
   Landmark,
   Smartphone,
+  Building,
+  MapPinned,
 } from 'lucide-react';
 
 import { Card } from '../ui/card';
 import { ICardAboutShelter } from './types';
 import { InfoRow } from './components';
+import { checkAndFormatAddress } from './utils';
 
 const CardAboutShelter = (props: ICardAboutShelter) => {
   const { shelter } = props;
 
   const check = (v?: string | number | boolean | null) => {
     return v !== undefined && v !== null;
   };
+  const formatAddress = checkAndFormatAddress(shelter, false);
 
   return (
     <Card className="flex flex-col gap-2 p-4 bg-[#E8F0F8] text-sm">
       <div className="text-[#646870] font-medium">Sobre o abrigo</div>
       <div className="flex flex-col flex-wrap gap-3">
-        <InfoRow icon={<Home />} label={shelter.address} />
+        <InfoRow icon={<Home />} label={formatAddress} />
+        {Boolean(shelter.city) && (
+          <InfoRow icon={<Building />} label="Cidade:" value={shelter.city} />
+        )}
+        {Boolean(shelter.zipCode) && (
+          <InfoRow icon={<MapPinned />} label="CEP:" value={shelter.zipCode} />
+        )}
         <InfoRow
           icon={<PawPrint />}
           label={

src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx

@@ -4,12 +4,21 @@ import { IInfoRowProps } from './types';
 
 const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
   (props, ref) => {
-    const { icon, label, value, clipboardButton = false, className = '', ...rest } = props;
+    const {
+      icon,
+      label,
+      value,
+      clipboardButton = false,
+      className = '',
+      ...rest
+    } = props;
     const isLink = value?.startsWith('http');
     const ValueComp = !value ? (
       <Fragment />
     ) : isLink ? (
-      <a href={value} target='_blank'
+      <a
+        href={value}
+        target="_blank"
         className="text-blue-500 break-all cursor-pointer hover:underline"
       >
         {value}
@@ -37,7 +46,7 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
           </span>
           <span className="md:flex">
             {ValueComp}
-            {clipboardButton && (
+            {clipboardButton && value && (
               <div
                 className="text-blue-600 mx-2 hover:cursor-pointer active:text-blue-800"
                 onClick={() => navigator.clipboard.writeText(value)}
@@ -46,7 +55,6 @@ const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
               </div>
             )}
           </span>
-
         </div>
       </div>
     );

src/components/CardAboutShelter/index.ts

@@ -1,3 +1,4 @@
-import { CardAboutShelter } from "./CardAboutShelter";
+import { CardAboutShelter } from './CardAboutShelter';
+import { checkAndFormatAddress } from './utils';
 
-export { CardAboutShelter };
+export { CardAboutShelter, checkAndFormatAddress };

src/components/CardAboutShelter/utils.ts

@@ -0,0 +1,18 @@
+import { IUseSheltersData } from '@/hooks/useShelters/types';
+import { ICardAboutShelter } from './types';
+
+const formatShelterAddressFields = (
+  shelter: ICardAboutShelter['shelter'] | IUseSheltersData
+) =>
+  [shelter.street, shelter.streetNumber, shelter.neighbourhood]
+    .filter(Boolean)
+    .join(', ');
+
+export const checkAndFormatAddress = (
+  shelter: ICardAboutShelter['shelter'] | IUseSheltersData,
+  showCity = true
+) =>
+  shelter.address ??
+  `${formatShelterAddressFields(shelter)}${
+    showCity ? ` - ${shelter.city}` : ''
+  }`;

src/components/SearchInput/SearchInput.tsx

@@ -7,13 +7,19 @@ import { cn } from '@/lib/utils';
 
 const SearchInput = React.forwardRef<HTMLDivElement, ISearchInputProps>(
   (props, ref) => {
-    const { value, onChange, className, ...rest } = props;
+    const {
+      value,
+      onChange,
+      className,
+      placeholder = 'Buscar por abrigo ou endereço',
+      ...rest
+    } = props;
 
     return (
       <div ref={ref} className={cn(className, 'relative')} {...rest}>
         <Input
           value={value}
-          placeholder="Buscar por abrigo ou endereço"
+          placeholder={placeholder}
           className="h-12 text-md font-medium text-zinc-600 pl-10 pr-4"
           onChange={onChange}
         />

src/hooks/index.ts

@@ -3,8 +3,11 @@ import { useFetch } from './useFetch';
 import { usePaginatedQuery } from './usePaginatedQuery';
 import { useThrottle } from './useThrottle';
 import { useShelter } from './useShelter';
+import { useShelterCities } from './useShelterCities';
+import { useDebouncedValue } from './useDebouncedValue';
 import { useSupplyCategories } from './useSupplyCategories';
 import { useSupplies } from './useSupplies';
+import { useViaCep } from './useViaCep';
 import { usePartners } from './usePartners';
 
 export {
@@ -13,7 +16,10 @@ export {
   usePaginatedQuery,
   useThrottle,
   useShelter,
+  useShelterCities,
+  useDebouncedValue,
   useSupplyCategories,
   useSupplies,
+  useViaCep,
   usePartners,
 };

src/hooks/useDebouncedValue/index.ts

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

src/hooks/useDebouncedValue/useDebouncedValue.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+export const useDebouncedValue = (value: string, delay: number): string => {
+  const [debouncedValue, setDebouncedValue] = useState<string>(value);
+  const [currentValue, setCurrentValue] = useState<string>(value);
+
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    if (currentValue !== debouncedValue) {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        setDebouncedValue(currentValue);
+      }, delay);
+    }
+
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [currentValue, debouncedValue, delay]);
+
+  return debouncedValue;
+};

src/hooks/useFetch/useFetch.tsx

@@ -5,7 +5,7 @@ import { api } from '@/api';
 import { IServerResponse } from '@/types';
 import { IUseFetchOptions } from './types';
 
-function useFetch<T = any>(path: string, options: IUseFetchOptions<T> = {}) {
+function useFetch<T = any>(path?: string, options: IUseFetchOptions<T> = {}) {
   const { cache, initialValue } = options;
   const [loading, setLoading] = useState<boolean>(true);
   const [data, setData] = useState<T>(initialValue || ({} as T));
@@ -15,10 +15,15 @@ function useFetch<T = any>(path: string, options: IUseFetchOptions<T> = {}) {
       const headers = config?.headers ?? {};
       if (cache) headers['x-app-cache'] = 'true';
       setLoading(true);
-      api
-        .get<IServerResponse<T>>(path, { ...config, headers })
-        .then(({ data }) => setData(data.data))
-        .finally(() => setLoading(false));
+
+      if (path) {
+        api
+          .get<IServerResponse<T>>(path, { ...config, headers })
+          .then(({ data }) => setData(data.data ?? (data as T)))
+          .finally(() => setLoading(false));
+      } else {
+        setLoading(false);
+      }
     },
     [cache, path]
   );

src/hooks/usePaginatedQuery/paths.ts

@@ -1,5 +1,6 @@
 export enum PaginatedQueryPath {
   Shelters = '/shelters',
+  ShelterCities = '/shelters/cities',
   SupplyCategories = '/supply-categories',
   Supplies = '/supplies',
 }

src/hooks/useShelter/types.ts

@@ -1,6 +1,11 @@
 export interface IUseShelterData {
   id: string;
   name: string;
+  street?: string;
+  neighbourhood?: string;
+  city?: string;
+  streetNumber?: string | null;
+  zipCode?: string;
   address: string;
   pix?: string | null;
   shelteredPeople?: number | null;

src/hooks/useShelterCities/index.ts

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

src/hooks/useShelterCities/types.ts

@@ -0,0 +1,4 @@
+export interface IShelterCitiesData {
+  city: string;
+  sheltersCount: string;
+}

src/hooks/useShelterCities/useShelterCities.ts

@@ -0,0 +1,9 @@
+import { useFetch } from '../useFetch';
+import { PaginatedQueryPath } from '../usePaginatedQuery/paths';
+import { IShelterCitiesData } from './types';
+
+export const useShelterCities = () => {
+  return useFetch<IShelterCitiesData[]>(PaginatedQueryPath.ShelterCities, {
+    cache: true,
+  });
+};

src/hooks/useShelters/types.ts

@@ -3,6 +3,11 @@ import { ShelterTagType } from '@/pages/Home/components/ShelterListItem/types';
 export interface IUseSheltersData {
   id: string;
   name: string;
+  street?: string;
+  neighbourhood?: string;
+  city?: string;
+  streetNumber?: string | null;
+  zipCode?: string;
   address: string;
   pix?: string | null;
   shelteredPeople?: number | null;

src/hooks/useViaCep/index.ts

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

src/hooks/useViaCep/types.ts

@@ -0,0 +1,12 @@
+export interface IViaCepData {
+  cep: string;
+  logradouro: string;
+  complemento: string;
+  bairro: string;
+  localidade: string;
+  uf: string;
+  ibge: string;
+  gia: string;
+  dd: string;
+  siafi: string;
+}

src/hooks/useViaCep/useViaCep.ts

@@ -0,0 +1,10 @@
+import { useFetch } from '..';
+import { IViaCepData } from './types';
+
+export const useViaCep = (cep: string | undefined) => {
+  const createdPath =
+    !cep || cep.length < 8
+      ? undefined
+      : `https://viacep.com.br/ws/${cep}/json/`;
+  return useFetch<IViaCepData>(createdPath);
+};