diff --git a/samples/react-mobx-multiple-stores/src/stores/AppStore.ts b/samples/react-mobx-multiple-stores/src/stores/AppStore.ts index 7112172d1..3b5718b34 100644 --- a/samples/react-mobx-multiple-stores/src/stores/AppStore.ts +++ b/samples/react-mobx-multiple-stores/src/stores/AppStore.ts @@ -2,6 +2,7 @@ import { RootStore } from "./RootStore"; import { observable, action, computed } from "mobx"; export enum ApplicationStatus { + Loading = "Loading", CreateList = "Create List", CreateItems = "Create Items", Completed = "Completed" @@ -14,7 +15,8 @@ export interface IFakeItem { export class AppStore { - @observable public isLoading: boolean; + @observable public isLoadingConfiguration: boolean; + @observable public isLoadingOtherStuff: boolean; @observable public status: ApplicationStatus; @observable public listTitle: string; @observable public items: IFakeItem[]; @@ -28,7 +30,8 @@ export class AppStore { this.status = ApplicationStatus.CreateList; this.listTitle = null; this.items = []; - this.isLoading = true; + this.isLoadingConfiguration = true; + this.isLoadingOtherStuff = false; } @computed @@ -36,6 +39,16 @@ export class AppStore { return `The current status is: ${this.status}`; } + @computed + public get importantItems(): IFakeItem[] { + return this.items.filter(x => x.important); + } + + @computed + public get isLoading(): boolean { + return this.isLoadingConfiguration || this.isLoadingOtherStuff; + } + @action public confirmListCreation(listTitle: string) { this.status = ApplicationStatus.CreateItems; diff --git a/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts b/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts index 93c757336..427657b20 100644 --- a/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts +++ b/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts @@ -1,5 +1,5 @@ +import { action, observable } from "mobx"; import { RootStore } from "./RootStore"; -import { observable, action, runInAction } from "mobx"; export class ConfigStore { @@ -13,7 +13,7 @@ export class ConfigStore { // Mock REST call for fetching configuration data, 5 seconds setTimeout(() => { this.loadConfigration(); - }, 5000); + }, 1000); } @action @@ -26,9 +26,9 @@ export class ConfigStore { @action private loadConfigration() { this.isLoading = false; - this.applicationTitle = "So cool man"; + this.applicationTitle = "Default Application Title"; this.allowImportantItems = true; - this.rootStore.appStore.isLoading = false; + this.rootStore.appStore.isLoadingConfiguration = false; } @action diff --git a/samples/react-mobx-multiple-stores/src/stores/RootStore.ts b/samples/react-mobx-multiple-stores/src/stores/RootStore.ts index f7aa34d65..3b2cc4793 100644 --- a/samples/react-mobx-multiple-stores/src/stores/RootStore.ts +++ b/samples/react-mobx-multiple-stores/src/stores/RootStore.ts @@ -1,5 +1,5 @@ -import { ConfigStore } from "./ConfigStore"; import { AppStore } from "./AppStore"; +import { ConfigStore } from "./ConfigStore"; export enum Stores { AppStore = "appStore", @@ -9,12 +9,9 @@ export enum Stores { export class RootStore { public readonly appStore: AppStore; public readonly configStore: ConfigStore; - public readonly rootStore: RootStore; constructor() { - this.rootStore = this; this.configStore = new ConfigStore(this); this.appStore = new AppStore(this); } - } \ No newline at end of file diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.ts b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.ts index 120b10f54..e4bf7d00e 100644 --- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.ts +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.ts @@ -5,7 +5,7 @@ import { configure } from "mobx"; import * as strings from 'MobxTutorialWebPartStrings'; import * as React from 'react'; import * as ReactDom from 'react-dom'; -import { IMobxTutorialProps } from './components/IMobxTutorialProps'; +import { RootStore } from '../../stores/RootStore'; import MobxTutorialProvider from './components/MobxTutorialProvider'; configure({ enforceActions: "always" }); @@ -15,16 +15,27 @@ export interface IMobxTutorialWebPartProps { } export default class MobxTutorialWebPart extends BaseClientSideWebPart { + private readonly dependencies = { rootStore: new RootStore() }; + public render(): void { + const element: React.ReactElement<{}> = React.createElement( MobxTutorialProvider, { + stores: { ...this.dependencies.rootStore } } ); ReactDom.render(element, this.domElement); } + protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void { + if (propertyPath === "Application title") { + const { configStore } = this.dependencies.rootStore; + configStore.setApplicationTitle(newValue); + } + } + protected onDispose(): void { ReactDom.unmountComponentAtNode(this.domElement); } @@ -44,8 +55,8 @@ export default class MobxTutorialWebPart extends BaseClientSideWebPart { + public state = { + items: [] + }; + + public render(): React.ReactElement { + const { items } = this.props; + return ( +
+
    {items.map(x =>
  • {x.title} {x.important ? '!IMPORTANT' : null}
  • )}
+
+ ); + } +} diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/FakeItemContainer.tsx b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/FakeItemContainer.tsx new file mode 100644 index 000000000..ed9adc952 --- /dev/null +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/FakeItemContainer.tsx @@ -0,0 +1,32 @@ +import { inject, observer } from "mobx-react"; +import { PrimaryButton } from 'office-ui-fabric-react/lib/Button'; +import * as React from 'react'; +import { AppStore } from "../../../stores/AppStore"; +import { Stores } from '../../../stores/RootStore'; +import { DetailedFakeItemViewer } from "./DetailedFakeItemViewer"; + +export type FakeItemContainerStoreProps = { + appStore: AppStore; +}; + +export type FakeItemContainerOwnProps = {}; +export type FakeItemContainerProps = Partial & FakeItemContainerOwnProps; + +@inject(Stores.AppStore) +@observer +export class FakeItemContainer extends React.Component { + public render(): React.ReactElement { + const { appStore } = this.props; + return ( +
+ { appStore.addListItem({ title: "dsf", important: true }); }} + allowDisabledFocus={true} + /> + Count items: {appStore.items.length} | Count important items: {appStore.importantItems.length} + +
+ ); + } +} diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorial.tsx b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorial.tsx index 85874cafc..1397a964d 100644 --- 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,25 +1,33 @@ import { inject, observer } from 'mobx-react'; +import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner'; import * as React from 'react'; import { AppStore } from '../../../stores/AppStore'; +import { ConfigStore } from '../../../stores/ConfigStore'; import { Stores } from '../../../stores/RootStore'; +import { FakeItemContainer } from './FakeItemContainer'; import { ProgressIndicator } from './ProgressIndicator'; export type MobxTutorialStoreProps = { appStore: AppStore; + configStore: ConfigStore; }; export type MobxTutorialProps = Partial; -@inject(Stores.AppStore) +@inject(Stores.AppStore, Stores.ConfigurationStore) @observer export class MobxTutorial extends React.Component { public render(): React.ReactElement { - const { appStore } = this.props; + const { appStore, configStore } = this.props; + + if (appStore.isLoading) + return (); return (
- {appStore.isLoading ? "LOADING" : null} +

{configStore.applicationTitle}

+
); } diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorialProvider.tsx b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorialProvider.tsx index 80f4f07fe..6aad656ec 100644 --- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorialProvider.tsx +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorialProvider.tsx @@ -1,14 +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() }; +export type MobxTutorialProviderOwnProps = { + stores: {}; +}; + +export default class MobxTutorialProvider extends React.Component { public render(): React.ReactElement<{}> { return ( - + ); diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/ProgressIndicator.tsx b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/ProgressIndicator.tsx index e5fe8307d..3de7bd552 100644 --- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/ProgressIndicator.tsx +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/ProgressIndicator.tsx @@ -15,7 +15,6 @@ export type ProgressIndicatorProps = Partial & Prog export class ProgressIndicator extends React.Component { public render(): React.ReactElement { const { appStore } = this.props; - return (<>{appStore.appStatus}); } } diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/loc/en-us.js b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/loc/en-us.js index 89f98bc1e..f73fe7461 100644 --- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/loc/en-us.js +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/loc/en-us.js @@ -1,7 +1,7 @@ define([], function() { return { - "PropertyPaneDescription": "Description", + "PropertyPaneDescription": "Application configuration", "BasicGroupName": "Group Name", - "DescriptionFieldLabel": "Description Field" + "AppTitleFieldLabel": "Application Title Field" } }); \ No newline at end of file diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/loc/mystrings.d.ts b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/loc/mystrings.d.ts index 4f96baf67..d21d26e9a 100644 --- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/loc/mystrings.d.ts +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/loc/mystrings.d.ts @@ -1,7 +1,7 @@ declare interface IMobxTutorialWebPartStrings { PropertyPaneDescription: string; BasicGroupName: string; - DescriptionFieldLabel: string; + AppTitleFieldLabel: string; } declare module 'MobxTutorialWebPartStrings' {