Fixup

openmrs · Jan 5, 2021 · af07e6b · af07e6b
1 parent 9f723d7
commit af07e6b
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 153 deletions.
diff --git a/packages/esm-implementer-tools-app/__mocks__/openmrs-esm-react-utils.mock.tsx b/packages/esm-implementer-tools-app/__mocks__/openmrs-esm-react-utils.mock.tsx
@@ -1,6 +1,6 @@
-import { merge } from "lodash-es";
 import { Store } from "unistore";
 import React from "react";
+import { extensionStore } from "@openmrs/esm-extensions";
 
 export const ExtensionContext = React.createContext({
   extensionSlotName: "",
@@ -18,11 +18,12 @@ export const UserHasAccess = jest.fn().mockImplementation((props: any) => {
   return props.children;
 });
 
-export const createUseStore = (store: Store<any>) => (reducer, actions) => {
+export const createUseStore = (store: Store<any>) => (actions) => {
   const state = store.getState();
-  return merge(
-    actions,
-    typeof reducer === "string" ? { [reducer]: state[reducer] } : {},
-    ...(Array.isArray(reducer) ? reducer.map((r) => ({ [r]: state[r] })) : [{}])
-  );
+  return { ...state, ...actions };
+};
+
+export const useExtensionStore = (actions) => {
+  const state = extensionStore.getState();
+  return { ...state, ...actions };
 };
diff --git a/packages/esm-implementer-tools-app/package.json b/packages/esm-implementer-tools-app/package.json
@@ -13,7 +13,8 @@
     "test": "jest --config jest.config.js --passWithNoTests",
     "build": "webpack --mode=production",
     "typescript": "tsc",
-    "lint": "eslint src --ext ts,tsx"
+    "lint": "eslint src --ext ts,tsx",
+    "format": "prettier --write src/**"
   },
   "keywords": [
     "openmrs",

diff --git a/packages/esm-implementer-tools-app/src/backend-dependencies/openmrs-backend-dependencies.ts b/packages/esm-implementer-tools-app/src/backend-dependencies/openmrs-backend-dependencies.ts
@@ -1,6 +1,6 @@
 import { openmrsFetch } from "@openmrs/esm-api";
 import * as semver from "semver";
-import { difference } from "lodash-es";
+import difference from "lodash-es/difference";
 
 const installedBackendModules: Array<Record<string, string>> = [];
 const modulesWithMissingBackendModules: MissingBackendModules[] = [];

diff --git a/packages/esm-implementer-tools-app/src/configuration/configuration.component.tsx b/packages/esm-implementer-tools-app/src/configuration/configuration.component.tsx
@@ -24,10 +24,7 @@ const actions = {
 };
 
 export function Configuration({ setHasAlert }: ConfigurationProps) {
-  const { isUIEditorEnabled, toggleIsUIEditorEnabled } = useStore(
-    ["isUIEditorEnabled"],
-    actions
-  );
+  const { isUIEditorEnabled, toggleIsUIEditorEnabled } = useStore(actions);
   const [config, setConfig] = useState({});
   const [isDevConfigActive, setIsDevConfigActive] = useState(
     getAreDevDefaultsOn()
@@ -50,7 +47,6 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
   useEffect(updateConfig, []);
 
   return (
-<<<<<<< HEAD
     <>
       <div className={styles.tools}>
         <Grid style={{ margin: "0.25rem", padding: 0 }}>
@@ -70,11 +66,8 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
               <Toggle
                 id={"uiEditorSwitch"}
                 labelText="UI Editor"
-                toggled={isUIEditorActive}
-                onToggle={() => {
-                  setIsUIEditorActive(!isUIEditorActive);
-                  setIsUIEditorEnabled(!isUIEditorActive);
-                }}
+                toggled={isUIEditorEnabled}
+                onToggle={toggleIsUIEditorEnabled}
               />
             </Column>
             <Column sm={1} md={2} className={styles.actionButton}>
@@ -117,53 +110,5 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
         </div>
       </div>
     </>
-=======
-<>
-<div className={styles.tools}>
-            <Toggle
-              id="devConfigSwitch"
-              labelText="Dev Config"
-              onToggle={() => {
-                setAreDevDefaultsOn(!isDevConfigActive);
-                setIsDevConfigActive(!isDevConfigActive);
-              }}
-              toggled={isDevConfigActive}
-            />
-            <Toggle
-              id={"uiEditorSwitch"}
-              labelText="UI Editor"
-              toggled={isUIEditorEnabled}
-              onToggle={toggleIsUIEditorEnabled}
-            />
-            <Button
-              small
-              kind="secondary"
-              onClick={() => {
-                clearTemporaryConfig();
-                updateConfig();
-              }}
-            >
-              Clear Temporary Config
-            </Button>
-            <Button small kind="secondary" renderIcon={Download16}>
-              <a
-                className={styles.downloadLink}
-                download="temporary_config.json"
-                href={window.URL.createObjectURL(tempConfigObjUrl)}
-              >
-                Download Temporary Config
-              </a>
-            </Button>
-            </div>
-      <div className={styles.mainContent}>
-        <div className={styles.configTreePane}>
-          <ConfigTree config={config} />
-        </div>
-        <div className={styles.descriptionPane}>
-          <Description />
-        </div>
-      </div>
-    </>
->>>>>>> c4338a5... Make the UI Editor work via portals
   );
 }
diff --git a/packages/esm-implementer-tools-app/src/configuration/configuration.test.tsx b/packages/esm-implementer-tools-app/src/configuration/configuration.test.tsx
@@ -13,8 +13,7 @@ import {
   setTemporaryConfigValue,
   Type,
 } from "@openmrs/esm-config";
-import { Provider } from "unistore/react";
-import Configuration from "./configuration.component";
+import { Configuration } from "./configuration.component";
 import { getStore } from "../store";
 import {
   performConceptSearch,
@@ -109,11 +108,7 @@ describe(`<Configuration />`, () => {
   });
 
   function renderConfiguration() {
-    render(
-      <Provider store={getStore()}>
-        <Configuration setHasAlert={() => {}} />
-      </Provider>
-    );
+    render(<Configuration setHasAlert={() => {}} />);
   }
 
   it(`renders without dying`, async () => {

diff --git a/packages/esm-implementer-tools-app/src/configuration/description.component.tsx b/packages/esm-implementer-tools-app/src/configuration/description.component.tsx
@@ -3,34 +3,32 @@ import { useStore } from "../store";
 import styles from "./description.styles.css";
 
 export function Description() {
-  const { activeItemDescription } = useStore("activeItemDescription");
+  const { activeItemDescription } = useStore();
   return (
     <div>
-    {activeItemDescription ? (
-      <>
-        <p className={styles.path}>
-          {activeItemDescription.path.slice(1).join(" → ")}
-        </p>
-        <p className={styles.description}>
-          {activeItemDescription.description}
-        </p>
-        <p className={styles.source}>
-          {activeItemDescription.source === "default" ? (
-            <>The current value is the default.</>
-          ) : activeItemDescription.source ? (
-            <>
-              The current value comes from {activeItemDescription.source}.
-            </>
-          ) : null}
-        </p>
-        {activeItemDescription.value ? <p>Value:</p> : null}
-        <p className={styles.value}>
-          {Array.isArray(activeItemDescription.value)
-            ? activeItemDescription.value.map((v) => <p key={v}>{v}</p>)
-            : activeItemDescription.value}
-        </p>
-      </>
-    ) : null}
-  </div>
+      {activeItemDescription ? (
+        <>
+          <p className={styles.path}>
+            {activeItemDescription.path.slice(1).join(" → ")}
+          </p>
+          <p className={styles.description}>
+            {activeItemDescription.description}
+          </p>
+          <p className={styles.source}>
+            {activeItemDescription.source === "default" ? (
+              <>The current value is the default.</>
+            ) : activeItemDescription.source ? (
+              <>The current value comes from {activeItemDescription.source}.</>
+            ) : null}
+          </p>
+          {activeItemDescription.value ? <p>Value:</p> : null}
+          <p className={styles.value}>
+            {Array.isArray(activeItemDescription.value)
+              ? activeItemDescription.value.map((v) => <p key={v}>{v}</p>)
+              : activeItemDescription.value}
+          </p>
+        </>
+      ) : null}
+    </div>
   );
 }
diff --git a/packages/esm-implementer-tools-app/src/configuration/extension-slots-config-tree.tsx b/packages/esm-implementer-tools-app/src/configuration/extension-slots-config-tree.tsx
@@ -1,26 +1,23 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { ExtensionSlotConfig } from "@openmrs/esm-config";
-import {
-  ExtensionSlotInfo,
-  extensionStore,
-  ExtensionStore,
-} from "@openmrs/esm-extensions";
+import { extensionStore } from "@openmrs/esm-extensions";
 import { useExtensionStore } from "@openmrs/esm-react-utils";
-import { Provider, connect } from "unistore/react";
 import EditableValue from "./editable-value.component";
 import { getStore } from "../store";
-import { isEqual } from "lodash-es";
+import isEqual from "lodash-es/isEqual";
 import { ExtensionConfigureTree } from "./extension-configure-tree";
 import { Subtree } from "./layout/subtree.component";
 
 interface ExtensionSlotsConfigTreeProps {
   config: { [key: string]: any };
   moduleName: string;
-  slots: Record<string, ExtensionSlotInfo>;
 }
 
-export function ExtensionSlotsConfigTree({ config, moduleName }: ExtensionSlotsConfigTreeProps) { 
-  const slots = useExtensionStore("slots");
+export function ExtensionSlotsConfigTree({
+  config,
+  moduleName,
+}: ExtensionSlotsConfigTreeProps) {
+  const { slots } = useExtensionStore();
 
   const extensionSlotNames = useMemo(
     () =>
@@ -38,7 +35,7 @@ export function ExtensionSlotsConfigTree({ config, moduleName }: ExtensionSlotsC
       ))}
     </Subtree>
   ) : null;
-};
+}
 
 interface ExtensionSlotConfigProps {
   config: ExtensionSlotConfig;

diff --git a/packages/esm-implementer-tools-app/src/configuration/value-editors/object-editor.tsx b/packages/esm-implementer-tools-app/src/configuration/value-editors/object-editor.tsx
@@ -1,17 +1,15 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import {
-  Button,
   StructuredListBody,
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
   Tile,
 } from "carbon-components-react";
-import { Add16, TrashCan16 } from "@carbon/icons-react";
 import { ValueEditorField } from "./value-editor-field";
 import { ConfigValueDescriptor } from "../editable-value.component";
 import { Type } from "@openmrs/esm-config";
-import { cloneDeep } from "lodash-es";
+import cloneDeep from "lodash-es/cloneDeep";
 import styles from "./object-editor.styles.css";
 
 interface ObjectEditorProps {

diff --git a/packages/esm-implementer-tools-app/src/implementer-tools.component.tsx b/packages/esm-implementer-tools-app/src/implementer-tools.component.tsx
@@ -35,10 +35,7 @@ function PopupHandler() {
     modulesWithWrongBackendModulesVersion,
     setModulesWithWrongBackendModulesVersion,
   ] = useState<Array<MissingBackendModules>>([]);
-  const { isOpen, isUIEditorEnabled } = useStore([
-    "isOpen",
-    "isUIEditorEnabled",
-  ]);
+  const { isOpen, isUIEditorEnabled } = useStore();
 
   function togglePopup() {
     getStore().setState({ isOpen: !isOpen });

diff --git a/packages/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx b/packages/esm-implementer-tools-app/src/ui-editor/ui-editor.tsx
@@ -5,7 +5,7 @@ import { ExtensionOverlay } from "./extension-overlay.component";
 import { useExtensionStore } from "@openmrs/esm-react-utils";
 
 export function UiEditor() {
-  const { slots, extensions } = useExtensionStore(["slots", "extensions"]);
+  const { slots, extensions } = useExtensionStore();
 
   return (
     <>

diff --git a/packages/esm-react-utils/src/createUseStore.ts b/packages/esm-react-utils/src/createUseStore.ts
@@ -1,27 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 import { Store, BoundAction } from "unistore";
 
-export type Reducer = Function | Array<string> | Object;
 export type Actions = Function | { [key: string]: Function };
-
-function runReducer<T>(state: T, reducer: Reducer) {
-  if (typeof reducer === "function") {
-    return reducer(state);
-  }
-  const out = {};
-  if (typeof reducer === "string") {
-    out[reducer] = state[reducer];
-  } else if (Array.isArray(reducer)) {
-    for (let i of reducer) {
-      out[i] = state[i];
-    }
-  } else if (reducer) {
-    for (let i in reducer) {
-      out[i] = state[reducer[i]];
-    }
-  }
-  return out;
-}
+export type BoundActions = { [key: string]: BoundAction };
 
 function bindActions<T>(store: Store<T>, actions: Actions) {
   if (typeof actions == "function") {
@@ -35,22 +16,16 @@ function bindActions<T>(store: Store<T>, actions: Actions) {
 }
 
 export function createUseStore<T>(store: Store<T>) {
-  return function useStore(
-    reducer: Reducer,
-    actions?: Actions
-  ): T & { [key: string]: BoundAction } {
-    const [state, set] = useState(runReducer(store.getState(), reducer));
-    useEffect(
-      () => store.subscribe((state) => set(runReducer(state, reducer))),
-      []
-    );
+  return function useStore(actions?: Actions): T & BoundActions {
+    const [state, set] = useState(store.getState());
+    useEffect(() => store.subscribe((state) => set(state)), []);
     let boundActions = {};
     if (actions) {
       boundActions = useMemo(() => bindActions(store, actions), [
         store,
         actions,
       ]);
     }
-    return { ...state, ...boundActions };
+    return { ...state, ...(boundActions as BoundActions) };
   };
 }
diff --git a/packages/esm-react-utils/tsconfig.json b/packages/esm-react-utils/tsconfig.json
@@ -16,8 +16,7 @@
       "es2015",
       "es2015.promise",
       "es2016.array.include",
-      "es2018",
-      "esnext"
+      "es2018"
     ]
   },
   "include": ["src/**/*"]