Refactored how store is passed to component tree

Author: piotrwitek

src/app.tsx

@@ -17,6 +17,8 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 // components imports
 import {Main} from './components/main';
+import {AppStore, UserData} from './stores/app-store';
 
 const message = 'React / TypeScript / JSPM - Starter-Kit';
-export var appComponent: any = ReactDOM.render(<Main welcomeMessage={message} />, appContainer);
+const appStore = new AppStore(new UserData('Piotr', 32));
+export var appComponent: any = ReactDOM.render(<Main welcomeMessage={message} appStore={appStore} />, appContainer);

src/components/main.tsx

@@ -8,21 +8,24 @@ import {UserProfile} from './user-profile';
 
 interface LocalProps extends React.Props<Main> {
   welcomeMessage: string;
+  appStore: AppStore;
 }
 
 // App pure component
 export class Main extends React.Component<LocalProps, AppStore> {
-  constructor() {
-    super();
-    this.state = new AppStore();
+
+  componentDidMount() {
+    console.log('main mounted!');
   }
 
   render() {
-    const {userData} = this.state;
-    return (<div className="main-component">
-      <h2>{this.props.welcomeMessage}</h2>
-      <UserProfile name={userData.name} age={userData.age} complete={userData.complete} />
-    </div>
+    const {userData} = this.props.appStore;
+    return (
+      <div className="main-component">
+        <h2>{this.props.welcomeMessage}</h2>
+        <UserProfile userData={userData} />
+        <UserProfile userData={null} />
+      </div>
     );
   }
 }

src/components/user-profile.tsx

@@ -2,6 +2,7 @@
 import './user-profile.css!';
 // lib imports
 import * as React from 'react';
+import {UserData} from '../stores/app-store';
 
 enum Texts {
   Complete,
@@ -18,23 +19,29 @@ function getTranslation(text: Texts) {
 }
 
 interface LocalProps extends React.Props<UserProfile> {
-  name: string;
-  age: number;
-  complete: boolean;
+  userData: UserData;
 }
 
 interface LocalState {
   complete?: boolean;
 }
 
 export class UserProfile extends React.Component<LocalProps, LocalState> {
-  constructor(props) {
+  constructor(props: LocalProps) {
     super();
     this.state = {
-      complete: props.complete
+      complete: props.userData ? props.userData.complete : null
     };
   }
 
+  componentDidMount() {
+    console.log('user-profile mounted!');
+  }
+
+  componentDidUpdate() {
+    console.log('user-profile updated!');
+  }
+
   getStatusText = () => {
     return (this.state.complete ? getTranslation(Texts.Complete) : getTranslation(Texts.Incomplete));
   };
@@ -44,7 +51,12 @@ export class UserProfile extends React.Component<LocalProps, LocalState> {
   };
 
   render(): JSX.Element {
-    const {name, age} = this.props;
+    if (this.props.userData == null) {
+      return <div className="user-profile-component">User profile data is empty.</div>;
+    }
+
+    const {name, age} = this.props.userData;
+
     return (
       <div className="user-profile-component">
         <div>{name} is {age} years old.</div>

src/stores/app-store.tsx

@@ -13,8 +13,8 @@ export class UserData {
 export class AppStore {
   userData: UserData;
 
-  constructor() {
-    this.userData = new UserData('Piotr', 33);
+  constructor(initialState?: UserData) {
+    this.userData = initialState || null;
   }
 
 }