feat: add reset city

domains/dashboard/Dashboard.tsx

@@ -35,9 +35,10 @@ const Dashboard: FC<Props> = ({ clinicalData }): ReactNode => {
     <div className='bg-primary overflow-hidden w-screen min-h-screen text-foreground font-sans'>
       <Header.Root>
         <Header.Icon />
-        <div className='flex max-w-sm'>
+        <div className='flex max-w-lg'>
           <Header.City />
           <Header.DatePicker />
+          <Header.Reset />
         </div>
       </Header.Root>
       <Sidebar />

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<QueryProps>(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,
           },
         });

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<SelectedCityStore>((set, get) => ({
-  city: '',
+  city: undefined,
   cityCode: '',
   setSelectedCity: ({ city, cityCode }) => {
     set({ city, cityCode });

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',

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

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 (
+    <button type='button' onClick={handleClear}>
+      <BsTrash2 size={20} className='fill-slate-500 ml-3' />
+    </button>
+  );
+};
+
+export { ResetSearch };

shared/components/ResetSearch/index.ts

@@ -0,0 +1 @@
+export { ResetSearch } from './ResetSearch';

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<typeof Select> {}
@@ -17,7 +17,7 @@ interface Data {
 
 const SelectCity: FC<Props> = (props) => {
   const { data, error } = useQuery<Data>(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> = (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);
       }}