From 7b868a9f95db965f1a19f78cc4690d16b91cb8e3 Mon Sep 17 00:00:00 2001 From: kelvinsb Date: Sun, 12 May 2024 03:18:51 -0300 Subject: [PATCH 01/15] feat: filter shlters by cities --- src/components/SearchInput/SearchInput.tsx | 10 +++- src/hooks/usePaginatedQuery/paths.ts | 1 + src/hooks/useShelterCIties/index.ts | 3 ++ src/hooks/useShelterCIties/types.ts | 4 ++ .../useShelterCIties/useShelterCities.ts | 9 ++++ src/pages/Home/Home.tsx | 5 ++ .../Home/components/Filter/CitiesFilter.tsx | 50 +++++++++++++++++++ src/pages/Home/components/Filter/Filter.tsx | 24 +++++++-- src/pages/Home/components/Filter/types.ts | 2 + .../ShelterListView/ShelterListView.tsx | 29 ++++++++++- .../Home/components/ShelterListView/types.ts | 3 ++ 11 files changed, 132 insertions(+), 8 deletions(-) create mode 100644 src/hooks/useShelterCIties/index.ts create mode 100644 src/hooks/useShelterCIties/types.ts create mode 100644 src/hooks/useShelterCIties/useShelterCities.ts create mode 100644 src/pages/Home/components/Filter/CitiesFilter.tsx diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index bec6d6db..225ddb87 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -7,13 +7,19 @@ import { cn } from '@/lib/utils'; const SearchInput = React.forwardRef( (props, ref) => { - const { value, onChange, className, ...rest } = props; + const { + value, + onChange, + className, + placeholder = 'Buscar por abrigo ou endereço', + ...rest + } = props; return (
diff --git a/src/hooks/usePaginatedQuery/paths.ts b/src/hooks/usePaginatedQuery/paths.ts index d78cd81a..5c1d2cc5 100644 --- a/src/hooks/usePaginatedQuery/paths.ts +++ b/src/hooks/usePaginatedQuery/paths.ts @@ -1,5 +1,6 @@ export enum PaginatedQueryPath { Shelters = '/shelters', + ShelterCities = '/shelters/cities', SupplyCategories = '/supply-categories', Supplies = '/supplies', } diff --git a/src/hooks/useShelterCIties/index.ts b/src/hooks/useShelterCIties/index.ts new file mode 100644 index 00000000..729553c8 --- /dev/null +++ b/src/hooks/useShelterCIties/index.ts @@ -0,0 +1,3 @@ +import { useShelterCities } from './useShelterCities'; + +export { useShelterCities }; diff --git a/src/hooks/useShelterCIties/types.ts b/src/hooks/useShelterCIties/types.ts new file mode 100644 index 00000000..0b12d0e3 --- /dev/null +++ b/src/hooks/useShelterCIties/types.ts @@ -0,0 +1,4 @@ +export interface IShelterCitiesData { + city: string; + sheltersCount: string; +} diff --git a/src/hooks/useShelterCIties/useShelterCities.ts b/src/hooks/useShelterCIties/useShelterCities.ts new file mode 100644 index 00000000..29c3ce5b --- /dev/null +++ b/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(PaginatedQueryPath.ShelterCities, { + cache: true, + }); +}; diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index cbfb86a6..87f19441 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -17,6 +17,7 @@ const initialFilterData: IFilterFormProps = { supplyCategoryIds: [], supplyIds: [], shelterStatus: [], + cities: [], }; const Home = () => { @@ -155,12 +156,16 @@ const Home = () => { loading={loading} count={shelters.count} data={shelters.results} + filterData={filterData} onFetchMoreData={handleFetchMore} searchValue={filterData.search} onSearchValueChange={(v) => { setFilterData((prev) => ({ ...prev, search: v })); setSearch(v); }} + onCitiesChange={(v) => + setFilterData((prev) => ({ ...prev, cities: v })) + } onSelectShelter={(s) => navigate(`/abrigo/${s.id}`)} hasMoreItems={hasMore} onOpenModal={() => setOpenModal(true)} diff --git a/src/pages/Home/components/Filter/CitiesFilter.tsx b/src/pages/Home/components/Filter/CitiesFilter.tsx new file mode 100644 index 00000000..682503a6 --- /dev/null +++ b/src/pages/Home/components/Filter/CitiesFilter.tsx @@ -0,0 +1,50 @@ +import Select from 'react-select'; + +import { useShelterCities } from '@/hooks/useShelterCIties'; +import { ISelectField } from './types'; + +interface CitiesFilterInterface { + cities: S; + setCities: (cities: S) => void; +} + +export const CitiesFilter = ({ + cities = [], + setCities, +}: CitiesFilterInterface) => { + const { data, loading } = useShelterCities(); + + if (loading) return null; + + const values: ISelectField[] = cities.map((item) => ({ + label: item, + value: item, + })); + const options: ISelectField[] = data.map((item) => ({ + label: item.city, + value: item.city, + })); + + return ( +
+
+

+ Qual cidade você quer ajudar? +

+

+ Selecione uma ou mais cidades. +

+ + ({ label, value: +priority } as any) - )} - onChange={(v) => { - const newValue = { - ...v, - value: v ? +v.value : SupplyPriority.Urgent, - }; - setFieldValue('priority', newValue); - }} - /> -
-
- - ({ - label: el.name, - value: el.id, - }))} - onChange={(v) => setFieldValue('supplies', v)} - /> -
-
- -
-

- Status do abrigo -

-
-
- + +
-
+ From 781875ab564dbee5c5e8e1fb722158c71345d9b1 Mon Sep 17 00:00:00 2001 From: kelvinsb Date: Mon, 13 May 2024 23:07:45 -0300 Subject: [PATCH 14/15] fix: reset errors on zipcode search; copy filter change --- src/pages/CreateShelter/CreateShelter.tsx | 4 +++- src/pages/Home/components/Filter/CitiesFilter.tsx | 6 ++---- src/pages/UpdateShelter/UpdateShelter.tsx | 5 ++++- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/pages/CreateShelter/CreateShelter.tsx b/src/pages/CreateShelter/CreateShelter.tsx index ea9d607d..a7578a02 100644 --- a/src/pages/CreateShelter/CreateShelter.tsx +++ b/src/pages/CreateShelter/CreateShelter.tsx @@ -34,6 +34,7 @@ const CreateShelterComponent = () => { setFieldValue, handleSubmit, values, + setErrors, } = useFormik({ initialValues: { name: '', @@ -99,7 +100,8 @@ const CreateShelterComponent = () => { if (cepData.logradouro) setFieldValue('street', cepData.logradouro); if (cepData.bairro) setFieldValue('neighbourhood', cepData.bairro); if (cepData.localidade) setFieldValue('city', cepData.localidade); - }, [cepData, setFieldValue]); + setErrors({}); + }, [cepData, setFieldValue, setErrors]); return (
diff --git a/src/pages/Home/components/Filter/CitiesFilter.tsx b/src/pages/Home/components/Filter/CitiesFilter.tsx index 031cf054..c4b8d821 100644 --- a/src/pages/Home/components/Filter/CitiesFilter.tsx +++ b/src/pages/Home/components/Filter/CitiesFilter.tsx @@ -28,11 +28,9 @@ export const CitiesFilter = ({ return (
-

- Qual cidade você quer ajudar? -

+

Cidades

- Selecione uma ou mais cidades. + Selecione uma ou mais cidades para pesquisar.