Patch Release (#525)

* lazy load testing

* changes to triage #521

* changes to #521

* Added SFLTC

* Lazyload some modules using loadable (#526)

* lazy loading phase 1

* lazy load loading component

* fix error

* error fix

package.json

@@ -32,6 +32,7 @@
     "@babel/core": "^7.11.1",
     "@coronasafe/prescription-builder": "^0.1.13",
     "@date-io/date-fns": "^1.3.13",
+    "@loadable/component": "^5.13.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
@@ -42,6 +43,7 @@
     "@svgr/webpack": "^5.4.0",
     "@tailwindcss/ui": "^0.5.0",
     "@types/hookrouter": "^2.2.3",
+    "@types/loadable__component": "^5.13.0",
     "@types/lodash": "^4.14.159",
     "@types/node": "^14.0.27",
     "@types/react": "^16.9.45",

src/App.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import loadable from '@loadable/component';
 import SessionRouter from './Router/SessionRouter';
 import AppRouter from './Router/AppRouter';
 import { useDispatch, useSelector } from 'react-redux';
 import { getCurrentUser } from './Redux/actions';
 import './App.scss';
-import { Loading } from "./Components/Common/Loading";
+const Loading = loadable( () => import("./Components/Common/Loading"));
 import { useAbortableEffect, statusType } from './Common/utils';
 import axios from 'axios';
 

src/Common/constants.tsx

@@ -72,6 +72,7 @@ export const FACILITY_TYPES: Array<OptionsType> = [
   { id: 950, text: 'Corona Testing Labs' },
   { id: 1000, text: "Corona Care Centre" },
   { id: 1100, text: "First Line Treatment Centre" },
+  { id: 1200, text: "Second Line Treatment Center"},
   { id: 1300, text: "Shifting Centre" }
 ];
 

src/Components/Auth/ForgetPassword.tsx

@@ -1,11 +1,12 @@
 import { Button,  CardActions, CardContent } from '@material-ui/core';
 import { A } from 'hookrouter';
+import loadable from '@loadable/component';
 import React, {  useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { postForgotPassword } from '../../Redux/actions';
 import { TextInputField } from '../Common/HelperInputFields';
 import * as Notification from "../../Utils/Notifications.js";
-import { Loading } from "../Common/Loading";
+const Loading = loadable( () => import("../Common/Loading"));
 
 export const ForgotPassword = () => {
     const dispatch: any = useDispatch();

src/Components/Auth/Register.tsx

@@ -1,3 +1,4 @@
+import loadable from '@loadable/component';
 import { Button, Card, CardActions, CardContent, FormControl, Grid, InputLabel, MenuItem, Select } from "@material-ui/core";
 import { makeStyles, Theme } from "@material-ui/core/styles";
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
@@ -8,7 +9,8 @@ import { DISTRICT_CHOICES, GENDER_TYPES } from "../../Common/constants";
 import { validateEmailAddress } from "../../Common/validation";
 import { signupUser } from "../../Redux/actions";
 import { PhoneNumberField, TextInputField } from "../Common/HelperInputFields";
-import PageTitle from "../Common/PageTitle";
+const PageTitle = loadable( () => import("../Common/PageTitle"));
+
 
 const optionalFields = [
   "first_name",

src/Components/Common/Loading.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid } from "@material-ui/core";
 const img = 'https://cdn.coronasafe.network/break-chain.webp';
-export const Loading = () => {
+const Loading = () => {
     return (
         <Grid container>
             <Grid item xs={12} sm={12} md={12} lg={12} style={{ display: 'flex' }}>
@@ -16,3 +16,4 @@ export const Loading = () => {
         </Grid>
     )
 };
+export default Loading;

src/Components/Facility/AddInventoryForm.tsx

@@ -1,14 +1,15 @@
 import { Button, Card, CardContent, InputLabel } from "@material-ui/core";
+import loadable from '@loadable/component';
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 import React, { useCallback, useReducer, useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { getItems, postInventory } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { SelectField, TextInputField } from "../Common/HelperInputFields";
-import { Loading } from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
+const Loading = loadable( () => import("../Common/Loading"));
 import { InventoryItemsModel } from "./models";
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 
 const initForm = {
   id: "",

src/Components/Facility/BedCapacityForm.tsx

@@ -1,15 +1,16 @@
 import { Button, Card, CardActions, CardContent, InputLabel } from "@material-ui/core";
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 import { navigate } from "hookrouter";
+import loadable from '@loadable/component';
 import React, { useCallback, useEffect, useReducer, useState } from "react";
 import { useDispatch } from "react-redux";
 import { BED_TYPES } from "../../Common/constants";
 import { statusType, useAbortableEffect } from "../../Common/utils";
-import { Loading } from "../../Components/Common/Loading";
+const Loading = loadable( () => import("../../Components/Common/Loading"));
 import { createCapacity, getCapacity, listCapacity } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { ErrorHelperText, NativeSelectField, TextInputField } from "../Common/HelperInputFields";
-import PageTitle from "../Common/PageTitle";
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import { CapacityModal, OptionsType } from "./models";
 
 interface BedCapacityProps extends CapacityModal {

src/Components/Facility/ConsultationDetails.tsx

@@ -6,13 +6,13 @@ import React, { useCallback, useState } from "react";
 import { useDispatch } from "react-redux";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { getConsultation, getDailyReport } from "../../Redux/actions";
-import { Loading } from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
+import loadable from '@loadable/component';
 import Pagination from "../Common/Pagination";
 import { ConsultationModel } from "./models";
 import { DailyRoundsModel } from "../Patient/models";
 import { PATIENT_CATEGORY, SYMPTOM_CHOICES } from "../../Common/constants";
-
+const Loading = loadable( () => import("../Common/Loading"));
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 const symptomChoices = [...SYMPTOM_CHOICES];
 const patientCategoryChoices = [...PATIENT_CATEGORY];
 

src/Components/Facility/ConsultationForm.tsx

@@ -35,8 +35,9 @@ import {
   SelectField,
   TextInputField,
 } from "../Common/HelperInputFields";
-import { Loading } from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
+import loadable from '@loadable/component';
+const Loading = loadable( () => import("../Common/Loading"));
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import { FacilityModel } from "./models";
 import { navigate } from "hookrouter";
 

src/Components/Facility/DoctorCapacityForm.tsx

@@ -1,15 +1,16 @@
 import { Button, Card, CardContent, Grid, InputLabel } from "@material-ui/core";
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 import { navigate } from "hookrouter";
+import loadable from '@loadable/component';
 import React, { useCallback, useEffect, useReducer, useState } from "react";
 import { useDispatch } from "react-redux";
 import { DOCTOR_SPECIALIZATION } from "../../Common/constants";
 import { statusType, useAbortableEffect } from "../../Common/utils";
-import { Loading } from "../../Components/Common/Loading";
+const Loading = loadable( () => import("../../Components/Common/Loading"));
 import { createDoctor, getDoctor, listDoctor } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { ErrorHelperText, NativeSelectField, TextInputField } from "../Common/HelperInputFields";
-import PageTitle from "../Common/PageTitle";
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import { DoctorModal, OptionsType } from "./models";
 
 interface DoctorCapacityProps extends DoctorModal {

src/Components/Facility/FacilityCreate.tsx

@@ -4,6 +4,7 @@ import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 import MyLocationIcon from "@material-ui/icons/MyLocation";
 import { makeStyles } from "@material-ui/styles";
 import { navigate } from "hookrouter";
+import loadable from '@loadable/component';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 import React, { useCallback, useReducer, useState } from "react";
 import { useDispatch } from "react-redux";
@@ -13,9 +14,9 @@ import { validateLocationCoordinates, phonePreg } from "../../Common/validation"
 import { createFacility, getDistrictByState, getFacility, getLocalbodyByDistrict, getStates, updateFacility } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { MultilineInputField, PhoneNumberField, SelectField, TextInputField } from "../Common/HelperInputFields";
-import { Loading } from "../Common/Loading";
+const Loading = loadable( () => import("../Common/Loading"));
 import { LocationSearchAndPick } from "../Common/LocationSearchAndPick";
-import PageTitle from "../Common/PageTitle";
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 
 const DEFAULT_MAP_LOCATION = [10.038394700000001, 76.5074145180173]; // Ernakulam
 

src/Components/Facility/FacilityHome.tsx

@@ -2,6 +2,7 @@ import { Button, Card, CardContent, Grid, Typography } from "@material-ui/core";
 import { navigate } from "hookrouter";
 import React, { useCallback, useState } from "react";
 import { useDispatch } from "react-redux";
+import loadable from '@loadable/component';
 import { BED_TYPES, DOCTOR_SPECIALIZATION } from "../../Common/constants";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import {
@@ -11,8 +12,8 @@ import {
   listDoctor
 } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
-import { Loading } from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
+const Loading = loadable( () => import("../Common/Loading"));
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import BedTypeCard from "./BedTypeCard";
 import DoctorsCountCard from "./DoctorsCountCard";
 import { CapacityModal, DoctorModal, FacilityModel, PatientStatsModel } from "./models";
@@ -123,6 +124,7 @@ export const FacilityHome = (props: any) => {
           {data.num_patients_isolation || "-"}
         </td>
         <td className="border px-4 py-2 text-center">{data.num_patient_referred || "-"}</td>
+        <td className="border px-4 py-2 text-center">{data.num_patient_confirmed_positive || "-"}</td>
         <td className="border px-4 py-2">
           <Button
             className="py-2 mt-2 px-6 bg-white rounded-md border border-grey-500 inline-flex items-center justify-center whitespace-no-wrap text-sm font-semibold rounded cursor-pointer hover:bg-gray-300"
@@ -275,8 +277,9 @@ export const FacilityHome = (props: any) => {
                     <th className="border px-4 py-2">
                       Advised Home Quarantine
                     </th>
-                    <th className="border px-4 py-2">Under Isolation</th>
-                    <th className="border px-4 py-2">Reffered</th>
+                    <th className="border px-4 py-2">Suspects Isolated</th>
+                    <th className="border px-4 py-2">Referred</th>
+                    <th className="border px-4 py-2">Confirmed Possitives</th>
                     <th className="border px-4 py-2">Actions</th>
                   </tr>
                 </thead>

src/Components/Facility/HospitalList.tsx

@@ -10,13 +10,14 @@ import {
   downloadFacilityDoctors,
   downloadFacilityTriage,
 } from "../../Redux/actions";
+import loadable from '@loadable/component';
 import { SelectField } from "../Common/HelperInputFields";
 import { InputLabel } from "@material-ui/core";
-import { Loading } from "../Common/Loading";
+const Loading = loadable( () => import("../Common/Loading"));
 import Pagination from "../Common/Pagination";
 import { FacilityModel } from "./models";
 import { InputSearchBox } from "../Common/SearchBox";
-import PageTitle from "../Common/PageTitle";
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import { CSVLink } from "react-csv";
 import moment from "moment";
 import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";

src/Components/Facility/InventoryList.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useCallback } from 'react'
-import PageTitle from '../Common/PageTitle'
+import React, { useState, useCallback } from 'react';
+import loadable from '@loadable/component';
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import { Button } from "@material-ui/core";
 import { navigate } from "hookrouter";
 import { useDispatch } from "react-redux";
-import { Loading } from "../Common/Loading";
+const Loading = loadable( () => import("../Common/Loading"));
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { getInventorySummary } from '../../Redux/actions';
 import Pagination from "../Common/Pagination";

src/Components/Facility/InventoryLog.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useCallback } from 'react'
-import PageTitle from '../Common/PageTitle'
-import { Loading } from "../Common/Loading";
+import React, { useState, useCallback } from 'react';
+import loadable from '@loadable/component';
+const PageTitle = loadable( () => import("../Common/PageTitle"));
+const Loading = loadable( () => import("../Common/Loading"));
 import { useDispatch } from "react-redux";
 import { getInventoryLog } from '../../Redux/actions';
 import { statusType, useAbortableEffect } from "../../Common/utils";

src/Components/Facility/MinQuantityList.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useState } from "react";
 import { useDispatch } from "react-redux";
+import loadable from '@loadable/component';
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { getMinQuantity } from "../../Redux/actions";
-import { Loading } from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
+const Loading = loadable( () => import("../Common/Loading"));
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import Pagination from "../Common/Pagination";
 import { Button, ButtonBase } from "@material-ui/core";
 import { navigate } from "hookrouter";

src/Components/Facility/SetInventoryForm.tsx

@@ -2,12 +2,13 @@ import { Button, Card, CardContent, InputLabel } from "@material-ui/core";
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 import React, { useCallback, useReducer, useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
+import loadable from '@loadable/component';
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { getItems, setMinQuantity } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { SelectField, TextInputField } from "../Common/HelperInputFields";
-import { Loading } from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
+const Loading = loadable( () => import("../Common/Loading"));
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import { InventoryItemsModel } from "./models";
 
 const initForm = {

src/Components/Facility/TriageForm.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, CardContent, InputLabel } from "@material-ui/core";
+import loadable from '@loadable/component';
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 import moment from 'moment';
 import React, { useCallback, useReducer, useState } from "react";
@@ -7,8 +8,8 @@ import { statusType, useAbortableEffect } from "../../Common/utils";
 import { createTriageForm, getTriageDetails } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { DateInputField, TextInputField } from "../Common/HelperInputFields";
-import { Loading } from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
+const Loading = loadable( () => import("../Common/Loading"));
+const PageTitle = loadable( () => import("../Common/PageTitle"));
 import { PatientStatsModel } from "./models";
 
 interface triageFormProps extends PatientStatsModel {
@@ -23,6 +24,7 @@ const initForm: any = {
   num_patients_home_quarantine: "",
   num_patients_isolation: "",
   num_patient_referred: "",
+  num_patient_confirmed_positive: ""
 };
 
 const initialState = {
@@ -77,6 +79,7 @@ export const TriageForm = (props: triageFormProps) => {
               num_patients_home_quarantine: res.data.num_patients_home_quarantine,
               num_patients_isolation: res.data.num_patients_isolation,
               num_patient_referred: res.data.num_patient_referred,
+              num_patient_confirmed_positive: res.data.num_patient_confirmed_positive
             }
           });
         }
@@ -127,6 +130,7 @@ export const TriageForm = (props: triageFormProps) => {
         num_patients_home_quarantine: Number(state.form.num_patients_home_quarantine),
         num_patients_isolation: Number(state.form.num_patients_isolation),
         num_patient_referred: Number(state.form.num_patient_referred),
+        num_patient_confirmed_positive: Number(state.form.num_patient_confirmed_positive)
       };
 
       const res = await dispatchAction(createTriageForm(data, { facilityId }));
@@ -208,7 +212,7 @@ export const TriageForm = (props: triageFormProps) => {
                 />
               </div>
               <div>
-                <InputLabel id="num-patients-isolation-label">Patients in Isolation</InputLabel>
+                <InputLabel id="num-patients-isolation-label">Suspected Isolated</InputLabel>
                 <TextInputField
                   name="num_patients_isolation"
                   variant="outlined"
@@ -233,6 +237,19 @@ export const TriageForm = (props: triageFormProps) => {
                   errors={state.errors.num_patient_referred}
                 />
               </div>
+              <div>
+                <InputLabel id="num-patient-referred-label">Confirmed Positive</InputLabel>
+                <TextInputField
+                    name="num_patient_confirmed_positive"
+                    variant="outlined"
+                    margin="dense"
+                    type="number"
+                    InputLabelProps={{ shrink: !!state.form.num_patient_confirmed_positive }}
+                    value={state.form.num_patient_confirmed_positive}
+                    onChange={handleChange}
+                    errors={state.errors.num_patient_confirmed_positive}
+                />
+              </div>
             </div>
             <div className="flex justify-between mt-4">
               <Button