@pih/esm-referrals-queue-app 1.0.5 → 2.0.0-pre.11

package/package.json

@@ -1,110 +1,100 @@
 {
   "name": "@pih/esm-referrals-queue-app",
-  "version": "1.0.5",
-  "description": "A page for viewing the J9 Home Visits from CommCare",
-  "main": "dist/pih-esm-referrals-queue-app.js",
-  "types": "src/pih-esm-referrals-queue.d.tsx",
+  "version": "2.0.0-pre.11",
   "license": "MPL-2.0",
-  "homepage": "https://pihemr.atlassian.net/wiki/spaces/DSS/pages/538116104/PIH+EMR+Referrals+Queue",
+  "description": "A page for viewing the J9 Home Visits from CommCare",
+  "browser": "dist/pih-esm-referrals-queue-app.js",
+  "main": "src/index.ts",
+  "source": true,
   "scripts": {
-    "start": "openmrs debug --run-project --backend https://humci.pih-emr.org/ --api-url /mirebalais/",
-    "serve": "webpack-dev-server",
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env.analyze=true",
-    "lint": "eslint src --ext tsx",
-    "prettier": "prettier 'src/**/*' --write",
+    "lint": "eslint src --ext js,jsx,ts,tsx",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "typescript": "tsc",
-    "prepublishOnly": "npm run build",
-    "test": "jest",
-    "coverage": "npm test -- --coverage",
-    "update-translations": "tx pull"
+    "test": "jest --config jest.config.json",
+    "verify": "concurrently 'yarn:lint' 'yarn:test' 'yarn:typescript'",
+    "coverage": "yarn test -- --coverage",
+    "prepare": "husky install"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged && yarn verify"
+    }
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
   ],
   "keywords": [
-    "openmrs"
+    "openmrs",
+    "microfrontends"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && concurrently 'npm:lint' 'npm:test' 'npm:typescript' 'npm:update-translations' && git add translations/*.json"
-    }
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/pih/esm-referrals-queue.git"
+    "url": "git+https://github.com/pih/pih-esm-referrals-queue.git"
+  },
+  "homepage": "https://github.com/pih/pih-esm-referrals-queue#readme",
+  "publishConfig": {
+    "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/pih/esm-referrals-queue/issues"
+    "url": "https://github.com/pih/pih-esm-referrals-queue/issues"
   },
   "dependencies": {
-    "systemjs-webpack-interop": "^1.1.2"
+    "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "3.x",
-    "dayjs": "^1.x",
-    "react": "16.x",
-    "react-dom": "16.x",
-    "react-i18next": "^11.x"
+    "@carbon/react": "^1.9.0",
+    "@openmrs/esm-framework": "next",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.8.3",
+    "@carbon/icons-react": "^10.18.0",
+    "@carbon/react": "1.9.0",
     "@openmrs/esm-framework": "next",
-    "@testing-library/jest-dom": "^5.0.2",
-    "@testing-library/react": "^11.2.6",
-    "@types/jest": "^24.9.1",
-    "@types/moment": "^2.13.0",
-    "@types/react": "^16.9.19",
-    "@types/react-dates": "^17.1.10",
-    "@types/react-dom": "^16.9.5",
-    "@types/systemjs": "^6.1.0",
-    "@types/webpack-env": "^1.15.1",
-    "@typescript-eslint/parser": "^2.18.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.6",
-    "browserslist-config-openmrs": "^1.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "concurrently": "^5.1.0",
-    "coveralls": "^3.0.7",
-    "css-loader": "^3.4.2",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.6.0",
-    "eslint-config-ts-react-important-stuff": "^2.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "fork-ts-checker-webpack-plugin": "^1.6.0",
-    "husky": "^3.0.9",
-    "i18next": "^19.1.0",
+    "@swc/core": "^1.2.203",
+    "@swc/jest": "^0.2.21",
+    "@testing-library/dom": "^7.20.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.4",
+    "@types/react": "^18.0.14",
+    "@types/react-dates": "^21.8.0",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-router": "^5.1.14",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/webpack-env": "^1.16.0",
+    "@typescript-eslint/parser": "^5.28.0",
+    "concurrently": "^6.2.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^7.27.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-ts-react-important-stuff": "^3.0.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^9.4.3",
-    "mockdate": "^2.0.5",
-    "moment": "^2.24.0",
+    "jest": "^27.0.4",
+    "jest-cli": "^27.0.4",
+    "mockdate": "^3.0.5",
     "openmrs": "next",
-    "prettier": "^1.19.1",
-    "pretty-quick": "^1.11.1",
+    "prettier": "^2.3.0",
+    "pretty-quick": "^3.1.0",
+    "react": "^18.2.0",
     "react-dates": "^21.8.0",
-    "react-i18next": "^11.3.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^11.7.0",
+    "react-router-dom": "^6.3.0",
     "rxjs": "^6.5.4",
-    "style-loader": "^1.1.3",
-    "typescript": "^3.7.5",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-config-single-spa-react": "^1.3.0",
-    "webpack-dev-server": "^3.10.1",
-    "webpack-merge": "^4.2.2"
+    "typescript": "^4.3.2"
   },
   "resolutions": {
-    "@types/react": "16.14.6"
+    "**/@types/react": "^18.0.14"
   }
 }

