From ca1b68c788b60754ff6531cc73794328eace8d84 Mon Sep 17 00:00:00 2001 From: Jay Giang Date: Tue, 12 Nov 2024 15:18:35 -0800 Subject: [PATCH 01/11] Pass offlineStorage to application --- examples/on-device-storage/src/App.jsx | 5 ++-- examples/on-device-storage/src/index.jsx | 28 ++++++++++++------- examples/on-device-storage/src/pages/Home.jsx | 4 +-- packages/react-radfish/Application/index.jsx | 12 +++++++- 4 files changed, 34 insertions(+), 15 deletions(-) diff --git a/examples/on-device-storage/src/App.jsx b/examples/on-device-storage/src/App.jsx index 470c58ef..f89917e3 100644 --- a/examples/on-device-storage/src/App.jsx +++ b/examples/on-device-storage/src/App.jsx @@ -4,9 +4,10 @@ import { Routes, Route, BrowserRouter as Router } from "react-router-dom"; import { Application } from "@nmfs-radfish/react-radfish"; import HomePage from "./pages/Home"; -const App = () => { +const App = ({application}) => { + return ( - +
diff --git a/examples/on-device-storage/src/index.jsx b/examples/on-device-storage/src/index.jsx index 02a7673b..f7089a9d 100644 --- a/examples/on-device-storage/src/index.jsx +++ b/examples/on-device-storage/src/index.jsx @@ -2,8 +2,8 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./styles/theme.css"; import App from "./App"; -import { OfflineStorageWrapper } from "@nmfs-radfish/react-radfish"; import { ErrorBoundary } from "@nmfs-radfish/react-radfish"; +import { Application, IndexedDBMethod } from "@nmfs-radfish/radfish"; const offlineStorageConfig = { type: "indexedDB", @@ -17,14 +17,22 @@ const offlineStorageConfig = { }, }; +const app = new Application({ + storage: new IndexedDBMethod( + offlineStorageConfig.name, + offlineStorageConfig.version, + offlineStorageConfig.stores, + ), +}); + const root = ReactDOM.createRoot(document.getElementById("root")); -root.render( - - - - - - - -); +app.on("ready", () => { + root.render( + + + + + , + ); +}); \ No newline at end of file diff --git a/examples/on-device-storage/src/pages/Home.jsx b/examples/on-device-storage/src/pages/Home.jsx index 3114e3cb..54b3eaf7 100644 --- a/examples/on-device-storage/src/pages/Home.jsx +++ b/examples/on-device-storage/src/pages/Home.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { useOfflineStorage } from "@nmfs-radfish/react-radfish"; +import { useApplication } from "@nmfs-radfish/react-radfish"; import { Button, Alert, Link } from "@trussworks/react-uswds"; const HomePage = () => { @@ -10,7 +10,7 @@ const HomePage = () => { createOfflineData, updateOfflineData, deleteOfflineData, - } = useOfflineStorage(); + } = useApplication(); useEffect(() => { const getFormData = async () => { diff --git a/packages/react-radfish/Application/index.jsx b/packages/react-radfish/Application/index.jsx index a32dd9e6..a519f673 100644 --- a/packages/react-radfish/Application/index.jsx +++ b/packages/react-radfish/Application/index.jsx @@ -1,6 +1,7 @@ import { Toast } from "../alerts"; import { createContext, useEffect, useContext } from "react"; import { useOfflineStatus, useToasts, dispatchToast } from "../hooks"; +import { StorageModelFactory } from "@nmfs-radfish/radfish"; const ApplicationContext = createContext(); @@ -28,8 +29,17 @@ function ApplicationComponent(props) { } export function Application({ application, children }) { + const storageModel = StorageModelFactory.createModel(application._options.storage); + + const contextValue = { + createOfflineData: storageModel.create.bind(storageModel), + findOfflineData: storageModel.find.bind(storageModel), + updateOfflineData: storageModel.update.bind(storageModel), + deleteOfflineData: storageModel.delete.bind(storageModel), + storageMethod: application._options.storage, + }; return ( - + {children} ); From ab7eb991b43583389d123cb07b46c7f33ef2512d Mon Sep 17 00:00:00 2001 From: Jay Giang Date: Wed, 13 Nov 2024 08:57:41 -0800 Subject: [PATCH 02/11] Create conditional to handle passed IndexedDBMethod --- examples/on-device-storage/src/index.jsx | 5 ++- examples/on-device-storage/src/pages/Home.jsx | 4 +-- packages/react-radfish/Application/index.jsx | 31 ++++++++++--------- .../react-radfish/OfflineStorage/index.jsx | 4 ++- 4 files changed, 23 insertions(+), 21 deletions(-) diff --git a/examples/on-device-storage/src/index.jsx b/examples/on-device-storage/src/index.jsx index f7089a9d..5de30777 100644 --- a/examples/on-device-storage/src/index.jsx +++ b/examples/on-device-storage/src/index.jsx @@ -6,7 +6,6 @@ import { ErrorBoundary } from "@nmfs-radfish/react-radfish"; import { Application, IndexedDBMethod } from "@nmfs-radfish/radfish"; const offlineStorageConfig = { - type: "indexedDB", name: import.meta.env.VITE_INDEXED_DB_NAME, version: import.meta.env.VITE_INDEXED_DB_VERSION, stores: { @@ -31,8 +30,8 @@ app.on("ready", () => { root.render( - + , ); -}); \ No newline at end of file +}); diff --git a/examples/on-device-storage/src/pages/Home.jsx b/examples/on-device-storage/src/pages/Home.jsx index 54b3eaf7..3114e3cb 100644 --- a/examples/on-device-storage/src/pages/Home.jsx +++ b/examples/on-device-storage/src/pages/Home.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { useApplication } from "@nmfs-radfish/react-radfish"; +import { useOfflineStorage } from "@nmfs-radfish/react-radfish"; import { Button, Alert, Link } from "@trussworks/react-uswds"; const HomePage = () => { @@ -10,7 +10,7 @@ const HomePage = () => { createOfflineData, updateOfflineData, deleteOfflineData, - } = useApplication(); + } = useOfflineStorage(); useEffect(() => { const getFormData = async () => { diff --git a/packages/react-radfish/Application/index.jsx b/packages/react-radfish/Application/index.jsx index a519f673..27bee7bd 100644 --- a/packages/react-radfish/Application/index.jsx +++ b/packages/react-radfish/Application/index.jsx @@ -1,7 +1,7 @@ import { Toast } from "../alerts"; import { createContext, useEffect, useContext } from "react"; import { useOfflineStatus, useToasts, dispatchToast } from "../hooks"; -import { StorageModelFactory } from "@nmfs-radfish/radfish"; +import { OfflineStorageWrapper } from "../OfflineStorage"; const ApplicationContext = createContext(); @@ -29,20 +29,21 @@ function ApplicationComponent(props) { } export function Application({ application, children }) { - const storageModel = StorageModelFactory.createModel(application._options.storage); - - const contextValue = { - createOfflineData: storageModel.create.bind(storageModel), - findOfflineData: storageModel.find.bind(storageModel), - updateOfflineData: storageModel.update.bind(storageModel), - deleteOfflineData: storageModel.delete.bind(storageModel), - storageMethod: application._options.storage, - }; - return ( - - {children} - - ); + if (application._options.storage) { + return ( + + + {children} + + + ); + } else { + return ( + + {children} + + ); + } } export const useApplication = () => { diff --git a/packages/react-radfish/OfflineStorage/index.jsx b/packages/react-radfish/OfflineStorage/index.jsx index d9bc26b8..86475b3b 100644 --- a/packages/react-radfish/OfflineStorage/index.jsx +++ b/packages/react-radfish/OfflineStorage/index.jsx @@ -5,7 +5,9 @@ export const OfflineStorageContext = createContext(); export const OfflineStorageWrapper = ({ children, config }) => { const storageMethod = - config.type === "indexedDB" + config instanceof IndexedDBMethod || config instanceof LocalStorageMethod + ? config + : config.type === "indexedDB" ? new IndexedDBMethod(config.name, config.version, config.stores) : new LocalStorageMethod(config.name); From 078b89f9d871459091e6e1c22204aa5a49d749a0 Mon Sep 17 00:00:00 2001 From: Tony Gaskell Date: Mon, 25 Nov 2024 14:36:17 -1000 Subject: [PATCH 03/11] Allow radfish application to accept StorageMethod instance --- packages/radfish/Application.spec.js | 69 ++++++++++++++++++++++++++++ packages/radfish/index.js | 31 ++++++++++++- packages/radfish/package.json | 2 +- packages/radfish/vitest.config.js | 8 ++++ 4 files changed, 108 insertions(+), 2 deletions(-) create mode 100644 packages/radfish/Application.spec.js create mode 100644 packages/radfish/vitest.config.js diff --git a/packages/radfish/Application.spec.js b/packages/radfish/Application.spec.js new file mode 100644 index 00000000..089f80fd --- /dev/null +++ b/packages/radfish/Application.spec.js @@ -0,0 +1,69 @@ +import { Application, IndexedDBMethod, LocalStorageMethod } from './index'; + +describe ('Application', () => { + describe('storage', () => { + it('should return the storage method', () => { + // IndexedDB Storage application + const indexedDBMethod = new IndexedDBMethod( + "test", + 1, + { + formData: "uuid, fullName, email, phoneNumber, numberOfFish, species, computedPrice, isDraft", + species: "name, price", + homebaseData: "KEY, REPORT_TYPE, SORT_KEY, TRIP_TYPE, VALUE", + }, + ); + const indexedDBApplication = new Application({ + storage: indexedDBMethod, + }); + expect (indexedDBApplication.storage).toEqual(indexedDBMethod); + + // Local Storage application + const localStorageMethod = new LocalStorageMethod( + "test", + { + formData: "uuid, fullName, email, phoneNumber, numberOfFish, species, computedPrice, isDraft", + species: "name, price", + homebaseData: "KEY, REPORT_TYPE, SORT_KEY, TRIP_TYPE, VALUE", + }, + ); + const localStorageApplication = new Application({ + storage: localStorageMethod, + }); + expect(localStorageApplication.storage).toEqual(localStorageMethod); + }); + + it('should return the storage method using a configuration object', function () { + const indexedDBApplication = new Application( + { + storage: { + type: "indexedDB", + name: "test", + version: 1, + stores: { + formData: "uuid, fullName, email, phoneNumber, numberOfFish, species, computedPrice, isDraft", + species: "name, price", + homebaseData: "KEY, REPORT_TYPE, SORT_KEY, TRIP_TYPE, VALUE", + } + } + } + ) + expect(indexedDBApplication.storage).toBeInstanceOf(IndexedDBMethod); + + const localStorageApplication = new Application( + { + storage: { + type: "localStorage", + name: "test", + stores: { + formData: "uuid, fullName, email, phoneNumber, numberOfFish, species, computedPrice, isDraft", + species: "name, price", + homebaseData: "KEY, REPORT_TYPE, SORT_KEY, TRIP_TYPE, VALUE", + } + } + } + ) + expect(localStorageApplication.storage).toBeInstanceOf(LocalStorageMethod); + }); + }); +}); \ No newline at end of file diff --git a/packages/radfish/index.js b/packages/radfish/index.js index efae485f..20505ca9 100644 --- a/packages/radfish/index.js +++ b/packages/radfish/index.js @@ -1,4 +1,4 @@ -import { setupWorker } from "msw/browser"; +import { StorageMethod, IndexedDBMethod, LocalStorageMethod } from "./on-device-storage/storage"; class EventEmitter extends EventTarget {} @@ -14,6 +14,34 @@ export class Application { this._dispatch("init"); } + get storage() { + if (!this._options?.storage) { + throw new Error("Storage method not configured"); + } + + if (!(this._options.storage instanceof StorageMethod)) { + console.warn('Please update the storage method to be an instance of StorageMethod'); + + switch (this._options.storage.type) { + case "indexedDB": { + return new IndexedDBMethod( + this._options.storage.name, + this._options.storage.version, + this._options.storage.stores + ); + } + case "localStorage": { + return new LocalStorageMethod(this._options.storage.name); + } + default: { + throw new Error(`Invalid storage method type: ${this._options.storage.type}`); + } + } + } + + return this._options.storage; + } + on(event, callback) { return this.emitter.addEventListener(event, callback); } @@ -54,6 +82,7 @@ export class Application { async _installServiceWorker(handlers, url) { if (!url) return null; console.info("Installing service worker"); + // let setupWorker = (await import("msw/browser")).setupWorker; const worker = setupWorker(...((await handlers)?.default || [])); const onUnhandledRequest = "bypass"; diff --git a/packages/radfish/package.json b/packages/radfish/package.json index ece8339c..260861eb 100644 --- a/packages/radfish/package.json +++ b/packages/radfish/package.json @@ -3,7 +3,7 @@ "version": "0.3.1", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "vitest" }, "keywords": [], "author": "", diff --git a/packages/radfish/vitest.config.js b/packages/radfish/vitest.config.js new file mode 100644 index 00000000..5c7108aa --- /dev/null +++ b/packages/radfish/vitest.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from "vite"; + +export default defineConfig({ + test: { + globals: true, + environment: "jsdom", + }, +}); From 3df759092a87a71b600194fcd763c70b4e783132 Mon Sep 17 00:00:00 2001 From: Tony Gaskell Date: Mon, 16 Dec 2024 13:12:36 -1000 Subject: [PATCH 04/11] Revert test script MSW is trying to run in browser context while in node js process causes issues. --- templates/react-javascript/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/react-javascript/package.json b/templates/react-javascript/package.json index f5166943..456ad1a0 100644 --- a/templates/react-javascript/package.json +++ b/templates/react-javascript/package.json @@ -25,7 +25,7 @@ "start": "vite", "build": "vite build", "prebuild": "rm -rf dist", - "test": "vitest --exclude './src/__tests__/e2e/**'", + "test": "echo \"Error: no test specified\" && exit 1", "test:e2e": "concurrently --kill-others --success first \"npm start\" \"vitest './src/__tests__/e2e/integration.e2e.test.jsx'\"", "lint": "eslint src", "lint:fix": "eslint --fix src", From 1fdce366ae28a62d3351c28b351a4df3a955b550 Mon Sep 17 00:00:00 2001 From: Tony Gaskell Date: Mon, 16 Dec 2024 13:54:30 -1000 Subject: [PATCH 05/11] Fix issue where local storage method would not initialize store if it was missing --- .../radfish/on-device-storage/storage/LocalStorageMethod.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/radfish/on-device-storage/storage/LocalStorageMethod.js b/packages/radfish/on-device-storage/storage/LocalStorageMethod.js index c009130e..30344034 100644 --- a/packages/radfish/on-device-storage/storage/LocalStorageMethod.js +++ b/packages/radfish/on-device-storage/storage/LocalStorageMethod.js @@ -13,9 +13,11 @@ export class LocalStorageMethod extends StorageMethod { constructor(key) { super(); this.key = key; - this.store = - localStorage.getItem(this.key) || + if (!localStorage.hasOwnProperty(this.key)) { + console.warn(`Initializing local storage for key: ${this.key}`); localStorage.setItem(this.key, JSON.stringify([])); + }; + this.store = localStorage.getItem(this.key); } /** From 90d9e938e31f9330e9cc76a865df3e324cd1cdc1 Mon Sep 17 00:00:00 2001 From: Tony Gaskell Date: Mon, 16 Dec 2024 13:57:21 -1000 Subject: [PATCH 06/11] Storage method should return null if not configured instead of throwing error --- packages/radfish/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/radfish/index.js b/packages/radfish/index.js index 20505ca9..62d8fc21 100644 --- a/packages/radfish/index.js +++ b/packages/radfish/index.js @@ -1,3 +1,4 @@ +import { setupWorker } from "msw/browser"; import { StorageMethod, IndexedDBMethod, LocalStorageMethod } from "./on-device-storage/storage"; class EventEmitter extends EventTarget {} @@ -15,14 +16,14 @@ export class Application { } get storage() { - if (!this._options?.storage) { - throw new Error("Storage method not configured"); + if (!this._options.storage) { + return null; } - + if (!(this._options.storage instanceof StorageMethod)) { console.warn('Please update the storage method to be an instance of StorageMethod'); - switch (this._options.storage.type) { + switch (this._options.storage?.type) { case "indexedDB": { return new IndexedDBMethod( this._options.storage.name, @@ -82,7 +83,6 @@ export class Application { async _installServiceWorker(handlers, url) { if (!url) return null; console.info("Installing service worker"); - // let setupWorker = (await import("msw/browser")).setupWorker; const worker = setupWorker(...((await handlers)?.default || [])); const onUnhandledRequest = "bypass"; From 982f7f2180075742a9ae5e18e17c2779f175ba03 Mon Sep 17 00:00:00 2001 From: Tony Gaskell Date: Mon, 16 Dec 2024 14:00:44 -1000 Subject: [PATCH 07/11] Use application context in offline storage context --- packages/radfish/package.json | 2 +- packages/react-radfish/Application/index.jsx | 14 +++++++------- packages/react-radfish/OfflineStorage/index.jsx | 15 +++++++-------- 3 files changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/radfish/package.json b/packages/radfish/package.json index 260861eb..ece8339c 100644 --- a/packages/radfish/package.json +++ b/packages/radfish/package.json @@ -3,7 +3,7 @@ "version": "0.3.1", "main": "index.js", "scripts": { - "test": "vitest" + "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", diff --git a/packages/react-radfish/Application/index.jsx b/packages/react-radfish/Application/index.jsx index 27bee7bd..1f3f8f15 100644 --- a/packages/react-radfish/Application/index.jsx +++ b/packages/react-radfish/Application/index.jsx @@ -29,18 +29,18 @@ function ApplicationComponent(props) { } export function Application({ application, children }) { - if (application._options.storage) { + if (application.storage) { return ( - - - {children} - - + + + {children} + + ); } else { return ( - {children} + {children} ); } diff --git a/packages/react-radfish/OfflineStorage/index.jsx b/packages/react-radfish/OfflineStorage/index.jsx index 86475b3b..f5615a82 100644 --- a/packages/react-radfish/OfflineStorage/index.jsx +++ b/packages/react-radfish/OfflineStorage/index.jsx @@ -1,16 +1,13 @@ import { createContext, useContext } from "react"; import { IndexedDBMethod, LocalStorageMethod, StorageModelFactory } from "@nmfs-radfish/radfish"; +import { useApplication } from "../Application"; export const OfflineStorageContext = createContext(); -export const OfflineStorageWrapper = ({ children, config }) => { - const storageMethod = - config instanceof IndexedDBMethod || config instanceof LocalStorageMethod - ? config - : config.type === "indexedDB" - ? new IndexedDBMethod(config.name, config.version, config.stores) - : new LocalStorageMethod(config.name); +export const OfflineStorageWrapper = ({ children }) => { + const application = useApplication(); + const storageMethod = application.storage; const storageModel = StorageModelFactory.createModel(storageMethod); function createOfflineData(tableName, data) { @@ -45,7 +42,9 @@ export const OfflineStorageWrapper = ({ children, config }) => { export const useOfflineStorage = () => { const context = useContext(OfflineStorageContext); if (!context) { - throw new Error("useOfflineStorage must be used within an OfflineStorageWrapper"); + throw new Error( + "useOfflineStorage must be used within an OfflineStorageWrapper. Please make sure a storage method has been configured.", + ); } return context; }; From 025fc7c2d465026d66776acd7f4a8fa60db6d59e Mon Sep 17 00:00:00 2001 From: Tony Gaskell Date: Mon, 16 Dec 2024 14:03:51 -1000 Subject: [PATCH 08/11] Add RADFish application instance to template application props --- templates/react-javascript/src/App.jsx | 6 +++--- templates/react-javascript/src/index.jsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/templates/react-javascript/src/App.jsx b/templates/react-javascript/src/App.jsx index 742095fc..d333f639 100644 --- a/templates/react-javascript/src/App.jsx +++ b/templates/react-javascript/src/App.jsx @@ -12,17 +12,17 @@ import { import HomePage from "./pages/Home"; -function App() { +function App({ application }) { const [isExpanded, setExpanded] = useState(false); return ( - + Skip to main content
diff --git a/templates/react-javascript/src/index.jsx b/templates/react-javascript/src/index.jsx index e38fae0c..71e429fa 100644 --- a/templates/react-javascript/src/index.jsx +++ b/templates/react-javascript/src/index.jsx @@ -18,10 +18,10 @@ const app = new Application({ }, }); -app.on("ready", () => { +app.on("ready", async () => { root.render( - + , ); }); From c4e4ffd8c1d28fa163a4243e3210fa0367868912 Mon Sep 17 00:00:00 2001 From: Tony Gaskell Date: Mon, 16 Dec 2024 15:02:19 -1000 Subject: [PATCH 09/11] Remove on device storage wrapper from table example since it's not being used --- examples/simple-table/src/index.jsx | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/examples/simple-table/src/index.jsx b/examples/simple-table/src/index.jsx index 632831dc..c83b1f59 100644 --- a/examples/simple-table/src/index.jsx +++ b/examples/simple-table/src/index.jsx @@ -2,25 +2,13 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./styles/theme.css"; import App from "./App"; -import { ErrorBoundary, OfflineStorageWrapper } from "@nmfs-radfish/react-radfish"; - -const offlineStorageConfig = { - type: "indexedDB", - name: import.meta.env.VITE_INDEXED_DB_NAME, - version: import.meta.env.VITE_INDEXED_DB_VERSION, - stores: { - formData: "uuid, image, species, computedPrice, isDraft", - }, -}; - +import { ErrorBoundary } from "@nmfs-radfish/react-radfish"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - - - + , ); From f3a43475b900633b6159224b8d39e97dcf4051c2 Mon Sep 17 00:00:00 2001 From: Tony Gaskell Date: Mon, 16 Dec 2024 15:03:18 -1000 Subject: [PATCH 10/11] Update offline storage configuration for multistep form example --- examples/multistep-form/src/App.jsx | 4 ++-- examples/multistep-form/src/index.jsx | 26 +++++++++++++------------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/examples/multistep-form/src/App.jsx b/examples/multistep-form/src/App.jsx index cc1383db..81f7e373 100644 --- a/examples/multistep-form/src/App.jsx +++ b/examples/multistep-form/src/App.jsx @@ -5,9 +5,9 @@ import HomePage from "./pages/Home"; import { Alert, Button, Link, GridContainer } from "@trussworks/react-uswds"; import { Application } from "@nmfs-radfish/react-radfish"; -function App() { +function App({ application }) { return ( - +

Multi-Step

diff --git a/examples/multistep-form/src/index.jsx b/examples/multistep-form/src/index.jsx index 63bd0dd6..a9d93059 100644 --- a/examples/multistep-form/src/index.jsx +++ b/examples/multistep-form/src/index.jsx @@ -1,26 +1,26 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./styles/theme.css"; -import App from "./App"; -import { ErrorBoundary, OfflineStorageWrapper } from "@nmfs-radfish/react-radfish"; +import MultiStepFormApplication from "./App"; +import { Application, IndexedDBMethod } from "@nmfs-radfish/radfish"; +import { ErrorBoundary } from "@nmfs-radfish/react-radfish"; -const offlineStorageConfig = { - type: "indexedDB", - name: import.meta.env.VITE_INDEXED_DB_NAME, - version: import.meta.env.VITE_INDEXED_DB_VERSION, - stores: { - formData: "uuid, fullName, email, city, state, zipcode", - }, -}; +const app = new Application({ + storage: new IndexedDBMethod( + import.meta.env.VITE_INDEXED_DB_NAME, + import.meta.env.VITE_INDEXED_DB_VERSION, + { + formData: "uuid, fullName, email, city, state, zipcode", + }, + ), +}); const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - - - + , ); From 14830424611096138513b10b52d8d73fe0c9f9b0 Mon Sep 17 00:00:00 2001 From: Jay Giang Date: Tue, 17 Dec 2024 13:53:43 -0800 Subject: [PATCH 11/11] Fixed issue where application storage is not configured --- packages/react-radfish/Application/index.jsx | 4 ++-- packages/react-radfish/OfflineStorage/index.jsx | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react-radfish/Application/index.jsx b/packages/react-radfish/Application/index.jsx index b3750512..b26846e6 100644 --- a/packages/react-radfish/Application/index.jsx +++ b/packages/react-radfish/Application/index.jsx @@ -32,8 +32,8 @@ function ApplicationComponent(props) { ); } -export function Application({ application, children }) { - if (application.storage) { +export function Application({ application = null, children }) { + if (application?.storage) { return ( diff --git a/packages/react-radfish/OfflineStorage/index.jsx b/packages/react-radfish/OfflineStorage/index.jsx index f5615a82..04680142 100644 --- a/packages/react-radfish/OfflineStorage/index.jsx +++ b/packages/react-radfish/OfflineStorage/index.jsx @@ -1,5 +1,5 @@ import { createContext, useContext } from "react"; -import { IndexedDBMethod, LocalStorageMethod, StorageModelFactory } from "@nmfs-radfish/radfish"; +import { StorageModelFactory } from "@nmfs-radfish/radfish"; import { useApplication } from "../Application"; export const OfflineStorageContext = createContext(); @@ -7,6 +7,12 @@ export const OfflineStorageContext = createContext(); export const OfflineStorageWrapper = ({ children }) => { const application = useApplication(); + if (!application?.storage) { + throw new Error( + "OfflineStorageWrapper must be used within an Application component with a storage method configured.", + ); + } + const storageMethod = application.storage; const storageModel = StorageModelFactory.createModel(storageMethod);