Phase 2 bug fixes

LICENSE

@@ -0,0 +1 @@
+Project is closed source. Redistribution or unAuthorized use is prohibited.

README.md

@@ -1,9 +1,11 @@
 # Maxillo
 
+---
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/c0a9bf07-e7b3-407c-81b0-4245f7ecd4bd/deploy-status)](https://app.netlify.com/sites/maxillo/deploys)
 
 **Code-Named Emedico**\
-In Progress
+Development in progress.
 
 ---
 
@@ -24,6 +26,14 @@ State management - Zustand (stores are shared between all the frontend pipelines
 ```
 State management - Zustand (stores are shared between all the frontend pipelines)
 
+### Product Page - Next.js/React (TypeScript)
+
+```json
+"next": "11.0.1",
+"react": "17.0.2",
+"react-dom": "17.0.2"
+```
+
 ### Server - Node.js (JavaScript)
 
 ```json
@@ -33,8 +43,8 @@ State management - Zustand (stores are shared between all the frontend pipelines
 
 ### Testing
 
-- Frontend - ***Cypress***
-- Server - ***Jest with supertest***
+- Frontend - **Cypress**
+- Server - **Jest with supertest**
 
 
 ---

frontend/shared/src/model/BF/Section1FormModel.ts

@@ -30,27 +30,39 @@ export const section1FormModel: Array<Record<string, any>> = [
     name: 'phoneNumber',
     type: 'textfield',
     label: 'Phone number',
+    notRequired: true,
   },
   {
     name: 'email',
     type: 'textfield',
     label: 'Email',
+    notRequired: true,
   },
   {
     name: 'city',
     type: 'textfield',
     label: 'Town/City',
+    notRequired: true,
   },
   {
     name: 'personalHistory',
     type: 'dropdown',
     props: ['single', 'married', 'divorce', 'separated', 'widowed', 'children'],
     label: 'Personal History',
+    notRequired: true,
   },
   {
     name: 'occupation',
     type: 'textfield',
     label: 'Occupation',
+    notRequired: true,
+  },
+  {
+    name: 'hospitalizedOrHomeCare',
+    type: 'dropdown',
+    props: ['Hospitalized', 'Home care'],
+    label: 'Hospitalized or Home care?',
+    notRequired: true,
   },
   {
     type: 'title',
@@ -65,8 +77,8 @@ export const section1FormModel: Array<Record<string, any>> = [
   {
     name: 'complaintRegion',
     type: 'dropdown',
-    props: ['Mouth','Nose','Ear','Face'],
-    label: 'Region of complaint'
+    props: ['Mouth', 'Nose', 'Ear', 'Face'],
+    label: 'Region of complaint',
   },
   {
     name: 'concurrentCovid',
@@ -315,7 +327,7 @@ let dummy = section1FormModel.filter((item) => item.type !== 'title');
 let validationSchema: Record<string, any> = {};
 
 dummy.forEach((item) => {
-  if (item.name) {
+  if (item.name && !item.notRequired) {
     if (item.name === 'name')
       validationSchema[item.name] = Yup.string()
         .min(3, 'Too Short!')

frontend/shared/src/utils/Utils.ts

@@ -1,6 +1 @@
-export const APIURL =
-  process.env.NODE_ENV !== 'production'
-    ? 'http://localhost:4000'
-    : 'https://main-emedico-rwkomcoo5sdqbotb-gtw.qovery.io';
-
-// dev server link - https://main-emedico-wayxv4xxskjbjatg-gtw.qovery.io
+export const APIURL = process.env.REACT_APP_SERVER_URL as string;

frontend/web/cypress.json

@@ -1,3 +1,4 @@
 {
-  "baseUrl": "http://localhost:3000"
+  "baseUrl": "http://localhost:3000",
+  "projectId": "dkf19s"
 }

frontend/web/cypress/integration/form/form.spec.ts

@@ -97,9 +97,9 @@ context('Testing form', () => {
     });
 
     cy.contains('Submit').click();
-   
+
     cy.get('#alert-dialog-title', {
-      timeout: 3000,
+      timeout: 6000,
     });
   });
 });

frontend/web/cypress/support/Section1FormModel.ts

@@ -28,27 +28,39 @@ export const section1FormModel: Array<Record<string, any>> = [
     name: 'phoneNumber',
     type: 'textfield',
     label: 'Phone number',
+    notRequired: true,
   },
   {
     name: 'email',
     type: 'textfield',
     label: 'Email',
+    notRequired: true,
   },
   {
     name: 'city',
     type: 'textfield',
     label: 'Town/City',
+    notRequired: true,
   },
   {
     name: 'personalHistory',
     type: 'dropdown',
     props: ['single', 'married', 'divorce', 'separated', 'widowed', 'children'],
     label: 'Personal History',
+    notRequired: true,
   },
   {
     name: 'occupation',
     type: 'textfield',
     label: 'Occupation',
+    notRequired: true,
+  },
+  {
+    name: 'hospitalizedOrHomeCare',
+    type: 'dropdown',
+    props: ['Hospitalized', 'Home care'],
+    label: 'Hospitalized or Home care?',
+    notRequired: true,
   },
   {
     type: 'title',

frontend/web/src/pages/BlackFungus/BFSection1Get.tsx

@@ -147,7 +147,7 @@ const BFSection1GetAllowed: React.FC<any> = () => {
                     {toHeaderCase(item.label)}:
                   </Typography>
                   <Box className={classes.subtitle} fontWeight={500}>
-                    {section1Data[item.name]}
+                    {toHeaderCase(section1Data[item.name] ?? 'Nil')}
                   </Box>
                 </div>
               </Grid>

frontend/web/src/pages/BlackFungus/BFSection2Get.tsx

@@ -126,7 +126,7 @@ const BFSection2GetAllowed: React.FC<any> = () => {
                     {toHeaderCase(item.label)}:
                   </Typography>
                   <Box className={classes.subtitle} fontWeight={500}>
-                    {data?.data[item.name]}
+                    {toHeaderCase(data?.data[item.name])}
                   </Box>
                 </div>
               </Grid>

frontend/web/src/pages/BlackFungus/BFSection3Get.tsx

@@ -141,7 +141,9 @@ const BFSection3GetAllowed: React.FC<any> = (props) => {
                     {toHeaderCase(item.label)}:
                   </Typography>
                   <Box className={classes.subtitle} fontWeight={500}>
-                    {data?.data[item.name]}
+                    {(data?.data[item.name] as string[]).length === 0
+                      ? 'Nil'
+                      : data?.data[item.name].toString()}
                   </Box>
                 </div>
               </Grid>

frontend/web/src/pages/BlackFungus/BFSectionCreate.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Step, StepLabel, Stepper } from '@material-ui/core';
 import { Form, Formik, FormikConfig, FormikValues } from 'formik';
-import * as Yup from 'yup';
+import { object } from 'yup';
 import { useState } from 'react';
 
 import {
@@ -11,12 +11,14 @@ import {
   snackBarStore,
 } from '@emedico/shared';
 
+import { FormikErrorOnFocus } from 'utils/ErrorOnFocus';
+
 import CustomButton from 'widgets/CustomButton/CustomButton';
 import { CircularProgress } from '@material-ui/core';
-import BFSection1Form from './components/BFSection1Form';
 import CustomSnackBar from 'widgets/CustomSnackBar/CustomSnackBar';
 import CustomDialog from 'widgets/CustomDialog/CustomDialog';
 
+import BFSection1Form from './components/BFSection1Form';
 import BFSection2Form from './components/BFSection2Form';
 import BFSection3Form from './components/BFSection3Form';
 
@@ -28,20 +30,19 @@ import {
 
 interface BFSection1CreateProps {}
 
-const validationSchema1 = Yup.object().shape({
-  section1: Yup.object()
+const validationSchema1 = object().shape({
+  section1: object()
     .shape(Section1ValidationSchema)
     .default(undefined)
     .nullable(),
 });
 
-const validationSchema2 = Yup.object().shape({
-  // Section2ValidationSchema is coming from shared. see there.
-  section2: Yup.object().shape(Section2ValidationSchema),
+const validationSchema2 = object().shape({
+  section2: object().shape(Section2ValidationSchema),
 });
 
-const validationSchema3 = Yup.object().shape({
-  section3: Yup.object().shape(Section3ValidationSchema),
+const validationSchema3 = object().shape({
+  section3: object().shape(Section3ValidationSchema),
 });
 
 const BFSection1Create: React.FC<BFSection1CreateProps> = () => {
@@ -76,21 +77,27 @@ const BFSection1Create: React.FC<BFSection1CreateProps> = () => {
 
             setOpenDialog(!openDialog);
           } catch (error: any) {
-            console.log(error.response.data.message);
+            console.log(
+              error.response.data.message ??
+                'Something went wrong. Maybe your 2 hour session got over. Reload to login again.'
+            );
             snackBar.setOpen(true);
             snackBar.setmessage(error.response.data.message);
           }
         }}
       >
         <FormikStep validationSchema={validationSchema1} label='Section 1'>
+          <FormikErrorOnFocus />
           <BFSection1Form />
         </FormikStep>
 
         <FormikStep validationSchema={validationSchema2} label='Section 2'>
+          <FormikErrorOnFocus />
           <BFSection2Form />
         </FormikStep>
 
         <FormikStep validationSchema={validationSchema3} label='Section 3'>
+          <FormikErrorOnFocus />
           <BFSection3Form />
         </FormikStep>
       </FormikStepper>
@@ -139,8 +146,6 @@ export function FormikStepper({
   ] as React.ReactElement<FormikStepProps>;
   const [completed, setCompleted] = useState(false);
 
-  // const snackBar = snackBarStore((state) => state);
-
   function isLastStep() {
     return step === childrenArray.length - 1;
   }
@@ -150,15 +155,8 @@ export function FormikStepper({
       validationSchema={currentChild.props.validationSchema}
       validate={() => {
         console.log('error');
-        // snackBar.setOpen(true);
-        // snackBar.setmessage('Some Fields are not filled.');
-        window.scrollTo({
-          top: 0,
-          left: 0,
-          behavior: 'smooth',
-        });
       }}
-      validateOnChange={false} // don't remove these. it is important.
+      validateOnChange={false}
       validateOnBlur={false}
       validateOnMount={false}
       onSubmit={async (values, helpers) => {

frontend/web/src/pages/BlackFungus/components/BFSection1Form.tsx

@@ -7,12 +7,17 @@ import CustomRadio from 'widgets/CustomRadio/CustomRadio';
 import CustomTextField from 'widgets/CustomTextField/CustomTextField';
 import { BFFormInitialValues, section1FormModel } from '@emedico/shared';
 import { formStyles } from './BFSection1FormStyles';
+import { scrollToTop } from 'utils/ScrollToTop';
 
 interface BFSection1FormProps {}
 
 const BFSection1Form: React.FC<BFSection1FormProps> = () => {
   const classes = formStyles();
 
+  React.useEffect(() => {
+    scrollToTop();
+  }, []);
+
   const { errors } = useFormikContext<typeof BFFormInitialValues>();
 
   return (

frontend/web/src/pages/BlackFungus/components/BFSection2Form.tsx

@@ -6,11 +6,17 @@ import CustomCard from 'widgets/CustomCard/CustomCard';
 import { formStyles } from './BFSection1FormStyles';
 import { Typography, Divider, Grid } from '@material-ui/core';
 import CustomRadio from 'widgets/CustomRadio/CustomRadio';
+import { scrollToTop } from 'utils/ScrollToTop';
+
 interface BFSection2FormProps {}
 
 const BFSection2Form: React.FC<BFSection2FormProps> = () => {
   const classes = formStyles();
 
+  React.useEffect(() => {
+    scrollToTop();
+  }, []);
+
   const { errors } = useFormikContext<typeof BFFormInitialValues>();
 
   return (

frontend/web/src/pages/BlackFungus/components/BFSection3Form.tsx

@@ -8,12 +8,17 @@ import { Typography, Divider, Grid } from '@material-ui/core';
 import CustomRadio from '../../../widgets/CustomRadio/CustomRadio';
 import CustomTextField from '../../../widgets/CustomTextField/CustomTextField';
 import CustomCheckBox from '../../../widgets/CustomCheckBox/CustomCheckBox';
+import { scrollToTop } from 'utils/ScrollToTop';
 
 interface BFSection3FormProps {}
 
 const BFSection3Form: React.FC<BFSection3FormProps> = () => {
   const classes = formStyles();
 
+  React.useEffect(() => {
+    scrollToTop();
+  }, []);
+
   const { errors } = useFormikContext<typeof BFFormInitialValues>();
 
   return (

frontend/web/src/pages/HomePage/HomePage.tsx

@@ -21,11 +21,11 @@ import { useHistory } from 'react-router-dom';
 
 const useStyles = makeStyles((theme) => ({
   content: {
-    paddingTop: theme.spacing(3),
+    paddingTop: theme.spacing(1.5),
     paddingBottom: theme.spacing(8),
   },
   subContent: {
-    paddingTop: theme.spacing(4),
+    paddingTop: theme.spacing(1),
   },
   centerText: {
     display: 'flex',
@@ -160,7 +160,7 @@ const HomePage: React.FC<HomePageProps> = () => {
           alignItems='center'
           justify='center'
           className={classes.subContent}
-          style={{ marginBottom: '20px' }}
+          style={{ marginBottom: '-1px', marginTop: '5px' }}
         >
           <Grid item xs={6} sm={3}>
             <CardTile