loaded modal with redux

feature/appm-store/pbac
Jayasanka 6 years ago
parent fffad9eea4
commit 9843e6f0e2

@ -3,14 +3,25 @@ import {
} from 'antd';
import React from "react";
import config from "../../../public/conf/config.json";
import {openReleasesModal} from "../../js/actions";
import {connect} from "react-redux";
const { Meta } = Card;
const { Text } = Typography;
class AppCard extends React.Component {
const mapDispatchToProps = dispatch => ({
openReleasesModal: (app) => dispatch(openReleasesModal(app))
});
class ConnectedAppCard extends React.Component {
constructor(props){
super(props);
this.handleReleasesClick = this.handleReleasesClick.bind(this);
}
handleReleasesClick(){
this.props.openReleasesModal(this.props.app);
}
@ -33,7 +44,7 @@ class AppCard extends React.Component {
);
return (
<Card style={{marginTop: 16 }} actions={[<Icon type="edit" />, <Icon type="close" />, <Icon type="ellipsis" />]}>
<Card style={{marginTop: 16 }} actions={[<Icon type="edit" />, <Icon type="close" />, <Icon type="ellipsis" onClick={this.handleReleasesClick} />]}>
<Meta
avatar={<Avatar src={icon} />}
title={this.props.name}
@ -44,4 +55,6 @@ class AppCard extends React.Component {
}
}
const AppCard = connect(null,mapDispatchToProps)(ConnectedAppCard);
export default AppCard;

@ -24,6 +24,7 @@ class ConnectedAppList extends React.Component {
{this.props.apps.map(app => (
<Col key={app.id} xs={24} sm={12} md={6} lg={6}>
<AppCard key={app.id}
app = {app}
name={app.name}
platform={app.deviceType}
type={app.type}

@ -1,5 +1,5 @@
import React from "react";
import {Modal, Button} from 'antd';
import {Modal, Typography} from 'antd';
import { connect } from 'react-redux';
// connecting state.releaseView with the component
@ -7,17 +7,21 @@ const mapStateToProps = state => {
return {releaseView: state.releaseView}
};
const Text = Typography;
class ConnectedReleaseModal extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false
visible: false,
app: null
};
}
componentWillReceiveProps(nextProps) {
if (nextProps !== this.props) {
this.setState({
visible: nextProps.releaseView.visible
visible: nextProps.releaseView.visible,
app: nextProps.releaseView.app
})
}
}
@ -29,27 +33,25 @@ class ConnectedReleaseModal extends React.Component {
};
handleOk = (e) => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = (e) => {
console.log(e);
this.setState({
visible: false,
});
};
render() {
if(this.props.releaseView.app != null){
const app = this.props.app;
return (
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title={this.props.releaseView.title}
title={app.title}
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
@ -60,6 +62,9 @@ class ConnectedReleaseModal extends React.Component {
</Modal>
</div>
);
}else {
return null;
}
}
}

@ -28,11 +28,12 @@ export const getApps = () => dispatch => {
};
export const openReleasesModal = () => dispatch => {
export const openReleasesModal = (app) => dispatch => {
console.log(app);
dispatch({
type: ActionTypes.OPEN_RELEASES_MODAL,
payload: {
title :"hi"
app:app
}
});
};

@ -4,7 +4,7 @@ const initialState = {
apps: [],
releaseView: {
visible: false,
title: "hi"
app: null
}
};
@ -17,7 +17,7 @@ function rootReducer(state = initialState, action) {
return Object.assign({}, state, {
releaseView: {
visible: true,
title: action.title
app: action.payload.app
}
});
}

Loading…
Cancel
Save