@pih/esm-referrals-queue-app 2.0.0-pre.17 → 2.1.1-pre.2

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@pih/esm-referrals-queue-app",
-  "version": "2.0.0-pre.17",
-  "license": "MPL-2.0",
+  "version": "2.1.1-pre.2",
   "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,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/PIH/openmrs-esm-pihemr#readme",
   "scripts": {
     "start": "openmrs develop",
     "serve": "webpack serve --mode=development",
@@ -14,50 +15,40 @@
     "lint": "eslint src --ext js,jsx,ts,tsx",
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "typescript": "tsc",
-    "test": "jest --config jest.config.json",
-    "verify": "concurrently 'yarn:lint' 'yarn:test' 'yarn:typescript'",
+    "verify": "turbo lint typescript test --color --concurrency=2",
     "coverage": "yarn test -- --coverage",
     "prepare": "husky install"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && yarn verify"
-    }
-  },
   "browserslist": [
     "extends browserslist-config-openmrs"
   ],
   "keywords": [
-    "openmrs",
-    "microfrontends"
+    "openmrs"
   ],
-  "repository": {
-    "type": "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/pih-esm-referrals-queue/issues"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PIH/openmrs-esm-pihemr.git"
   },
-  "dependencies": {
-    "lodash-es": "^4.17.15"
+  "bugs": {
+    "url": "https://github.com/PIH/openmrs-esm-pihemr/issues"
   },
   "peerDependencies": {
     "@carbon/react": "^1.9.0",
-    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-framework": "^5.4.0",
     "dayjs": "1.x",
+    "i18next": "^21.10.0",
     "react": "18.x",
+    "react-dom": "18.x",
     "react-i18next": "11.x",
-    "react-router-dom": "6.x",
-    "rxjs": "6.x"
+    "rxjs": "6.x",
+    "single-spa": "^6.x",
+    "swr": "^2.2.2"
   },
   "devDependencies": {
-    "@carbon/icons-react": "^10.18.0",
-    "@carbon/react": "1.9.0",
-    "@openmrs/esm-framework": "^5.0.3-pre.878",
+    "@openmrs/esm-framework": "^5.4.0",
     "@swc/core": "^1.2.203",
     "@swc/jest": "^0.2.21",
     "@testing-library/dom": "^7.20.0",
@@ -71,30 +62,20 @@
     "@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": "^27.0.4",
     "jest-cli": "^27.0.4",
     "mockdate": "^3.0.5",
-    "openmrs": "^5.0.3-pre.878",
-    "prettier": "^2.3.0",
-    "pretty-quick": "^3.1.0",
     "react": "^18.2.0",
     "react-dates": "^21.8.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.7.0",
     "react-router-dom": "^6.3.0",
-    "rxjs": "^6.5.4",
-    "typescript": "^4.3.2"
+    "rxjs": "^6.6.7",
+    "swc-loader": "^0.2.6",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^4.10.0"
   },
-  "resolutions": {
-    "**/@types/react": "^18.0.14"
-  }
-}
+  "stableVersion": "2.1.0"
+}

package/src/config-schema.ts

@@ -1,4 +1,4 @@
-import { Type, validators } from "@openmrs/esm-framework";
+import { Type, validators } from '@openmrs/esm-framework';
 
 /**
  * This is the config schema. It expects a configuration object which
@@ -25,33 +25,25 @@ export const configSchema = {
     patientDash: {
       _type: Type.String,
       _default:
-        "${openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&app=pih.app.clinicianDashboard",
-      _validators: [validators.isUrlWithTemplateParameters(["patientUuid"])],
+        '${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"]),
-      ],
+        '${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",
-        ]),
-      ],
+        '${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"],
+    _default: ['Pending status', 'Referral unmet'],
     _elements: {
       _type: Type.String,
     },

package/src/declarations.d.tsx

@@ -1,12 +1,8 @@
-declare type Observable<T> = import("rxjs").Observable<T>;
-
-declare module "*.css";
-declare module "*.scss";
-declare module "@carbon/react";
+declare module '*.css';
+declare module '*.scss';
+declare module '@carbon/react';
 declare type SideNavProps = {};
 
-
-
 type Referral = {
   details: string;
   encounter_uuid: string;

package/src/index.ts

@@ -5,37 +5,25 @@
  * microfrontend.
  */
 