package/src/config-schema.ts

@@ -0,0 +1,63 @@
+import { Type, validators } from "@openmrs/esm-framework";
+
+/**
+ * This is the config schema. It expects a configuration object which
+ * looks like this:
+ *
+ * ```json
+ * { "casualGreeting": true, "whoToGreet": ["Mom"] }
+ * ```
+ *
+ * In OpenMRS Microfrontends, all config parameters are optional. Thus,
+ * all elements must have a reasonable default. A good default is one
+ * that works well with the reference application.
+ *
+ * To understand the schema below, please read the configuration system
+ * documentation:
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config
+ * Note especially the section "How do I make my module configurable?"
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
+ * and the Schema Reference
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
+ */
+export const configSchema = {
+  links: {
+    patientDash: {
+      _type: Type.String,
+      _default:
+        "${openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&app=pih.app.clinicianDashboard",
+      _validators: [validators.isUrlWithTemplateParameters(["patientUuid"])],
+    },
+    visitPage: {
+      _type: Type.String,
+      _default:
+        "${openmrsBase}/pihcore/visit/visit.page?patient=${patientUuid}&visit=${visitUuid}&suppressActions=true#/overview",
+      _validators: [
+        validators.isUrlWithTemplateParameters(["patientUuid", "visitUuid"]),
+      ],
+    },
+    homeVisitForm: {
+      _type: Type.String,
+      _default:
+        "${openmrsBase}/htmlformentryui/htmlform/editHtmlFormWithStandardUi.page?patientId=${patientUuid}&visitId=${visitUuid}&encounterId=${encounterUuid}&definitionUiResource=file:configuration/pih/htmlforms/section-mch-referral.xml&returnUrl=/mirebalais/spa/referrals-queue",
+      _validators: [
+        validators.isUrlWithTemplateParameters([
+          "patientUuid",
+          "visitUuid",
+          "encounterUuid",
+        ]),
+      ],
+    },
+  },
+  pendingStatuses: {
+    _type: Type.Array,
+    _default: ["Pending status", "Referral unmet"],
+    _elements: {
+      _type: Type.String,
+    },
+  },
+};
+
+export type Config = {
+  // TODO
+};

package/src/constants.ts

@@ -0,0 +1,3 @@
+export const spaBase = window.spaBase;
+export const appBase = `/referrals-queue`;
+export const appPath = `${spaBase}${appBase}`;

package/src/declarations.d.tsx

@@ -1,8 +1,7 @@
-// This entire file will be deleted once we have typescript definitions
-// for @openmrs/esm-api published to npm
 declare type Observable<T> = import("rxjs").Observable<T>;
 
 declare module "*.css";
