2 files changed, 34 insertions, 56 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 9090d0ea5..3c19ef4e9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -3,13 +3,10 @@ import { observer } from 'mobx-react';
 import './CollectionFreeFormView.scss';
 import React = require('react');
 
-export type infoArc = {
-    events: () => any;
-    actions: (arg?: any) => any;
-};
 export type infoState = {
     Message: string;
-    Arcs: infoArc[];
+    Events: () => any;
+    Actions: (arg?: any) => any;
 };
 
 export interface CollectionFreeFormInfoStateProps {
@@ -18,10 +15,10 @@ export interface CollectionFreeFormInfoStateProps {
 
 @observer
 export class CollectionFreeFormInfoState extends React.Component<CollectionFreeFormInfoStateProps> {
-    _disposers: IReactionDisposer[] = [];
+    _disposer: IReactionDisposer | undefined;
 
-    clearState = () => this._disposers.map(disposer => disposer());
-    initState = () => (this._disposers = this.props.state.Arcs.map(arc => reaction(arc.events, arc.actions, { fireImmediately: true })));
+    clearState = () => this._disposer?.();
+    initState = () => (this._disposer = reaction(this.props.state.Events, this.props.state.Actions, { fireImmediately: true }));
 
     componentDidMount(): void {
         this.initState();
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index dfe77482f..74b5545bd 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -25,73 +25,54 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm
 
     constructor(props: any) {
         super(props);
-        this.currState = this.state0;
+        this.currState = this.start;
     }
 
+    @observable currState: infoState;
+
     @computed get first_doc() {
         return this.props.Freeform.childDocs.lastElement();
     }
-    @observable currState: infoState;
-    state0: infoState = {
+    start: 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;
-                },
-            },
-        ],
+        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.slice(),
-                actions: (docs: Doc[]) => {
-                    if (docs.length === 0) this.currState = this.state0;
-                    if (docs.length === 2) this.currState = this.state2;
-                },
-            },
-        ],
+        Events: () => this.props.Freeform.childDocs,
+        Actions: (docs: Doc[]) => {
+            if (docs.length === 0) this.currState = this.start;
+            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;
-                },
-            },
-        ],
+        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.start;
+            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;
-                },
-            },
-        ],
+        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 => {},
-            },
-        ],
+        Events: () => false,
+        Actions: arc => {},
     };
 
     /*