Updating to have the parent state only.

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/App.jsx

@@ -56,16 +56,11 @@ if (theme.current === "default") {
  * */
 class Base extends Component {
 
-    constructor() {
-        super();
-        this.state = {};
-    }
 
     render() {
-        this.setState();
         return (
             <div className="container">
-                <BaseLayout state={this.state}>
+                <BaseLayout state={this.props.state} updateState={this.props.updateState}>
                     <Switch>
                         <Route component={NotFound}/>
                     </Switch>
@@ -73,16 +68,12 @@ class Base extends Component {
             </div>
         )
     }
-
-    setState() {
-        if (this.props.location.state){
-            this.state = this.props.location.state;
-        } else {
-            this.state = {};
-        }
-    }
 }
 
+Base.propTypes = {
+    updateState: React.PropTypes.func.isRequired
+};
+
 /**
  * This component is referred by the index.js to initiate the application.
  * TODO: Currently the URL shows like https://localhost:9443/publisher/#/publisher/assets/apps/create. this needs to
@@ -93,6 +84,11 @@ class Store extends Component {
 
     constructor() {
         super();
+        if (!this.state) {
+            this.state = {};
+            this.state.store = {};
+        }
+        this.updateState = this.updateState.bind(this);
     }
 
     render() {
@@ -101,15 +97,22 @@ class Store extends Component {
                 <MuiThemeProvider muiTheme={muiTheme}>
                     <Router basename="store" history={history}>
                         <Switch>
-                            <Route path="/login" component={Login}/>
+                            <Route path="/login"
-                            <Route path="/logout" component={Login}/>
+                                   render={routeProps => <Login {...routeProps} updateState={this.updateState} state={this.state}/>}/>
-                            <Route component={Base}/>
+                            <Route path="/logout"
+                                   render={routeProps => <Base {...routeProps} updateState={this.updateState} state={this.state}/>}/>
+                            <Route
+                                render={routeProps => <Base {...routeProps} updateState={this.updateState} state={this.state}/>}/>
                         </Switch>
                     </Router>
                 </MuiThemeProvider>
             </div>
         );
     }
+
+    updateState(data) {
+        this.setState(data);
+    }
 }
 
 export default Store;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/BaseLayout.jsx

@@ -26,7 +26,7 @@ import {List, ListItem} from 'material-ui/List';
 import Apps from 'material-ui/svg-icons/navigation/apps';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-import { Link } from 'react-router-dom';
+import {Link, withRouter} from 'react-router-dom';
 
 /**
  * Base Layout:
@@ -36,15 +36,6 @@ import { Link } from 'react-router-dom';
  * */
 class BaseLayout extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = this.props.state;
-    }
-
-    componentWillMount() {
-
-    }
-
     handleApplicationClick() {
         this.handleHistory('/assets/apps');
     }
@@ -59,9 +50,9 @@ class BaseLayout extends Component {
     }
 
     handleUserLogin() {
-        if (this.state.user) {
+        if (this.props.state.store.user) {
             return (
-                <IconButton tooltip={this.state.user}>
+                <IconButton tooltip={this.props.state.store.user}>
                     <ActionAccountCircle/>
                 </IconButton>
             );
@@ -73,10 +64,10 @@ class BaseLayout extends Component {
     }
 
     handleNotification() {
-        if (this.state.user) {
+        if (this.props.state.store.user) {
             return (
                 <Badge
-                    badgeContent={this.state.notifications}
+                    badgeContent={this.props.state.store.notifications}
                     secondary={true}
                     badgeStyle={{top: 12, right: 12}}>
                     <IconButton tooltip="Notifications">
@@ -134,11 +125,8 @@ class BaseLayout extends Component {
 
 }
 
-BaseLayout
+BaseLayout.propTypes = {
-    .propTypes = {
     children: PropTypes.element
 };
 
-export
+export default withRouter(BaseLayout);
-default
-BaseLayout;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/Login.jsx

@@ -61,14 +61,18 @@ class Login extends Component {
 
     handleLogin(event) {
         event.preventDefault();
+        console.log(this.props);
         //TODO: send authentication request.
         let location = {
-            pathname: this.state.referrer,
+            pathname: this.state.referrer
-            state: {
+        };
-                notifications: 0,
+        let storeState = {
-                user: this.state.userName
+            store : {
+                user: this.state.userName,
+                notifications: 0
             }
         };
+        this.props.updateState(storeState);
         this.props.history.push(location);
     }
 

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/src/main/resources/store/src/components/index.js

@@ -16,24 +16,10 @@
  * under the License.
  */
 
+
+import BaseLayout from './BaseLayout';
 /**
- * This a sample custom theme file. In config.json, if the following changes are done, this theme will be applied.
+ * Contains all UI components related to Application, Login and Platform
- * {
- *     "theme" : {
- *       "type" : "custom",
- *       "value" : "custom-theme"
- *     }
- *   }
  */
-import {
-    indigo500, indigo700, redA200,
-} from 'material-ui/styles/colors';
 
-export default {
+export default {BaseLayout};
-    palette: {
-        primary1Color: indigo500,
-        primary2Color: indigo700,
-        accent1Color: redA200,
-        pickerHeaderColor: indigo500,
-    },
-};