2 files changed, 126 insertions, 1 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
new file mode 100644
index 000000000..bf47820a1
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -0,0 +1,51 @@
+import { IReactionDisposer, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+import './CollectionFreeFormView.scss';
+import React = require('react');
+
+export type infoArc = {
+    events: () => any;
+    actions: (arg?: any) => any;
+};
+export class infoState {
+    Message: string = '';
+    Arcs: infoArc[] = [];
+    constructor(message: string, arcs: infoArc[]) {
+        this.Message = message;
+        this.Arcs = arcs;
+    }
+}
+
+export interface CollectionFreeFormInfoStateProps {
+    state: infoState;
+}
+
+@observer
+export class CollectionFreeFormInfoState extends React.Component<CollectionFreeFormInfoStateProps> {
+    _disposers: IReactionDisposer[] = [];
+    componentDidMount(): void {
+        this._disposers = this.props.state.Arcs.map(arc =>
+            reaction(
+                () => arc.events(),
+                args => arc.actions(args),
+                { fireImmediately: true }
+            )
+        );
+    }
+    componentWillUpdate() {
+        this._disposers.map(disposer => disposer());
+        this._disposers = this.props.state.Arcs.map(arc =>
+            reaction(
+                () => arc.events(),
+                args => arc.actions(args),
+                { fireImmediately: true }
+            )
+        );
+    }
+    componentWillUnmount(): void {
+        this._disposers.map(disposer => disposer());
+    }
+    render() {
+        return <div className="infoUI">{this.props.state.Message}</div>;
+    }
+}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 09df4bfab..0e62bc388 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -12,6 +12,7 @@ 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';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -22,6 +23,78 @@ export interface CollectionFreeFormInfoUIProps {
 export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeFormInfoUIProps> {
     private _disposers: { [name: string]: IReactionDisposer } = {};
 
+    constructor(props: any) {
+        super(props);
+        this.currState = this.state0;
+    }
+
+    @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.slice(),
+                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.slice(),
+                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: () => ({ links: this.first_doc && LinkManager.Instance.getAllDirectLinks(this.first_doc), docs: this.props.Freeform.childDocs.slice() }),
+                actions: arc => {
+                    const { links, docs } = arc;
+                    if (docs.length === 0) this.currState = this.state0;
+                    if (docs.length === 1) this.currState = this.state1;
+                    if (links.length) this.currState = this.state3;
+                },
+            },
+        ],
+    };
+
+    state3: infoState = {
+        Message: 'View links',
+        Arcs: [
+            {
+                events: () => ({ links: this.first_doc && LinkManager.Instance.getAllDirectLinks(this.first_doc), viewingLinks: DocumentLinksButton.LinkEditorDocView }),
+                actions: arc => {
+                    const { links, viewingLinks } = arc;
+                    if (viewingLinks) this.currState = this.state4;
+                    if (links.length === 0) this.currState = this.state2;
+                },
+            },
+        ],
+    };
+    state4: infoState = {
+        Message: 'You did it!',
+        Arcs: [
+            {
+                events: () => false,
+                actions: arc => {},
+            },
+        ],
+    };
+
+    /*
     componentDidMount(): void {
         this._disposers.reaction1 = reaction(
             () => this.props.Freeform.childDocs.slice(),
@@ -110,9 +183,10 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm
     @observable message = 'Click anywhere and begin typing to create your first document!';
     @observable firstDoc: Doc | undefined;
     @observable secondDoc: Doc | undefined;
+    */
     firstDocPos = { x: 0, y: 0 };
 
     render() {
-        return <div className="infoUI">{this.message}</div>;
+        return <CollectionFreeFormInfoState state={this.currState} />;
     }
 }