From cc5f904dcfbd2bd54dc684126d3d444e0c1e51bd Mon Sep 17 00:00:00 2001
From: Nicky Kimaina <nkimaina@ampath.or.ke>
Date: Wed, 27 May 2020 17:54:09 +0300
Subject: [PATCH 1/3] Added functionality to load programs configs

---
 ...t-widgets.schema.ts => programs.schema.ts} |  18 ++-
 src/config/use-widget-config.ts               |  14 +++
 src/forms/form-grouper.test.ts                |   7 +-
 src/forms/form-grouper.ts                     |  16 +--
 src/forms/forms-list.component.tsx            |   4 +
 src/visit/start-visit.component.tsx           |   4 -
 src/visit/visit-summary.component.tsx         | 118 ++++++++----------
 7 files changed, 92 insertions(+), 89 deletions(-)
 rename src/config/{patient-chart-widgets.schema.ts => programs.schema.ts} (54%)
 create mode 100644 src/config/use-widget-config.ts

diff --git a/src/config/patient-chart-widgets.schema.ts b/src/config/programs.schema.ts
similarity index 54%
rename from src/config/patient-chart-widgets.schema.ts
rename to src/config/programs.schema.ts
index 5f24ded..ebfb48c 100644
--- a/src/config/patient-chart-widgets.schema.ts
+++ b/src/config/programs.schema.ts
@@ -1,6 +1,7 @@
 import { validators } from "@openmrs/esm-module-config";
+import { ChartWidgetConfig } from "@openmrs/esm-patient-chart-widgets";
 
