Make name property from EntityStore computed

apps/web/modules/components/entity/editable-entity-page.test.tsx

@@ -16,7 +16,6 @@ describe('Editable Entity Page', () => {
         <EntityStoreProvider
           id={'1'}
           spaceId={'1'}
-          name="Banana"
           initialBlockIdsTriple={null}
           initialBlockTriples={[]}
           initialTriples={[]}
@@ -49,7 +48,6 @@ describe('Editable Entity Page', () => {
         <EntityStoreProvider
           id={'1'}
           spaceId={'1'}
-          name="Banana"
           initialBlockIdsTriple={null}
           initialBlockTriples={[]}
           initialTriples={[]}

apps/web/modules/components/entity/editor/editor.tsx

@@ -36,6 +36,10 @@ export const Editor = ({ editable = true }: Props) => {
       editable: editable,
       content: entityStore.editorJson,
       onBlur({ editor }) {
+        /* 
+        Responsible for converting all editor blocks to triples
+        Fires after the IdExtension's onBlur event which sets the "id" attribute on all nodes
+        */
         entityStore.updateEditorBlocks(editor);
       },
       editorProps: {
@@ -45,12 +49,14 @@ export const Editor = ({ editable = true }: Props) => {
     [editable]
   );
 
+  const openCommandMenu = () => editor?.chain().focus().insertContent('/').run();
+
   return editor ? (
     <>
       <EditorContent editor={editor} />
       <FloatingMenu editor={editor}>
         <div className="absolute -left-12 -top-3">
-          <SquareButton onClick={() => editor.chain().focus().insertContent('/').run()} icon="plus" />
+          <SquareButton onClick={openCommandMenu} icon="plus" />
         </div>
       </FloatingMenu>
     </>

apps/web/modules/components/entity/editor/id-extension.tsx

@@ -19,6 +19,10 @@ export const IdExtension = Extension.create({
     ];
   },
   onBlur() {
+    /* 
+      Responsible for setting the "id" attribute on all news nodes
+      Fires before the Editor's onBlur event which saves the editor blocks to the entity store
+    */
     const { view, state } = this.editor;
     const { tr, doc } = state;
 

apps/web/modules/entity/entity-store/entity-store-provider.tsx

@@ -16,13 +16,11 @@ interface Props {
   initialSchemaTriples: Triple[];
   initialBlockIdsTriple: Triple | null;
   initialBlockTriples: Triple[];
-  name: string;
 }
 
 export function EntityStoreProvider({
   id,
   spaceId,
-  name,
   children,
   initialBlockIdsTriple,
   initialBlockTriples,
@@ -35,7 +33,6 @@ export function EntityStoreProvider({
   const store = useMemo(() => {
     return new EntityStore({
       api: network,
-      name,
       spaceId,
       initialBlockIdsTriple,
       initialBlockTriples,
@@ -47,7 +44,6 @@ export function EntityStoreProvider({
   }, [
     network,
     spaceId,
-    name,
     initialBlockTriples,
     initialTriples,
     initialBlockIdsTriple,

apps/web/modules/entity/entity-store/entity-store.ts

@@ -11,6 +11,7 @@ import { INetwork } from '~/modules/services/network';
 import { Triple } from '~/modules/triple';
 import { EntityValue, Triple as TripleType } from '~/modules/types';
 import { Value } from '~/modules/value';
+import { Entity } from '..';
 
 const markdownConverter = new showdown.Converter();
 
@@ -77,7 +78,6 @@ interface IEntityStoreConfig {
   initialBlockIdsTriple: TripleType | null;
   initialBlockTriples: TripleType[];
   ActionsStore: ActionsStore;
-  name: string;
 }
 
 export class EntityStore implements IEntityStore {
@@ -94,7 +94,7 @@ export class EntityStore implements IEntityStore {
   hiddenSchemaIds$: Observable<string[]> = observable<string[]>([]);
   ActionsStore: ActionsStore;
   abortController: AbortController = new AbortController();
-  name: string;
+  name: ObservableComputed<string>;
 
   constructor({
     api,
@@ -105,13 +105,11 @@ export class EntityStore implements IEntityStore {
     spaceId,
     id,
     ActionsStore,
-    name,
   }: IEntityStoreConfig) {
     const defaultTriples = createInitialDefaultTriples(spaceId, id);
 
     this.id = id;
     this.api = api;
-    this.name = name;
     this.schemaTriples$ = observable([...initialSchemaTriples, ...defaultTriples]);
     this.spaceId = spaceId;
     this.ActionsStore = ActionsStore;
@@ -139,6 +137,10 @@ export class EntityStore implements IEntityStore {
       );
     });
 
+    this.name = computed(() => {
+      return Entity.name(this.triples$.get()) || '';
+    });
+
     this.blockTriples$ = computed(() => {
       const spaceActions = ActionsStore.actions$.get()[spaceId] ?? [];
       const blockIds = this.blockIds$.get();
@@ -475,7 +477,7 @@ export class EntityStore implements IEntityStore {
           entityName: this.nodeName(node),
           attributeId: SYSTEM_IDS.PARENT_ENTITY,
           attributeName: 'Parent Entity',
-          value: { id: this.id, type: 'entity', name: this.name },
+          value: { id: this.id, type: 'entity', name: this.name.get() },
         })
       );
     }
@@ -520,7 +522,7 @@ export class EntityStore implements IEntityStore {
       const triple = Triple.withId({
         space: this.spaceId,
         entityId: this.id,
-        entityName: this.name,
+        entityName: this.name.get(),
         attributeId: SYSTEM_IDS.BLOCKS,
         attributeName: 'Blocks',
         value: {

apps/web/pages/space/[id]/[entityId].tsx

@@ -44,7 +44,6 @@ export default function EntityPage(props: Props) {
   return (
     <EntityStoreProvider
       id={props.id}
-      name={props.name}
       spaceId={props.space}
       initialTriples={props.triples}
       initialSchemaTriples={props.schemaTriples}

apps/web/pages/space/[id]/[entityId]/v2.tsx

@@ -48,7 +48,6 @@ export default function EntityPage(props: Props) {
     <EntityStoreProvider
       id={props.id}
       spaceId={props.space}
-      name={props.name}
       initialTriples={props.triples}
       initialSchemaTriples={props.schemaTriples}
       initialBlockIdsTriple={props.blockIdsTriple}

apps/web/pages/space/[id]/create-entity.tsx

@@ -16,7 +16,6 @@ export default function CreateEntity({ spaceId }: Props) {
     <EntityStoreProvider
       id={newId}
       spaceId={spaceId}
-      name=""
       initialTriples={[]}
       initialSchemaTriples={[]}
       initialBlockTriples={[]}