Fix new resource dialog for new resources

Author: Polleps

browser/CHANGELOG.md

@@ -4,7 +4,12 @@ This changelog covers all three packages, as they are (for now) updated as a who
 
 ## UNRELEASED
 
+### @tomic/lib
+
+- When saving a resource whose parent has not yet been saved we now add them to a batch that gets saved later when the parent is saved.
 - The `scope` option in `SearchOpts` has changed to `parents` and now accepts an array of subjects instead of a single subject.
+- BREAKING: Removed `getCommitBuilder()` method from `Resource`
+- Added `hasUnsavedChanges()` method to `Resource`
 
 ### Atomic Browser
 

browser/data-browser/src/components/forms/NewForm/NewFormDialog.tsx

@@ -1,4 +1,4 @@
-import { JSONValue, useResource, useStore, useTitle } from '@tomic/react';
+import { Core, JSONValue, useResource, useStore, useTitle } from '@tomic/react';
 import React, { useState, useCallback } from 'react';
 import { useEffectOnce } from '../../../hooks/useEffectOnce';
 import { Button } from '../../Button';
@@ -28,7 +28,7 @@ export const NewFormDialog = ({
   onSave,
   parent,
 }: NewFormDialogProps): JSX.Element => {
-  const klass = useResource(classSubject);
+  const klass = useResource<Core.Class>(classSubject);
   const [className] = useTitle(klass);
   const store = useStore();
 

browser/data-browser/src/components/forms/NewForm/useNewForm.ts

@@ -5,13 +5,14 @@ import {
   useStore,
   useResource,
   useArray,
+  Core,
 } from '@tomic/react';
 import { useState, useEffect } from 'react';
 
 const resourseOpts = { newResource: true };
 
 type UseNewForm = {
-  klass: Resource;
+  klass: Resource<Core.Class>;
   setSubject: (v: string) => void;
   initialSubject?: string;
   parent?: string;
@@ -22,10 +23,9 @@ export const useNewForm = (args: UseNewForm) => {
   const { klass, setSubject, initialSubject, parent } = args;
 
   const store = useStore();
-  const [klassShortname] = useString(klass, properties.shortname);
   const [subjectValue, setSubjectValueInternal] = useState<string>(() => {
     if (initialSubject === undefined) {
-      return store.createSubject(klassShortname);
+      return store.createSubject(klass.props.shortname);
     }
 
     return initialSubject;

browser/data-browser/src/components/forms/hooks/useSaveResource.ts

@@ -16,7 +16,7 @@ export type UseSaveResourceResult = [
  */
 export const useSaveResource = (
   resource: Resource,
-  onSaveSucces: () => void = () => void 0,
+  onSaveSucces?: () => void,
 ): UseSaveResourceResult => {
   const store = useStore();
   const [saving, setSaving] = useState(false);
@@ -31,7 +31,7 @@ export const useSaveResource = (
       try {
         await resource.save(store);
         setSaving(false);
-        onSaveSucces();
+        onSaveSucces?.();
         toast.success('Resource saved');
 
         if (resource.new) {

browser/data-browser/src/routes/DataRoute.tsx

@@ -101,7 +101,7 @@ function Data(): JSX.Element {
             <AtomicLink subject={subject}>{subject}</AtomicLink>
           </PropValRow>
           <AllProps resource={resource} editable columns />
-          {resource.getCommitBuilder().hasUnsavedChanges() ? (
+          {resource.hasUnsavedChanges() ? (
             <>
               <h2>⚠️ contains uncommitted changes</h2>
               <p>

browser/data-browser/src/routes/ShareRoute.tsx

@@ -169,7 +169,7 @@ export function ShareRoute(): JSX.Element {
           {canWrite && (
             <span>
               <Button
-                disabled={!resource.getCommitBuilder().hasUnsavedChanges()}
+                disabled={!resource.hasUnsavedChanges()}
                 onClick={handleSave}
               >
                 Save

browser/lib/src/resource.test.ts

@@ -36,12 +36,5 @@ describe('resource.ts', () => {
       testsubject,
       testsubject,
     ]);
-
-    resource.getCommitBuilder().push[urls.properties.subResources] = [
-      testsubject,
-      testsubject2,
-      testsubject,
-      testsubject,
-    ];
   });
 });

browser/lib/src/resource.ts

@@ -18,6 +18,7 @@ import {
   QuickAccesPropType,
   getKnownNameBySubject,
   OptionalClass,
+  core,
 } from './index.js';
 
 /** Contains the PropertyURL / Value combinations */
@@ -239,12 +240,9 @@ export class Resource<C extends OptionalClass = any> {
     return this.set(properties.isA, Array.from(classesSet), store);
   }
 
-  /**
-   * Returns the current Commit Builder, which describes the pending changes of
-   * the resource
-   */
-  public getCommitBuilder(): CommitBuilder {
-    return this.commitBuilder;
+  /** Returns true if the resource has changes in it's commit builder that are not yet saved to the server. */
+  public hasUnsavedChanges(): boolean {
+    return this.commitBuilder.hasUnsavedChanges();
   }
 
   public getCommitsCollection(): string {
@@ -446,6 +444,13 @@ export class Resource<C extends OptionalClass = any> {
       throw new Error('No agent has been set or passed, you cannot save.');
     }
 
+    // If the parent of this resource is new we can't save yet so we add it to a batched that gets saved when the parent does.
+    if (this.isParentNew(store)) {
+      store.batchResource(this.getSubject());
+
+      return;
+    }
+
     // The previousCommit is required in Commits. We should use the `lastCommit` value on the resource.
     // This makes sure that we're making adjustments to the same version as the server.
     const lastCommit = this.get(properties.commit.lastCommit)?.toString();
@@ -500,6 +505,9 @@ export class Resource<C extends OptionalClass = any> {
         // That's why we need to repeat the process
         // https://github.com/atomicdata-dev/atomic-data-rust/issues/486
         store.subscribeWebSocket(this.subject);
+
+        // Save any children that have been batched while creating this resource
+        await store.saveBatchForParent(this.getSubject());
       }
 
       // Let all subscribers know that the commit has been applied
@@ -615,6 +623,18 @@ export class Resource<C extends OptionalClass = any> {
 
     return ownValue === value;
   }
+
+  private isParentNew(store: Store) {
+    const parentSubject = this.propvals.get(core.properties.parent) as string;
+
+    if (!parentSubject) {
+      return false;
+    }
+
+    const parent = store.getResourceLoading(parentSubject);
+
+    return parent.new;
+  }
 }
 
 /** Type of Rights (e.g. read or write) */

browser/lib/src/store.ts

@@ -18,6 +18,7 @@ import {
   OptionalClass,
   UnknownClass,
   Server,
+  core,
 } from './index.js';
 import { authenticate, fetchWebSocket, startWebsocket } from './websockets.js';
 
@@ -89,6 +90,10 @@ export class Store {
   private serverUrl: string;
   /** All the resources of the store */
   private _resources: Map<string, Resource>;
+
+  /** List of resources that have parents that are not saved to the server, when a parent is saved it should also save its children */
+  private batchedResources: Map<string, Set<string>> = new Map();
+
   /** Current Agent, used for signing commits. Is required for posting things. */
   private agent?: Agent;
   /** Mapped from origin to websocket */
@@ -478,7 +483,9 @@ export class Store {
     }
 
     // We clone for react, because otherwise it won't rerender
-    Promise.allSettled(callbacks.map(async cb => cb(resource.clone())));
+    const cloned = resource.clone();
+    this._resources.set(subject, cloned);
+    Promise.allSettled(callbacks.map(async cb => cb(cloned)));
   }
 
   public async notifyResourceSaved(resource: Resource): Promise<void> {
@@ -772,6 +779,52 @@ export class Store {
     return Array.from(this.resources.values()).filter(filter);
   }
 
+  /**
+   * @Internal
+   * Add the resource to a batch that is saved when the parent is saved. Only gets saved when the parent is new.
+   */
+  public batchResource(subject: string) {
+    const resource = this._resources.get(subject);
+
+    if (!resource) {
+      throw new Error(
+        `Resource ${subject} can not be saved because it is not in the store.`,
+      );
+    }
+
+    const parent = resource.get(core.properties.parent);
+
+    if (parent === undefined) {
+      throw new Error(
+        `Resource ${subject} can not be added to a batch because it's missing a parent.`,
+      );
+    }
+
+    if (!this.batchedResources.has(parent)) {
+      this.batchedResources.set(parent, new Set([subject]));
+    } else {
+      this.batchedResources.get(parent)!.add(subject);
+    }
+  }
+
+  /**
+   * @Internal
+   * Saves all resources that are in a batch for a parent.
+   */
+  public async saveBatchForParent(subject: string) {
+    const subjects = this.batchedResources.get(subject);
+
+    if (!subjects) return;
+
+    for (const resourceSubject of subjects) {
+      const resource = this._resources.get(resourceSubject);
+
+      await resource?.save(this);
+    }
+
+    this.batchedResources.delete(subject);
+  }
+
   private randomPart(): string {
     return Math.random().toString(36).substring(2);
   }