#283 Atomic Lib Refactor

Author: Polleps

CHANGELOG.md

@@ -4,13 +4,23 @@ This changelog covers all three packages, as they are (for now) updated as a who
 
 ## v0.35.0
 
+### @tomic/react
+
+#### Breaking changes
+
+- Remove `initAgentFromLocalStorage()`.
+- No longer save agent to local storage.
+
 ### @tomic/lib
 
 - Add the ability to change the `fetch` function used to fetch resources over http.
 - `store.addResource` is depricated in favor of `store.addResources`.
+- Add `AgentChange` event on store that is fired whenever the stores agent changes.
 
 #### Breaking Changes:
 
+- `uploadFiles()` has moved to `store.uploadFiles()`.
+- Remove `Agent.fromJSON()`
 - `tryValidURL` and `isValidURL` are now static methods on `Client`.
 - Rename `store.fetchResource` to `store.fetchResourceFromServer`.
 

data-browser/package.json

@@ -71,5 +71,6 @@
     "test-query": "PWDEBUG=1 playwright test \"e2e.spec.ts\" -g",
     "typecheck": "tsc --noEmit"
   },
-  "version": "0.34.0"
+  "type": "module",
+  "version": "0.35.0"
 }

data-browser/src/App.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
-import {
-  initAgentFromLocalStorage,
-  StoreContext,
-  Store,
-  urls,
-} from '@tomic/react';
+import { StoreContext, Store, urls, StoreEvents } from '@tomic/react';
 
 import { GlobalStyle, ThemeWrapper } from './styling';
 import { AppRoutes } from './routes/Routes';
@@ -23,6 +18,10 @@ import { DialogContainer } from './components/Dialog/DialogContainer';
 import { registerHandlers } from './handlers';
 import { ErrorBoundary } from './views/ErrorPage';
 import { NetworkIndicator } from './components/NetworkIndicator';
