From 4a38f877a06108e1c29d792056a85c8d2b28a2f6 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 17 Jun 2019 15:07:17 +0530 Subject: [PATCH] Pass props via router --- .../src/components/RouteWithSubRoutes.js | 2 +- .../react-app/src/components/apps/AppList.js | 87 +++++++++++++++---- .../src/pages/dashboard/Dashboard.js | 18 +++- .../src/pages/dashboard/apps/Apps.js | 19 +--- .../pages/dashboard/apps/release/Release.js | 6 +- 5 files changed, 91 insertions(+), 41 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/RouteWithSubRoutes.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/RouteWithSubRoutes.js index 41cb84caf83..226db5ff225 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/RouteWithSubRoutes.js +++ b/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( ( - + )}/> ); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js index e41c30290ab..767843d7107 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js +++ b/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 {connect} from "react-redux"; -import {getApps} from "../../js/actions"; +import {Col, message, Row} from "antd"; +import axios from "axios"; +import config from "../../../public/conf/config.json"; -// connecting state.apps with the component -const mapStateToProps= state => { - return {apps : state.apps} -}; - - -class ConnectedAppList extends React.Component { +class AppList 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 ( - {this.props.apps.map(app => ( + {apps.map(app => ( + app={app} + /> ))} @@ -33,6 +90,4 @@ class ConnectedAppList extends React.Component { } } -const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList); - export default AppList; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js index d8190b9b1a2..458adf8d942 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js +++ b/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 (
@@ -28,12 +38,12 @@ class Dashboard extends React.Component { Android iOS - Web Clips + Web Clips @@ -42,7 +52,7 @@ class Dashboard extends React.Component { {this.state.routes.map((route) => ( - + ))} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js index d8bb0d134e7..cb9ab7720a1 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js +++ b/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 (
- {deviceType!==null && } + {deviceType!==null && }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js index c982c173fcd..d6b3308b490 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js +++ b/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); } }