(feat) Use SWR as a shared library (openmrs#774)

mccarthyaaron · Sep 27, 2023 · 45d267e · 45d267e
1 parent 9546c69
commit 45d267e
Show file tree

Hide file tree

Showing 18 changed files with 169 additions and 78 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -32,7 +32,7 @@ jobs:
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install dependencies
-        run: yarn setup
+        run: yarn install --immutable
 
       - name: Install Playwright Browsers
         run: yarn playwright install chromium --with-deps

diff --git a/packages/apps/esm-implementer-tools-app/package.json b/packages/apps/esm-implementer-tools-app/package.json
@@ -46,7 +46,8 @@
     "react": "18.x",
     "react-dom": "18.x",
     "react-i18next": "11.x",
-    "rxjs": "6.x"
+    "rxjs": "6.x",
+    "swr": "2.x"
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^5.1.0",
@@ -57,7 +58,7 @@
     "react-dom": "^18.1.0",
     "react-i18next": "^11.16.9",
     "rxjs": "^6.5.3",
-    "swr": "^2.0.1",
+    "swr": "^2.2.2",
     "webpack": "^5.88.0"
   }
 }
diff --git a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { ChevronUp, ChevronDown } from "@carbon/react/icons";
 import { UserHasAccess, useStore } from "@openmrs/esm-framework";
 import { implementerToolsStore, togglePopup } from "./store";

diff --git a/packages/apps/esm-login-app/package.json b/packages/apps/esm-login-app/package.json
@@ -47,7 +47,8 @@
     "react-dom": "18.x",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",
-    "rxjs": "6.x"
+    "rxjs": "6.x",
+    "swr": "2.x"
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^5.1.0",
@@ -58,7 +59,7 @@
     "react-i18next": "^11.16.9",
     "react-router-dom": "^6.3.0",
     "rxjs": "^6.5.3",
-    "swr": "^2.0.1",
+    "swr": "^2.2.2",
     "webpack": "^5.88.0"
   }
 }
