Version 10.0 (#1520)

Co-authored-by: Shailesh Aanand <[email protected]>
Co-authored-by: Khavin Shankar <[email protected]>
Co-authored-by: Sandra <[email protected]>
Co-authored-by: Samyuktha Ganeshkumar <[email protected]>
Co-authored-by: Arpan Abhishek <[email protected]>
Co-authored-by: Abhinandan Arya <[email protected]>
Co-authored-by: Sumit Datta <[email protected]>
Co-authored-by: Gigin George <[email protected]>
Co-authored-by: Sandra K <[email protected]>
Co-authored-by: developedBySJ <[email protected]>
Co-authored-by: Apurva <[email protected]>
Co-authored-by: Divya Garg <[email protected]>

.dockerignore

@@ -1,5 +1,5 @@
 node_modules
-dist
+build
 .dockerignore
 Dockerfile
 .git

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 src/index.css
+src/style/index.css
 
 # misc
 .DS_Store
@@ -38,3 +39,6 @@ public/build-meta.json
 *.bs.js
 *.gen.tsx
 *.gen
+
+# Generated CSS file from Tailwind
+src/style/index.css

Dockerfile

@@ -8,7 +8,7 @@ RUN npm run build
 
 #production-stage
 FROM nginx:stable-alpine as production-stage
-COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /app/build /usr/share/nginx/html
 COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

cypress/support/commands.ts

@@ -1,11 +1,10 @@
-Cypress.Commands.add('verifyNotification', (text) => {
-    cy.get('.pnotify-container').should('exist').contains(text)
-    cy.get('.pnotify-container').click()
-})
-
+Cypress.Commands.add("verifyNotification", (text) => {
+  cy.get(".pnotify-container").should("exist").contains(text);
+  cy.get(".pnotify-container").click();
+});
 
 declare namespace Cypress {
-    interface Chainable<Subject = any> {
-        verifyNotification(text: String): Chainable<Subject>;
-    }
-}
+  interface Chainable<Subject = any> {
+    verifyNotification(text: String): Chainable<Subject>;
+  }
+}

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-publish = "dist/"
+publish = "build/"
 
 [[redirects]]
 from = "/api/*"

package.json

@@ -15,6 +15,7 @@
     "coronasafe Contributors"
   ],
   "homepage": "https://care.coronasafe.in",
+  "proxy": "https://careapi.coronasafe.in",
   "main": "./src/index.tsx",
   "keywords": [
     "Coronasafe",
@@ -62,7 +63,6 @@
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.6",
-    "cypress": "^7.5.0",
     "date-fns": "^2.16.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.1",
@@ -91,7 +91,6 @@
     "react-phone-input-2": "^2.14.0",
     "react-qr-reader": "^2.2.1",
     "react-redux": "^7.2.4",
-    "react-scripts": "^4.0.3",
     "react-swipeable-views": "^0.13.9",
     "react-transition-group": "^4.4.1",
     "react-virtualized": "^9.22.3",
@@ -106,11 +105,15 @@
   },
   "scripts": {
     "prebuild": "npm run re:build && npm run generate-build-meta",
-    "start": "npm run re:build && webpack-dev-server -p --open --mode=development",
+    "build:react": "cross-env NODE_ENV=production react-scripts build",
+    "build:tailwind": "cross-env NODE_ENV=production postcss src/style/index.tailwind.css -o src/style/index.css",
+    "build": "npm run build:tailwind && INLINE_RUNTIME_CHUNK=false npm run build:react",
+    "start:react": "cross-env PORT=4000 react-scripts start",
+    "start:tailwind": "postcss -w src/style/index.tailwind.css -o src/style/index.css",
+    "start": "npm run re:build && run-p start:tailwind start:react",
     "start:Dev": "cross-env NODE_ENV=production http-server dist",
     "re:build": "bsb -make-world -clean-world",
     "re:watch": "bsb -make-world -clean-world -w",
-    "build": "cross-env NODE_ENV=production ./node_modules/.bin/webpack -p --mode=production",
     "generate-build-meta": "node ./build-scripts/generate-build-version.js",
     "test": "snyk test",
     "cypress:open": "cross-env NODE_ENV=development cypress open",
@@ -149,30 +152,24 @@
     "concurrently": "^6.2.0",
     "copy-webpack-plugin": "6.4.1",
     "cssnano": "^5.0.5",
+    "cypress": "^7.5.0",
     "gentype": "^4.1.0",
     "http-server": "^0.12.3",
     "husky": "^6.0.0",
-    "jest": "^27.0.2",
+    "jest": "^26.6.0",
     "jest-environment-jsdom-fourteen": "^1.0.1",
     "jest-resolve": "^27.0.2",
     "jest-watch-typeahead": "^0.6.4",
     "lint-staged": "^11.0.0",
     "local-cypress": "^1.2.1",
+    "npm-run-all": "^4.1.5",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "postcss-cli": "^7.1.2",
     "prettier": "^2.3.0",
+    "react-scripts": "^4.0.3",
     "redux-devtools-extension": "^2.13.9",
     "snyk": "^1.618.0",
-    "source-map-loader": "1.1.3",
-    "ts-loader": "8.0.14",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-middleware": "^3.7.3",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-manifest-plugin": "2.2.0",
-    "workbox-precaching": "^5.1.4",
-    "workbox-webpack-plugin": "^5.1.4"
+    "source-map-loader": "1.1.3"
   },
   "jest": {
     "roots": [
@@ -229,5 +226,10 @@
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
   }
 }

