get Data

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json

@@ -16,10 +16,11 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-highlight-words": "^0.16.0",
+    "react-router": "latest",
     "react-router-config": "^5.0.0",
     "react-router-dom": "latest",
     "react-scripts": "2.1.8",
-    "react-router": "latest"
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

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

@@ -32,7 +32,7 @@ class AppCard extends React.Component {
                 <Card style={{marginTop: 16 }}  actions={[<Icon type="edit" />, <Icon type="close" />, <Icon type="ellipsis" />]}>
                     <Meta
                         avatar={<Avatar src={icon} />}
-                        title={this.props.title}
+                        title={this.props.name}
                         description={description}
                     />
                 </Card>

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

@@ -2,6 +2,7 @@ import React from "react";
 import AppCard from "./AppCard";
 import {Col, Row} from "antd";
 import {connect} from "react-redux";
+import {getApps} from "../js/actions";
 
 // connecting state.articles with the component
 const mapStateToProps= state => {
@@ -13,13 +14,17 @@ class ConnectedAppList extends React.Component {
     constructor(props) {
         super(props);
     }
+    componentDidMount() {
+        this.props.getApps();
+    }
 
     render() {
         return (
             <Row gutter={16}>
                 {this.props.apps.map(app => (
                     <Col key={app.id} xs={24} sm={12} md={6} lg={6}>
-                        <AppCard key={app.id} title={app.title}
+                        <AppCard key={app.id}
+                                 name={app.name}
                                  platform={app.platform}
                                  type={app.type}
                                  subType={app.subType}
@@ -31,6 +36,6 @@ class ConnectedAppList extends React.Component {
     }
 }
 
-const AppList = connect(mapStateToProps)(ConnectedAppList);
+const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
 
 export default AppList;

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

@@ -9,7 +9,6 @@ import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
 import './index.css';
 import store from "./js/store/index";
 import {Provider} from "react-redux";
-import {Switch} from "react-router";
 
 
 const routes = [

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

@@ -2,15 +2,29 @@ import axios from "axios";
 import {GET_APPS} from "../constants/action-types";
 
 export function getApps() {
-    axios.post('https://localhost:9443/api/application-mgt-handler/v1.0/invoke', request
-    ).then(res => {
-        if(res.status === 200){
-            return {type: GET_APPS, payload : res.data}
-        }
-
-    }).catch(function (error) {
-        if(error.response.status === 401){
-            window.location.href = 'https://localhost:9443/publisher/login';
-        }
-    });
+
+    return (dispatch) => {
+        const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications";
+
+        return axios.post('https://localhost:9443/api/application-mgt-handler/v1.0/invoke', request
+        ).then(res => {
+            if (res.status === 200) {
+                let apps = [];
+
+                if(res.data.data.hasOwnProperty("applications")){
+                    apps = res.data.data.applications;
+                }
+                console.log(res.data);
+                dispatch({type: GET_APPS, payload: apps});
+            }
+
+        }).catch(function (error) {
+            if (error.response.status === 401) {
+                window.location.href = 'https://localhost:9443/publisher/login';
+            }
+        });
+
+    };
+
+
 }

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

@@ -1,28 +1,14 @@
 import {GET_APPS} from "../constants/action-types";
 
 const initialState = {
-    apps: [{
-        id: 1,
-        title: 'Hi',
-        platform: 'android',
-        description: 'lorem',
-        subType: 'FREE',
-        type: 'ENTERPRISE'
-    },
-        {
-            id: 2,
-            title: 'Hi',
-            platform: 'android',
-            description: 'lorem',
-            subType: 'FREE',
-            type: 'ENTERPRISE'
-        }]
+    apps: []
 };
 
 function rootReducer(state = initialState, action) {
     if (action.type === GET_APPS) {
+        console.log(11);
         return Object.assign({}, state, {
-            apps: state.apps.concat(action.payload)
+            apps: action.payload
         });
     }
     return state;

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

@@ -1,4 +1,5 @@
-import { createStore } from "redux";
+import { createStore, applyMiddleware } from "redux";
 import rootReducer from "../reducers/index";
-const store = createStore(rootReducer);
+import thunk from "redux-thunk";
+const store = createStore(rootReducer, applyMiddleware(thunk));
 export default store;

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

@@ -1,8 +1,6 @@
 import React from "react";
 import "antd/dist/antd.css";
 import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
-
-import AppCard from "../../../components/AppCard";
 import AppList from "../../../components/AppList";
 
 const Search = Input.Search;