streamlined version of infoui fsa

1 files changed, 47 insertions, 68 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 57d2b7ba1..daf1bd8a7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,4 +1,4 @@
-import { IReactionDisposer, computed, observable, reaction } from 'mobx';
+import { IReactionDisposer, computed, observable, reaction, action, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../../fields/Doc';
 import { ScriptField } from '../../../../fields/ScriptField';
@@ -12,7 +12,9 @@ import { InkTool } from '../../../../fields/InkField';
 import { LinkDocPreview } from '../../nodes/LinkDocPreview';
 import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
 import { DocumentManager } from '../../../util/DocumentManager';
-import { CollectionFreeFormInfoState, infoState } from './CollectionFreeFormInfoState';
+import { CollectionFreeFormInfoState, infoState, StateMessage, infoArc, StateEntryFunc, InfoState } from './CollectionFreeFormInfoState';
+import { string32 } from 'pdfjs-dist/types/src/shared/util';
+import { any } from 'bluebird';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -23,77 +25,54 @@ export interface CollectionFreeFormInfoUIProps {
 export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeFormInfoUIProps> {
     private _disposers: { [name: string]: IReactionDisposer } = {};
 
+    @observable currState!: infoState;
     constructor(props: any) {
         super(props);
-        this.currState = this.state0;
+        this.setCurrState(this.setupStates());
     }
 
-    @computed get first_doc() {
-        return this.props.Freeform.childDocs.lastElement();
-    }
-    @observable currState: infoState;
-    state0: infoState = {
-        Message: 'Click to create Object',
-        Arcs: [
-            {
-                events: () => this.props.Freeform.childDocs,
-                actions: (docs: Doc[]) => {
-                    if (docs.length === 1) this.currState = this.state1;
-                    if (docs.length > 1) this.currState = this.state2;
-                },
-            },
-        ],
-    };
-    state1: infoState = {
-        Message: 'Create a second doc',
-        Arcs: [
-            {
-                events: () => this.props.Freeform.childDocs,
-                actions: (docs: Doc[]) => {
-                    if (docs.length === 0) this.currState = this.state0;
-                    if (docs.length === 2) this.currState = this.state2;
-                },
-            },
-        ],
-    };
-    state2: infoState = {
-        Message: 'Create a link',
-        Arcs: [
-            {
-                events: () => LinkManager.Instance.getAllDirectLinks(this.first_doc),
-                actions: links => links?.length && (this.currState = this.state3),
-            },
-            {
-                events: () => this.props.Freeform.childDocs,
-                actions: docs => {
-                    if (docs.length === 0) this.currState = this.state0;
-                    if (docs.length === 1) this.currState = this.state1;
-                },
-            },
-        ],
+    setCurrState = (state: infoState) => {
+        if (state) {
+            runInAction(() => (this.currState = state));
+            this.currState[StateEntryFunc]?.();
+        }
     };
 
-    state3: infoState = {
-        Message: 'View links',
-        Arcs: [
-            {
-                events: () => LinkManager.Instance.getAllDirectLinks(this.first_doc),
-                actions: links => links?.length === 0 && (this.currState = this.state2),
-            },
-            {
-                events: () => DocumentLinksButton.LinkEditorDocView,
-                actions: viewingLinks => viewingLinks && (this.currState = this.state4),
-            },
-        ],
-    };
-    state4: infoState = {
-        Message: 'You did it!',
-        Arcs: [
-            {
-                events: () => false,
-                actions: arc => {},
-            },
-        ],
+    setupStates = () => {
+        //  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 numDocs = () => this.props.Freeform.childDocs.length;
+        const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
+        const linkMenuOpen = () => DocumentLinksButton.LinkEditorDocView;
+
+        // set of states.
+        const start = InfoState('Click to create Object', {
+            docCreated: [() => numDocs(), () => oneDoc],
+        }, setBackground("blue")); // prettier-ignore
+
+        const oneDoc = InfoState('Create a second doc', {
+            docCreated: [() => numDocs() > 1, () => multipleDocs],
+            docDeleted: [() => numDocs() < 1, () => start],
+        }, setBackground("green")); // prettier-ignore
+
+        const multipleDocs = InfoState('Create a link', {
+            linkCreated: [() => numDocLinks(), () => madeLink],
+            docsRemoved: [() => numDocs() < 2, () => oneDoc],
+        }, setBackground("orange")); // prettier-ignore
+
+        const madeLink = InfoState('View links', {
+            linkCreated: [() => !numDocLinks(), () => multipleDocs],
+            linksViewed: [() => linkMenuOpen(), (res) => { alert("Yay"+ res); return completed;}],
+        }, setBackground("yellow")); // prettier-ignore
+
+        const completed = InfoState('You did it!', {
+            linkDeleted: [() => !numDocLinks(), () => multipleDocs],
+            docsRemoved: [() => numDocs() < 2, () => oneDoc],
+        }, setBackground("white")); // prettier-ignore
+
+        return start;
     };
 
     /*
@@ -189,6 +168,6 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm
     firstDocPos = { x: 0, y: 0 };
 
     render() {
-        return <CollectionFreeFormInfoState state={this.currState} />;
+        return <CollectionFreeFormInfoState next={this.setCurrState} infoState={this.currState} />;
     }
 }