-import {
-  getAsyncLifecycle,
-  defineConfigSchema,
-  registerBreadcrumbs,
-} from "@openmrs/esm-framework";
-import { configSchema } from "./config-schema";
+import { getAsyncLifecycle, defineConfigSchema, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
 
-const moduleName = "@pih/esm-referrals-queue-app";
+const moduleName = '@pih/esm-referrals-queue-app';
 const options = {
-  featureName: "referrals-queue",
+  featureName: 'referrals-queue',
   moduleName,
 };
 
-export const importTranslation = require.context(
-  "../translations",
-  false,
-  /.json$/,
-  "lazy"
-);
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-export const root = getAsyncLifecycle(
-  () => import("./root.component"),
-  options
-);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
   registerBreadcrumbs([
     {
       path: `${window.spaBase}/referrals-queue`,
-      title: "Referrals Queue",
+      title: 'Referrals Queue',
     },
   ]);
 }

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

@@ -1,79 +1,52 @@
-import React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import "react-dates/initialize";
-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/referrals-table.component";
-import styles from "./referrals-queue.scss";
-import { getReferrals } from "./referrals-queue.resource";
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import 'react-dates/initialize';
+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/referrals-table.component';
+import styles from './referrals-queue.scss';
+import { getReferrals } from './referrals-queue.resource';
 
 export default function ReferralsQueue(props: ReferralsQueueProps) {
   const [referrals, setReferrals]: [Referral[], Function] = React.useState([]);
-  const [referralTypeFilter, setReferralTypeFilter] = React.useState("");
-  const [statusFilter, setStatusFilter] = React.useState("");
+  const [referralTypeFilter, setReferralTypeFilter] = React.useState('');
+  const [statusFilter, setStatusFilter] = React.useState('');
   const today = moment();
-  const [fromDate, setFromDate] = React.useState(moment().subtract(1, "month"));
+  const [fromDate, setFromDate] = React.useState(moment().subtract(1, 'month'));
   const [toDate, setToDate] = React.useState(today);
-  const [ptQuery, setPtQuery] = React.useState("");
+  const [ptQuery, setPtQuery] = React.useState('');
   const { t, i18n } = useTranslation();
 
   const languageMatches = i18n.language?.match(/^(en|fr|ht).*/);
-  const language = (languageMatches && languageMatches[1]) || "en";
+  const language = (languageMatches && languageMatches[1]) || 'en';
 
   React.useEffect(() => {
-    moment.locale(language === "ht" ? "fr" : language);
+    moment.locale(language === 'ht' ? 'fr' : language);
   }, [language]);
 
   React.useEffect(() => {
     if (fromDate && toDate) {
       const sub = getReferrals({
-        fromDate: fromDate.format("YYYY-MM-DD"),
-        toDate: toDate.format("YYYY-MM-DD"),
+        fromDate: fromDate.format('YYYY-MM-DD'),
+        toDate: toDate.format('YYYY-MM-DD'),
         locale: language,
-      }).subscribe(
-        (referrals) => setReferrals(referrals),
-        createErrorHandler()
-      );
+      }).subscribe((referrals) => setReferrals(referrals), createErrorHandler());
       return () => sub.unsubscribe();
     }
   }, [fromDate, toDate, language]);
 
   const filteredReferrals = referrals
     .filter(
-      (r) =>
-        !referralTypeFilter ||
-        referralTypeFilter == t("any", "Any") ||
-        r.referral_type == referralTypeFilter
-    )
-    .filter(
-      (r) =>
-        !statusFilter ||
-        statusFilter == t("any", "Any") ||
-        r.fulfillment_status == statusFilter
+      (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 referralTypes = [t('any', 'Any'), ...new Set(referrals.map((r) => r.referral_type).filter((r) => r != null))];
 
-  const statuses = [
-    t("any", "Any"),
-    ...new Set(
-      referrals.map((r) => r.fulfillment_status).filter((r) => r != null)
-    ),
-  ];
+  const statuses = [t('any', 'Any'), ...new Set(referrals.map((r) => r.fulfillment_status).filter((r) => r != null))];
 
   return (
     <Content className={styles.container}>
@@ -86,7 +59,7 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
             <DatePicker
               dateFormat="d/M/Y"
               datePickerType="range"
-              locale={language === "ht" ? "fr" : language}
+              locale={language === 'ht' ? 'fr' : language}
               maxDate={new Date().toISOString()}
               onChange={(date) => {
                 if (date && date.length > 0) {
@@ -96,18 +69,17 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
                   }
                 }
               }}
-              value={[fromDate.toISOString(), toDate.toISOString()]}
-            >
-              <DatePickerInput id="from-date" labelText={t("from", "From")} />
-              <DatePickerInput id="to-date" labelText={t("to", "To")} />
+              value={[fromDate.toISOString(), toDate.toISOString()]}>
+              <DatePickerInput id="from-date" labelText={t('from', 'From')} />
+              <DatePickerInput id="to-date" labelText={t('to', 'To')} />
             </DatePicker>
           </div>
           <div className={styles.inputContainer}>
             <div style={{ width: 400 }}>
               <Dropdown
                 id="referral-type"
-                label={t("select-referral-type", "Select Referral Type")}
-                titleText={t("referral-type", "Referral Type")}
+                label={t('select-referral-type', 'Select Referral Type')}
+                titleText={t('referral-type', 'Referral Type')}
                 items={referralTypes}
                 onChange={(e) => setReferralTypeFilter(e.selectedItem)}
               />
@@ -118,19 +90,15 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
               <label htmlFor="query-input">
                 <Trans i18nKey="filter-by-patient">Filter by patient</Trans>
               </label>
-              <Search
-                id="query-input"
-                labelText=""
-                onChange={(e) => setPtQuery(e.target.value)}
-              />
+              <Search id="query-input" labelText="" onChange={(e) => setPtQuery(e.target.value)} />
             </div>
           </div>
           <div className={styles.inputContainer}>
             <div style={{ width: 400 }}>
               <Dropdown
                 id="status"
-                label={t("select-status", "Select Status")}
-                titleText={t("status", "Status")}
+                label={t('select-status', 'Select Status')}
+                titleText={t('status', 'Status')}
                 items={statuses}
                 onChange={(e) => setStatusFilter(e.selectedItem)}
               />
@@ -148,23 +116,21 @@ export default function ReferralsQueue(props: ReferralsQueueProps) {
 function matchQuery(referral: Referral, query: string): boolean {
   return (
     !query ||
-    prepareQuery(query).every((regexp) =>
-      regexp.test(removeDiacritics(referral.patient_name))
-    ) ||
-    new RegExp(query, "i").test(referral.zl_emr_id)
+    prepareQuery(query).every((regexp) => regexp.test(removeDiacritics(referral.patient_name))) ||
+    new RegExp(query, 'i').test(referral.zl_emr_id)
   );
 }
 
 function prepareQuery(query: string): RegExp[] {
   return query.split(/\s/).map((token) => {
     const tokenCleaned = removeDiacritics(token);
-    return new RegExp("\\b" + tokenCleaned, "i");
+    return new RegExp('\\b' + tokenCleaned, 'i');
   });
 }
 
 function removeDiacritics(str: string) {
   // From https://stackoverflow.com/a/37511463/1464495
-  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+  return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 }
 
 type ReferralsQueueProps = {};

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

@@ -1,12 +1,9 @@
-import { openmrsObservableFetch } from "@openmrs/esm-framework";
-import { map } from "rxjs/operators";
+import { openmrsObservableFetch } from '@openmrs/esm-framework';
+import { type Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
-export function getReferrals({
-  fromDate,
-  toDate,
-  locale,
-}): Observable<Object[]> {
+export function getReferrals({ fromDate, toDate, locale }): Observable<Object[]> {
   return openmrsObservableFetch(
-    `/ws/rest/v1/reportingrest/reportdata/cd7dfde7-764a-4da6-81c2-d5887ed1df51?startDate=${fromDate}&endDate=${toDate}&locale=${locale}`
-  ).pipe(map(({ data }) => data["dataSets"][0]["rows"]));
+    `/ws/rest/v1/reportingrest/reportdata/cd7dfde7-764a-4da6-81c2-d5887ed1df51?startDate=${fromDate}&endDate=${toDate}&locale=${locale}`,
+  ).pipe(map(({ data }) => data['dataSets'][0]['rows']));
 }

package/src/referrals-queue/referrals-queue.scss

@@ -21,7 +21,6 @@
   width: 50%;
   min-width: 300px;
   text-align: left;
-  padding:  0.5rem;
+  padding: 0.5rem;
   align-items: flex-end;
 }
-