#863 More JS API Changes

browser/data-browser/src/components/forms/NewForm/CustomCreateActions/BasicInstanceHandlers.ts

@@ -63,12 +63,10 @@ export const registerBasicInstanceHandlers = () => {
       });
 
       // resources created with createAndNavigate have a parent by default which we don't want for drives.
-      newResource.removePropVal(core.properties.parent);
+      newResource.remove(core.properties.parent);
 
       const agentResource = await store.getResource(agent.subject);
-      agentResource.pushPropVal(server.properties.drives, [
-        newResource.subject,
-      ]);
+      agentResource.push(server.properties.drives, [newResource.subject]);
       agentResource.save();
       settings.setDrive(newResource.subject);
     },

browser/data-browser/src/components/forms/ResourceForm.tsx

@@ -163,7 +163,7 @@ export function ResourceForm({
   }
 
   function handleDelete(propertyURL: string) {
-    resource.removePropVal(propertyURL);
+    resource.remove(propertyURL);
     setTempOtherProps(tempOtherProps.filter(prop => prop !== propertyURL));
   }
 

browser/data-browser/src/handlers/sideBarHandler.ts

@@ -18,7 +18,7 @@ export function buildSideBarNewResourceHandler(store: Store) {
       return;
     }
 
-    parent.pushPropVal(dataBrowser.properties.subResources, [resource.subject]);
+    parent.push(dataBrowser.properties.subResources, [resource.subject]);
 
     await parent.save();
   };

browser/data-browser/src/routes/History/HistoryRoute.tsx

@@ -6,7 +6,7 @@ import { useCurrentSubject } from '../../helpers/useCurrentSubject';
 import { ErrorLook } from '../../components/ErrorLook';
 import { styled } from 'styled-components';
 import { useVersions } from './useVersions';
-import { groupVersionsByMonth, setResourceToVersion } from './versionHelpers';
+import { groupVersionsByMonth } from './versionHelpers';
 import { toast } from 'react-hot-toast';
 import { useNavigateWithTransition } from '../../hooks/useNavigateWithTransition';
 import { constructOpenURL } from '../../helpers/navigation';
