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 index cd11e64e9..fc72ef4f9 100644 --- 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) => (reducer, actions) => { +export const createUseStore = (store: Store) => (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 index 0c0c1e6e0..e04f1ac20 100644 --- 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 index 0f3f757a4..097b3ba57 100644 --- 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> = []; 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 index 5d2133ca9..4dc6d3e2f 100644 --- 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 <>
@@ -70,11 +66,8 @@ export function Configuration({ setHasAlert }: ConfigurationProps) { { - setIsUIEditorActive(!isUIEditorActive); - setIsUIEditorEnabled(!isUIEditorActive); - }} + toggled={isUIEditorEnabled} + onToggle={toggleIsUIEditorEnabled} /> @@ -117,53 +110,5 @@ export function Configuration({ setHasAlert }: ConfigurationProps) {
-======= -<> -
- { - setAreDevDefaultsOn(!isDevConfigActive); - setIsDevConfigActive(!isDevConfigActive); - }} - toggled={isDevConfigActive} - /> - - - -
-
-
- -
-
- -
-
- ->>>>>>> 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 index 08dc3fb2f..0b698568e 100644 --- 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(``, () => { }); function renderConfiguration() { - render( - - {}} /> - - ); + render( {}} />); } 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 index 0c6efeebd..684066219 100644 --- 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 (
- {activeItemDescription ? ( - <> -

- {activeItemDescription.path.slice(1).join(" → ")} -

-

- {activeItemDescription.description} -

-

- {activeItemDescription.source === "default" ? ( - <>The current value is the default. - ) : activeItemDescription.source ? ( - <> - The current value comes from {activeItemDescription.source}. - - ) : null} -

- {activeItemDescription.value ?

Value:

: null} -

- {Array.isArray(activeItemDescription.value) - ? activeItemDescription.value.map((v) =>

{v}

) - : activeItemDescription.value} -

- - ) : null} -
+ {activeItemDescription ? ( + <> +

+ {activeItemDescription.path.slice(1).join(" → ")} +

+

+ {activeItemDescription.description} +

+

+ {activeItemDescription.source === "default" ? ( + <>The current value is the default. + ) : activeItemDescription.source ? ( + <>The current value comes from {activeItemDescription.source}. + ) : null} +

+ {activeItemDescription.value ?

Value:

: null} +

+ {Array.isArray(activeItemDescription.value) + ? activeItemDescription.value.map((v) =>

{v}

) + : activeItemDescription.value} +

+ + ) : null} + ); } 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 index 859929c28..09bedb062 100644 --- 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; } -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 ))} ) : 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 index 94e4a6d3d..95842a332 100644 --- 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 index 9c9f3122d..9c531fc5f 100644 --- 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>([]); - 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 index 93dd43fff..736556eda 100644 --- 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 index 019479b68..499f00520 100644 --- 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 | Object; export type Actions = Function | { [key: string]: Function }; - -function runReducer(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(store: Store, actions: Actions) { if (typeof actions == "function") { @@ -35,15 +16,9 @@ function bindActions(store: Store, actions: Actions) { } export function createUseStore(store: Store) { - 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), [ @@ -51,6 +26,6 @@ export function createUseStore(store: 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 index 0404f8a32..274494873 100644 --- 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/**/*"]