From b4e7e8b194609a03ce3a540a3b12464f2b148196 Mon Sep 17 00:00:00 2001 From: Kemal S Date: Thu, 23 May 2019 15:30:28 +0200 Subject: [PATCH] added some styling and async createList action --- .../src/stores/AppStore.ts | 23 ++++-- .../src/stores/ConfigStore.ts | 1 - .../MobxTutorialWebPart.manifest.json | 2 +- .../mobxTutorial/MobxTutorialWebPart.ts | 17 +++-- .../components/IMobxTutorialProps.ts | 3 - .../mobxTutorial/components/ListCreator.tsx | 72 +++++++++++++++++++ .../components/MobxTutorial.module.scss | 13 +--- .../mobxTutorial/components/MobxTutorial.tsx | 23 ++++-- 8 files changed, 122 insertions(+), 32 deletions(-) delete mode 100644 samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/IMobxTutorialProps.ts create mode 100644 samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/ListCreator.tsx diff --git a/samples/react-mobx-multiple-stores/src/stores/AppStore.ts b/samples/react-mobx-multiple-stores/src/stores/AppStore.ts index 3b5718b34..2d9166857 100644 --- 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 { action, computed, observable, runInAction } from "mobx"; import { RootStore } from "./RootStore"; -import { observable, action, computed } from "mobx"; export enum ApplicationStatus { Loading = "Loading", @@ -26,7 +26,7 @@ export class AppStore { } @action - private setInitialState() { + private setInitialState(): void { this.status = ApplicationStatus.CreateList; this.listTitle = null; this.items = []; @@ -50,18 +50,27 @@ export class AppStore { } @action - public confirmListCreation(listTitle: string) { - this.status = ApplicationStatus.CreateItems; - this.listTitle = listTitle; + public async createList(listTitle: string): Promise { + return new Promise((resolve, reject) => { + // Mock creating list + setTimeout(() => { + runInAction(() => { + this.status = ApplicationStatus.CreateItems; + this.listTitle = listTitle; + resolve(); + }); + + }, 1000); + }); } @action - public addListItem(item: IFakeItem) { + public addListItem(item: IFakeItem): void { this.items.push(item); } @action - public confirmItems() { + public confirmItems(): void { this.status = ApplicationStatus.Completed; } } \ No newline at end of file diff --git a/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts b/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts index 427657b20..df66ed3aa 100644 --- a/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts +++ b/samples/react-mobx-multiple-stores/src/stores/ConfigStore.ts @@ -26,7 +26,6 @@ export class ConfigStore { @action private loadConfigration() { this.isLoading = false; - this.applicationTitle = "Default Application Title"; this.allowImportantItems = true; this.rootStore.appStore.isLoadingConfiguration = false; } diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.manifest.json b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.manifest.json index 81bd1d35b..4effb5568 100644 --- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.manifest.json +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.manifest.json @@ -21,7 +21,7 @@ "description": { "default": "An example of a webpart using mobx for managing the application state" }, "officeFabricIconFontName": "Page", "properties": { - "description": "MobxTutorial" + "ApplicationTitle": "Mobx Tutorial Title (change in webpart properties) 😎" } }] } 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 e4bf7d00e..057eeab42 100644 --- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.ts +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/MobxTutorialWebPart.ts @@ -11,14 +11,21 @@ import MobxTutorialProvider from './components/MobxTutorialProvider'; configure({ enforceActions: "always" }); export interface IMobxTutorialWebPartProps { - description: string; + ApplicationTitle: string; } export default class MobxTutorialWebPart extends BaseClientSideWebPart { private readonly dependencies = { rootStore: new RootStore() }; - public render(): void { + protected onInit() { + return new Promise((resolve, reject) => { + const { configStore } = this.dependencies.rootStore; + configStore.setApplicationTitle(this.properties.ApplicationTitle); + resolve(); + }); + } + public render(): void { const element: React.ReactElement<{}> = React.createElement( MobxTutorialProvider, { @@ -30,7 +37,7 @@ export default class MobxTutorialWebPart extends BaseClientSideWebPart; +export type ListCreatorState = { + loading: boolean; + errorMessage: string; + listTitle: string; +}; + +@inject(Stores.AppStore) +@observer +export class ListCreator extends React.Component { + public state = { + loading: false, + errorMessage: undefined, + listTitle: null + }; + + public render(): React.ReactElement { + const spinner = (); + + return ( +
+ + + this.createList()} + disabled={this.state.loading} + > + {this.state.loading ? spinner : "Create List"} + +
+ ); + } + + public async createList() { + if (this.state.listTitle && this.state.listTitle.length > 0) { + this.setState({ ...this.state, loading: true, errorMessage: undefined }); + await this.props.appStore.createList("MOCK TITLE"); + this.setState({ ...this.state, loading: false }); + } + else { + this.setState({ ...this.state, errorMessage: "Required" }); + } + + } + + private _onChangeListTitle = (ev: React.FormEvent, newValue?: string) => { + if (newValue === "" && newValue.length === 0) { + this.setState({ ...this.state, listTitle: newValue, errorMessage: "Required" }); + } + else { + this.setState({ ...this.state, listTitle: newValue }); + + } + }; +} diff --git a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorial.module.scss b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorial.module.scss index b85e354f1..d994d0df9 100644 --- a/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorial.module.scss +++ b/samples/react-mobx-multiple-stores/src/webparts/mobxTutorial/components/MobxTutorial.module.scss @@ -9,8 +9,6 @@ .row { @include ms-Grid-row; - @include ms-fontColor-white; - background-color: $ms-color-themeDark; padding: 20px; } @@ -24,17 +22,10 @@ .title { @include ms-font-xl; - @include ms-fontColor-white; } .subTitle { @include ms-font-l; - @include ms-fontColor-white; - } - - .description { - @include ms-font-l; - @include ms-fontColor-white; } .button { @@ -51,7 +42,7 @@ // Basic Button outline: transparent; position: relative; - font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; + font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; font-size: $ms-font-size-m; font-weight: $ms-font-weight-regular; @@ -71,4 +62,4 @@ display: inline-block; } } -} \ No newline at end of file +} 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 1397a964d..12a605885 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 @@ -6,6 +6,8 @@ import { ConfigStore } from '../../../stores/ConfigStore'; import { Stores } from '../../../stores/RootStore'; import { FakeItemContainer } from './FakeItemContainer'; import { ProgressIndicator } from './ProgressIndicator'; +import { ListCreator } from './ListCreator'; +import styles from './MobxTutorial.module.scss'; export type MobxTutorialStoreProps = { appStore: AppStore; @@ -24,10 +26,23 @@ export class MobxTutorial extends React.Component { return (); return ( -
-

{configStore.applicationTitle}

- - +
+ +
+
{configStore.applicationTitle}
+ +
+ +
+
1) Create List
+ +
+ +
+
2) Create Items
+ +
+
); }