feat(cards): add deads, fatality and fix apollo cache after normalize…

… date variables
rwietter · Jul 1, 2023 · 81881b5 · 81881b5
1 parent fc6d568
commit 81881b5
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 23 deletions.
diff --git a/domains/dashboard/Dashboard.tsx b/domains/dashboard/Dashboard.tsx
@@ -19,7 +19,7 @@ const Dashboard = ({ clinicalData }: ComponentProps): ReactNode => {
     return <h1>Erro ao carregar dados</h1>;
   }
 
-  if (loading) return <DashboardSkeleton />;
+  if (loading) return <p className='text-zinc-950 text-center'>Carregando...</p>;
 
   const dataset = typeof data !== 'undefined' ? data : clinicalData;
 
@@ -29,7 +29,10 @@ const Dashboard = ({ clinicalData }: ComponentProps): ReactNode => {
       <Sidebar />
       <main className='px-2 md:px-12 m-auto md:ml-16 mt-16 bg-background rounded-tl-3xl'>
         <Banner />
-        <Cards countPatients={dataset?.countPatients} />
+        <Cards
+          countPatients={dataset?.countPatients}
+          countDeadPatients={dataset?.countDeadPatients.count}
+        />
 
         <section className='w-full h-full grid xl:grid-cols-2 grid-flow-row py-8 gap-x-4 gap-y-24 max-w-full md:px-5 place-items-center pb-24'>
           <Symptoms countPatientsSymptoms={dataset?.countPatientsSymptoms} />

diff --git a/domains/dashboard/features/Cards/Cards.cy.tsx b/domains/dashboard/features/Cards/Cards.cy.tsx
@@ -3,7 +3,7 @@ import { Cards } from './Cards';
 
 describe('<Cards />', () => {
   it('Cards should render countPatients 258', () => {
-    cy.mount(<Cards countPatients={258} />);
+    cy.mount(<Cards countPatients={258} countDeadPatients={264} />);
 
     cy.get('div:nth-child(3) > h2').should('have.text', '258');
   });

diff --git a/domains/dashboard/features/Cards/Cards.tsx b/domains/dashboard/features/Cards/Cards.tsx
@@ -1,30 +1,38 @@
 import { type FC } from 'react';
 import type { TotalPatients } from '@/domains/dashboard/types';
 
-interface CardProps extends TotalPatients {}
+interface CardProps {
+  countPatients: TotalPatients['countPatients'];
+  countDeadPatients: number;
+}
+
+const Cards: FC<CardProps> = ({ countPatients = 0, countDeadPatients = 0 }) => {
+  const confirmedCases = Intl.NumberFormat('pt-BR').format(countPatients);
+  const deaths = Intl.NumberFormat('pt-BR').format(countDeadPatients);
+
+  const fatality = countDeadPatients / countPatients;
+  const fatalityRate = (fatality * 100).toFixed(2);
 
-const Cards: FC<CardProps> = ({ countPatients }) => {
-  const nroPacientes = Intl.NumberFormat('pt-BR').format(countPatients);
   return (
     <section className='w-full grid md:grid-cols-3 gap-6 lg:gap-25 xl:gap-32 px-5 pt-10'>
       <div className='h-32 bg-white rounded-2xl flex flex-col flex-1 justify-evenly p-3 relative border-2 border-slate-200'>
         <div className='absolute rounded-sm bg-indigo-600 border-green-400 left-[-3px] top-5 h-9 w-[.35rem]'></div>
         <h1 className='text-xl uppercase font-normal font-sans text-foreground'>
           Casos Confirmados
         </h1>
-        <h2 className='text-xl text-foreground font-semibold'>{nroPacientes}</h2>
+        <h2 className='text-xl text-foreground font-semibold'>{confirmedCases}</h2>
       </div>
 
       <div className='h-32 bg-white rounded-2xl flex flex-col flex-1 justify-evenly p-3 relative border-2 border-slate-200'>
         <div className='absolute rounded-sm bg-rose-500 border-green-400 left-[-3px] top-5 h-9 w-[.35rem]'></div>
-        <h1 className='text-xl font-normal uppercase font-sans text-foreground'>Nro. Pacientes</h1>
-        <h2 className='text-xl text-slate-800 font-semibold'>{nroPacientes}</h2>
+        <h1 className='text-xl font-normal uppercase font-sans text-foreground'>Mortes</h1>
+        <h2 className='text-xl text-slate-800 font-semibold'>{deaths}</h2>
       </div>
 
       <div className='h-32 bg-white rounded-2xl flex flex-col flex-1 justify-evenly p-3 relative border-2 border-slate-200'>
         <div className='absolute rounded-sm bg-emerald-400 border-green-400 left-[-3px] top-5 h-9 w-[.35rem]'></div>
-        <h1 className='text-xl font-normal uppercase font-sans text-foreground'>Nro. Pacientes</h1>
-        <h2 className='text-xl text-foreground font-semibold'>{nroPacientes}</h2>
+        <h1 className='text-xl font-normal uppercase font-sans text-foreground'>Letalidade</h1>
+        <h2 className='text-xl text-foreground font-semibold'>{fatalityRate}%</h2>
       </div>
     </section>
   );

diff --git a/domains/dashboard/features/Header/Header.tsx b/domains/dashboard/features/Header/Header.tsx
@@ -2,8 +2,6 @@ import { DatePicker } from 'antd';
 import Image from 'next/image';
 import { useSelectDate } from '@/domains/dashboard/hooks/useSelectDate';
 import locale from 'antd/lib/date-picker/locale/pt_BR';
-import dayjs from 'dayjs';
-import { PANDEMIC_START_DATE } from '@/domains/dashboard/constants';
 import { type ReactNode } from 'react';
 
 const Header = (): ReactNode => {
@@ -25,7 +23,6 @@ const Header = (): ReactNode => {
           locale={locale}
           allowClear={false}
           style={{ width: '100%' }}
-          defaultPickerValue={[dayjs(PANDEMIC_START_DATE), dayjs()]}
           picker='date'
           placement='bottomRight'
           renderExtraFooter={() => (

diff --git a/domains/dashboard/hooks/useFetchDataset/useFetchDataset.ts b/domains/dashboard/hooks/useFetchDataset/useFetchDataset.ts
@@ -19,6 +19,8 @@ const useFetchDataset = (): UseFetchDatasetReturn => {
       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

diff --git a/domains/dashboard/hooks/useSelectDate/useSelectDate.tsx b/domains/dashboard/hooks/useSelectDate/useSelectDate.tsx
@@ -1,6 +1,7 @@
 import type { Dayjs } from 'dayjs';
 import { useSlectedDateStore } from '@/domains/dashboard/store/useSlectedDateStore';
 import { PANDEMIC_START_DATE, LAST_DATABASE_UPDATE } from '@/domains/dashboard/constants';
+import dayjs from 'dayjs';
 
 type EventValue<DateType> = DateType | null;
 type RangeValue<DateType> = [EventValue<DateType>, EventValue<DateType>] | null;
@@ -22,8 +23,8 @@ const useSelectDate = (): UseSelectDateReturnType => {
       const [startDate, endDate] = date.map((item) => item);
 
       if (startDate != null && endDate != null) {
-        const startIsoDate = startDate.toISOString();
-        const endIsoDate = endDate.toISOString();
+        const startIsoDate = dayjs(startDate).startOf('day').toISOString();
+        const endIsoDate = dayjs(endDate).startOf('day').toISOString();
 
         setSelectedDate(startIsoDate, endIsoDate);
       }

diff --git a/domains/dashboard/types/QueryProps.ts b/domains/dashboard/types/QueryProps.ts
@@ -7,4 +7,7 @@ export interface QueryProps {
   countPatients: number;
   countPatientsByAge: PatientByAge[];
   countPatientsByDiagnosisCriteria: PatientsByDiagnosisCriteria[];
+  countDeadPatients: {
+    count: number;
+  };
 }
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
@@ -41,6 +41,7 @@ export const getStaticProps: GetStaticProps = async (): Promise<
           countPatients: data.countPatients,
           countPatientsByAge: data.countPatientsByAge,
           countPatientsByDiagnosisCriteria: data.countPatientsByDiagnosisCriteria,
+          countDeadPatients: data.countDeadPatients,
         },
       },
       revalidate: 3600, // 1 hour

diff --git a/services/graphql/apollo/apollo-client.ts b/services/graphql/apollo/apollo-client.ts
@@ -2,11 +2,13 @@ import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 const client = new ApolloClient({
   uri: process.env.API_URL,
-  cache: new InMemoryCache(),
+  cache: new InMemoryCache({
+    resultCacheMaxSize: 12000,
+  }),
   credentials: 'omit',
   name: 'covid-insights',
   version: '1.0',
-  connectToDevTools: true
+  connectToDevTools: true,
 });
 
 export { client };
diff --git a/services/graphql/query/clinicalDataQuery.ts b/services/graphql/query/clinicalDataQuery.ts
@@ -2,29 +2,33 @@ import { gql } from '@apollo/client';
 
 export const clinicalDataQuery = gql`
   query Symptoms($startDate: DateTime, $endDate: DateTime) {
-    countPatients(filters: {startDate: $startDate, endDate: $endDate})
+    countPatients(filters: { startDate: $startDate, endDate: $endDate })
 
-    countPatientsSymptoms(filters: {startDate: $startDate, endDate: $endDate}) {
+    countPatientsSymptoms(filters: { startDate: $startDate, endDate: $endDate }) {
       febre
       garganta
       tosse
       dispneia
       outros
     }
 
-    countPatientsByAge(filters: { startDate: $startDate, endDate: $endDate}) {
+    countPatientsByAge(filters: { startDate: $startDate, endDate: $endDate }) {
       age
       count
     }
 
-    countPatientsByRecoveryStatus(filters: {startDate: $startDate, endDate: $endDate}) {
+    countPatientsByRecoveryStatus(filters: { startDate: $startDate, endDate: $endDate }) {
       status
       count
     }
 
-    countPatientsByDiagnosisCriteria(filters: {startDate: $startDate, endDate: $endDate}) {
+    countPatientsByDiagnosisCriteria(filters: { startDate: $startDate, endDate: $endDate }) {
       criteria
       count
     }
+
+    countDeadPatients(filters: { startDate: $startDate, endDate: $endDate }) {
+      count
+    }
   }
 `;