@openmrs/esm-react-utils 5.3.3-pre.1237 → 5.3.3-pre.1247

package/src/useSession.test.tsx

@@ -1,16 +1,16 @@
-import React, { Suspense } from "react";
-import { act, render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import { useSession, __cleanup } from "./useSession";
-import { createGlobalStore } from "@openmrs/esm-state";
-import { SessionStore } from "@openmrs/esm-api";
+import React, { Suspense } from 'react';
+import { act, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useSession, __cleanup } from './useSession';
+import { createGlobalStore } from '@openmrs/esm-state';
+import { SessionStore } from '@openmrs/esm-api';
 
-const mockSessionStore = createGlobalStore<SessionStore>("mockSessionStore", {
+const mockSessionStore = createGlobalStore<SessionStore>('mockSessionStore', {
   loaded: false,
   session: null,
 });
 
-jest.mock("@openmrs/esm-api", () => ({
+jest.mock('@openmrs/esm-api', () => ({
   getSessionStore: jest.fn(() => mockSessionStore),
 }));
 
@@ -19,101 +19,93 @@ function Component() {
   return <div>{JSON.stringify(session)}</div>;
 }
 
-describe("useSession", () => {
+describe('useSession', () => {
   beforeEach(() => {
     __cleanup();
     mockSessionStore.setState({ loaded: false, session: null });
   });
 
-  it("should suspend and then resolve to the session", async () => {
+  it('should suspend and then resolve to the session', async () => {
     render(
-      <Suspense fallback={"suspended"}>
+      <Suspense fallback={'suspended'}>
         <Component />
-      </Suspense>
+      </Suspense>,
     );
 
-    expect(screen.getByText("suspended")).toBeInTheDocument();
+    expect(screen.getByText('suspended')).toBeInTheDocument();
     act(() => {
       mockSessionStore.setState({
         loaded: true,
-        session: { authenticated: false, sessionId: "test1" },
+        session: { authenticated: false, sessionId: 'test1' },
       });
     });
     await screen.findByText(/"authenticated":false/);
   });
 
-  it("should resolve immediately when the session is present", async () => {
+  it('should resolve immediately when the session is present', async () => {
     mockSessionStore.setState({
       loaded: true,
-      session: { authenticated: false, sessionId: "test2" },
+      session: { authenticated: false, sessionId: 'test2' },
     });
     render(
-      <Suspense fallback={"suspended"}>
+      <Suspense fallback={'suspended'}>
         <Component />
-      </Suspense>
+      </Suspense>,
     );
     expect(screen.getByText(/"authenticated":false/)).toBeInTheDocument();
   });
 
-  it("should not return stale data when re-created", async () => {
+  it('should not return stale data when re-created', async () => {
     const { unmount } = render(
-      <Suspense fallback={"suspended"}>
+      <Suspense fallback={'suspended'}>
         <Component />
-      </Suspense>
+      </Suspense>,
     );
-    expect(screen.getByText("suspended")).toBeInTheDocument();
+    expect(screen.getByText('suspended')).toBeInTheDocument();
     act(() => {
       mockSessionStore.setState({
         loaded: true,
-        session: { authenticated: true, sessionId: "test3" },
+        session: { authenticated: true, sessionId: 'test3' },
       });
     });
     await screen.findByText(/"authenticated":true/);
     unmount();
     mockSessionStore.setState({
       loaded: true,
-      session: { authenticated: false, sessionId: "test3" },
+      session: { authenticated: false, sessionId: 'test3' },
     });
     render(
-      <Suspense fallback={"suspended"}>
+      <Suspense fallback={'suspended'}>
         <Component />
-      </Suspense>
+      </Suspense>,
     );
     expect(screen.getByText(/"authenticated":false/)).toBeInTheDocument();
   });
 
-  it("supports multiple instances of useSession that all receive updates", async () => {
+  it('supports multiple instances of useSession that all receive updates', async () => {
     mockSessionStore.setState({
       loaded: true,
-      session: { authenticated: false, sessionId: "test2" },
+      session: { authenticated: false, sessionId: 'test2' },
     });
     render(
-      <Suspense fallback={"suspended"}>
+      <Suspense fallback={'suspended'}>
         <div data-testid="component1">
           <Component />
         </div>
         <div data-testid="component2">
           <Component />
         </div>
-      </Suspense>
-    );
-    expect(screen.getByTestId("component1")).toHaveTextContent(
-      /"authenticated":false/
-    );
-    expect(screen.getByTestId("component2")).toHaveTextContent(
-      /"authenticated":false/
+      </Suspense>,
     );
+    expect(screen.getByTestId('component1')).toHaveTextContent(/"authenticated":false/);
+    expect(screen.getByTestId('component2')).toHaveTextContent(/"authenticated":false/);
     act(() => {
       mockSessionStore.setState({
         loaded: true,
-        session: { authenticated: true, sessionId: "test3" },
+        session: { authenticated: true, sessionId: 'test3' },
       });
     });
-    expect(screen.getByTestId("component1")).toHaveTextContent(
-      /"authenticated":true/
-    );
-    expect(screen.getByTestId("component2")).toHaveTextContent(
-      /"authenticated":true/
-    );
+    expect(screen.getByTestId('component1')).toHaveTextContent(/"authenticated":true/);
+    expect(screen.getByTestId('component2')).toHaveTextContent(/"authenticated":true/);
   });
 });

package/src/useSession.ts

@@ -1,6 +1,6 @@
 /** @module @category API */
-import { getSessionStore, Session } from "@openmrs/esm-api";
-import { useState, useEffect, useRef } from "react";
+import { getSessionStore, Session } from '@openmrs/esm-api';
+import { useState, useEffect, useRef } from 'react';
 
 let promise: undefined | Promise<Session>;
 
@@ -85,14 +85,12 @@ export function useSession(): Session {
   // get here.
   useEffect(() => {
     if (!unsubscribe.current) {
-      unsubscribe.current = getSessionStore().subscribe(
-        ({ loaded, session: newSession }) => {
-          if (loaded) {
-            session = newSession;
-            setStateSession(newSession);
-          }
+      unsubscribe.current = getSessionStore().subscribe(({ loaded, session: newSession }) => {
+        if (loaded) {
+          session = newSession;
+          setStateSession(newSession);
         }
-      );
+      });
     }
     return () => {
       unsubscribe.current && unsubscribe.current();
@@ -103,12 +101,10 @@ export function useSession(): Session {
   const result = stateSession || session;
   if (!result) {
     if (promise) {
-      console.warn(
-        "useSession is in an unexpected state. Attempting to recover."
-      );
+      console.warn('useSession is in an unexpected state. Attempting to recover.');
       throw promise;
     } else {
-      throw Error("useSession is in an invalid state.");
+      throw Error('useSession is in an invalid state.');
     }
   }
   return result;

package/src/useStore.test.ts

@@ -1,10 +1,10 @@
-import { act, renderHook } from "@testing-library/react";
-import { createGlobalStore } from "@openmrs/esm-state";
-import { useStore, useStoreWithActions } from "@openmrs/esm-react-utils";
+import { act, renderHook } from '@testing-library/react';
+import { createGlobalStore } from '@openmrs/esm-state';
+import { useStore, useStoreWithActions } from '@openmrs/esm-react-utils';
 
-describe("useStore", () => {
-  it("updates state, selects, and correctly binds actions", () => {
-    const store = createGlobalStore("scoreboard", {
+describe('useStore', () => {
+  it('updates state, selects, and correctly binds actions', () => {
+    const store = createGlobalStore('scoreboard', {
       good: { count: 0 },
       evil: { count: 0 },
     });
@@ -14,21 +14,19 @@ describe("useStore", () => {
       }),
     };
 
-    const { result } = renderHook(() =>
-      useStore(store, (state) => state.good, actions)
-    );
+    const { result } = renderHook(() => useStore(store, (state) => state.good, actions));
 
     expect(result.current.count).toBe(0);
     act(() => {
-      result.current.tally("good", 2);
+      result.current.tally('good', 2);
     });
     expect(result.current.count).toBe(2);
   });
 });
 
-describe("useStoreWithActions", () => {
-  it("should correctly bind actions", () => {
-    const store = createGlobalStore("counter", { count: 0 });
+describe('useStoreWithActions', () => {
+  it('should correctly bind actions', () => {
+    const store = createGlobalStore('counter', { count: 0 });
     const actions = {
       increment: (state) => ({ count: state.count + 1 }),
       incrementBy: (state, number) => ({ count: state.count + number }),

package/src/useStore.ts

@@ -1,7 +1,7 @@
 /** @module @category Store */
-import { subscribeTo } from "@openmrs/esm-state";
-import { useEffect, useMemo, useState } from "react";
-import type { StoreApi } from "zustand";
+import { subscribeTo } from '@openmrs/esm-state';
+import { useEffect, useMemo, useState } from 'react';
+import type { StoreApi } from 'zustand';
 
 export type ActionFunction<T> = (state: T, ...args: any[]) => Partial<T>;
 export type Actions<T> =
@@ -10,7 +10,7 @@ export type Actions<T> =
 export type BoundActions = { [key: string]: (...args: any[]) => void };
 
 function bindActions<T>(store: StoreApi<T>, actions: Actions<T>): BoundActions {
-  if (typeof actions == "function") {
+  if (typeof actions == 'function') {
     actions = actions(store);
   }
 
@@ -37,28 +37,13 @@ const defaultSelectFunction = (x) => x;
 
 function useStore<T, U>(store: StoreApi<T>): T;
 function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U): U;
-function useStore<T, U>(
-  store: StoreApi<T>,
-  select: undefined,
-  actions: Actions<T>
-): T & BoundActions;
-function useStore<T, U>(
-  store: StoreApi<T>,
-  select: (state: T) => U,
-  actions: Actions<T>
-): U & BoundActions;
-function useStore<T, U>(
-  store: StoreApi<T>,
-  select: (state: T) => U = defaultSelectFunction,
-  actions?: Actions<T>
-) {
+function useStore<T, U>(store: StoreApi<T>, select: undefined, actions: Actions<T>): T & BoundActions;
+function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U, actions: Actions<T>): U & BoundActions;
+function useStore<T, U>(store: StoreApi<T>, select: (state: T) => U = defaultSelectFunction, actions?: Actions<T>) {
   const [state, setState] = useState<U>(() => select(store.getState()));
   useEffect(() => subscribeTo(store, select, setState), [store, select]);
 
-  let boundActions: BoundActions = useMemo(
-    () => (actions ? bindActions(store, actions) : {}),
-    [store, actions]
-  );
+  let boundActions: BoundActions = useMemo(() => (actions ? bindActions(store, actions) : {}), [store, actions]);
 
   return { ...state, ...boundActions };
 }
@@ -69,10 +54,7 @@ function useStore<T, U>(
  * @param actions
  * @returns
  */
-function useStoreWithActions<T>(
-  store: StoreApi<T>,
-  actions: Actions<T>
-): T & BoundActions {
+function useStoreWithActions<T>(store: StoreApi<T>, actions: Actions<T>): T & BoundActions {
   return useStore(store, defaultSelectFunction, actions);
 }
 
@@ -87,10 +69,7 @@ function createUseStore<T>(store: StoreApi<T>) {
   function useStore(actions?: Actions<T>) {
     const [state, set] = useState(store.getState());
     useEffect(() => store.subscribe((state) => set(state)), []);
-    let boundActions: BoundActions = useMemo(
-      () => (actions ? bindActions(store, actions) : {}),
-      [actions]
-    );
+    let boundActions: BoundActions = useMemo(() => (actions ? bindActions(store, actions) : {}), [actions]);
 
     return { ...state, ...boundActions };
   }

package/src/useVisit.ts

@@ -1,15 +1,10 @@
 /** @module @category API */
-import {
-  defaultVisitCustomRepresentation,
-  getVisitStore,
-  openmrsFetch,
-  Visit,
-} from "@openmrs/esm-api";
-import useSWR from "swr";
-import dayjs from "dayjs";
-import isToday from "dayjs/plugin/isToday";
-import { useMemo } from "react";
-import { useStore } from "./useStore";
+import { defaultVisitCustomRepresentation, getVisitStore, openmrsFetch, Visit } from '@openmrs/esm-api';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import { useMemo } from 'react';
+import { useStore } from './useStore';
 
 dayjs.extend(isToday);
 
@@ -43,14 +38,9 @@ export interface VisitReturnType {
  * @param patientUuid Unique patient identifier `string`
  */
 export function useVisit(patientUuid: string): VisitReturnType {
-  const { patientUuid: visitStorePatientUuid, manuallySetVisitUuid } = useStore(
-    getVisitStore()
-  );
+  const { patientUuid: visitStorePatientUuid, manuallySetVisitUuid } = useStore(getVisitStore());
   // Ignore the visit store data if it is not for this patient
-  const retrospectiveVisitUuid =
-    patientUuid && visitStorePatientUuid == patientUuid
-      ? manuallySetVisitUuid
-      : null;
+  const retrospectiveVisitUuid = patientUuid && visitStorePatientUuid == patientUuid ? manuallySetVisitUuid : null;
   const activeVisitUrlSuffix = `?patient=${patientUuid}&v=${defaultVisitCustomRepresentation}&includeInactive=false`;
   const retrospectiveVisitUrlSuffix = `/${retrospectiveVisitUuid}`;
 
@@ -61,10 +51,7 @@ export function useVisit(patientUuid: string): VisitReturnType {
     isValidating: activeIsValidating,
   } = useSWR<{
     data: Visit | { results: Array<Visit> };
-  }>(
-    patientUuid ? `/ws/rest/v1/visit${activeVisitUrlSuffix}` : null,
-    openmrsFetch
-  );
+  }>(patientUuid ? `/ws/rest/v1/visit${activeVisitUrlSuffix}` : null, openmrsFetch);
 
   const {
     data: retroData,
@@ -73,23 +60,16 @@ export function useVisit(patientUuid: string): VisitReturnType {
     isValidating: retroIsValidating,
   } = useSWR<{
     data: Visit | { results: Array<Visit> };
-  }>(
-    patientUuid && retrospectiveVisitUuid
-      ? `/ws/rest/v1/visit${retrospectiveVisitUrlSuffix}`
-      : null,
-    openmrsFetch
-  );
+  }>(patientUuid && retrospectiveVisitUuid ? `/ws/rest/v1/visit${retrospectiveVisitUrlSuffix}` : null, openmrsFetch);
 
   const activeVisit = useMemo(
-    () =>
-      activeData?.data.results.find((visit) => visit.stopDatetime === null) ??
-      null,
-    [activeData]
+    () => activeData?.data.results.find((visit) => visit.stopDatetime === null) ?? null,
+    [activeData],
   );
 
   const currentVisit = useMemo(
     () => (retrospectiveVisitUuid ? retroData?.data : activeVisit ?? null),
-    [retroData, activeVisit, retrospectiveVisitUuid]
+    [retroData, activeVisit, retrospectiveVisitUuid],
   );
 
   return {
@@ -102,9 +82,6 @@ export function useVisit(patientUuid: string): VisitReturnType {
     activeVisit,
     currentVisit,
     currentVisitIsRetrospective: Boolean(retrospectiveVisitUuid),
-    isLoading: Boolean(
-      (!activeData || (retrospectiveVisitUuid && !retroData)) &&
-        (!activeError || !retroError)
-    ),
+    isLoading: Boolean((!activeData || (retrospectiveVisitUuid && !retroData)) && (!activeError || !retroError)),
   };
 }

package/src/useVisitTypes.ts

@@ -1,6 +1,6 @@
 /** @module @category API */
-import { getVisitTypes, VisitType } from "@openmrs/esm-api";
-import { useEffect, useState } from "react";
+import { getVisitTypes, VisitType } from '@openmrs/esm-api';
+import { useEffect, useState } from 'react';
 
 export function useVisitTypes() {
   const [visitTypes, setVisitTypes] = useState<Array<VisitType>>([]);
@@ -10,7 +10,7 @@ export function useVisitTypes() {
       (visitTypes) => {
         setVisitTypes(visitTypes);
       },
-      (error) => console.error(error)
+      (error) => console.error(error),
     );
 
     return () => visitTypesSub.unsubscribe();

package/webpack.config.js

@@ -1,42 +1,42 @@
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const { resolve } = require("path");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const { resolve } = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
-const { peerDependencies } = require("./package.json");
+const { peerDependencies } = require('./package.json');
 
 module.exports = (env) => ({
-  entry: [resolve(__dirname, "src/index.ts")],
+  entry: [resolve(__dirname, 'src/index.ts')],
   output: {
-    filename: "openmrs-esm-react-utils.js",
-    path: resolve(__dirname, "dist"),
-    library: { type: "system" },
+    filename: 'openmrs-esm-react-utils.js',
+    path: resolve(__dirname, 'dist'),
+    library: { type: 'system' },
   },
-  devtool: "source-map",
+  devtool: 'source-map',
   module: {
     rules: [
       {
         test: /\.m?(js|ts|tsx)$/,
         exclude: /node_modules/,
-        use: "swc-loader",
+        use: 'swc-loader',
       },
     ],
   },
   resolve: {
-    extensions: [".ts", ".js", ".tsx", ".jsx"],
+    extensions: ['.ts', '.js', '.tsx', '.jsx'],
   },
   plugins: [
     new CleanWebpackPlugin(),
     new ForkTsCheckerWebpackPlugin(),
     new BundleAnalyzerPlugin({
-      analyzerMode: env && env.analyze ? "static" : "disabled",
+      analyzerMode: env && env.analyze ? 'static' : 'disabled',
     }),
   ],
   externals: Object.keys(peerDependencies || {}),
   devServer: {
     disableHostCheck: true,
     headers: {
-      "Access-Control-Allow-Origin": "*",
+      'Access-Control-Allow-Origin': '*',
     },
   },
 });