Merge pull request #19 from rwietter/feat/spa

feat: add landing page
rwietter · Jun 22, 2023 · fc6d568 · fc6d568
2 parents a21d8dc + c117c75
commit fc6d568
Show file tree

Hide file tree

Showing 54 changed files with 1,939 additions and 627 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+tailwind.config.js
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "standard-with-typescript",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks", "import"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}
diff --git a/.eslintrc.yml b/.eslintrc.yml
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true
+}
diff --git a/domains/dashboard/Dashboard.tsx b/domains/dashboard/Dashboard.tsx
@@ -6,39 +6,37 @@ import { Cards, Header, PatientsByAge, Sidebar, Symptoms } from '@/domains/dashb
 import type { QueryProps } from '@/domains/dashboard/types';
 import { ClinicalTests } from '@/domains/dashboard/features/ClinicalTests';
 import { useFetchDataset } from '@/domains/dashboard/hooks/useFetchDataset';
+import { type ReactNode } from 'react';
 
 interface ComponentProps {
-  clinicalData: QueryProps
+  clinicalData: QueryProps | undefined;
 }
 
-const Dashboard = ({ clinicalData }: ComponentProps) => {
+const Dashboard = ({ clinicalData }: ComponentProps): ReactNode => {
   const { loading, data, error } = useFetchDataset();
 
-  if (loading) return <DashboardSkeleton />;
-
-  // !TODO: handle error
-  if (error instanceof ApolloError) {
-    console.error(error.message);
+  if (typeof clinicalData === 'undefined' || error instanceof ApolloError) {
+    return <h1>Erro ao carregar dados</h1>;
   }
 
-  const dataset = Boolean(data) ? data : clinicalData;
+  if (loading) return <DashboardSkeleton />;
+
+  const dataset = typeof data !== 'undefined' ? data : clinicalData;
 
   return (
-    <div
-      className='bg-primary overflow-hidden w-screen min-h-screen text-foreground font-sans'
-    >
+    <div className='bg-primary overflow-hidden w-screen min-h-screen text-foreground font-sans'>
       <Header />
       <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} />
 
-        <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'
-        >
+        <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} />
           <PatientsByAge countPatientsByAge={dataset?.countPatientsByAge} />
-          <ClinicalTests countPatientsByDiagnosisCriteria={dataset?.countPatientsByDiagnosisCriteria} />
+          <ClinicalTests
+            countPatientsByDiagnosisCriteria={dataset?.countPatientsByDiagnosisCriteria}
+          />
         </section>
       </main>
     </div>

diff --git a/domains/dashboard/components/Banner/Banner.tsx b/domains/dashboard/components/Banner/Banner.tsx
@@ -12,14 +12,9 @@ const Banner: FC = () => {
     <section className='px-5 pt-10'>
       <h1 className='text-3xl text-slate-500 font-sans'>
         Covid
-        <strong className='text-slate-800'>
-          &nbsp;Insights
-        </strong>
-        .
+        <strong className='text-slate-800'>&nbsp;Insights</strong>.
       </h1>
-      <span
-        className='pt-1 block text-slate-500 font-semibold border-b-2 border-foregroundLight w-full max-w-fit'
-      >
+      <span className='pt-1 block text-slate-500 font-semibold border-b-2 border-foregroundLight w-full max-w-fit'>
         Pesquisa entre <strong>{startDate}</strong> e <strong>{endDate}</strong>
       </span>
     </section>

diff --git a/domains/dashboard/components/Chart/Chart.tsx b/domains/dashboard/components/Chart/Chart.tsx
@@ -1,27 +1,21 @@
 import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
 
 interface ChartProps extends HTMLAttributes<HTMLDivElement> {
-  title: string
-  subtitle: string
+  title: string;
+  subtitle: string;
 }
 
 type Props = PropsWithChildren<ChartProps>;
 
 const Chart: FC<Props> = (props) => {
   return (
     <div
-      className={`bg-background max-h-[550px] px-1 md:p-6 pb-20 w-full aspect-auto ${props.className ?? ''}`}
+      className={`bg-background max-h-[550px] px-1 md:p-6 pb-20 w-full aspect-auto ${
+        props.className ?? ''
+      }`}
     >
-      <h1
-        className='text-foreground font-sans font-semibold text-lg text-center'
-      >
-        {props.title}
-      </h1>
-      <p
-        className='text-foreground font-sans font-light text-lg text-center'
-      >
-        {props.subtitle}
-      </p>
+      <h1 className='text-foreground font-sans font-semibold text-lg text-center'>{props.title}</h1>
+      <p className='text-foreground font-sans font-light text-lg text-center'>{props.subtitle}</p>
       {props.children}
     </div>
   );

diff --git a/domains/dashboard/components/DashboardSkeleton/DashboardSkeleton.tsx b/domains/dashboard/components/DashboardSkeleton/DashboardSkeleton.tsx
@@ -1,23 +1,27 @@
 import { Header, Sidebar } from '@/domains/dashboard/features';
 import { Banner } from '@/domains/dashboard/components';
+import { type ReactNode } from 'react';
 
-const Card = () => (
+const Card = (): ReactNode => (
   <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-[-4px] top-5 h-9 w-[.35rem]' />
     <div className='h-5 animate-pulse w-full rounded-full bg-gray-300 max-w-[300px]' />
     <div className='h-7 animate-pulse w-full rounded-full mt-2 bg-gray-300 max-w-[250px]' />
   </div>
 );
 
-const GridItem = () => (
-  <div role="status" className="w-full animate-pulse bg-secondary max-h-[500px] p-4 pb-20 shadow-lg rounded-lg">
+const GridItem = (): ReactNode => (
+  <div
+    role='status'
+    className='w-full animate-pulse bg-secondary max-h-[500px] p-4 pb-20 shadow-lg rounded-lg'
+  >
     <div className='h-5 rounded-full m-auto bg-gray-300 max-w-[360px]' />
     <div className='h-5 rounded-full mt-4 m-auto bg-gray-300 max-w-[440px]' />
     <div className='h-96 mt-4 rounded-lg bg-gray-300 m-auto w-full max-w-2xl' />
   </div>
 );
 
-const DashboardSkeleton = () => (
+const DashboardSkeleton = (): ReactNode => (
   <div className='bg-primary overflow-hidden w-screen min-h-screen text-foreground font-sans'>
     <Header />
     <Sidebar />
@@ -29,9 +33,7 @@ const DashboardSkeleton = () => (
         <Card />
       </section>
 
-      <section
-        className='w-full h-full grid xl:grid-cols-2 grid-flow-row py-8 gap-x-4 gap-y-14 max-w-full md:px-5 place-items-center'
-      >
+      <section className='w-full h-full grid xl:grid-cols-2 grid-flow-row py-8 gap-x-4 gap-y-14 max-w-full md:px-5 place-items-center'>
         <GridItem />
         <GridItem />
         <GridItem />

diff --git a/domains/dashboard/features/Cards/Cards.tsx b/domains/dashboard/features/Cards/Cards.tsx
@@ -1,16 +1,17 @@
 import { type FC } from 'react';
 import type { TotalPatients } from '@/domains/dashboard/types';
 
-interface CardProps extends TotalPatients {
+interface CardProps extends TotalPatients {}
 
-}
 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>
+        <h1 className='text-xl uppercase font-normal font-sans text-foreground'>
+          Casos Confirmados
+        </h1>
         <h2 className='text-xl text-foreground font-semibold'>{nroPacientes}</h2>
       </div>
 

diff --git a/domains/dashboard/features/ClinicalTests/ClinicalTests.tsx b/domains/dashboard/features/ClinicalTests/ClinicalTests.tsx
@@ -6,20 +6,18 @@ import { type PatientsByDiagnosisCriteria } from '@/domains/dashboard/types';
 import { calculatePercentages } from '@/domains/dashboard/lib';
 
 interface ComponentProps {
-  countPatientsByDiagnosisCriteria: PatientsByDiagnosisCriteria[]
+  countPatientsByDiagnosisCriteria: PatientsByDiagnosisCriteria[];
 }
 
 const ClinicalTests: FC<ComponentProps> = ({ countPatientsByDiagnosisCriteria }) => {
   if (countPatientsByDiagnosisCriteria.length <= 0) return null;
 
   const data = countPatientsByDiagnosisCriteria.map((item) => ({
     criteria: item.criteria,
-    count: item.count
+    count: item.count,
   }));
 
-  const percentages = calculatePercentages(
-    data.map(({ count }) => count)
-  );
+  const percentages = calculatePercentages(data.map(({ count }) => count));
 
   const dataset = {
     labels: data.map(({ criteria }) => criteria[0].toUpperCase() + criteria.slice(1).toLowerCase()),
@@ -29,13 +27,16 @@ const ClinicalTests: FC<ComponentProps> = ({ countPatientsByDiagnosisCriteria })
         data: data.map(({ count }) => count),
         backgroundColor: colors,
         hoverOffset: 6,
-        borderWidth: 2
-      }
-    ]
+        borderWidth: 2,
+      },
+    ],
   };
 
   return (
-    <Chart title='Diagnósticos por testes' subtitle='Testes mais utilizados para diagnóstico de Covid-19'>
+    <Chart
+      title='Diagnósticos por testes'
+      subtitle='Testes mais utilizados para diagnóstico de Covid-19'
+    >
       <Doughnut
         options={{
           ...options,
@@ -48,10 +49,10 @@ const ClinicalTests: FC<ComponentProps> = ({ countPatientsByDiagnosisCriteria })
                 font: {
                   family: 'Quicksand, sans-serif',
                   size: 14,
-                  weight: 'bold'
+                  weight: 'bold',
                 },
-                color: '#222222'
-              }
+                color: '#222222',
+              },
             },
             tooltip: {
               callbacks: {
@@ -61,23 +62,23 @@ const ClinicalTests: FC<ComponentProps> = ({ countPatientsByDiagnosisCriteria })
                   const value = dataset.data[index];
                   const percentage = percentages[index];
                   return `Número de Testes: ${value} (${percentage}%)`;
-                }
+                },
               },
               titleFont: {
                 family: 'Quicksand, sans-serif',
-                size: 14
+                size: 14,
               },
               bodyFont: {
                 family: 'Quicksand, sans-serif',
                 size: 14,
-                weight: '500'
-              }
-            }
-          }
+                weight: '500',
+              },
+            },
+          },
         }}
-        width="100%"
+        width='100%'
         fallbackContent='Loading...'
-        height="100%"
+        height='100%'
         className='h-full w-full p-2'
         data={dataset}
       />

diff --git a/domains/dashboard/features/ClinicalTests/options.ts b/domains/dashboard/features/ClinicalTests/options.ts
@@ -4,17 +4,17 @@ export const options = {
   borderWidth: 0,
   animation: {
     animateScale: true,
-    animateRotate: true
+    animateRotate: true,
   },
   indexAxis: 'y' as const,
   scales: {
     x: {
-      display: false
+      display: false,
     },
     y: {
-      display: false
-    }
-  }
+      display: false,
+    },
+  },
 };
 
 export const colors = [
@@ -25,5 +25,5 @@ export const colors = [
   'rgba(196, 167, 231, 1)',
   'rgba(101, 98, 168, 1)',
   'rgba(34, 111, 104, 1)',
-  'rgba(253, 164, 127, 1)'
+  'rgba(253, 164, 127, 1)',
 ];