displayed modal title from redux

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

@@ -4,7 +4,7 @@ import {Col, Row} from "antd";
 import {connect} from "react-redux";
 import {getApps} from "../../js/actions";
 
-// connecting state.articles with the component
+// connecting state.apps with the component
 const mapStateToProps= state => {
     return {apps : state.apps}
 };

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

@@ -0,0 +1,68 @@
+import React from "react";
+import {Modal, Button} from 'antd';
+import { connect } from 'react-redux';
+
+// connecting state.releaseView with the component
+const mapStateToProps = state => {
+    return {releaseView: state.releaseView}
+};
+
+class ConnectedReleaseModal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false
+        };
+    }
+    componentWillReceiveProps(nextProps) {
+        if (nextProps !== this.props) {
+            this.setState({
+               visible: nextProps.releaseView.visible
+            })
+        }
+    }
+
+    showModal = () => {
+        this.setState({
+            visible: true,
+        });
+    };
+
+    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>
+        );
+    }
+}
+
+const ReleaseModal = connect(mapStateToProps,null)(ConnectedReleaseModal);
+
+export default ReleaseModal;

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

@@ -2,17 +2,17 @@ import axios from "axios";
 import ActionTypes from "../constants/ActionTypes";
 import config from "../../../public/conf/config.json";
 
-export function getApps() {
+export const getApps = () => dispatch => {
+
 
-    return (dispatch) => {
     const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications";
 
-        return axios.post('https://'+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+config.serverConfig.invokerUri, request
+    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
             let apps = [];
 
-                if(res.data.data.hasOwnProperty("applications")){
+            if (res.data.data.hasOwnProperty("applications")) {
                 apps = res.data.data.applications;
             }
             console.log(res.data);
@@ -25,7 +25,15 @@ export function getApps() {
         }
     });
 
-    };
 
+};
+
+export const openReleasesModal = () => dispatch => {
+    dispatch({
+        type: ActionTypes.OPEN_RELEASES_MODAL,
+        payload: {
+            title :"hi"
+        }
+    });
+};
 
-}

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

@@ -1,17 +1,28 @@
 import ActionTypes from "../constants/ActionTypes";
 
 const initialState = {
-    apps: []
+    apps: [],
+    releaseView: {
+        visible: false,
+        title: "hi"
+    }
 };
 
 function rootReducer(state = initialState, action) {
     if (action.type === ActionTypes.GET_APPS) {
-        console.log(11);
         return Object.assign({}, state, {
             apps: action.payload
         });
+    } else if (action.type === ActionTypes.OPEN_RELEASES_MODAL) {
+        return Object.assign({}, state, {
+            releaseView: {
+                visible: true,
+                title: action.title
+            }
+        });
     }
     return state;
 }
 
+
 export default rootReducer;

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

@@ -2,6 +2,7 @@ import React from "react";
 import "antd/dist/antd.css";
 import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
 import AppList from "../../../components/apps/AppList";
+import ReleaseModal from "../../../components/apps/ReleaseModal";
 
 const Search = Input.Search;
 
@@ -46,6 +47,7 @@ class Apps extends React.Component {
                             <Button style={{margin:5}}>Advanced Search</Button>
                         </Col>
                     </Row>
+                    <ReleaseModal/>
                     <AppList/>
                 </div>