+declare module "*.scss";
 
 type Referral = {
   details: string;

package/src/index.ts

@@ -1,14 +1,32 @@
-import "./set-public-path";
+/**
+ * This is the entrypoint file of the application. It communicates the
+ * important features of this microfrontend to the app shell. It
+ * connects the app shell to the React application(s) that make up this
+ * microfrontend.
+ */
+
 import {
+  getAsyncLifecycle,
   defineConfigSchema,
-  Type,
-  validators,
   registerBreadcrumbs,
-  getAsyncLifecycle
 } from "@openmrs/esm-framework";
+import { configSchema } from "./config-schema";
 
-const backendDependencies = {};
+/**
+ * This tells the app shell the version of this app. We inject this variable
+ * via the Webpack DefinePlugin, so first, in order to keep TypeScript happy,
+ * we need to tell it that this is an available variable in this scope. At
+ * build-time the __VERSION__ variable is replaced with the version from
+ * package.json
+ */
+declare var __VERSION__: string;
+const version = __VERSION__;
 
+/**
+ * This tells the app shell how to obtain translation files: that they
+ * are JSON files in the directory `../translations` (which you should
+ * see in the directory structure).
+ */
 const importTranslation = require.context(
   "../translations",
   false,
@@ -16,64 +34,50 @@ const importTranslation = require.context(
   "lazy"
 );
 
-function setupOpenMRS() {
-  defineConfigSchema("@pih/esm-referrals-queue-app", {
-    links: {
-      patientDash: {
-        _type: Type.String,
-        _default:
-          "${openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&app=pih.app.clinicianDashboard",
-        _validators: [validators.isUrlWithTemplateParameters(["patientUuid"])]
-      },
-      visitPage: {
-        _type: Type.String,
-        _default:
-          "${openmrsBase}/pihcore/visit/visit.page?patient=${patientUuid}&visit=${visitUuid}&suppressActions=true#/overview",
-        _validators: [
-          validators.isUrlWithTemplateParameters(["patientUuid", "visitUuid"])
-        ]
-      },
-      homeVisitForm: {
-        _type: Type.String,
-        _default:
-          "${openmrsBase}/htmlformentryui/htmlform/editHtmlFormWithStandardUi.page?patientId=${patientUuid}&visitId=${visitUuid}&encounterId=${encounterUuid}&definitionUiResource=file:configuration/pih/htmlforms/section-mch-referral.xml&returnUrl=/mirebalais/spa/referrals-queue",
-        _validators: [
-          validators.isUrlWithTemplateParameters([
-            "patientUuid",
-            "visitUuid",
-            "encounterUuid"
-          ])
-        ]
-      }
-    },
-    pendingStatuses: {
-      _type: Type.Array,
-      _default: ["Pending status", "Referral unmet"],
-      _elements: {
-        _type: Type.String
-      }
-    }
-  });
+/**
+ * This tells the app shell what versions of what OpenMRS backend modules
+ * are expected. Warnings will appear if suitable modules are not
+ * installed. The keys are the part of the module name after
+ * `openmrs-module-`; e.g., `openmrs-module-fhir2` becomes `fhir2`.
+ */
+const backendDependencies = {};
 
+/**
+ * This function performs any setup that should happen at microfrontend
+ * load-time (such as defining the config schema) and then returns an
+ * object which describes how the React application(s) should be
+ * rendered.
+ *
+ * In this example, our return object contains a single page definition.
+ * It tells the app shell that the default export of `greeter.tsx`
+ * should be rendered when the route matches `hello`. The full route
+ * will be `openmrsSpaBase() + 'hello'`, which is usually
+ * `/openmrs/spa/hello`.
+ */
+function setupOpenMRS() {
   const moduleName = "@pih/esm-referrals-queue-app";
-  const pageName = "referrals-queue";
-
   const options = {
-    featureName: pageName,
-    moduleName
+    featureName: "referrals-queue",
+    moduleName,
   };
 
+  defineConfigSchema(moduleName, configSchema);
+
   registerBreadcrumbs([
     {
-      path: `${window.spaBase}/${pageName}`,
-      title: "Referrals Queue"
-    }
+      path: `${window.spaBase}/referrals-queue`,
+      title: "Referrals Queue",
+    },
   ]);
 
   return {
-    lifecycle: getAsyncLifecycle(() => import("./root.component"), options),
-    activate: pageName
+    pages: [
+      {
+        load: getAsyncLifecycle(() => import("./root.component"), options),
+        route: "referrals-queue",
+      },
+    ],
   };
 }
 
-export { backendDependencies, importTranslation, setupOpenMRS };
+export { backendDependencies, importTranslation, setupOpenMRS, version };

package/src/referrals-queue/referrals-queue.component.tsx

@@ -1,19 +1,22 @@
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import "react-dates/initialize";
-import { SingleDatePicker } from "react-dates";
-import moment, { Moment } from "moment";
+import moment from "moment";
+import {
+  Content,
+  Tile,
+  Heading,
+  Search,
+  Dropdown,
+  DatePicker,
+  DatePickerInput,
+} from "@carbon/react";
 import "moment/locale/fr";
 import { createErrorHandler } from "@openmrs/esm-framework";
-import Table from "../table/table.component";
-import styles from "./referrals-queue.css";
+import Table from "../table/referrals-table.component";
+import styles from "./referrals-queue.scss";
 import { getReferrals } from "./referrals-queue.resource";
 
-// Override the webpack CSS loader config in order to load react-dates styles.
-//   See thread: https://github.com/webpack-contrib/css-loader/issues/295
-import "!style-loader!css-loader!react-dates/lib/css/_datepicker.css";
-import "!style-loader!css-loader!./react-dates-overrides.css";
-
 export default function ReferralsQueue(props: ReferralsQueueProps) {
   const [referrals, setReferrals]: [Referral[], Function] = React.useState([]);
   const [referralTypeFilter, setReferralTypeFilter] = React.useState("");
@@ -22,11 +25,9 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
   const [fromDate, setFromDate] = React.useState(moment().subtract(1, "month"));
   const [toDate, setToDate] = React.useState(today);
   const [ptQuery, setPtQuery] = React.useState("");
-  const [fromDateFocused, setFromDateFocused] = React.useState(false);
-  const [toDateFocused, setToDateFocused] = React.useState(false);
   const { t, i18n } = useTranslation();
 
-  const languageMatches = i18n.language.match(/^(en|fr|ht).*/);
+  const languageMatches = i18n.language?.match(/^(en|fr|ht).*/);
   const language = (languageMatches && languageMatches[1]) || "en";
 
   React.useEffect(() => {
@@ -38,127 +39,118 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
       const sub = getReferrals({
         fromDate: fromDate.format("YYYY-MM-DD"),
         toDate: toDate.format("YYYY-MM-DD"),
-        locale: language
-      }).subscribe(referrals => setReferrals(referrals), createErrorHandler());
+        locale: language,
+      }).subscribe(
+        (referrals) => setReferrals(referrals),
+        createErrorHandler()
+      );
       return () => sub.unsubscribe();
     }
   }, [fromDate, toDate, language]);
 