-export const esmPatientChartWidgetsSchema = {
+export const programsConfigSchema = {
   programs: {
     arrayElements: {
       programUuid: { validators: [validators.isString] },
@@ -16,3 +17,18 @@ export const esmPatientChartWidgetsSchema = {
     default: []
   }
 };
+
+export type ProgramFormsConfig = {
+  programUuid: string;
+  programName: string;
+  forms: Array<FormSelector>;
+};
+
+export interface ProgramConfig extends ChartWidgetConfig {
+  programs: ProgramFormsConfig[];
+}
+
+export type FormSelector = {
+  encounterTypeUuid: string;
+  formUuid?: string;
+};
diff --git a/src/config/use-widget-config.ts b/src/config/use-widget-config.ts
new file mode 100644
index 0000000..6171f01
--- /dev/null
+++ b/src/config/use-widget-config.ts
@@ -0,0 +1,14 @@
+import React from "react";
+import { useConfig } from "@openmrs/esm-module-config";
+import {
+  PatientChartConfig,
+  ChartWidgetConfig
+} from "@openmrs/esm-patient-chart-widgets";
+
+export default function useWidgetConfig<T extends ChartWidgetConfig>(
+  key: string
+): T {
+  const config = (useConfig<PatientChartConfig>() as PatientChartConfig)
+    .widgetsConfigs[key] as T;
+  return config;
+}
diff --git a/src/forms/form-grouper.test.ts b/src/forms/form-grouper.test.ts
index 4ef9178..d810b81 100644
--- a/src/forms/form-grouper.test.ts
+++ b/src/forms/form-grouper.test.ts
@@ -1,10 +1,7 @@
-import {
-  ProgramFormsConfig,
-  ProgramForms,
-  groupFormsByProgram
-} from "./form-grouper";
+import { ProgramForms, groupFormsByProgram } from "./form-grouper";
 import { Form } from "../openmrs-resource/form.resource";
 import { Encounter } from "../openmrs-resource/encounter.resource";
+import { ProgramFormsConfig } from "../config/programs.schema";
 describe("Form Grouper", () => {
   const programFormsConfig: Array<ProgramFormsConfig> = [
     {
diff --git a/src/forms/form-grouper.ts b/src/forms/form-grouper.ts
index deb5dd0..38e5def 100644
--- a/src/forms/form-grouper.ts
+++ b/src/forms/form-grouper.ts
@@ -1,6 +1,7 @@
 import { Form } from "../openmrs-resource/form.resource";
 import { FormsFilter, areFormsEqual } from "./form-list-filter";
 import { Encounter } from "../openmrs-resource/encounter.resource";
+import { ProgramFormsConfig } from "../config/programs.schema";
 
 export function groupFormsByProgram(
   forms: Array<Form>,
@@ -67,18 +68,3 @@ export type ProgramForms = {
   availableForms?: Array<Form>;
   completedForms?: Array<Encounter>;
 };
-
-export type ProgramFormsConfig = {
-  programUuid: string;
-  programName: string;
-  forms: Array<FormSelector>;
-};
-
-export type ProgramConfig = {
-  programs: ProgramFormsConfig[];
-};
-
-export type FormSelector = {
-  encounterTypeUuid: string;
-  formUuid?: string;
-};
diff --git a/src/forms/forms-list.component.tsx b/src/forms/forms-list.component.tsx
index 2dd5965..0393a95 100644
--- a/src/forms/forms-list.component.tsx
+++ b/src/forms/forms-list.component.tsx
@@ -13,8 +13,12 @@ import { filterAvailableCompletedForms } from "./form-grouper";
 import Parcel from "single-spa-react/parcel";
 import { Link } from "react-router-dom";
 import { Subscription } from "rxjs";
+import { ProgramConfig } from "../config/programs.schema";
+import useWidgetConfig from "../config/use-widget-config";
 
 export default function FormsList(props: FormsListProps) {
+  const config = useWidgetConfig<ProgramConfig>("programs");
+  console.log("config", config);
   // console.log("props", props);
   const baseChartUrl = `${props.match.url.substr(
     0,
diff --git a/src/visit/start-visit.component.tsx b/src/visit/start-visit.component.tsx
index 389b310..f57a913 100644
--- a/src/visit/start-visit.component.tsx
+++ b/src/visit/start-visit.component.tsx
@@ -7,12 +7,8 @@ import { FetchResponse } from "@openmrs/esm-api/dist/openmrs-fetch";
 import styles from "./start-visit.component.css";
 import LocationSelectComponent from "../widgets/location-select.component";
 import { toOmrsDateString } from "../utils/omrs-dates";
-import { ProgramConfig } from "../forms/form-grouper";
-import { useConfig } from "@openmrs/esm-module-config";
 
 export default function StartVisitComponent(props: StartVisitProps) {
-  const config: ProgramConfig = useConfig<ProgramConfig>();
-
   const [patientUuid, setPatientUuid] = React.useState<string>();
 
   const [visitStartDate, setVisitStartDate] = React.useState(
diff --git a/src/visit/visit-summary.component.tsx b/src/visit/visit-summary.component.tsx
index e9a8003..46d7314 100644
--- a/src/visit/visit-summary.component.tsx
+++ b/src/visit/visit-summary.component.tsx
@@ -8,14 +8,8 @@ import StartVisitComponent from "./start-visit.component";
 import StartedVisitComponent from "./started-visit.component";
 import useStartedVisit from "./use-started-visit";
 import styles from "../summary-card.css";
-import { esmPatientChartWidgetsSchema } from "../config/patient-chart-widgets.schema";
 
 export default function VisitSummaryComponent(props: any) {
-  defineConfigSchema(
-    "@ampath/esm-patient-chart-widgets",
-    esmPatientChartWidgetsSchema
-  );
-
   const visitToStart: VisitTypeProp = {
     // Intentional: useful for switching between openmrs-spa and ampath environment for testing
     // visitTypeUuid: "7b0f5697-27e3-40c4-8bae-f4049abfb4ed",
@@ -43,72 +37,68 @@ export default function VisitSummaryComponent(props: any) {
   };
 
   return (
-    <ModuleNameContext.Provider value="@ampath/esm-patient-chart-widgets">
+    <div
+      style={{
+        minWidth: "20rem",
+        textAlign: "left"
+      }}
+      className={`omrs-card ${styles.card}`}
+    >
+      <div className={styles.header}>
+        <div className={`${styles.headerTitle}`}>
+          <h2 className="omrs-padding-left-16">
+            {startedVisit
+              ? "Today's Outpatient Visit"
+              : "Start New Clinical Visit"}
+          </h2>
+        </div>
+      </div>
       <div
-        style={{
-          minWidth: "20rem",
-          textAlign: "left"
-        }}
-        className={`omrs-card ${styles.card}`}
+        style={{ maxHeight: "320px", minHeight: "320px", overflow: "scroll" }}
       >
-        <div className={styles.header}>
-          <div className={`${styles.headerTitle}`}>
-            <h2 className="omrs-padding-left-16">
-              {startedVisit
-                ? "Today's Outpatient Visit"
-                : "Start New Clinical Visit"}
-            </h2>
-          </div>
-        </div>
-        <div
-          style={{ maxHeight: "320px", minHeight: "320px", overflow: "scroll" }}
-        >
-          {!startingVisit && startedVisit === undefined && (
-            <div>Loading...</div>
-          )}
-          {startingVisit && (
-            <StartVisitComponent
-              visitType={visitToStart}
-              onVisitStarted={onVisitStarted}
-              onCanceled={onVisitStartingCancelled}
-            />
-          )}
-          {!startingVisit && startedVisit === null && (
+        {!startingVisit && startedVisit === undefined && <div>Loading...</div>}
+        {startingVisit && (
+          <StartVisitComponent
+            visitType={visitToStart}
+            onVisitStarted={onVisitStarted}
+            onCanceled={onVisitStartingCancelled}
+          />
+        )}
+        {!startingVisit && startedVisit === null && (
+          <div
+            className="omrs-padding-top-4 omrs-padding-bottom-4"
+            style={{
+              borderBottom: "1px solid var(--omrs-color-bg-low-contrast)",
+              display: "flex",
+              justifyContent: "flex-start",
+              flexDirection: "row"
+            }}
+          >
+            <div style={{}}>
+              <button
+                className="omrs-btn omrs-text-action"
+                onClick={() => startVisit(null)}
+              >
+                Start {visitToStart.visitDisplay}
+              </button>
+            </div>
             <div
-              className="omrs-padding-top-4 omrs-padding-bottom-4"
-              style={{
-                borderBottom: "1px solid var(--omrs-color-bg-low-contrast)",
-                display: "flex",
-                justifyContent: "flex-start",
-                flexDirection: "row"
-              }}
+              className="omrs-margin-right-4 omrs-padding-top-4"
+              style={{ marginLeft: "auto" }}
             >
-              <div style={{}}>
-                <button
-                  className="omrs-btn omrs-text-action"
-                  onClick={() => startVisit(null)}
-                >
-                  Start {visitToStart.visitDisplay}
-                </button>
-              </div>
-              <div
-                className="omrs-margin-right-4 omrs-padding-top-4"
-                style={{ marginLeft: "auto" }}
+              <svg
+                className="omrs-icon"
+                fill="var(--omrs-color-ink-low-contrast)"
               >
-                <svg
-                  className="omrs-icon"
-                  fill="var(--omrs-color-ink-low-contrast)"
-                >
-                  <use xlinkHref="#omrs-icon-chevron-right"></use>
-                </svg>
-              </div>
+                <use xlinkHref="#omrs-icon-chevron-right"></use>
+              </svg>
             </div>
-          )}
+          </div>
+        )}
 
-          {startedVisit && <StartedVisitComponent visit={startedVisit} />}
-        </div>
+        {startedVisit && <StartedVisitComponent visit={startedVisit} />}
       </div>
-    </ModuleNameContext.Provider>
+    </div>
   );
 }
 

From 4e6e81092d04c3b5ea10249a65c2f068b2b78212 Mon Sep 17 00:00:00 2001
From: Nicky Kimaina <nkimaina@ampath.or.ke>
Date: Wed, 3 Jun 2020 21:28:14 +0300
Subject: [PATCH 2/3] responding to reviews

---
 src/config/programs.schema.ts      | 4 ++--
 src/config/use-widget-config.ts    | 6 +++---
 src/forms/forms-list.component.tsx | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/config/programs.schema.ts b/src/config/programs.schema.ts
index ebfb48c..9b3ac29 100644
--- a/src/config/programs.schema.ts
+++ b/src/config/programs.schema.ts
@@ -1,5 +1,5 @@
 import { validators } from "@openmrs/esm-module-config";
-import { ChartWidgetConfig } from "@openmrs/esm-patient-chart-widgets";
+import { ExternalPatientChartConfig } from "@openmrs/esm-patient-chart-widgets";
 
 export const programsConfigSchema = {
   programs: {
@@ -24,7 +24,7 @@ export type ProgramFormsConfig = {
   forms: Array<FormSelector>;
 };
 
-export interface ProgramConfig extends ChartWidgetConfig {
+export interface ProgramConfig extends ExternalPatientChartConfig {
   programs: ProgramFormsConfig[];
 }
 
diff --git a/src/config/use-widget-config.ts b/src/config/use-widget-config.ts
index 6171f01..5e76481 100644
--- a/src/config/use-widget-config.ts
+++ b/src/config/use-widget-config.ts
@@ -2,13 +2,13 @@ import React from "react";
 import { useConfig } from "@openmrs/esm-module-config";
 import {
   PatientChartConfig,
-  ChartWidgetConfig
+  ExternalPatientChartConfig
 } from "@openmrs/esm-patient-chart-widgets";
 
-export default function useWidgetConfig<T extends ChartWidgetConfig>(
+export default function useWidgetConfig<T extends ExternalPatientChartConfig>(
   key: string
 ): T {
   const config = (useConfig<PatientChartConfig>() as PatientChartConfig)
-    .widgetsConfigs[key] as T;
+    .externalPatientChartConfigs[key] as T;
   return config;
 }
diff --git a/src/forms/forms-list.component.tsx b/src/forms/forms-list.component.tsx
index 0393a95..fa13cc0 100644
--- a/src/forms/forms-list.component.tsx
+++ b/src/forms/forms-list.component.tsx
@@ -18,7 +18,7 @@ import useWidgetConfig from "../config/use-widget-config";
 
 export default function FormsList(props: FormsListProps) {
   const config = useWidgetConfig<ProgramConfig>("programs");
-  console.log("config", config);
+  // console.log("config", config);
   // console.log("props", props);
   const baseChartUrl = `${props.match.url.substr(
     0,

From 6f89b3c7541a99dcee7d73f1026230a9e0dfb55e Mon Sep 17 00:00:00 2001
From: Nicky Kimaina <nkimaina@ampath.or.ke>
Date: Tue, 9 Jun 2020 16:01:07 +0300
Subject: [PATCH 3/3] removing use of external config interface

---
 src/config/programs.schema.ts      |  3 +--
 src/config/use-widget-config.ts    | 14 ++++----------
 src/forms/forms-list.component.tsx |  7 +++++--
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/config/programs.schema.ts b/src/config/programs.schema.ts
index 9b3ac29..cb9b06f 100644
--- a/src/config/programs.schema.ts
+++ b/src/config/programs.schema.ts
@@ -1,5 +1,4 @@
 import { validators } from "@openmrs/esm-module-config";
-import { ExternalPatientChartConfig } from "@openmrs/esm-patient-chart-widgets";
 
 export const programsConfigSchema = {
   programs: {
@@ -24,7 +23,7 @@ export type ProgramFormsConfig = {
   forms: Array<FormSelector>;
 };
 
-export interface ProgramConfig extends ExternalPatientChartConfig {
+export interface ProgramConfig {
   programs: ProgramFormsConfig[];
 }
 
diff --git a/src/config/use-widget-config.ts b/src/config/use-widget-config.ts
index 5e76481..514684c 100644
--- a/src/config/use-widget-config.ts
+++ b/src/config/use-widget-config.ts
@@ -1,14 +1,8 @@
 import React from "react";
-import { useConfig } from "@openmrs/esm-module-config";
-import {
-  PatientChartConfig,
-  ExternalPatientChartConfig
-} from "@openmrs/esm-patient-chart-widgets";
+import { useConfig, validateConfig } from "@openmrs/esm-module-config";
 
-export default function useWidgetConfig<T extends ExternalPatientChartConfig>(
-  key: string
-): T {
-  const config = (useConfig<PatientChartConfig>() as PatientChartConfig)
-    .externalPatientChartConfigs[key] as T;
+export default function useWidgetConfig<T>(key: string, schema: any): T {
+  const config = useConfig()[key] as T;
+  validateConfig(schema, config);
   return config;
 }
diff --git a/src/forms/forms-list.component.tsx b/src/forms/forms-list.component.tsx
index fa13cc0..f5524ef 100644
--- a/src/forms/forms-list.component.tsx
+++ b/src/forms/forms-list.component.tsx
@@ -13,11 +13,14 @@ import { filterAvailableCompletedForms } from "./form-grouper";
 import Parcel from "single-spa-react/parcel";
 import { Link } from "react-router-dom";
 import { Subscription } from "rxjs";
-import { ProgramConfig } from "../config/programs.schema";
+import { ProgramConfig, programsConfigSchema } from "../config/programs.schema";
 import useWidgetConfig from "../config/use-widget-config";
 
 export default function FormsList(props: FormsListProps) {
-  const config = useWidgetConfig<ProgramConfig>("programs");
+  const config = useWidgetConfig<ProgramConfig>(
+    "externalPatientChartConfigs",
+    programsConfigSchema
+  );
   // console.log("config", config);
   // console.log("props", props);
   const baseChartUrl = `${props.match.url.substr(