diff --git a/packages/apps/esm-login-app/src/login.resource.ts b/packages/apps/esm-login-app/src/login.resource.ts
@@ -47,12 +47,20 @@ export function useLoginLocations(
   searchQuery: string = ""
 ): LoginLocationData {
   const { t } = useTranslation();
-  function constructUrl(page, prevPageData: FetchResponse<LocationResponse>) {
-    if (
-      prevPageData &&
-      !prevPageData?.data?.link?.some((link) => link.relation === "next")
-    ) {
-      return null;
+  function constructUrl(
+    page: number,
+    prevPageData: FetchResponse<LocationResponse>
+  ) {
+    if (prevPageData) {
+      const nextLink = prevPageData.data?.link?.find(
+        (link) => link.relation === "next"
+      );
+
+      if (!nextLink) {
+        return null;
+      }
+
+      return nextLink.url;
     }
 
     let url = `${fhirBaseUrl}/Location?`;

diff --git a/packages/apps/esm-offline-tools-app/package.json b/packages/apps/esm-offline-tools-app/package.json
@@ -40,15 +40,16 @@
   "dependencies": {
     "@carbon/react": "^1.37.0",
     "lodash-es": "^4.17.21",
-    "swr": "^2.0.1"
+    "swr": "^2.2.2"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "*",
     "react": "18.x",
     "react-dom": "18.x",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",
-    "rxjs": "6.x"
+    "rxjs": "6.x",
+    "swr": "2.x"
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^5.1.0",

diff --git a/packages/apps/esm-offline-tools-app/src/hooks/offline-patient-data-hooks.ts b/packages/apps/esm-offline-tools-app/src/hooks/offline-patient-data-hooks.ts
@@ -121,8 +121,11 @@ function useMergedSwr<T>(
     const areAllLoaded = swrResponses.every((res) => !!res.data);
     const data = areAllLoaded ? merge() : null;
     const error = swrResponses.find((res) => res.error);
-    const mutate = () =>
-      Promise.all(swrResponses.map((res) => res.mutate())).then(merge);
+    const mutate: () => Promise<undefined> = () =>
+      Promise.all(swrResponses.map((res) => res.mutate())).then(() => {
+        merge();
+        return undefined;
+      });
     const isValidating = swrResponses.some((res) => res.isValidating);
     const isLoading = swrResponses.some((res) => res.isLoading);
 
@@ -133,10 +136,5 @@ function useMergedSwr<T>(
       isValidating,
       isLoading,
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    merge,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ...swrResponses.flatMap((res) => [res.data, res.error, res.isValidating]),
-  ]);
+  }, [merge, swrResponses]);
 }
diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx
@@ -190,7 +190,7 @@ const Navbar: React.FC = () => {
       <HeaderContainer render={memo(HeaderItems)}></HeaderContainer>
     ) : (
       <Navigate
-        to={`${openmrsSpaBase}login/location`}
+        to={`/login/location`}
         state={{
           referrer: window.location.pathname.slice(
             window.location.pathname.indexOf(openmrsSpaBase) +
@@ -204,7 +204,7 @@ const Navbar: React.FC = () => {
 
   return (
     <Navigate
-      to={`${openmrsSpaBase}login`}
+      to={`/login`}
       state={{
         referrer: window.location.pathname.slice(
           window.location.pathname.indexOf(openmrsSpaBase) +

diff --git a/packages/apps/esm-primary-navigation-app/src/root.component.tsx b/packages/apps/esm-primary-navigation-app/src/root.component.tsx
@@ -1,16 +1,25 @@
 import React from "react";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Navbar from "./components/navbar/navbar.component";
 import styles from "./root.scss";
 
 export interface RootProps {}
 
 const Root: React.FC<RootProps> = () => {
   return (
-    <BrowserRouter>
-      <div className={styles.primaryNavContainer}>
-        <Navbar />
-      </div>
+    <BrowserRouter basename={window.spaBase}>
+      <Routes>
+        <Route path="/login/*" element={null} />
+        <Route path="/logout/*" element={null} />
+        <Route
+          path="/*"
+          element={
+            <div className={styles.primaryNavContainer}>
+              <Navbar />
+            </div>
+          }
+        />
+      </Routes>
     </BrowserRouter>
   );
 };

diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
@@ -3176,11 +3176,17 @@ ___
 
 ### getDynamicOfflineDataEntries
 
-▸ **getDynamicOfflineDataEntries**(`type?`): `Promise`<[`DynamicOfflineData`](interfaces/DynamicOfflineData.md)[]\>
+▸ **getDynamicOfflineDataEntries**<`T`\>(`type?`): `Promise`<`T`[]\>
 
 Returns all [DynamicOfflineData](interfaces/DynamicOfflineData.md) entries which registered for the currently logged in user.
 Optionally returns only entries of a given type.
 
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `T` | extends [`DynamicOfflineData`](interfaces/DynamicOfflineData.md) |
+
 #### Parameters
 
 | Name | Type | Description |
@@ -3189,7 +3195,7 @@ Optionally returns only entries of a given type.
 
 #### Returns
 
-`Promise`<[`DynamicOfflineData`](interfaces/DynamicOfflineData.md)[]\>
+`Promise`<`T`[]\>
 
 #### Defined in
 
@@ -3199,11 +3205,17 @@ ___
 
 ### getDynamicOfflineDataEntriesFor
 
-▸ **getDynamicOfflineDataEntriesFor**(`userId`, `type?`): `Promise`<[`DynamicOfflineData`](interfaces/DynamicOfflineData.md)[]\>
+▸ **getDynamicOfflineDataEntriesFor**<`T`\>(`userId`, `type?`): `Promise`<`T`[]\>
 
 Returns all [DynamicOfflineData](interfaces/DynamicOfflineData.md) entries which registered for the given user.
 Optionally returns only entries of a given type.
 
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `T` | extends [`DynamicOfflineData`](interfaces/DynamicOfflineData.md) |
+
 #### Parameters
 
 | Name | Type | Description |
@@ -3213,7 +3225,7 @@ Optionally returns only entries of a given type.
 
 #### Returns
 
-`Promise`<[`DynamicOfflineData`](interfaces/DynamicOfflineData.md)[]\>
+`Promise`<`T`[]\>
 
 #### Defined in
 
@@ -3432,7 +3444,7 @@ should be made available offline for the currently logged in user.
 
 #### Defined in
 
-[packages/framework/esm-offline/src/dynamic-offline-data.ts:162](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L162)
+[packages/framework/esm-offline/src/dynamic-offline-data.ts:161](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L161)
 
 ___
 
@@ -3457,7 +3469,7 @@ should be made available offline for the user with the given ID.
 
 #### Defined in
 
-[packages/framework/esm-offline/src/dynamic-offline-data.ts:177](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L177)
+[packages/framework/esm-offline/src/dynamic-offline-data.ts:176](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L176)
 
 ___
 
@@ -3534,7 +3546,7 @@ no longer needs to be available offline for the currently logged in user.
 
 #### Defined in
 
-[packages/framework/esm-offline/src/dynamic-offline-data.ts:213](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L213)
+[packages/framework/esm-offline/src/dynamic-offline-data.ts:212](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L212)
 
 ___
 
@@ -3559,7 +3571,7 @@ no longer needs to be available offline for the user with the given ID.
 
 #### Defined in
 
-[packages/framework/esm-offline/src/dynamic-offline-data.ts:228](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L228)
+[packages/framework/esm-offline/src/dynamic-offline-data.ts:227](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L227)
 
 ___
 
@@ -3714,7 +3726,7 @@ Synchronizes all offline data entries of the given [type](interfaces/FetchRespon
 
 #### Defined in
 
-[packages/framework/esm-offline/src/dynamic-offline-data.ts:262](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L262)
+[packages/framework/esm-offline/src/dynamic-offline-data.ts:261](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L261)
 
 ___
 
@@ -3738,7 +3750,7 @@ Synchronizes a single offline data entry of the given [type](interfaces/FetchRes
 
 #### Defined in
 
-[packages/framework/esm-offline/src/dynamic-offline-data.ts:280](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L280)
+[packages/framework/esm-offline/src/dynamic-offline-data.ts:279](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-offline/src/dynamic-offline-data.ts#L279)
 
 ___
 

diff --git a/packages/framework/esm-framework/package.json b/packages/framework/esm-framework/package.json
@@ -59,7 +59,8 @@
     "react-dom": "18.x",
     "react-i18next": "11.x",
     "rxjs": "6.x",
-    "single-spa": "5.x"
+    "single-spa": "5.x",
+    "swr": "2.x"
   },
   "devDependencies": {
     "jest": "28.1.0",

diff --git a/packages/framework/esm-offline/src/dynamic-offline-data.ts b/packages/framework/esm-offline/src/dynamic-offline-data.ts
@@ -128,11 +128,11 @@ export function setupDynamicOfflineDataHandler(
  * Optionally returns only entries of a given type.
  * @param type The type of the entries to be returned. If `undefined`, returns all types.
  */
-export async function getDynamicOfflineDataEntries(
-  type?: string
-): Promise<Array<DynamicOfflineData>> {
+export async function getDynamicOfflineDataEntries<
+  T extends DynamicOfflineData
+>(type?: string): Promise<Array<T>> {
   const userId = await getCurrentUserId();
-  return await getDynamicOfflineDataEntriesFor(userId, type);
+  return await getDynamicOfflineDataEntriesFor<T>(userId, type);
 }
 
 /**
@@ -141,16 +141,15 @@ export async function getDynamicOfflineDataEntries(
  * @param userId The ID of the user whose entries are to be retrieved.
  * @param type The type of the entries to be returned. If `undefined`, returns all types.
  */
-export async function getDynamicOfflineDataEntriesFor(
-  userId: string,
-  type?: string
-): Promise<Array<DynamicOfflineData>> {
+export async function getDynamicOfflineDataEntriesFor<
+  T extends DynamicOfflineData
+>(userId: string, type?: string): Promise<Array<T>> {
   const filter = type ? { type, users: userId } : { users: userId };
   const db = new OfflineDb();
-  return await db.dynamicOfflineData
+  return (await db.dynamicOfflineData
     .where(filter)
     .toArray()
-    .catch(Dexie.errnames.DatabaseClosed, () => []);
+    .catch(Dexie.errnames.DatabaseClosed, () => [])) as Array<T>;
 }
 
 /**

diff --git a/packages/framework/esm-react-utils/package.json b/packages/framework/esm-react-utils/package.json
@@ -40,8 +40,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "single-spa-react": "~5.0.0",
-    "swr": "^2.0.1"
+    "single-spa-react": "~5.0.0"
   },
   "peerDependencies": {
     "@openmrs/esm-api": "5.x",
@@ -53,7 +52,8 @@
     "i18next": "19.x",
     "react": "18.x",
     "react-dom": "18.x",
-    "react-i18next": "11.x"
+    "react-i18next": "11.x",
+    "swr": "2.x"
   },
   "devDependencies": {
     "@openmrs/esm-api": "^5.1.0",
@@ -68,6 +68,7 @@
     "react-dom": "^18.1.0",
     "react-i18next": "^11.16.9",
     "rxjs": "^6.5.3",
+    "swr": "^2.2.2",
     "webpack": "^5.88.0"
   }
 }
diff --git a/packages/shell/esm-app-shell/dependencies.json b/packages/shell/esm-app-shell/dependencies.json
@@ -8,5 +8,6 @@
   "@openmrs/esm-framework",
   "@openmrs/esm-framework/src/internal",
   "rxjs",
-  "single-spa"
+  "single-spa",
+  "swr"
 ]
diff --git a/packages/shell/esm-app-shell/package.json b/packages/shell/esm-app-shell/package.json
@@ -50,8 +50,10 @@
     "react-i18next": "^11.7.0",
     "react-router-dom": "^6.3.0",
     "rxjs": "^6.5.3",
+    "semver": "^7.3.4",
     "single-spa": "^5.9.2",
     "swc-loader": "^0.2.3",
+    "swr": "^2.2.2",
     "systemjs": "^6.8.3",
     "webpack": "^5.88.0",
     "webpack-pwa-manifest": "^4.3.0",