-  // console.log(referrals);
   const filteredReferrals = referrals
-    .filter(r => !referralTypeFilter || r.referral_type == referralTypeFilter)
-    .filter(r => !statusFilter || r.fulfillment_status == statusFilter)
-    .filter(r => matchQuery(r, ptQuery));
-  const referralTypes = [...new Set(referrals.map(r => r.referral_type))];
+    .filter(
+      (r) =>
+        !referralTypeFilter ||
+        referralTypeFilter == t("any", "Any") ||
+        r.referral_type == referralTypeFilter
+    )
+    .filter(
+      (r) =>
+        !statusFilter ||
+        statusFilter == t("any", "Any") ||
+        r.fulfillment_status == statusFilter
+    )
+    .filter((r) => matchQuery(r, ptQuery));
+
+  const referralTypes = [
+    t("any", "Any"),
+    ...new Set(referrals.map((r) => r.referral_type).filter((r) => r != null)),
+  ];
+
   const statuses = [
-    ...new Set(referrals.map(r => r.fulfillment_status).filter(r => r != null))
+    t("any", "Any"),
+    ...new Set(
+      referrals.map((r) => r.fulfillment_status).filter((r) => r != null)
+    ),
   ];
+
   return (
-    <div className={styles.container}>
-      <div className="omrs-card omrs-margin-top-16 omrs-padding-16">
-        <div className="omrs-type-title-2">
+    <Content className={styles.container}>
+      <Tile>
+        <Heading>
           <Trans i18nKey="referrals-queue">Referrals Queue</Trans>
-        </div>
+        </Heading>
         <div className={styles.controlsContainer}>
           <div className={styles.inputContainer}>
             <div className={styles.dateInputContainer}>
-              <label htmlFor="from-date">
-                <Trans i18nKey="from">From</Trans>
-              </label>
-              <SingleDatePicker
-                id="from-date"
-                date={fromDate}
-                onDateChange={date => setFromDate(date)}
-                focused={fromDateFocused}
-                onFocusChange={({ focused }) => setFromDateFocused(focused)}
-                isOutsideRange={(date: Moment) => date.isAfter(today)}
-                displayFormat="DD MMM YYYY"
-                numberOfMonths={1}
-              />
-            </div>
-            <div className={styles.dateInputContainer}>
-              <label htmlFor="to-date">
-                <Trans i18nKey="to">To</Trans>
-              </label>
-              <SingleDatePicker
-                id="to-date"
-                date={toDate}
-                onDateChange={date => setToDate(date)}
-                focused={toDateFocused}
-                onFocusChange={({ focused }) => setToDateFocused(focused)}
-                isOutsideRange={(date: Moment) => date.isAfter(today)}
-                displayFormat="DD MMM YYYY"
-                numberOfMonths={1}
-              />
+              <DatePicker
+                dateFormat="d/M/Y"
+                datePickerType="range"
+                locale={language === "ht" ? "fr" : language}
+                maxDate={new Date().toISOString()}
+                onChange={(date) => {
+                  if (date && date.length > 0) {
+                    setFromDate(date ? moment(date[0]) : null);
+                    if (date.length > 1) {
+                      setToDate(date ? moment(date[1]) : null);
+                    }
+                  }
+                }}
+                value={[fromDate.toISOString(), toDate.toISOString()]}
+              >
+                <DatePickerInput id="from-date" labelText={t("from", "From")} />
+                <DatePickerInput id="to-date" labelText={t("to", "To")} />
+              </DatePicker>
             </div>
           </div>
           <div className={styles.inputContainer}>
-            <div className="omrs-input-group">
-              <label htmlFor="referral-type">
-                <Trans i18nKey="referral-type">Referral Type</Trans>
-              </label>
-              <select
+            <div style={{ width: 300 }}>
+              <Dropdown
                 id="referral-type"
-                value={referralTypeFilter}
-                onChange={e => setReferralTypeFilter(e.target.value)}
-                className={styles.dropdown}
-              >
-                <option value="">{t("any", "Any")}</option>
-                {referralTypes.map(t => (
-                  <option key={t} value={t}>
-                    {t}
-                  </option>
-                ))}
-              </select>
+                label=""
+                titleText={t("referral-type", "Referral Type")}
+                items={referralTypes}
+                onChange={(e) => setReferralTypeFilter(e.selectedItem)}
+              />
             </div>
           </div>
           <div className={styles.inputContainer}>
-            <div className="omrs-input-group">
+            <div>
               <label htmlFor="query-input">
                 <Trans i18nKey="filter-by-patient">Filter by patient</Trans>
               </label>
-              <input
+              <Search
                 id="query-input"
-                type="text"
-                value={ptQuery}
-                onChange={e => setPtQuery(e.target.value)}
-                className="omrs-input-outlined"
+                labelText=""
+                onChange={(e) => setPtQuery(e.target.value)}
               />
             </div>
           </div>
           <div className={styles.inputContainer}>
-            <div className="omrs-input-group">
-              <label htmlFor="status">
-                <Trans i18nKey="status">Status</Trans>
-              </label>
-              <select
+            <div style={{ width: 300 }}>
+              <Dropdown
                 id="status"
-                value={statusFilter}
-                onChange={e => setStatusFilter(e.target.value)}
-                className={styles.dropdown}
-              >
-                <option value="">{t("any", "Any")}</option>
-                {statuses.map(t => (
-                  <option key={t} value={t}>
-                    {t}
-                  </option>
-                ))}
-              </select>
+                label=""
+                titleText={t("status", "Status")}
+                items={statuses}
+                onChange={(e) => setStatusFilter(e.selectedItem)}
+              />
             </div>
           </div>
         </div>
         <div className={styles.tableContainer}>
           <Table referrals={filteredReferrals} />
         </div>
-      </div>
-    </div>
+      </Tile>
+    </Content>
   );
 }
 
 function matchQuery(referral: Referral, query: string): boolean {
   return (
     !query ||
-    prepareQuery(query).every(regexp =>
+    prepareQuery(query).every((regexp) =>
       regexp.test(removeDiacritics(referral.patient_name))
     ) ||
     new RegExp(query, "i").test(referral.zl_emr_id)
@@ -166,7 +158,7 @@ function matchQuery(referral: Referral, query: string): boolean {
 }
 
 function prepareQuery(query: string): RegExp[] {
-  return query.split(/\s/).map(token => {
+  return query.split(/\s/).map((token) => {
     const tokenCleaned = removeDiacritics(token);
     return new RegExp("\\b" + tokenCleaned, "i");
   });

package/src/referrals-queue/{referrals-queue.resource.ts → referrals-queue.resource.tsx}

@@ -4,7 +4,7 @@ import { map } from "rxjs/operators";
 export function getReferrals({
   fromDate,
   toDate,
-  locale
+  locale,
 }): Observable<Object[]> {
   return openmrsObservableFetch(
     `/ws/rest/v1/reportingrest/reportdata/cd7dfde7-764a-4da6-81c2-d5887ed1df51?startDate=${fromDate}&endDate=${toDate}&locale=${locale}`