#868 remove localstorage logic from @tomic/react

browser/CHANGELOG.md

@@ -39,6 +39,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 
 - Added `useCollectionPage` hook.
 - Fix bug where `useCollection` would fetch the collection twice on mount.
+- `useServerURL` no longer stores the server url in localstorage.
 
 ### @tomic/cli
 

browser/data-browser/src/App.tsx

@@ -24,6 +24,9 @@ import { SkipNav } from './components/SkipNav';
 import { ControlLockProvider } from './hooks/useControlLock';
 import { FormValidationContextProvider } from './components/forms/formValidation/FormValidationContextProvider';
 import { registerCustomCreateActions } from './components/forms/NewForm/CustomCreateActions';
+import isPropValid from '@emotion/is-prop-valid';
+import { NewResourceUIProvider } from './components/forms/NewForm/useNewResourceUI';
+import { serverURLStorage } from './helpers/serverURLStorage';
 
 function fixDevUrl(url: string) {
   if (isDev()) {
@@ -37,7 +40,8 @@ function fixDevUrl(url: string) {
  * Defaulting to the current URL's origin will make sense in most non-dev environments.
  * In dev envs, we want to default to port 9883
  */
-const serverUrl = fixDevUrl(window.location.origin);
+
+const serverUrl = fixDevUrl(serverURLStorage.get() ?? window.location.origin);
 const initalAgent = getAgentFromLocalStorage();
 
 // Initialize the store
@@ -70,9 +74,6 @@ if (isDev()) {
   window.store = store;
 }
 
-import isPropValid from '@emotion/is-prop-valid';
-import { NewResourceUIProvider } from './components/forms/NewForm/useNewResourceUI';
-
 // This implements the default behavior from styled-components v5
 function shouldForwardProp(propName, target) {
   if (typeof target === 'string') {

browser/data-browser/src/helpers/serverURLStorage.ts

@@ -0,0 +1,16 @@
+const ServerURLStorageKEY = 'serverUrl';
+
+export const serverURLStorage = {
+  set(url: string) {
+    localStorage.setItem(ServerURLStorageKEY, JSON.stringify(url));
+  },
+  get() {
+    try {
+      const val = localStorage.getItem(ServerURLStorageKEY);
+
+      return JSON.parse(val as string);
+    } catch (e) {
+      return undefined;
+    }
+  },
+};

browser/lib/src/store.ts

@@ -36,6 +36,7 @@ type ResourceCallback<C extends OptionalClass = UnknownClass> = (
 type AgentCallback = (agent: Agent | undefined) => void;
 type ErrorCallback = (e: Error) => void;
 
+type ServerURLCallback = (serverURL: string) => void;
 type Fetch = typeof fetch;
 
 type AddResourcesOpts = {
@@ -76,6 +77,8 @@ export enum StoreEvents {
   ResourceManuallyCreated = 'resource-manually-created',
   /** Event that gets called whenever the stores agent changes */
   AgentChanged = 'agent-changed',
+  /** Event that gets called whenever the server url changes */
+  ServerURLChanged = 'server-url-changed',
   /** Event that gets called whenever the store encounters an error */
   Error = 'error',
 }
@@ -88,6 +91,7 @@ type StoreEventHandlers = {
   [StoreEvents.ResourceRemoved]: ResourceCallback;
   [StoreEvents.ResourceManuallyCreated]: ResourceCallback;
   [StoreEvents.AgentChanged]: AgentCallback;
+  [StoreEvents.ServerURLChanged]: ServerURLCallback;
   [StoreEvents.Error]: ErrorCallback;
 };
 
@@ -719,6 +723,7 @@ export class Store {
     }
 
     this.serverUrl = url;
+    this.eventManager.emit(StoreEvents.ServerURLChanged, url);
     // TODO This is not the right place
     supportsWebSockets() && this.openWebSocket(url);
   }

browser/react/src/useServerURL.ts

@@ -1,6 +1,6 @@
-import { Client } from '@tomic/lib';
-import { useCallback } from 'react';
-import { useLocalStorage, useStore } from './index.js';
+import { Client, StoreEvents } from '@tomic/lib';
+import { useCallback, useEffect, useState } from 'react';
+import { useStore } from './index.js';
 
 /**
  * A hook for using and adjusting the Server URL. Also saves to localStorage. If
@@ -9,10 +9,7 @@ import { useLocalStorage, useStore } from './index.js';
 export const useServerURL = (): [string, (serverUrl: string) => void] => {
   // Localstorage for cross-session persistence of JSON object
   const store = useStore();
-  const [serverUrl, setServerUrl] = useLocalStorage<string>(
-    'serverUrl',
-    store.getServerUrl(),
-  );
+  const [serverUrl, setServerUrl] = useState<string>(store.getServerUrl());
 
   const set = useCallback(
     (value: string) => {
@@ -26,15 +23,20 @@ export const useServerURL = (): [string, (serverUrl: string) => void] => {
         newValue = value;
       } else {
         store.notifyError(
-          new Error(`Invalid base URL: ${value}, defaulting to atomicdata.dev`),
+          new Error(
+            `Invalid Server URL: ${value}, defaulting to atomicdata.dev`,
+          ),
         );
       }
 
-      setServerUrl(newValue);
       store.setServerUrl(newValue);
     },
     [store],
   );
 
+  useEffect(() => {
+    return store.on(StoreEvents.ServerURLChanged, setServerUrl);
+  }, [store]);
+
   return [serverUrl, set];
 };