massive changes to use mobx 6 which means not accessing props directly in @computed functions.

1 files changed, 26 insertions, 12 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 1265dc2de..f0a052c1d 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, action, runInAction } from 'mobx';
+import { IReactionDisposer, computed, observable, reaction, action, runInAction, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../../fields/Doc';
 import { ScriptField } from '../../../../fields/ScriptField';
@@ -10,11 +10,12 @@ import { NumCast } from '../../../../fields/Types';
 import { LinkManager } from '../../../util/LinkManager';
 import { InkTool } from '../../../../fields/InkField';
 import { LinkDocPreview } from '../../nodes/LinkDocPreview';
-import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
+import { DocumentLinksButton, DocButtonState } from '../../nodes/DocumentLinksButton';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { CollectionFreeFormInfoState, infoState, StateMessage, infoArc, StateEntryFunc, InfoState } from './CollectionFreeFormInfoState';
 import { string32 } from 'pdfjs-dist/types/src/shared/util';
 import { any } from 'bluebird';
+import { copyProps } from '../../../../Utils';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -25,10 +26,23 @@ export interface CollectionFreeFormInfoUIProps {
 export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeFormInfoUIProps> {
     private _disposers: { [name: string]: IReactionDisposer } = {};
 
-    @observable currState!: infoState;
-    constructor(props: any) {
+    @observable _currState: infoState | undefined = undefined;
+    get currState() {
+        return this._currState!;
+    }
+    set currState(val) {
+        this._currState = val;
+    }
+    _prevProps: React.PropsWithChildren<CollectionFreeFormInfoUIProps>;
+    @observable _props: React.PropsWithChildren<CollectionFreeFormInfoUIProps>;
+    constructor(props: React.PropsWithChildren<CollectionFreeFormInfoUIProps>) {
         super(props);
-        this.setCurrState(this.setupStates());
+        this._props = this._prevProps = this.props;
+        makeObservable(this);
+        this.currState = this.setupStates();
+    }
+    componentDidUpdate() {
+        copyProps(this);
     }
 
     setCurrState = (state: infoState) => {
@@ -40,12 +54,12 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm
 
     setupStates = () => {
         //  state entry functions
-        const setBackground = (col: string) => () => (this.props.Freeform.layoutDoc.backgroundColor = col);
+        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 firstDoc = () => this._props.Freeform.childDocs.lastElement();
+        const numDocs = () => this._props.Freeform.childDocs.length;
         const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
-        const linkMenuOpen = () => DocumentLinksButton.LinkEditorDocView;
+        const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
 
         // set of states.
         const start = InfoState('Click to create Object', {
@@ -78,7 +92,7 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm
     /*
     componentDidMount(): void {
         this._disposers.reaction1 = reaction(
-            () => this.props.Freeform.childDocs.slice(),
+            () => this._props.Freeform.childDocs.slice(),
             docs => {
                 if (docs.length === 1) {
                     this.firstDoc = docs[0];
@@ -162,8 +176,8 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm
     // this._disposers.reaction1();
 
     @observable message = 'Click anywhere and begin typing to create your first document!';
-    @observable firstDoc: Doc | undefined;
-    @observable secondDoc: Doc | undefined;
+    @observable firstDoc: Doc | undefined = undefined;
+    @observable secondDoc: Doc | undefined = undefined;
     */
     firstDocPos = { x: 0, y: 0 };