loaded modal with redux

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

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

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

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

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

@@ -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,37 +33,38 @@ class ConnectedReleaseModal extends React.Component {
     };
 
     handleOk = (e) => {
-        console.log(e);
         this.setState({
             visible: false,
         });
     };
 
     handleCancel = (e) => {
-        console.log(e);
         this.setState({
             visible: false,
         });
     };
 
     render() {
-        return (
-            <div>
-                <Button type="primary" onClick={this.showModal}>
-                    Open Modal
-                </Button>
-                <Modal
-                    title={this.props.releaseView.title}
-                    visible={this.state.visible}
-                    onOk={this.handleOk}
-                    onCancel={this.handleCancel}
-                >
-                    <p>Some contents...</p>
-                    <p>Some contents...</p>
-                    <p>Some contents...</p>
-                </Modal>
-            </div>
-        );
+        if(this.props.releaseView.app != null){
+            const app = this.props.app;
+
+            return (
+                <div>
+                    <Modal
+                        title={app.title}
+                        visible={this.state.visible}
+                        onOk={this.handleOk}
+                        onCancel={this.handleCancel}
+                    >
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                    </Modal>
+                </div>
+            );
+        }else {
+            return null;
+        }
     }
 }
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js

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

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js

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