Pass props via router

feature/appm-store/pbac
Jayasanka 5 years ago
parent 7b682a35e5
commit 4a38f877a0

@ -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}/>
)}/>
);
}

@ -1,27 +1,84 @@
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 (
<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}
@ -33,6 +90,4 @@ class ConnectedAppList extends React.Component {
}
}
const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
export default AppList;

@ -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>

@ -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>

@ -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);
}
}

Loading…
Cancel
Save