diff --git a/domains/dashboard/Dashboard.tsx b/domains/dashboard/Dashboard.tsx index 893000e..0e32807 100644 --- a/domains/dashboard/Dashboard.tsx +++ b/domains/dashboard/Dashboard.tsx @@ -35,9 +35,10 @@ const Dashboard: FC = ({ clinicalData }): ReactNode => {
-
+
+
diff --git a/domains/dashboard/hooks/useFetchDataset/useFetchDataset.ts b/domains/dashboard/hooks/useFetchDataset/useFetchDataset.ts index d2ced7e..78fa974 100644 --- a/domains/dashboard/hooks/useFetchDataset/useFetchDataset.ts +++ b/domains/dashboard/hooks/useFetchDataset/useFetchDataset.ts @@ -18,18 +18,20 @@ const useFetchDataset = (): UseFetchDatasetReturn => { // !TODO: Invalidate cache if city is changed const [fetch, { data, loading, error }] = useLazyQuery(clinicalDataQuery, { + variables: { + startDate: selectedDate.startDate, + endDate: selectedDate.endDate, + }, fetchPolicy: 'cache-and-network', nextFetchPolicy: 'cache-first', }); // fetch data when the component is mounted && when the date is changed useEffect(() => { - if (isMounted && selectedDate.startDate !== null && selectedDate.endDate !== null) { + if (isMounted && Boolean(selectedDate.startDate) && Boolean(selectedDate.endDate)) { void (async function () { await fetch({ variables: { - startDate: selectedDate.startDate, - endDate: selectedDate.endDate, cityCode, }, }); diff --git a/domains/dashboard/store/useSelectCityStore/useSelectCityStore.ts b/domains/dashboard/store/useSelectCityStore/useSelectCityStore.ts index ac71f0d..e7d9cd7 100644 --- a/domains/dashboard/store/useSelectCityStore/useSelectCityStore.ts +++ b/domains/dashboard/store/useSelectCityStore/useSelectCityStore.ts @@ -1,19 +1,19 @@ import { create } from 'zustand'; interface City { - city: string; + city: string | undefined; cityCode: string; } interface SelectedCityStore { - city: string; + city: string | undefined; cityCode: string; setSelectedCity: ({ city, cityCode }: City) => void; - getSelectedCity: () => { city: string; cityCode: string }; + getSelectedCity: () => City; } const useSelectCityStore = create((set, get) => ({ - city: '', + city: undefined, cityCode: '', setSelectedCity: ({ city, cityCode }) => { set({ city, cityCode }); diff --git a/services/graphql/apollo/apollo-client.ts b/services/graphql/apollo/apollo-client.ts index 961bd0a..bd8c3fe 100644 --- a/services/graphql/apollo/apollo-client.ts +++ b/services/graphql/apollo/apollo-client.ts @@ -2,9 +2,7 @@ import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: process.env.API_URL, - cache: new InMemoryCache({ - resultCacheMaxSize: 12000, - }), + cache: new InMemoryCache(), credentials: 'omit', name: 'covid-insights', version: '1.0', diff --git a/shared/components/Header/index.ts b/shared/components/Header/index.ts index 2caebeb..090f58d 100644 --- a/shared/components/Header/index.ts +++ b/shared/components/Header/index.ts @@ -2,10 +2,12 @@ import { DatePicker as HeaderDatePicker } from '@/shared/components/DatePicker'; import { HeaderRoot } from './Header'; import HeaderIcon from './Icon'; import { SelectCity } from '@/shared/components/SelectCity'; +import { ResetSearch } from '@/shared/components/ResetSearch'; export const Header = { Root: HeaderRoot, DatePicker: HeaderDatePicker, Icon: HeaderIcon, City: SelectCity, + Reset: ResetSearch, }; diff --git a/shared/components/ResetSearch/ResetSearch.tsx b/shared/components/ResetSearch/ResetSearch.tsx new file mode 100644 index 0000000..44f68a7 --- /dev/null +++ b/shared/components/ResetSearch/ResetSearch.tsx @@ -0,0 +1,19 @@ +import { useSelectCityStore } from '@/domains/dashboard/store'; +import React from 'react'; +import { BsTrash2 } from 'react-icons/bs'; + +const ResetSearch: React.FC = () => { + const { setSelectedCity } = useSelectCityStore(); + + const handleClear = (): void => { + setSelectedCity({ city: undefined, cityCode: '' }); + }; + + return ( + + ); +}; + +export { ResetSearch }; diff --git a/shared/components/ResetSearch/index.ts b/shared/components/ResetSearch/index.ts new file mode 100644 index 0000000..61482a0 --- /dev/null +++ b/shared/components/ResetSearch/index.ts @@ -0,0 +1 @@ +export { ResetSearch } from './ResetSearch'; diff --git a/shared/components/SelectCity/SelectCity.tsx b/shared/components/SelectCity/SelectCity.tsx index 7b0e24a..3a3780c 100644 --- a/shared/components/SelectCity/SelectCity.tsx +++ b/shared/components/SelectCity/SelectCity.tsx @@ -1,7 +1,7 @@ import { cities } from '@/services/graphql/query'; import { useQuery } from '@apollo/client'; import { Select } from 'antd'; -import { type ComponentProps, type FC } from 'react'; +import { useState, type ComponentProps, type FC } from 'react'; import { useSelectCityStore } from '@/domains/dashboard/store'; interface Props extends ComponentProps {} @@ -17,7 +17,7 @@ interface Data { const SelectCity: FC = (props) => { const { data, error } = useQuery(cities); - const { setSelectedCity } = useSelectCityStore(); + const { setSelectedCity, city } = useSelectCityStore(); const handleSelectCity = (value: unknown, label: string): void => { // eslint-disable-next-line no-extra-boolean-cast @@ -40,8 +40,9 @@ const SelectCity: FC = (props) => { showSearch className='mr-3' style={{ width: 200 }} - placeholder='Pesquise uma cidade' optionFilterProp='children' + value={city} + placeholder='Pesquise uma cidade' onSelect={(value: string | unknown, { label }) => { handleSelectCity(value, label); }}