src/App.tsx

@@ -5,10 +5,11 @@ import AppRouter from "./Router/AppRouter";
 import { useDispatch, useSelector } from "react-redux";
 import { getCurrentUser } from "./Redux/actions";
 import "./App.css";
-const Loading = loadable(() => import("./Components/Common/Loading"));
 import { useAbortableEffect, statusType } from "./Common/utils";
 import axios from "axios";
 
+const Loading = loadable(() => import("./Components/Common/Loading"));
+
 const App: React.FC = () => {
   const dispatch: any = useDispatch();
   const state: any = useSelector((state) => state);

src/Common/constants.tsx

@@ -1,6 +1,4 @@
-import keralaLogo from "../../public/images/kerala-logo.png";
-
-export const KeralaLogo = keralaLogo;
+export const KeralaLogo = "images/kerala-logo.png";
 
 export const RESULTS_PER_PAGE_LIMIT = 14;
 export interface OptionsType {

src/Components/Assets/AssetFilter.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { useAbortableEffect, statusType } from "../../Common/utils";
-import { navigate } from "raviger";
+import { navigate, useQueryParams } from "raviger";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import { FacilityModel } from "../Facility/models";
 import { useDispatch } from "react-redux";
@@ -12,10 +12,15 @@ function AssetFilter(props: any) {
   const dispatch: any = useDispatch();
   const [facility, setFacility] = useState<FacilityModel>({ name: "" });
   const [facilityId, setFacilityId] = useState<number | "">(filter.facility);
-
+  const [qParams, _] = useQueryParams();
   useEffect(() => {
     setFacilityId(facility?.id ? facility?.id : "");
   }, [facility]);
+  const handleClearFilter = useCallback(() => {
+    closeFilter();
+    const searchQuery = qParams?.search && `?search=${qParams?.search}`;
+    navigate(`/assets${searchQuery}`);
+  }, [qParams]);
 
   const fetchFacility = useCallback(
     async (status: statusType) => {
@@ -58,13 +63,7 @@ function AssetFilter(props: any) {
           <i className="fas fa-times mr-2" />
           Cancel
         </button>
-        <button
-          className="btn btn-default"
-          onClick={(_) => {
-            closeFilter();
-            navigate("/assets");
-          }}
-        >
+        <button className="btn btn-default" onClick={handleClearFilter}>
           <i className="fas fa-times mr-2" />
           Clear Filter
         </button>

src/Components/Common/SlideOver.gen.tsx

@@ -1,22 +1,21 @@
 /* TypeScript file generated from SlideOver.res by genType. */
 /* eslint-disable import/first */
 
-
-import * as React from 'react';
+import * as React from "react";
 
 // @ts-ignore: Implicit any on import
-import * as SlideOverBS__Es6Import from './SlideOver.bs';
+import * as SlideOverBS__Es6Import from "./SlideOver.bs";
 const SlideOverBS: any = SlideOverBS__Es6Import;
 
 // tslint:disable-next-line:interface-over-type-literal
 export type Props = {
-  readonly children: React.ReactNode; 
-  readonly setShow: (_1:boolean) => void; 
-  readonly show: boolean
+  readonly children: React.ReactNode;
+  readonly setShow: (_1: boolean) => void;
+  readonly show: boolean;
 };
 
 export const make: React.ComponentType<{
-  readonly children: React.ReactNode; 
-  readonly setShow: (_1:boolean) => void; 
-  readonly show: boolean
+  readonly children: React.ReactNode;
+  readonly setShow: (_1: boolean) => void;
+  readonly show: boolean;
 }> = SlideOverBS.make;

src/Components/DeathReport/DeathReport.tsx

@@ -3,7 +3,6 @@ import loadable from "@loadable/component";
 import { useDispatch } from "react-redux";
 import { getPatient } from "../../Redux/actions";
 import { PatientModel } from "../Patient/models";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { GENDER_TYPES } from "../../Common/constants";
 import {
@@ -12,6 +11,7 @@ import {
 } from "../Common/HelperInputFields";
 import { InputLabel } from "@material-ui/core";
 import moment from "moment";
+const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function PrintDeathReport(props: { id: string }) {
   const initialState = {

src/Components/ExternalResult/ListFilter.tsx

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { AutoCompleteAsyncField } from "../Common/HelperInputFields";
+import {
+  AutoCompleteAsyncField,
+  TextInputField,
+} from "../Common/HelperInputFields";
 import { DateRangePicker, getDate } from "../Common/DateRangePicker";
 import { getAllLocalBodyByDistrict } from "../../Redux/actions";
 import { useDispatch, useSelector } from "react-redux";
@@ -14,7 +17,7 @@ function useMergeState(initialState: any) {
 }
 
 export default function ListFilter(props: any) {
-  let { filter, onChange, closeFilter, dataList } = props;
+  let { filter, onChange, closeFilter, dataList, local } = props;
   const [wardList, setWardList] = useState<any[]>([]);
   const [lsgList, setLsgList] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -25,12 +28,23 @@ export default function ListFilter(props: any) {
   const state: any = useSelector((state) => state);
   const { currentUser } = state;
   const [filterState, setFilterState] = useMergeState({
-    created_date_before: filter.created_date_before || null,
-    created_date_after: filter.created_date_after || null,
-    result_date_before: filter.result_date_before || null,
-    result_date_after: filter.result_date_after || null,
-    sample_collection_date_before: filter.sample_collection_date_before || null,
-    sample_collection_date_after: filter.sample_collection_date_after || null,
+    created_date_before:
+      filter.created_date_before || local.created_date_before || null,
+    created_date_after:
+      filter.created_date_after || local.created_date_after || null,
+    result_date_before:
+      filter.result_date_before || local.result_date_before || null,
+    result_date_after:
+      filter.result_date_after || local.result_date_after || null,
+    sample_collection_date_before:
+      filter.sample_collection_date_before ||
+      local.sample_collection_date_before ||
+      null,
+    sample_collection_date_after:
+      filter.sample_collection_date_after ||
+      local.sample_collection_date_after ||
+      null,
+    srf_id: filter.srf_id || local.srf_id || null,
   });
 
   const handleDateRangeChange = (
@@ -74,11 +88,12 @@ export default function ListFilter(props: any) {
       result_date_after,
       sample_collection_date_after,
       sample_collection_date_before,
+      srf_id,
     } = filterState;
 
     const data = {
-      wards: selectedWardIds.length ? selectedWardIds : undefined,
-      local_bodies: selectedLsgIds.length ? selectedLsgIds : undefined,
+      wards: selectedWardIds.length ? selectedWardIds : "",
+      local_bodies: selectedLsgIds.length ? selectedLsgIds : "",
       created_date_before: formatDateTime(created_date_before),
       created_date_after: formatDateTime(created_date_after),
       result_date_before: formatDateTime(result_date_before),
@@ -89,7 +104,13 @@ export default function ListFilter(props: any) {
       sample_collection_date_before: formatDateTime(
         sample_collection_date_before
       ),
+      srf_id: srf_id,
     };
+    localStorage.setItem("external-filters", JSON.stringify(data));
+    localStorage.setItem(
+      "lsg-ward-data",
+      JSON.stringify({ lsgList: selectedLsgs, wardList: wards })
+    );
     onChange(data);
     dataList(selectedLsgs, wards);
   };
@@ -164,6 +185,22 @@ export default function ListFilter(props: any) {
     return selectedwards;
   };
 
+  const handleChange = (event: any) => {
+    const { name, value } = event.target;
+
+    const filterData: any = { ...filterState };
+    filterData[name] = value;
+
+    setFilterState(filterData);
+  };
+
+  const clearFilters = () => {
+    localStorage.removeItem("external-filters");
+    localStorage.removeItem("lsg-ward-data");
+    dataList([], []);
+    closeFilter();
+  };
+
   return (
     <div>
       <div className="flex justify-between">
@@ -174,6 +211,7 @@ export default function ListFilter(props: any) {
         <Link
           href="/external_results"
           className="btn btn-default hover:text-gray-900"
+          onClick={clearFilters}
         >
           <i className="fas fa-times mr-2" />
           Clear Filters
@@ -275,6 +313,20 @@ export default function ListFilter(props: any) {
           size="small"
         />
       </div>
+      <div className="w-64 flex-none">
+        <span className="text-sm font-semibold">SRF ID</span>
+        <TextInputField
+          id="srf_id"
+          name="srf_id"
+          variant="outlined"
+          margin="dense"
+          errors=""
+          value={filterState.srf_id}
+          onChange={handleChange}
+          label="Srf id"
+          className="bg-white h-10 shadow-sm md:text-sm md:leading-5 md:h-9 mr-1"
+        />
+      </div>
     </div>
   );
 }