@@ -37,7 +37,8 @@ export function History(): JSX.Element {
 
   const setResourceToCurrentVersion = async () => {
     if (selectedVersion && subject) {
-      await setResourceToVersion(resource, selectedVersion);
+      await resource.setVersion(selectedVersion);
+
       toast.success('Resource version updated');
       navigate(constructOpenURL(subject));
     }

browser/data-browser/src/routes/History/versionHelpers.ts

@@ -1,4 +1,4 @@
-import { Resource, Version } from '@tomic/react';
+import { Version } from '@tomic/react';
 
 const groupFormatter = new Intl.DateTimeFormat('default', {
   month: 'long',
@@ -35,26 +35,6 @@ export function dedupeVersions(versions: Version[]): Version[] {
   return filtered;
 }
 
-export async function setResourceToVersion(
-  resource: Resource,
-  version: Version,
-): Promise<void> {
-  const versionPropvals = version.resource.getPropVals();
-
-  // Remove any prop that doesn't exist in the version
-  for (const prop of resource.getPropVals().keys()) {
-    if (!versionPropvals.has(prop)) {
-      resource.removePropVal(prop);
-    }
-  }
-
-  for (const [key, value] of versionPropvals.entries()) {
-    await resource.set(key, value);
-  }
-
-  await resource.save();
-}
-
 export function groupVersionsByMonth(
   versions: Version[],
 ): Record<string, Version[]> {

browser/data-browser/src/views/OntologyPage/Class/AddPropertyButton.tsx

@@ -1,4 +1,4 @@
-import { Resource, Store, core, urls, useStore } from '@tomic/react';
+import { Datatype, Resource, Store, core, useStore } from '@tomic/react';
 import { useRef, useState } from 'react';
 import { styled } from 'styled-components';
 import { transition } from '../../../helpers/transition';
@@ -24,7 +24,7 @@ async function newProperty(shortname: string, parent: Resource, store: Store) {
     propVals: {
       [core.properties.shortname]: shortname,
       [core.properties.description]: 'a property',
-      [core.properties.datatype]: urls.datatypes.string,
+      [core.properties.datatype]: Datatype.STRING,
     },
   });
 
@@ -53,9 +53,9 @@ export function AddPropertyButton({
 
     const creatorProp =
       type === 'required'
-        ? urls.properties.requires
-        : urls.properties.recommends;
-    creator.pushPropVal(creatorProp, [newValue]);
+        ? core.properties.requires
+        : core.properties.recommends;
+    creator.push(creatorProp, [newValue]);
     await creator.save();
   };
 
@@ -75,7 +75,7 @@ export function AddPropertyButton({
           autoFocus
           value=''
           onChange={handleSetValue}
-          isA={urls.classes.property}
+          isA={core.classes.property}
           onClose={() => setActive(false)}
           onCreateItem={handleCreateProperty}
         />

browser/data-browser/src/views/OntologyPage/CreateInstanceButton.tsx

@@ -32,7 +32,7 @@ export function CreateInstanceButton({ ontology }: CreateInstanceButtonProps) {
   };
 
   const handleSave = (subject: string) => {
-    ontology.pushPropVal(core.properties.instances, [subject], true);
+    ontology.push(core.properties.instances, [subject], true);
     ontology.save();
   };
 

browser/data-browser/src/views/OntologyPage/newClass.ts

@@ -24,7 +24,7 @@ export async function newClass(
 
   await resource.save();
 
-  parent.pushPropVal(core.properties.classes, [subject]);
+  parent.push(core.properties.classes, [subject]);
 
   await parent.save();
 

browser/data-browser/src/views/TablePage/EditorCells/AtomicURLCell.tsx

@@ -2,6 +2,8 @@ import {
   Core,
   JSONValue,
   Resource,
+  core,
+  server,
   unknownSubject,
   urls,
   useArray,
@@ -215,13 +217,18 @@ function AtomicURLCellDisplay({
   value,
 }: DisplayCellProps<JSONValue>): JSX.Element {
   const resource = useResource(value as string);
-  const [[classType]] = useArray(resource, urls.properties.isA);
 
   if (!value) {
     return <></>;
   }
 
-  const Comp = getCellComponent(classType);
+  const Comp = resource.matchClass(
+    {
+      [core.classes.agent]: AgentCell,
+      [server.classes.file]: FileCell,
+    },
+    BasicCell,
+  );
 
   return <Comp resource={resource} />;
 }
@@ -232,17 +239,6 @@ function BasicCell({ resource }: ResourceCellProps) {
   return <SimpleResourceLink resource={resource}>{title}</SimpleResourceLink>;
 }
 
-const getCellComponent = (classType: string) => {
-  switch (classType) {
-    case urls.classes.agent:
-      return AgentCell;
-    case urls.classes.file:
-      return FileCell;
-    default:
-      return BasicCell;
-  }
-};
-
 interface ResultProps {
   subject: string;
   onClick: (subject: string) => void;

browser/data-browser/src/views/TablePage/PropertyForm/NumberPropertyForm.tsx

@@ -42,8 +42,8 @@ export const NumberPropertyForm = ({
       await resource.addClasses(dataBrowser.classes.currencyProperty);
       await setDataType(Datatype.FLOAT);
     } else {
-      await resource.removeClasses(dataBrowser.classes.currencyProperty);
-      resource.removePropVal(dataBrowser.properties.currency);
+      resource.removeClasses(dataBrowser.classes.currencyProperty);
+      resource.remove(dataBrowser.properties.currency);
     }
   };
 

browser/lib/src/collection.ts

@@ -1,4 +1,5 @@
 import { isNumber } from './datatypes.js';
+import { Collections, collections } from './ontologies/collections.js';
 import { Resource } from './resource.js';
 import { Store } from './store.js';
 import { urls } from './urls.js';
@@ -14,6 +15,11 @@ export interface CollectionParams extends QueryFilter {
   page_size: string;
 }
 
+export interface CollectionOptions {
+  noFetch?: boolean;
+  endpoint?: string;
+}
+
 /**
  * A collection is a dynamic resource that queries the server for a list of resources that meet it's criteria.
  * Checkout [the docs](https://docs.atomicdata.dev/schema/collections.html) for more information.
@@ -24,7 +30,7 @@ export interface CollectionParams extends QueryFilter {
 export class Collection {
   public readonly __internalObject = this;
   private store: Store;
-  private pages = new Map<number, Resource>();
+  private pages = new Map<number, Resource<Collections.Collection>>();
   private server: string;
   private params: CollectionParams;
 
@@ -73,6 +79,10 @@ export class Collection {
     return this._totalMembers;
   }
 
+  public get numberOfPages(): number {
+    return Math.ceil(this.totalMembers / this.pageSize);
+  }
+
   public waitForReady(): Promise<void> {
     return this._waitForReady;
   }
@@ -90,9 +100,7 @@ export class Collection {
     }
 
     const resource = this.pages.get(page)!;
-    const members = resource.getArray(
-      urls.properties.collection.members,
-    ) as string[];
+    const members = resource.getSubjects(collections.properties.members);
 
     return members[index % this.pageSize];
   }
@@ -121,7 +129,7 @@ export class Collection {
     await this.waitForReady();
 
     for (let i = 0; i < this.totalMembers; i++) {
-      yield this.getMemberWithIndex(i);
+      yield await this.getMemberWithIndex(i);
     }
   }
 
@@ -141,6 +149,16 @@ export class Collection {
     return members;
   }
 
+  public async getMembersOnPage(page: number): Promise<string[]> {
+    if (!this.pages.has(page)) {
+      await this.fetchPage(page);
+    }
+
+    const resource = this.pages.get(page)!;
+
+    return resource.props.members ?? [];
+  }
+
   private buildSubject(page: number): string {
     const url = new URL(`${this.server}/query`);
 

browser/lib/src/collectionBuilder.ts

@@ -48,7 +48,7 @@ export class CollectionBuilder {
     return new Collection(this.store, this.server, this.params);
   }
 
-  public async buildAndFetch() {
+  public async buildAndFetch(): Promise<Collection> {
     const collection = this.build();
 
     await collection.waitForReady();

browser/lib/src/resource.test.ts

@@ -5,16 +5,16 @@ describe('resource.ts', () => {
   it('push propvals', () => {
     const resource = new Resource('test');
     const testsubject = 'https://example.com/testsubject';
-    resource.pushPropVal(urls.properties.subResources, [testsubject], true);
-    resource.pushPropVal(urls.properties.subResources, [testsubject], true);
+    resource.push(urls.properties.subResources, [testsubject], true);
+    resource.push(urls.properties.subResources, [testsubject], true);
 
     expect(resource.get(urls.properties.subResources)).toStrictEqual([
       testsubject,
     ]);
 
     const testsubject2 = 'https://example.com/testsubject2';
 
-    resource.pushPropVal(
+    resource.push(
       urls.properties.subResources,
       [testsubject2, testsubject2],
       true,
@@ -25,10 +25,7 @@ describe('resource.ts', () => {
       testsubject2,
     ]);
 
-    resource.pushPropVal(urls.properties.subResources, [
-      testsubject,
-      testsubject,
-    ]);
+    resource.push(urls.properties.subResources, [testsubject, testsubject]);
 
     expect(resource.get(urls.properties.subResources)).toStrictEqual([
       testsubject,