#711 #593 Default to ULID for subjects

Polleps · Polleps · commit b06abb87f754 · 2024-04-22T16:05:11.000+02:00
diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
@@ -26,6 +26,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - Added `collection.totalPages`.
 - BREAKING CHANGE: Renamed `resource.getCommitsCollection` to `resource.getCommitsCollectionSubject`.
 - BREAKING CHANGE: `resource.getChildrenCollection()` now returns a `Promise<Collection>` instead of a subject.
+- BREAKING CHANGE: `resource.createSubject()` no longer accepts a class name as an argument and defaults to a fully random subject.
 - BREAKING CHANGE: Resource now keeps a reference to store internally, therefore all methods that required you to pass a store have been changed to not require a store.
   These methods are:
   - `resource.canWrite()`
diff --git a/browser/data-browser/src/components/InviteForm.tsx b/browser/data-browser/src/components/InviteForm.tsx
@@ -26,7 +26,7 @@ interface InviteFormProps {
  */
 export function InviteForm({ target }: InviteFormProps) {
   const store = useStore();
-  const [subject] = useState(() => store.createSubject('invite'));
+  const [subject] = useState(() => store.createSubject());
   const invite = useResource(subject, {
     newResource: true,
   });
@@ -59,7 +59,7 @@ export function InviteForm({ target }: InviteFormProps) {
     return (
       <Card>
         <ResourceField
-          label={'Give edit rights'}
+          label={'Allow edits'}
           propertyURL={server.properties.write}
           resource={invite}
         />
@@ -69,11 +69,11 @@ export function InviteForm({ target }: InviteFormProps) {
           resource={invite}
         />
         <ResourceField
-          label={'How many times this link can be used. No value = no limit.'}
+          label={'Limit Usages (optional)'}
           propertyURL={server.properties.usagesLeft}
           resource={invite}
         />
-        <Button onClick={createInvite}>Create Invite</Button>
+        <Button onClick={createInvite}>Create</Button>
         {err && (
           <p>
             <ErrorLook>{err.message}</ErrorLook>
@@ -84,7 +84,7 @@ export function InviteForm({ target }: InviteFormProps) {
   } else
     return (
       <Card>
-        <p>Invite created and copied to clipboard! Send it to your buddy:</p>
+        <p>Invite created and copied to clipboard! 🚀</p>
         <CodeBlock content={invite.subject} data-test='invite-code' />
       </Card>
     );
diff --git a/browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewTableDialog.tsx b/browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewTableDialog.tsx
@@ -49,7 +49,6 @@ export const NewTableDialog: FC<NewTableDialogProps> = ({
 
     if (!useExistingClass) {
       const instanceResource = await store.newResource({
-        subject: store.createSubject('class'),
         isA: core.classes.class,
         propVals: {
           [core.properties.shortname]: stringToSlug(name),
diff --git a/browser/data-browser/src/components/forms/NewForm/NewFormDialog.tsx b/browser/data-browser/src/components/forms/NewForm/NewFormDialog.tsx
@@ -1,4 +1,4 @@
-import { Core, JSONValue, useResource, useStore, useTitle } from '@tomic/react';
+import { Core, JSONValue, useResource, useStore } from '@tomic/react';
 import { useState, useCallback } from 'react';
 import { useEffectOnce } from '../../../hooks/useEffectOnce';
 import { Button } from '../../Button';
@@ -11,7 +11,6 @@ import { NewFormProps } from './NewFormPage';
 import { NewFormTitle, NewFormTitleVariant } from './NewFormTitle';
 import { SubjectField } from './SubjectField';
 import { useNewForm } from './useNewForm';
-import { getNamePartFromProps } from '../../../helpers/getNamePartFromProps';
 
 export interface NewFormDialogProps extends NewFormProps {
   closeDialog: (success?: boolean) => void;
@@ -29,7 +28,6 @@ export const NewFormDialog = ({
   parent,
 }: NewFormDialogProps): JSX.Element => {
   const klass = useResource<Core.Class>(classSubject);
-  const [className] = useTitle(klass);
   const store = useStore();
 
   const [subject, setSubject] = useState<string>();
@@ -49,14 +47,7 @@ export const NewFormDialog = ({
   // Onmount we generate a new subject based on the classtype and the user input.
   useEffectOnce(() => {
     (async () => {
-      const namePart = getNamePartFromProps(initialProps ?? {});
-
-      const uniqueSubject = await store.buildUniqueSubjectFromParts(
-        [className, namePart],
-        parent,
-      );
-
-      await setSubjectValue(uniqueSubject);
+      await setSubjectValue(store.createSubject());
 
       for (const [prop, value] of Object.entries(initialProps ?? {})) {
         await resource.set(prop, value);
diff --git a/browser/data-browser/src/components/forms/NewForm/useNewForm.ts b/browser/data-browser/src/components/forms/NewForm/useNewForm.ts
@@ -27,7 +27,7 @@ export const useNewForm = (args: UseNewForm) => {
 
   const [subjectValue, setSubjectValueInternal] = useState<string>(() => {
     if (initialSubject === undefined) {
-      return store.createSubject(klass.props.shortname);
+      return store.createSubject();
     }
 
     return initialSubject;
@@ -46,7 +46,7 @@ export const useNewForm = (args: UseNewForm) => {
       }
 
       if (isAVal.length === 0) {
-        await resource.addClasses(klass.getSubject());
+        await resource.addClasses(klass.subject);
       }
 
       setInitialized(true);
diff --git a/browser/data-browser/src/components/forms/NewForm/useNewResourceUI.tsx b/browser/data-browser/src/components/forms/NewForm/useNewResourceUI.tsx
@@ -1,4 +1,4 @@
-import { Core, Store, useStore } from '@tomic/react';
+import { Store, useStore } from '@tomic/react';
 import {
   FC,
   PropsWithChildren,
@@ -107,10 +107,7 @@ export function NewResourceUIProvider({ children }: PropsWithChildren) {
     }
 
     // Default behaviour. Navigate to a new resource form for the given class.
-    const classResource = await store.getResource<Core.Class>(isA);
-    navigate(
-      newURL(isA, parent, store.createSubject(classResource.props.shortname)),
-    );
+    navigate(newURL(isA, parent, store.createSubject()));
   }, []);
 
   const context = useMemo(
diff --git a/browser/data-browser/src/components/forms/ResourceField.tsx b/browser/data-browser/src/components/forms/ResourceField.tsx
@@ -45,9 +45,8 @@ function ResourceField({
   }
 
   const label =
-    labelProp || property.error
-      ? generateErrorPropName(property)
-      : property.shortname;
+    labelProp ??
+    (property.error ? generateErrorPropName(property) : property.shortname);
 
   if (property.isDynamic) {
     return (
diff --git a/browser/data-browser/src/helpers/getNamePartFromProps.ts b/browser/data-browser/src/helpers/getNamePartFromProps.ts
diff --git a/browser/data-browser/src/hooks/useCreateAndNavigate.ts b/browser/data-browser/src/hooks/useCreateAndNavigate.ts
@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import { constructOpenURL } from '../helpers/navigation';
-import { getNamePartFromProps } from '../helpers/getNamePartFromProps';
 
 export type CreateAndNavigate = (
   isA: string,
@@ -34,14 +33,7 @@ export function useCreateAndNavigate(): CreateAndNavigate {
     ): Promise<Resource> => {
       const classResource = await store.getResource<Core.Class>(isA);
 
-      const namePart = getNamePartFromProps(propVals);
-      const newSubject = await store.buildUniqueSubjectFromParts(
-        [classResource.props.shortname, namePart],
-        parent,
-      );
-
       const resource = await store.newResource({
-        subject: newSubject,
         isA,
         parent,
         propVals,
@@ -54,7 +46,7 @@ export function useCreateAndNavigate(): CreateAndNavigate {
           await onCreated(resource);
         }
 
-        navigate(constructOpenURL(newSubject, extraParams));
+        navigate(constructOpenURL(resource.subject, extraParams));
         toast.success(`${classResource.title} created`);
         store.notifyResourceManuallyCreated(resource);
       } catch (e) {
diff --git a/browser/data-browser/src/routes/ShareRoute.tsx b/browser/data-browser/src/routes/ShareRoute.tsx
@@ -15,6 +15,7 @@ import { useNavigate } from 'react-router-dom';
 import { ErrorLook } from '../components/ErrorLook';
 import { Column } from '../components/Row';
 import { Main } from '../components/Main';
+import { FaShare } from 'react-icons/fa6';
 
 /** Form for managing and viewing rights for this resource */
 export function ShareRoute(): JSX.Element {
@@ -138,13 +139,14 @@ export function ShareRoute(): JSX.Element {
           {canWrite && !showInviteForm && (
             <span>
               <Button onClick={() => setShowInviteForm(true)}>
-                Send Invite...
+                <FaShare />
+                Create Invite
               </Button>
             </span>
           )}
           {showInviteForm && <InviteForm target={resource} />}
           <Card>
-            <RightsHeader text='rights set here:' />
+            <RightsHeader text='Rights set here:' />
             <CardInsideFull>
               {/* This key might be a bit too much, but the component wasn't properly re-rendering before */}
               {constructAgentProps().map(right => (
@@ -171,7 +173,7 @@ export function ShareRoute(): JSX.Element {
           {err && <ErrorLook>{err.message}</ErrorLook>}
           {inheritedRights.length > 0 && (
             <Card>
-              <RightsHeader text='inherited rights:' />
+              <RightsHeader text='Inherited rights:' />
               <CardInsideFull>
                 {inheritedRights.map(right => (
                   <AgentRights
diff --git a/browser/data-browser/src/views/ChatRoomPage.tsx b/browser/data-browser/src/views/ChatRoomPage.tsx
@@ -74,7 +74,7 @@ export function ChatRoomPage({ resource }: ResourcePageProps) {
       e && e.preventDefault();
 
       if (!disableSend) {
-        const subject = store.createSubject('messages', resource.getSubject());
+        const subject = store.createSubject(resource.subject);
 
         const msgResource = await store.newResource({
           subject,
diff --git a/browser/data-browser/src/views/DocumentPage.tsx b/browser/data-browser/src/views/DocumentPage.tsx
@@ -186,7 +186,7 @@ function DocumentPageEdit({
   async function addElement(position: number) {
     // When an element is created, it should be a Resource that has this document as its parent.
     // or maybe a nested resource?
-    const elementSubject = store.createSubject('element', resource.subject);
+    const elementSubject = store.createSubject(resource.subject);
     const newElements = [...elements];
     newElements.splice(position, 0, elementSubject);
 
diff --git a/browser/lib/package.json b/browser/lib/package.json
@@ -6,7 +6,8 @@
     "@noble/hashes": "^0.5.7",
     "base64-arraybuffer": "^1.0.2",
     "cross-fetch": "^3.1.4",
-    "fast-json-stable-stringify": "^2.1.0"
+    "fast-json-stable-stringify": "^2.1.0",
+    "ulid": "^2.3.0"
   },
   "description": "",
   "devDependencies": {
diff --git a/browser/lib/src/store.ts b/browser/lib/src/store.ts
@@ -1,3 +1,4 @@
+import { ulid } from 'ulid';
 import {
   removeCookieAuthentication,
   setCookieAuthentication,
@@ -221,7 +222,7 @@ export class Store {
     const { subject, parent, isA, propVals } = options;
 
     const normalizedIsA = Array.isArray(isA) ? isA : [isA];
-    const newSubject = subject ?? this.createSubject(normalizedIsA[0], parent);
+    const newSubject = subject ?? this.createSubject();
 
     const resource = this.getResourceLoading(newSubject, { newResource: true });
 
@@ -295,16 +296,13 @@ export class Store {
     return this.findAvailableSubject(path, parentUrl);
   }
 
-  /** Creates a random URL. Add a classnme (e.g. 'persons') to make a nicer name */
-  public createSubject(className?: string, parentSubject?: string): string {
-    const random = this.randomPart();
-    className = className ? className : 'things';
-
+  /** Creates a random subject url. You can pass a parent subject if you want that to be included in the url. */
+  public createSubject(parentSubject?: string): string {
     if (parentSubject) {
-      return `${parentSubject}/${className}/${random}`;
+      return `${parentSubject}/${this.randomPart()}`;
     }
 
-    return `${this.getServerUrl()}/${className}/${random}`;
+    return new URL(`/${this.randomPart()}`, this.serverUrl).toString();
   }
 
   /**
@@ -508,7 +506,7 @@ export class Store {
   /** Gets a property by URL. */
   public async getProperty(subject: string): Promise<Property> {
     // This leads to multiple fetches!
-    const resource = await this.getResourceAsync(subject);
+    const resource = await this.getResource(subject);
 
     if (resource === undefined) {
       throw Error(`Property ${subject} is not found`);
@@ -518,31 +516,31 @@ export class Store {
       throw Error(`Property ${subject} cannot be loaded: ${resource.error}`);
     }
 
-    const datatypeUrl = resource.get(urls.properties.datatype);
+    const datatypeUrl = resource.get(core.properties.datatype);
 
     if (datatypeUrl === undefined) {
       throw Error(
         `Property ${subject} has no datatype: ${resource.getPropVals()}`,
       );
     }
 
-    const shortname = resource.get(urls.properties.shortname);
+    const shortname = resource.get(core.properties.shortname);
 
     if (shortname === undefined) {
       throw Error(
         `Property ${subject} has no shortname: ${resource.getPropVals()}`,
       );
     }
 
-    const description = resource.get(urls.properties.description);
+    const description = resource.get(core.properties.description);
 
     if (description === undefined) {
       throw Error(
         `Property ${subject} has no description: ${resource.getPropVals()}`,
       );
     }
 
-    const classTypeURL = resource.get(urls.properties.classType)?.toString();
+    const classTypeURL = resource.get(core.properties.classtype)?.toString();
 
     const propery: Property = {
       subject,
@@ -934,7 +932,7 @@ export class Store {
   }
 
   private randomPart(): string {
-    return Math.random().toString(36).substring(2);
+    return ulid().toLowerCase();
   }
 
   private async findAvailableSubject(
diff --git a/browser/pnpm-lock.yaml b/browser/pnpm-lock.yaml
diff --git a/docs/src/js-lib/store.md b/docs/src/js-lib/store.md
@@ -122,6 +122,26 @@ const resource = await store.newResource({
 await resource.save();
 ```
 
+## Generating random subjects
+
+In some cases you might need a subject before you have created the resource with that subject.
+To generate a random subject, use the `store.createSubject()` method.
+This method generates a new subject with the current serverURL as hostname and a random lowercased [ULID](https://github.com/ulid/spec) string as the path.
+
+The method also allows you to pass a parent subject to generate a subject under that parent.
+
+```typescript
+const subject = store.createSubject();
+// Result: https://myserver.com/01hw30e1w6t9y0y5aqg0aghhf4
+
+
+// With parent subject
+const subject = store.createSubject(parent.subject);
+```
+
+Keep in mind that subjects never change once they are set, even if the parent changes.
+This means you can't reliably infer the parent from the subject.
+
 ## Full-Text Search
 
 AtomicServer comes included with a full-text search API.

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export const useNewForm = (args: UseNewForm) => {`
`27`	`27`
`28`	`28`	`const [subjectValue, setSubjectValueInternal] = useState<string>(() => {`
`29`	`29`	`if (initialSubject === undefined) {`
`30`		`- return store.createSubject(klass.props.shortname);`
	`30`	`+ return store.createSubject();`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`return initialSubject;`
`@@ -46,7 +46,7 @@ export const useNewForm = (args: UseNewForm) => {`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`if (isAVal.length === 0) {`
`49`		`- await resource.addClasses(klass.getSubject());`
	`49`	`+ await resource.addClasses(klass.subject);`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`setInitialized(true);`