added base react components with mobx

2019-05-21 12:59:20 +02:00 · 2019-05-21 12:59:20 +02:00 · 70df646e63
parent 0d70430c57
commit 70df646e63
8 changed files with 145 additions and 57 deletions
--- a/samples/react-mobx-multiple-stores/package-lock.json
+++ b/samples/react-mobx-multiple-stores/package-lock.json
@ -7046,12 +7046,14 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@ -7066,17 +7068,20 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@ -7193,7 +7198,8 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@ -7205,6 +7211,7 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@ -7219,6 +7226,7 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@ -7226,12 +7234,14 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.3.5",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@ -7250,6 +7260,7 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@ -7330,7 +7341,8 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@ -7342,6 +7354,7 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@ -7463,6 +7476,7 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
--- a/samples/react-mobx-multiple-stores/src/stores/AppStore.ts
+++ b/samples/react-mobx-multiple-stores/src/stores/AppStore.ts
@ -1,5 +1,5 @@
-import { RootStore } from "./rootStore";
-import { observable, action } from "mobx";
+import { RootStore } from "./RootStore";
+import { observable, action, computed } from "mobx";

 export enum ApplicationStatus {
    CreateList = "Create List",
@ -14,24 +14,41 @@ export interface IFakeItem {

 export class AppStore {

-    @observable public status: ApplicationStatus = ApplicationStatus.CreateList;
-    @observable public listTitle: string = null;
-    @observable public items: IFakeItem[] = [];
+    @observable public isLoading: boolean;
+    @observable public status: ApplicationStatus;
+    @observable public listTitle: string;
+    @observable public items: IFakeItem[];

    constructor(private rootStore: RootStore) {
+        this.setInitialState();
    }

-    @action confirmListCreation(listTitle: string) {
+    @action
+    private setInitialState() {
+        this.status = ApplicationStatus.CreateList;
+        this.listTitle = null;
+        this.items = [];
+        this.isLoading = true;
+    }
+
+    @computed
+    public get appStatus(): string {
+        return `The current status is: ${this.status}`;
+    }
+
+    @action
+    public confirmListCreation(listTitle: string) {
        this.status = ApplicationStatus.CreateItems;
        this.listTitle = listTitle;
    }

-    @action addListItem(item: IFakeItem) {
+    @action
+    public addListItem(item: IFakeItem) {
        this.items.push(item);
    }

-    @action confirmItems() {
+    @action
+    public confirmItems() {
        this.status = ApplicationStatus.Completed;
    }
-
 }
--- a/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts
+++ b/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts
@ -1,16 +1,38 @@
-import { RootStore } from "./rootStore";
+import { RootStore } from "./RootStore";
 import { observable, action, runInAction } from "mobx";

 export class ConfigStore {

-    @observable public isLoading: boolean = true;
-    @observable public applicationTitle: string = null;
+    @observable public isLoading: boolean;
+    @observable public allowImportantItems: boolean;
+    @observable public applicationTitle: string;

    constructor(private rootStore: RootStore) {
-        
+        this.setInitialState();
+
+        // Mock REST call for fetching configuration data, 5 seconds
+        setTimeout(() => {
+            this.loadConfigration();
+        }, 5000);
    }

-    @action setApplicationTitle(title: string) {
+    @action
+    public setInitialState(): void {
+        this.isLoading = true;
+        this.applicationTitle = null;
+        this.allowImportantItems = false;
+    }
+
+    @action
+    private loadConfigration() {
+        this.isLoading = false;
+        this.applicationTitle = "So cool man";
+        this.allowImportantItems = true;
+        this.rootStore.appStore.isLoading = false;
+    }
+
+    @action
+    public setApplicationTitle(title: string): void {
        this.applicationTitle = title;
    }
 }
--- a/samples/react-mobx-multiple-stores/src/stores/RootStore.ts
+++ b/samples/react-mobx-multiple-stores/src/stores/RootStore.ts
@ -1,4 +1,5 @@
 import { ConfigStore } from "./ConfigStore";
+import { AppStore } from "./AppStore";

 export enum Stores {
    AppStore = "appStore",
@ -6,13 +7,14 @@ export enum Stores {
 }

 export class RootStore {
-    public readonly appStore: any;
-    public readonly configStore: any;
+    public readonly appStore: AppStore;
+    public readonly configStore: ConfigStore;
    public readonly rootStore: RootStore;

    constructor() {
        this.rootStore = this;
        this.configStore = new ConfigStore(this);
-        this.appStore = null;
+        this.appStore = new AppStore(this);
    }
+
 }
--- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.ts
+++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.ts
@ -1,29 +1,24 @@
+import { Version } from '@microsoft/sp-core-library';
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+import { configure } from "mobx";
+import * as strings from 'MobxTutorialWebPartStrings';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
-import { Version } from '@microsoft/sp-core-library';
-import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
-import {
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-property-pane';
-
-import * as strings from 'MobxTutorialWebPartStrings';
-import MobxTutorial from './components/MobxTutorial';
 import { IMobxTutorialProps } from './components/IMobxTutorialProps';
-import { configure } from "mobx";
-configure({ enforceActions: "strict" });
+import MobxTutorialProvider from './components/MobxTutorialProvider';
+
+configure({ enforceActions: "always" });

 export interface IMobxTutorialWebPartProps {
  description: string;
 }

 export default class MobxTutorialWebPart extends BaseClientSideWebPart<IMobxTutorialWebPartProps> {
-
  public render(): void {
-    const element: React.ReactElement<IMobxTutorialProps> = React.createElement(
-      MobxTutorial,
+    const element: React.ReactElement<{}> = React.createElement(
+      MobxTutorialProvider,
      {
-        description: this.properties.description
      }
    );

--- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorial.tsx
+++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorial.tsx
@ -1,24 +1,25 @@
+import { inject, observer } from 'mobx-react';
 import * as React from 'react';
-import styles from './MobxTutorial.module.scss';
-import { IMobxTutorialProps } from './IMobxTutorialProps';
-import { escape } from '@microsoft/sp-lodash-subset';
+import { AppStore } from '../../../stores/AppStore';
+import { Stores } from '../../../stores/RootStore';
+import { ProgressIndicator } from './ProgressIndicator';
+
+export type MobxTutorialStoreProps = {
+  appStore: AppStore;
+};
+
+export type MobxTutorialProps = Partial<MobxTutorialStoreProps>;
+
+@inject(Stores.AppStore)
+@observer
+export class MobxTutorial extends React.Component<MobxTutorialProps, {}> {
+  public render(): React.ReactElement<MobxTutorialProps> {
+    const { appStore } = this.props;

-export default class MobxTutorial extends React.Component<IMobxTutorialProps, {}> {
-  public render(): React.ReactElement<IMobxTutorialProps> {
    return (
-      <div className={ styles.mobxTutorial }>
-        <div className={ styles.container }>
-          <div className={ styles.row }>
-            <div className={ styles.column }>
-              <span className={ styles.title }>Welcome to SharePoint!</span>
-              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
-              <p className={ styles.description }>{escape(this.props.description)}</p>
-              <a href="https://aka.ms/spfx" className={ styles.button }>
-                <span className={ styles.label }>Learn more</span>
-              </a>
-            </div>
-          </div>
-        </div>
+      <div>
+        {appStore.isLoading ? "LOADING" : null}
+        <ProgressIndicator></ProgressIndicator>
      </div>
    );
  }
--- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorialProvider.tsx
+++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorialProvider.tsx
@ -0,0 +1,16 @@
+import { Provider } from "mobx-react";
+import * as React from 'react';
+import { RootStore } from '../../../stores/RootStore';
+import { MobxTutorial } from './MobxTutorial';
+
+export default class MobxTutorialProvider extends React.Component<{}, {}> {
+  private readonly dependencies = { rootStore: new RootStore() };
+
+  public render(): React.ReactElement<{}> {
+    return (
+      <Provider {...this.dependencies.rootStore}>
+        <MobxTutorial></MobxTutorial>
+      </Provider>
+    );
+  }
+}
--- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/ProgressIndicator.tsx
+++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/ProgressIndicator.tsx
@ -0,0 +1,21 @@
+import { inject, observer } from "mobx-react";
+import * as React from 'react';
+import { AppStore } from "../../../stores/AppStore";
+import { Stores } from '../../../stores/RootStore';
+
+export type ProgressIndicatorStoreProps = {
+    appStore: AppStore;
+};
+
+export type ProgressIndicatorOwnProps = {};
+export type ProgressIndicatorProps = Partial<ProgressIndicatorStoreProps> & ProgressIndicatorOwnProps;
+
+@inject(Stores.AppStore)
+@observer
+export class ProgressIndicator extends React.Component<ProgressIndicatorProps, {}> {
+    public render(): React.ReactElement<ProgressIndicatorProps> {
+        const { appStore } = this.props;
+
+        return (<>{appStore.appStatus}</>);
+    }
+}