upates to info ui states

1 files changed, 11 insertions, 15 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 947167628..7445b3b7c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,7 +1,7 @@
 import { IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, Field, FieldResult } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, FieldResult } from '../../../../fields/Doc';
 import { LinkManager } from '../../../util/LinkManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
@@ -41,14 +41,14 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         //  state entry functions
         const setBackground = (col: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = col);
         //  arc transition trigger conditions
-        const firstDoc = () => this._props.Freeform.childDocs.lastElement();
+        const firstDoc = () => (this._props.Freeform.childDocs.length ? this._props.Freeform.childDocs[0] : undefined);
         const numDocs = () => this._props.Freeform.childDocs.length;
 
-        let docX : FieldResult<Field>;
-        let docY : FieldResult<Field>;
+        let docX: FieldResult<Field>;
+        let docY: FieldResult<Field>;
 
-        const docNewX = () => firstDoc().x;
-        const docNewY = () => firstDoc().y;
+        const docNewX = () => firstDoc()?.x;
+        const docNewY = () => firstDoc()?.y;
 
         const linkStart = () => DocumentLinksButton.StartLink;
 
@@ -57,8 +57,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         const activeTool = () => Doc.ActiveTool;
 
-        let pinned : FieldResult<Field>;
-        const pin = () => Doc.ActivePresentation?.data;
+        const pin = () => DocListCast(Doc.ActivePresentation?.data);
         const trailView = () => DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails);
         const presentationMode = () => Doc.ActivePresentation?.presentation_status;
 
@@ -132,16 +131,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', {
             linkDeleted: [() => !numDocLinks(), () => multipleDocs],
             docRemoved: [() => numDocs() < 2, () => oneDoc],
-            docCreated: [() => numDocs() == 3, () => {
-                pinned = pin();
-                return demos;
-            }],
+            docCreated: [() => numDocs() == 3, () => demos],
             // docPinned: [() => pin(), () => pinnedDoc],
         }, setBackground("white")); // prettier-ignore
 
         const demos = InfoState('Wanna explore more?', {
             // activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-            docPinned: [() => pin(), () => pinnedDoc],
+            docPinned: [() => pin().length, () => pinnedDoc],
         });
 
         // const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
@@ -159,7 +155,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => demos],
         });
-        
+
         // const openedTrail = InfoState('This is your trails tab.', {
         //     trailView: [() => presentationMode() === 'edit', () => editPresentationMode],
         // });
@@ -169,7 +165,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => demos],
             docCreated: [() => numDocs() == 4, () => completed],
-      });
+        });
 
         const manualPresentationMode = InfoState('Manual presentation mode.', {
             editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],