Pass props via router

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/RouteWithSubRoutes.js

@@ -9,7 +9,7 @@ class RouteWithSubRoutes extends React.Component{
     render() {
         return(
             <Route path={this.props.path} exact={this.props.exact} render={(props) => (
-                <this.props.component {...props} routes={this.props.routes}/>
+                <this.props.component {...props} {...this.props} routes={this.props.routes}/>
             )}/>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js

@@ -1,31 +1,88 @@
 import React from "react";
 import AppCard from "./AppCard";
-import {Col, Row} from "antd";
+import {Col, message, Row} from "antd";
-import {connect} from "react-redux";
+import axios from "axios";
-import {getApps} from "../../js/actions";
+import config from "../../../public/conf/config.json";
 
-// connecting state.apps with the component
+class AppList extends React.Component {
-const mapStateToProps= state => {
-    return {apps : state.apps}
-};
-
-
-class ConnectedAppList extends React.Component {
     constructor(props) {
         super(props);
+        this.state = {
+            apps: [],
+            loading: false
+        }
     }
+
     componentDidMount() {
-        this.props.getApps();
+        console.log("mounted");
+        const {deviceType} = this.props;
+        console.log(this.props);
+        this.props.changeSelectedMenuItem(deviceType);
+        this.fetchData(deviceType);
     }
 
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.deviceType !== this.props.deviceType) {
+            const {deviceType} = this.props;
+            this.props.changeSelectedMenuItem(deviceType);
+            this.fetchData(deviceType);
+        }
+    }
+
+    fetchData = (deviceType) => {
+
+        const payload = {};
+        if(deviceType==="web-clip"){
+            payload.appType= "WEB_CLIP";
+        }else{
+            payload.deviceType= deviceType;
+        }
+        const parameters = {
+            method: "post",
+            'content-type': "application/json",
+            payload: JSON.stringify(payload),
+            'api-endpoint': "/application-mgt-store/v1.0/applications/"
+        };
+
+        //url-encode parameters
+        const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
+
+        //send request to the invoker
+        axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        ).then(res => {
+            if (res.status === 200) {
+                //todo remove this property check after backend improvement
+                let apps = (res.data.data.hasOwnProperty("applications")) ? res.data.data.applications : [];
+                this.setState({
+                    apps: apps,
+                    loading: false
+                })
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                //todo display a popup with error
+                message.error('You are not logged in');
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+            } else {
+                message.error('Something went wrong... :(');
+            }
+
+            this.setState({loading: false});
+        });
+    };
+
     render() {
+        const {apps} = this.state;
+
         return (
             <Row gutter={16}>
-                {this.props.apps.map(app => (
+                {apps.map(app => (
                     <Col key={app.id} xs={12} sm={6} md={6} lg={4} xl={3}>
                         <AppCard key={app.id}
-                                 app = {app}
+                                 app={app}
-                                 />
+                        />
                     </Col>
                 ))}
             </Row>
@@ -33,6 +90,4 @@ class ConnectedAppList extends React.Component {
     }
 }
 
-const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
-
 export default AppList;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -13,11 +13,21 @@ class Dashboard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            routes: props.routes
+            routes: props.routes,
+            selectedKeys : []
         }
     }
 
+    changeSelectedMenuItem = (key) =>{
+        console.log("called", key);
+        this.setState({
+            selectedKeys: [key]
+        })
+    };
+
     render() {
+        const {selectedKeys} = this.state;
+        console.log(selectedKeys);
         return (
             <div>
                 <Layout className="layout">
@@ -28,12 +38,12 @@ class Dashboard extends React.Component {
                         <Menu
                             theme="light"
                             mode="horizontal"
-                            defaultSelectedKeys={["android"]}
+                            selectedKeys={selectedKeys}
                             style={{lineHeight: '64px'}}
                         >
                             <Menu.Item key="android"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item>
                             <Menu.Item key="ios"><Link to="/store/ios"><Icon type="apple" theme="filled"/>iOS</Link></Menu.Item>
-                            <Menu.Item key="webclip"><Link to="/store/web-clip"><Icon type="upload"/>Web Clips</Link></Menu.Item>
+                            <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web Clips</Link></Menu.Item>
                         </Menu>
                     </Header>
                 </Layout>
@@ -42,7 +52,7 @@ class Dashboard extends React.Component {
                         <Switch>
                             <Redirect exact from="/store" to="/store/android"/>
                             {this.state.routes.map((route) => (
-                                <RouteWithSubRoutes key={route.path} {...route} />
+                                <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem} key={route.path} {...route} />
                             ))}
 
                         </Switch>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js

@@ -2,23 +2,6 @@ import React from "react";
 import "antd/dist/antd.css";
 import AppList from "../../../components/apps/AppList";
 
-
-const routes = [
-    {
-        path: 'index',
-        breadcrumbName: 'store',
-    },
-    {
-        path: 'first',
-        breadcrumbName: 'Dashboard',
-    },
-    {
-        path: 'second',
-        breadcrumbName: 'Apps',
-    },
-];
-
-
 class Apps extends React.Component {
     routes;
     constructor(props) {
@@ -33,7 +16,7 @@ class Apps extends React.Component {
         return (
             <div>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
-                    {deviceType!==null && <AppList deviceType={deviceType}/>}
+                    {deviceType!==null && <AppList changeSelectedMenuItem={this.props.changeSelectedMenuItem} deviceType={deviceType}/>}
                 </div>
 
             </div>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js

@@ -22,15 +22,17 @@ class Release extends React.Component {
     }
 
     componentDidMount() {
-        const {uuid} = this.props.match.params;
+        const {uuid, deviceType} = this.props.match.params;
         this.fetchData(uuid);
+        this.props.changeSelectedMenuItem(deviceType);
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
         console.log(prevState);
         if (prevState.uuid !== this.state.uuid) {
-            const {uuid} = this.props.match.params;
+            const {uuid,deviceType} = this.props.match.params;
             this.fetchData(uuid);
+            this.props.changeSelectedMenuItem(deviceType);
         }
     }