created basic state machine for info ui.

1 files changed, 51 insertions, 0 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>;
+    }
+}