+import {
+  getAgentFromLocalStorage,
+  saveAgentToLocalStorage,
+} from './helpers/agentStorage';
 
 function fixDevUrl(url: string) {
   if (isDev()) {
@@ -32,8 +31,15 @@ function fixDevUrl(url: string) {
   return url;
 }
 
-/** Initialize the store */
-const store = new Store();
+const initalAgent = getAgentFromLocalStorage();
+
+// Initialize the store
+const store = new Store({
+  agent: initalAgent,
+});
+
+store.on(StoreEvents.AgentChanged, saveAgentToLocalStorage);
+
 /**
  * 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
@@ -42,7 +48,7 @@ const currentOrigin = window.location.origin;
 
 store.setServerUrl(fixDevUrl(currentOrigin));
 
-/** Show an error when things go wrong */
+// Show an error when things go wrong
 store.errorHandler = e => {
   handleError(e);
 
@@ -58,19 +64,12 @@ declare global {
     bugsnagApiKey: string;
   }
 }
-/** Setup bugsnag for error handling, but only if there's an API key */
+// Setup bugsnag for error handling, but only if there's an API key
 const ErrBoundary = window.bugsnagApiKey
   ? initBugsnag(window.bugsnagApiKey)
   : ErrorBoundary;
 
-/** Initialize the agent from localstorage */
-const agent = initAgentFromLocalStorage();
-
-if (agent) {
-  store.setAgent(agent);
-}
-
-/** Fetch all the Properties and Classes - this helps speed up the app. */
+// Fetch all the Properties and Classes - this helps speed up the app.
 store.fetchResourceFromServer(urls.properties.getAll);
 store.fetchResourceFromServer(urls.classes.getAll);
 

data-browser/src/helpers/AppSettings.tsx

@@ -39,7 +39,7 @@ export const AppSettingsContextProvider = (
     setBaseURL(url.origin);
   }
 
-  const setAgentToast = (newAgent: Agent | undefined) => {
+  const setAgentAndShowToast = (newAgent: Agent | undefined) => {
     try {
       setAgent(newAgent);
       newAgent?.subject && toast.success('Signed in!');
@@ -67,7 +67,7 @@ export const AppSettingsContextProvider = (
         sideBarLocked,
         setSideBarLocked,
         agent,
-        setAgent: setAgentToast,
+        setAgent: setAgentAndShowToast,
       }}
     >
       {props.children}

data-browser/src/helpers/agentStorage.tsx

@@ -0,0 +1,27 @@
+import { Agent } from '@tomic/react';
+
+const AGENT_LOCAL_STORAGE_KEY = 'agent';
+
+export function getAgentFromLocalStorage(): Agent | undefined {
+  const secret = localStorage.getItem(AGENT_LOCAL_STORAGE_KEY);
+
+  if (!secret) {
+    return undefined;
+  }
+
+  try {
+    return Agent.fromSecret(secret);
+  } catch (e) {
+    console.error(e);
+
+    return undefined;
+  }
+}
+
+export function saveAgentToLocalStorage(agent: Agent | undefined): void {
+  if (agent) {
+    localStorage.setItem(AGENT_LOCAL_STORAGE_KEY, agent.buildSecret());
+  } else {
+    localStorage.removeItem(AGENT_LOCAL_STORAGE_KEY);
+  }
+}

data-browser/tests/e2e.spec.ts

@@ -334,8 +334,8 @@ test.describe('data-browser', async () => {
       page.click('button:has-text("Upload file")'),
     ]);
     await fileChooser.setFiles(demoFile);
-    await page.click(`[data-test]:has-text("${demoFileName}")`);
-    const image = await page.locator('[data-test="image-viewer"]');
+    await page.click(`a:has-text("${demoFileName}")`);
+    const image = page.locator('[data-test="image-viewer"]');
     await expect(image).toBeVisible();
     await expect(image).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
   });
@@ -387,10 +387,10 @@ test.describe('data-browser', async () => {
     // Fetch `example.com
     const input = page.locator('[placeholder="https\\:\\/\\/example\\.com"]');
     await input.click();
-    await input.fill('https://example.com');
+    await input.fill('https://ontola.io');
     await page.locator(currentDialogOkButton).click();
 
-    await expect(page.locator('text=This domain is ')).toBeVisible();
+    await expect(page.locator(':text-is("Full-service")')).toBeVisible();
   });
 
   test('folder', async ({ page }) => {
@@ -525,7 +525,6 @@ test.describe('data-browser', async () => {
     const d1 = 'depth1';
     await setTitle(d1);
 
-    // Not sure why we need this, I'd prefer to wait for commits...
     await expect(
       page.locator(`[data-test="sidebar"] >> text=${d1}`),
     ).toBeVisible();

data-browser/tests/test-config.ts

@@ -3,7 +3,7 @@ const demoFileName = 'testimage.svg';
 
 export const testConfig: TestConfig = {
   demoFileName,
-  demoFile: `./tests/${demoFileName}`,
+  demoFile: `${process.cwd()}/tests/${demoFileName}`,
   demoInviteName: 'document demo',
   serverUrl: process.env.SERVER_URL || 'http://localhost:9883',
   frontEndUrl: 'http://localhost:5173',

lib/src/agent.ts

@@ -43,11 +43,6 @@ export class Agent implements AgentInterface {
     return agent;
   }
 
-  /** Parses a JSON object containing a privateKey and an Agent subject */
-  public static fromJSON(obj: AgentInterface): Agent {
-    return new Agent(obj.privateKey, obj.subject);
-  }
-
   /** Returns existing public key or generates one using the private key */
   public async getPublicKey(): Promise<string> {
     if (!this.publicKey) {

lib/src/client.ts

@@ -109,7 +109,7 @@ export class Client {
     opts: FetchResourceOptions = {},
   ): Promise<HTTPResult> {
     const { signInfo, from } = opts;
-    const createdResources: Resource[] = [];
+    let createdResources: Resource[] = [];
     const parser = new JSONADParser();
     let resource = new Resource(subject);
 
@@ -170,7 +170,7 @@ export class Client {
       }
     } catch (e) {
       resource.setError(e);
-      createdResources.push(resource);
+      createdResources = [resource];
       console.error(subject, e);
     }
 

lib/src/store.ts

@@ -12,12 +12,21 @@ import {
 import { authenticate, fetchWebSocket, startWebsocket } from './websockets.js';
 
 /** Function called when a resource is updated or removed */
-type Callback = (resource: Resource) => void;
+type ResourceCallback = (resource: Resource) => void;
+/** Callback called when the stores agent changes */
+type AgentCallback = (agent: Agent | undefined) => void;
 
 /** Returns True if the client has WebSocket support */
 const supportsWebSockets = () => typeof WebSocket !== 'undefined';
 type Fetch = typeof fetch;
 
+export interface StoreOpts {
+  /** The default store URL, where to send commits and where to create new instances */
+  serverUrl?: string;
+  /** Default Agent, used for signing commits. Is required for posting things. */
+  agent?: Agent;
+}
+
 export enum StoreEvents {
   /**
    * Whenever `Resource.save()` is called, so only when the user of this library
@@ -31,15 +40,18 @@ export enum StoreEvents {
    * the SideBar.
    */
   ResourceManuallyCreated = 'resource-manually-created',
+  /** Event that gets called whenever the stores agent changes */
+  AgentChanged = 'agent-changed',
 }
 
 /**
  * Handlers are functions that are called when a certain event occurs.
  */
 type StoreEventHandlers = {
-  [StoreEvents.ResourceSaved]: Callback;
-  [StoreEvents.ResourceRemoved]: Callback;
-  [StoreEvents.ResourceManuallyCreated]: Callback;
+  [StoreEvents.ResourceSaved]: ResourceCallback;
+  [StoreEvents.ResourceRemoved]: ResourceCallback;
+  [StoreEvents.ResourceManuallyCreated]: ResourceCallback;
+  [StoreEvents.AgentChanged]: AgentCallback;
 };
 
 /**
@@ -50,7 +62,7 @@ type StoreEventHandlers = {
  */
 export class Store {
   /** A list of all functions that need to be called when a certain resource is updated */
-  public subscribers: Map<string, Array<Callback>>;
+  public subscribers: Map<string, Array<ResourceCallback>>;
   /**
    * Is called when the store encounters an error. By default simply throws the
    * error, but can be overwritten
@@ -73,14 +85,7 @@ export class Store {
 
   private client: Client;
 
-  public constructor(
-    opts: {
-      /** The default store URL, where to send commits and where to create new instances */
-      serverUrl?: string;
-      /** Default Agent, used for signing commits. Is required for posting things. */
-      agent?: Agent;
-    } = {},
-  ) {
+  public constructor(opts: StoreOpts = {}) {
     this._resources = new Map();
     this.webSockets = new Map();
     this.subscribers = new Map();
@@ -91,6 +96,10 @@ export class Store {
     this.errorHandler = (e: Error) => {
       throw e;
     };
+
+    // We need to bind this method because it is passed down by other functions
+    this.getAgent = this.getAgent.bind(this);
+    this.setAgent = this.setAgent.bind(this);
   }
 
   /** All the resources of the store */
@@ -195,10 +204,15 @@ export class Store {
     ) {
       fetchWebSocket(ws, subject);
     } else {
+      const signInfo = this.agent
+        ? { agent: this.agent, serverURL: this.getServerUrl() }
+        : undefined;
+
       const [_, createdResources] = await this.client.fetchResourceHTTP(
         subject,
         {
           from: opts.fromProxy ? this.getServerUrl() : undefined,
+          signInfo,
         },
       );
 
@@ -440,15 +454,19 @@ export class Store {
 
     if (agent) {
       setCookieAuthentication(this.serverUrl, agent);
+
       this.webSockets.forEach(ws => {
         authenticate(ws, this);
       });
+
       this.resources.forEach(r => {
         if (r.isUnauthorized()) {
           this.fetchResourceFromServer(r.getSubject());
         }
       });
     }
+
+    this.eventManager.emit(StoreEvents.AgentChanged, agent);
   }
 
   /** Sets the Server base URL, without the trailing slash. */
@@ -483,7 +501,7 @@ export class Store {
    * this, you should probably also call .unsubscribe some time later.
    */
   // TODO: consider subscribing to properties, maybe add a second subscribe function, use that in useValue
-  public subscribe(subject: string, callback: Callback): void {
+  public subscribe(subject: string, callback: ResourceCallback): void {
     if (subject === undefined) {
       throw Error('Cannot subscribe to undefined subject');
     }
@@ -533,7 +551,7 @@ export class Store {
   }
 
   /** Unregisters the callback (see `subscribe()`) */
-  public unsubscribe(subject: string, callback: Callback): void {
+  public unsubscribe(subject: string, callback: ResourceCallback): void {
     if (subject === undefined) {
       return;
     }