From caa3717dcb192526c07b9ee9a54e5e1e13ef40cf Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Fri, 14 Jun 2019 11:29:39 +0530
Subject: [PATCH 1/9] Create components to install by device

---
 .../react-app/package.json                    |   1 +
 .../apps/release/install/AppInstallModal.js   |   8 +-
 .../apps/release/install/DeviceInstall.js     | 226 ++++++++++++++++++
 3 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
index ac80be19a0c..784a4bc7024 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
@@ -15,6 +15,7 @@
     "axios": "^0.18.0",
     "d3": "^5.9.2",
     "dagre": "^0.8.4",
+    "javascript-time-ago": "^2.0.1",
     "keymirror": "^0.1.1",
     "lodash.debounce": "^4.0.8",
     "rc-viewer": "0.0.9",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js
index 0cced3824f8..990eea393e8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js
@@ -3,10 +3,14 @@ import {Button, Modal, Tabs} from "antd";
 import UserInstall from "./UserInstall";
 import GroupInstall from "./GroupInstall";
 import RoleInstall from "./RoleInstall";
+import DeviceInstall from "./DeviceInstall";
 
 const { TabPane } = Tabs;
 
 class AppInstallModal extends React.Component{
+    state={
+        data:[]
+    };
     render() {
         return (
             <div>
@@ -17,12 +21,12 @@ class AppInstallModal extends React.Component{
                     onCancel={this.props.onClose}
                     footer={null}
                 >
-                    <Tabs defaultActiveKey="1">
+                    <Tabs defaultActiveKey="1" onChange={()=>{console.log("changed");}}>
                         <TabPane tab="User" key="1">
                             <UserInstall onInstall={this.props.onInstall}/>
                         </TabPane>
                         <TabPane tab="Device" key="2">
-                            Device install
+                            <DeviceInstall onInstall={this.props.onInstall}/>
                         </TabPane>
                         <TabPane tab="Role" key="3">
                             <RoleInstall onInstall={this.props.onInstall}/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
new file mode 100644
index 00000000000..0a19afcf046
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
@@ -0,0 +1,226 @@
+import React from "react";
+import axios from "axios";
+import config from "../../../../../public/conf/config.json";
+import {Button, message, Table} from "antd";
+import TimeAgo from 'javascript-time-ago'
+
+// Load locale-specific relative date/time formatting rules.
+import en from 'javascript-time-ago/locale/en'
+
+const columns = [
+    {
+        title: 'Device',
+        dataIndex: 'name',
+        fixed: 'left',
+        width: 100,
+    },
+    {
+        title: 'Modal',
+        dataIndex: 'deviceInfo',
+        key:'modal',
+        render: deviceInfo => `${deviceInfo.vendor} ${deviceInfo.deviceModel}`
+        // todo add filtering options
+    },
+    {
+        title: 'Owner',
+        dataIndex: 'enrolmentInfo',
+        key: 'owner',
+        render: enrolmentInfo => enrolmentInfo.owner
+        // todo add filtering options
+    },
+    {
+        title: 'Last Updated',
+        dataIndex: 'enrolmentInfo',
+        key: 'dateOfLastUpdate',
+        render: (data) => {
+            return (getTimeAgo(data.dateOfLastUpdate));
+        }
+        // todo add filtering options
+    },
+    {
+        title: 'Status',
+        dataIndex: 'enrolmentInfo',
+        key: 'status',
+        render: enrolmentInfo => enrolmentInfo.status
+        // todo add filtering options
+    },
+    {
+        title: 'Ownership',
+        dataIndex: 'enrolmentInfo',
+        key: 'ownership',
+        render: enrolmentInfo => enrolmentInfo.ownership
+        // todo add filtering options
+    },
+    {
+        title: 'OS Version',
+        dataIndex: 'deviceInfo',
+        key:'osVersion',
+        render: deviceInfo => deviceInfo.osVersion
+        // todo add filtering options
+    },
+    {
+        title: 'IMEI',
+        dataIndex: 'properties',
+        key:'imei',
+        render: properties => {
+            let imei = "not-found";
+            for (let i = 0; i < properties.length; i++) {
+                if(properties[i].name==="IMEI"){
+                    imei = properties[i].value;
+                }
+            }
+            return imei;
+        }
+        // todo add filtering options
+    },
+];
+
+const getTimeAgo = (time) => {
+    const timeAgo = new TimeAgo('en-US');
+    return timeAgo.format(time);
+};
+
+
+class DeviceInstall extends React.Component {
+    constructor(props) {
+        super(props);
+        TimeAgo.addLocale(en);
+        this.state = {
+            data: [],
+            pagination: {},
+            loading: false,
+            selectedRows:[]
+        };
+    }
+
+    rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+            this.setState({
+                selectedRows: selectedRows
+            })
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Disabled User', // Column configuration not to be checked
+            name: record.name,
+        }),
+    };
+
+
+
+
+    componentDidMount() {
+        this.fetch();
+    }
+
+    //fetch data from api
+    fetch = (params = {}) => {
+        this.setState({loading: true});
+
+        // get current page
+        const currentPage = (params.hasOwnProperty("page")) ? params.page : 1;
+
+        const extraParams = {
+            offset: 10 * (currentPage - 1), //calculate the offset
+            limit: 10,
+            status: "INACTIVE",
+            requireDeviceInfo: true
+        };
+
+        // note: encode with '%26' not '&'
+        const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('%26');
+
+        const parameters = {
+            method: "get",
+            'content-type': "application/json",
+            payload: "{}",
+            'api-endpoint': "/device-mgt/v1.0/devices?" + encodedExtraParams
+        };
+
+        //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) {
+                const pagination = {...this.state.pagination};
+                console.log(res.data.data.devices);
+                this.setState({
+                    loading: false,
+                    data: res.data.data.devices,
+                    pagination,
+                });
+
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("status") && error.response.status === 401) {
+                //todo display a popop 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});
+        });
+    };
+
+    handleTableChange = (pagination, filters, sorter) => {
+        const pager = {...this.state.pagination};
+        pager.current = pagination.current;
+        this.setState({
+            pagination: pager,
+        });
+        this.fetch({
+            results: pagination.pageSize,
+            page: pagination.current,
+            sortField: sorter.field,
+            sortOrder: sorter.order,
+            ...filters,
+        });
+    };
+
+    install = () => {
+        const {selectedRows} = this.state;
+        const payload = [];
+        selectedRows.map(device => {
+            payload.push({
+                deviceIdentifier: device.deviceIdentifier,
+                type: device.type
+            });
+        });
+        this.props.onInstall("device", payload);
+    };
+
+
+    render() {
+        const {data,pagination,loading,selectedRows} = this.state;
+        return (
+            <div>
+                <Table
+                    columns={columns}
+                    rowKey={record => record.deviceIdentifier}
+                    dataSource={data}
+                    pagination={{
+                        ...pagination,
+                        size: "small",
+                        // position: "top",
+                        showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} devices`
+                        // showQuickJumper: true
+                    }}
+                    loading={loading}
+                    onChange={this.handleTableChange}
+                    rowSelection={this.rowSelection}
+                    scroll={{x: 1000}}
+                />
+                <div style={{paddingTop: 10, textAlign: "right"}}>
+                    <Button disabled={selectedRows.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default DeviceInstall;
\ No newline at end of file

From b56430feb2747cda0596dbd493ca544084e5b41c Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Fri, 14 Jun 2019 11:54:01 +0530
Subject: [PATCH 2/9] Disable install button when selected nothing

---
 .../src/components/apps/release/install/DeviceInstall.js       | 3 ---
 .../src/components/apps/release/install/GroupInstall.js        | 2 +-
 .../src/components/apps/release/install/RoleInstall.js         | 2 +-
 .../src/components/apps/release/install/UserInstall.js         | 3 +--
 4 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
index 0a19afcf046..234c46fefd8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
@@ -106,9 +106,6 @@ class DeviceInstall extends React.Component {
         }),
     };
 
-
-
-
     componentDidMount() {
         this.fetch();
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
index e57374f91f0..f2da36c4738 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
@@ -110,7 +110,7 @@ class GroupInstall extends React.Component {
                     ))}
                 </Select>
                 <div style={{paddingTop:10, textAlign:"right"}}>
-                    <Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
+                    <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
                 </div>
             </div>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
index 358a29ae2e2..4befab07e51 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
@@ -110,7 +110,7 @@ class RoleInstall extends React.Component {
                     ))}
                 </Select>
                 <div style={{paddingTop:10, textAlign:"right"}}>
-                    <Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
+                    <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
                 </div>
             </div>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
index 27ee3b83829..0fcf7dada85 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
@@ -86,7 +86,6 @@ class UserInstall extends React.Component {
     };
 
     render() {
-
         const {fetching, data, value} = this.state;
 
         return (
@@ -110,7 +109,7 @@ class UserInstall extends React.Component {
                     ))}
                 </Select>
                 <div style={{paddingTop: 10, textAlign: "right"}}>
-                    <Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
+                    <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
                 </div>
             </div>
         );

From 336612904b64e8d3070481198f3723256e2e2906 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Fri, 14 Jun 2019 13:48:05 +0530
Subject: [PATCH 3/9] Remove redux from release view in store

---
 .../react-app/src/components/apps/AppCard.js  |   3 +-
 .../components/apps/release/ReleaseView.js    |   3 +-
 .../react-app/src/index.js                    |   6 +-
 .../src/pages/dashboard/Dashboard.js          |  12 +-
 .../src/pages/dashboard/apps/Apps.js          |  13 --
 .../pages/dashboard/apps/release/Release.js   | 116 +++++++++---------
 6 files changed, 68 insertions(+), 85 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
index 091dd984a7e..6078e714795 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
@@ -29,11 +29,10 @@ class ConnectedAppCard extends React.Component {
     render() {
         const app = this.props.app;
         const release = this.props.app.applicationReleases[0];
-        // console.log(this.props);
 
         const description = (
             <div className="appCard">
-                <Link to={"/store/apps/" + release.uuid}>
+                <Link to={"/store/"+app.deviceType+"/" + release.uuid}>
                     <Row className="release">
                         <Col span={24} className="release-icon">
                             <img src={release.iconPath} alt="icon"/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
index d95377e1c9d..7872e0f3086 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -89,7 +89,8 @@ class ReleaseView extends React.Component {
     };
 
     render() {
-        const release = this.props.release;
+        const app = this.props.app;
+        const release = app.applicationReleases[0];
         return (
             <div>
                 <AppInstallModal uuid={release.uuid} visible={this.state.appInstallModalVisible}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
index bf001fa2056..5435fcc3192 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
@@ -19,12 +19,12 @@ const routes = [
         component: Login
     },
     {
-        path: '/store/apps',
+        path: '/store',
         exact: false,
         component: Dashboard,
         routes: [
             {
-                path: '/store/apps',
+                path: '/store/android',
                 component: Apps,
                 exact: true
             },
@@ -34,7 +34,7 @@ const routes = [
                 exact: true
             },
             {
-                path: '/store/apps/:uuid',
+                path: '/store/android/:uuid',
                 exact: true,
                 component: Release
             }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
index da92c72a2d0..5eb718f8039 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -28,21 +28,19 @@ class Dashboard extends React.Component {
                         <Menu
                             theme="light"
                             mode="horizontal"
-                            defaultSelectedKeys={['2']}
+                            defaultSelectedKeys={['1']}
                             style={{lineHeight: '64px'}}
                         >
-                            <Menu.Item key="1"><Link to="/store/apps"><Icon type="appstore"/>Apps</Link></Menu.Item>
-                            <Menu.Item key="2"><Link to="/store/apps"><Icon
-                                type="line-chart"/>Apps</Link></Menu.Item>
-                            <Menu.Item key="3"><Link to="/store/apps/new-app"><Icon type="upload"/>Add New
-                                App</Link></Menu.Item>
+                            <Menu.Item key="1"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item>
+                            <Menu.Item key="2"><Link to="/store/apps"><Icon type="apple" theme="filled"/>iOS</Link></Menu.Item>
+                            <Menu.Item key="3"><Link to="/store/apps/new-app"><Icon type="upload"/>Web Clips</Link></Menu.Item>
                         </Menu>
                     </Header>
                 </Layout>
                 <Layout>
                     <Content style={{padding: '0 0'}}>
                         <Switch>
-                            <Redirect exact from="/store" to="/store/apps"/>
+                            <Redirect exact from="/store" to="/store/android"/>
                             {this.state.routes.map((route) => (
                                 <RouteWithSubRoutes key={route.path} {...route} />
                             ))}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
index 90e68ed1d03..1a649848582 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
@@ -33,20 +33,7 @@ class Apps extends React.Component {
     render() {
         return (
             <div>
-                <PageHeader
-                    breadcrumb={{routes}}
-                />
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
-                    <Row style={{padding:10}}>
-                        <Col span={6} offset={18}>
-                            <Search
-                                placeholder="search"
-                                onSearch={value => console.log(value)}
-                                style={{ width: 200}}
-                            />
-                            <Button style={{margin:5}}>Advanced Search</Button>
-                        </Col>
-                    </Row>
                     <ReleaseModal/>
                     <AppList/>
                 </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
index 27afea477e3..5434ea66ef0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -1,61 +1,80 @@
 import React from "react";
 import '../../../../App.css';
-import {Skeleton, Typography, Row, Col, Card} from "antd";
-import {connect} from "react-redux";
+import {Skeleton, Typography, Row, Col, Card, message} from "antd";
 import ReleaseView from "../../../../components/apps/release/ReleaseView";
-import {getRelease, setLoading} from "../../../../js/actions";
+import axios from "axios";
+import config from "../../../../../public/conf/config.json";
 
 const {Title} = Typography;
 
-const routes = [
-    {
-        path: 'index',
-        breadcrumbName: 'store',
-    },
-    {
-        path: 'first',
-        breadcrumbName: 'Dashboard',
-    },
-    {
-        path: 'second',
-        breadcrumbName: 'Apps',
-    },
-];
-
-const mapStateToProps = state => {
-    return {
-        release: state.release,
-        releaseLoading: state.loadingState.release
-    }
-};
-
-const mapDispatchToProps = dispatch => ({
-    getRelease: (uuid) => dispatch(getRelease(uuid)),
-    setLoading: (stateToLoad) => dispatch(setLoading(stateToLoad))
-});
-
-class ConnectedRelease extends React.Component {
+class Release extends React.Component {
     routes;
 
     constructor(props) {
         super(props);
         this.routes = props.routes;
+        this.state={
+            loading: true,
+            app: null
+        }
 
     }
 
     componentDidMount() {
         const {uuid} = this.props.match.params;
-        this.props.setLoading("release");
-        this.props.getRelease(uuid);
+        this.fetchData(uuid);
     }
 
-    render() {
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps !== this.props) {
+            this.fetchData(uuid);
+        }
+    }
+
+    fetchData = (uuid)=>{
+        const parameters = {
+            method: "get",
+            'content-type': "application/json",
+            payload: "{}",
+            'api-endpoint': "/application-mgt-store/v1.0/applications/" + uuid
+        };
+
+        //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) {
+                let app = res.data.data;
+
+                console.log(app);
+
+                this.setState({
+                    app: app,
+                    loading: false
+                })
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                //todo display a popop 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});
+        });
+    };
 
-        const release = this.props.release;
+    render() {
+        const {app, loading} = this.state;
         let content = <Title level={3}>No Releases Found</Title>;
 
-        if (release != null) {
-            content = <ReleaseView release={release}/>;
+        if (app != null && app.applicationReleases.length!==0) {
+            content = <ReleaseView app={app}/>;
         }
 
 
@@ -67,7 +86,7 @@ class ConnectedRelease extends React.Component {
                     </Col>
                     <Col lg={16} md={24} style={{padding: 3}}>
                         <Card>
-                            <Skeleton loading={this.props.releaseLoading} avatar={{size: 'large'}} active paragraph={{rows: 8}}>
+                            <Skeleton loading={loading} avatar={{size: 'large'}} active paragraph={{rows: 8}}>
                                 {content}
                             </Skeleton>
                         </Card>
@@ -76,29 +95,8 @@ class ConnectedRelease extends React.Component {
 
             </div>
         );
-
-
-        // //todo remove uppercase
-        // return (
-        //     <div>
-        //         <div className="main-container">
-        //             <Row style={{padding: 10}}>
-        //                 <Col lg={4}>
-        //
-        //                 </Col>
-        //                 <Col lg={16} md={24} style={{padding: 3}}>
-        //                     <Card>
-        //                         <ReleaseView release={release}/>
-        //                     </Card>
-        //                 </Col>
-        //             </Row>
-        //         </div>
-        //     </div>
-        //
-        // );
     }
 }
 
-const Release = connect(mapStateToProps, mapDispatchToProps)(ConnectedRelease);
 
 export default Release;

From 164b3415aee23fbed77c5811818f93056c25e5bd Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Fri, 14 Jun 2019 14:12:09 +0530
Subject: [PATCH 4/9] Change routes in store

---
 .../react-app/src/components/apps/AppCard.js          |  2 +-
 .../src/components/apps/release/ReleaseView.js        |  4 ++--
 .../react-app/src/index.js                            | 10 ++--------
 .../react-app/src/pages/dashboard/Dashboard.js        | 11 +++++++----
 .../src/pages/dashboard/apps/release/Release.js       |  1 +
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
index 6078e714795..44082e690bc 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
@@ -32,7 +32,7 @@ class ConnectedAppCard extends React.Component {
 
         const description = (
             <div className="appCard">
-                <Link to={"/store/"+app.deviceType+"/" + release.uuid}>
+                <Link to={"/store/"+app.deviceType+"/apps/" + release.uuid}>
                     <Row className="release">
                         <Col span={24} className="release-icon">
                             <img src={release.iconPath} alt="icon"/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
index 7872e0f3086..ea96028b805 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -101,10 +101,10 @@ class ReleaseView extends React.Component {
                             <img src={release.iconPath} alt="icon"/>
                         </Col>
                         <Col xl={10} sm={11} className="release-title">
-                            <Title level={2}>App Name</Title>
+                            <Title level={2}>{app.name}</Title>
                             <Text>Version : {release.version}</Text><br/><br/>
                             <StarRatings
-                                rating={release.rating}
+                                rating={app.rating}
                                 starRatedColor="#777"
                                 starDimension="20px"
                                 starSpacing="2px"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
index 5435fcc3192..f98a4a19390 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
@@ -6,7 +6,6 @@ import Login from "./pages/Login";
 import Dashboard from "./pages/dashboard/Dashboard";
 import Apps from "./pages/dashboard/apps/Apps";
 import Release from "./pages/dashboard/apps/release/Release";
-import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
 import './index.css';
 import store from "./js/store/index";
 import {Provider} from "react-redux";
@@ -24,17 +23,12 @@ const routes = [
         component: Dashboard,
         routes: [
             {
-                path: '/store/android',
+                path: '/store/:deviceType',
                 component: Apps,
                 exact: true
             },
             {
-                path: '/store/apps/new-app',
-                component: AddNewApp,
-                exact: true
-            },
-            {
-                path: '/store/android/:uuid',
+                path: '/store/:deviceType/apps/:uuid',
                 exact: true,
                 component: Release
             }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
index 5eb718f8039..fd331a54293 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -18,6 +18,9 @@ class Dashboard extends React.Component {
     }
 
     render() {
+        const {deviceType} = this.props.match.params;
+        console.log(this.props.match.params);
+        console.log(deviceType);
         return (
             <div>
                 <Layout className="layout">
@@ -28,12 +31,12 @@ class Dashboard extends React.Component {
                         <Menu
                             theme="light"
                             mode="horizontal"
-                            defaultSelectedKeys={['1']}
+                            defaultSelectedKeys={["android"]}
                             style={{lineHeight: '64px'}}
                         >
-                            <Menu.Item key="1"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item>
-                            <Menu.Item key="2"><Link to="/store/apps"><Icon type="apple" theme="filled"/>iOS</Link></Menu.Item>
-                            <Menu.Item key="3"><Link to="/store/apps/new-app"><Icon type="upload"/>Web Clips</Link></Menu.Item>
+                            <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/webclips"><Icon type="upload"/>Web Clips</Link></Menu.Item>
                         </Menu>
                     </Header>
                 </Layout>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
index 5434ea66ef0..acdf7763f78 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -26,6 +26,7 @@ class Release extends React.Component {
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
+        const {uuid} = this.props.match.params;
         if (prevProps !== this.props) {
             this.fetchData(uuid);
         }

From 7b682a35e532090e3a7757b6730f9f6e29d11379 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 17 Jun 2019 13:14:08 +0530
Subject: [PATCH 5/9] Fix typos in app installation components

---
 .../apps/release/install/DeviceInstall.js           |  6 ++++--
 .../components/apps/release/install/GroupInstall.js |  3 +--
 .../components/apps/release/install/RoleInstall.js  |  3 +--
 .../components/apps/release/install/UserInstall.js  |  3 +--
 .../react-app/src/pages/Login.js                    |  4 ++--
 .../react-app/src/pages/dashboard/Dashboard.js      |  5 +----
 .../react-app/src/pages/dashboard/apps/Apps.js      |  8 +++-----
 .../src/pages/dashboard/apps/release/Release.js     | 13 ++++++++-----
 8 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
index 234c46fefd8..c1c7a5f2e53 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
@@ -1,12 +1,12 @@
 import React from "react";
 import axios from "axios";
 import config from "../../../../../public/conf/config.json";
-import {Button, message, Table} from "antd";
+import {Button, message, Table, Typography} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en'
-
+const {Text} = Typography;
 const columns = [
     {
         title: 'Device',
@@ -196,7 +196,9 @@ class DeviceInstall extends React.Component {
         const {data,pagination,loading,selectedRows} = this.state;
         return (
             <div>
+                <Text>Start installing the application for one or more users by entering the corresponding user name. Select install to automatically start downloading the application for the respective user/users. </Text>
                 <Table
+                    style={{paddingTop:20}}
                     columns={columns}
                     rowKey={record => record.deviceIdentifier}
                     dataSource={data}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
index f2da36c4738..535fefec220 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
@@ -90,8 +90,7 @@ class GroupInstall extends React.Component {
 
         return (
             <div>
-                <Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro
-                    decore ubique sed,</Text>
+                <Text>Start installing the application for one or more groups by entering the corresponding group name. Select install to automatically start downloading the application for the respective device group/ groups.</Text>
                 <br/>
                 <br/>
                 <Select
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
index 4befab07e51..b9af20857c9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
@@ -90,8 +90,7 @@ class RoleInstall extends React.Component {
 
         return (
             <div>
-                <Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro
-                    decore ubique sed,</Text>
+                <Text>Start installing the application for one or more roles by entering the corresponding role name. Select install to automatically start downloading the application for the respective user role/roles.</Text>
                 <br/>
                 <br/>
                 <Select
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
index 0fcf7dada85..74d12b048a2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
@@ -90,8 +90,7 @@ class UserInstall extends React.Component {
 
         return (
             <div>
-                <Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro
-                    decore ubique sed,</Text>
+                <Text>Start installing the application for one or more users by entering the corresponding user name. Select install to automatically start downloading the application for the respective user/users. </Text>
                 <p>Select users</p>
                 <Select
                     mode="multiple"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
index 863d02aae9c..5d016cdeafa 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
@@ -92,7 +92,7 @@ class NormalLoginForm extends React.Component {
                     {getFieldDecorator('username', {
                         rules: [{required: true, message: 'Please input your username!'}],
                     })(
-                        <Input style={{height: 32}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
+                        <Input name="username" style={{height: 32}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                placeholder="Username"/>
                     )}
                 </Form.Item>
@@ -100,7 +100,7 @@ class NormalLoginForm extends React.Component {
                     {getFieldDecorator('password', {
                         rules: [{required: true, message: 'Please input your Password!'}],
                     })(
-                        <Input style={{height: 32}} className={styles.input}
+                        <Input name="password" style={{height: 32}} className={styles.input}
                                prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
                                placeholder="Password"/>
                     )}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
index fd331a54293..d8190b9b1a2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -18,9 +18,6 @@ class Dashboard extends React.Component {
     }
 
     render() {
-        const {deviceType} = this.props.match.params;
-        console.log(this.props.match.params);
-        console.log(deviceType);
         return (
             <div>
                 <Layout className="layout">
@@ -36,7 +33,7 @@ class Dashboard extends React.Component {
                         >
                             <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/webclips"><Icon type="upload"/>Web Clips</Link></Menu.Item>
+                            <Menu.Item key="webclip"><Link to="/store/web-clip"><Icon type="upload"/>Web Clips</Link></Menu.Item>
                         </Menu>
                     </Header>
                 </Layout>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
index 1a649848582..d8bb0d134e7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
@@ -1,10 +1,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;
 
 const routes = [
     {
@@ -30,12 +27,13 @@ class Apps extends React.Component {
 
     }
 
+
     render() {
+        const {deviceType} = this.props.match.params;
         return (
             <div>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
-                    <ReleaseModal/>
-                    <AppList/>
+                    {deviceType!==null && <AppList deviceType={deviceType}/>}
                 </div>
 
             </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
index acdf7763f78..c982c173fcd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -15,7 +15,8 @@ class Release extends React.Component {
         this.routes = props.routes;
         this.state={
             loading: true,
-            app: null
+            app: null,
+            uuid: null
         }
 
     }
@@ -26,8 +27,9 @@ class Release extends React.Component {
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        const {uuid} = this.props.match.params;
-        if (prevProps !== this.props) {
+        console.log(prevState);
+        if (prevState.uuid !== this.state.uuid) {
+            const {uuid} = this.props.match.params;
             this.fetchData(uuid);
         }
     }
@@ -53,7 +55,8 @@ class Release extends React.Component {
 
                 this.setState({
                     app: app,
-                    loading: false
+                    loading: false,
+                    uuid: uuid
                 })
             }
 
@@ -80,7 +83,7 @@ class Release extends React.Component {
 
 
         return (
-            <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+            <div style={{background: '#f0f2f5', minHeight: 780}}>
                 <Row style={{padding: 10}}>
                     <Col lg={4}>
 

From 4a38f877a06108e1c29d792056a85c8d2b28a2f6 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 17 Jun 2019 15:07:17 +0530
Subject: [PATCH 6/9] Pass props via router

---
 .../src/components/RouteWithSubRoutes.js      |  2 +-
 .../react-app/src/components/apps/AppList.js  | 87 +++++++++++++++----
 .../src/pages/dashboard/Dashboard.js          | 18 +++-
 .../src/pages/dashboard/apps/Apps.js          | 19 +---
 .../pages/dashboard/apps/release/Release.js   |  6 +-
 5 files changed, 91 insertions(+), 41 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/RouteWithSubRoutes.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/RouteWithSubRoutes.js
index 41cb84caf83..226db5ff225 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/RouteWithSubRoutes.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/RouteWithSubRoutes.js
@@ -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}/>
             )}/>
         );
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
index e41c30290ab..767843d7107 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
@@ -1,31 +1,88 @@
 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}
-                                 />
+                                 app={app}
+                        />
                     </Col>
                 ))}
             </Row>
@@ -33,6 +90,4 @@ class ConnectedAppList extends React.Component {
     }
 }
 
-const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
-
 export default AppList;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
index d8190b9b1a2..458adf8d942 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -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>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
index d8bb0d134e7..cb9ab7720a1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
@@ -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>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
index c982c173fcd..d6b3308b490 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -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);
         }
     }
 

From d188b18bc5bb8ef1c9713b94c0c73fb9d60d608c Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 17 Jun 2019 15:28:15 +0530
Subject: [PATCH 7/9] Remove redux from detailed rating component

---
 .../apps/detailed-rating/DetailedRating.js    |  4 +-
 .../components/apps/release/DetailedRating.js | 50 +++++++++++++------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js
index da83fc878f3..18fa46f812d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js
@@ -21,8 +21,8 @@ class DetailedRating extends React.Component{
         this.getData(this.props.uuid);
     }
 
-    componentDidUpdate(nextProps) {
-        if (nextProps !== this.props) {
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.uuid !== this.props.uuid) {
             this.getData(this.props.uuid);
         }
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
index b5dad1088c9..f8dc026b8e7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js
@@ -1,31 +1,52 @@
 import React from "react";
 import {Row, Typography, Icon} from "antd";
 import StarRatings from "react-star-ratings";
+import axios from "axios";
 import "./DetailedRating.css";
-import {connect} from "react-redux";
-import {getDetailedRating} from "../../../js/actions";
+import config from "../../../../public/conf/config.json";
 
 const { Text } = Typography;
 
-// connecting state. with the component
-const mapStateToProps= state => {
-    return {detailedRating : state.detailedRating}
-};
+class DetailedRating extends React.Component{
 
-const mapDispatchToProps = dispatch => ({
-    getDetailedRating: (uuid) => dispatch(getDetailedRating(uuid))
-});
+    constructor(props){
+        super(props);
+        this.state={
+            detailedRating: null
+        }
+    }
 
+    componentDidMount() {
+        this.getData(this.props.uuid);
+    }
 
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.uuid !== this.props.uuid) {
+            this.getData(this.props.uuid);
+        }
+    }
 
-class ConnectedDetailedRating extends React.Component{
+    getData = (uuid)=>{
+        const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating";
 
-    componentDidMount() {
-        this.props.getDetailedRating(this.props.uuid);
-    }
+        return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        ).then(res => {
+            if (res.status === 200) {
+                let detailedRating = res.data.data;
+                this.setState({
+                    detailedRating
+                })
+            }
+
+        }).catch(function (error) {
+            if (error.response.status === 401) {
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
+            }
+        });
+    };
 
     render() {
-        const detailedRating = this.props.detailedRating;
+        const detailedRating = this.state.detailedRating;
 
         console.log(detailedRating);
 
@@ -96,6 +117,5 @@ class ConnectedDetailedRating extends React.Component{
     }
 }
 
-const DetailedRating = connect(mapStateToProps,mapDispatchToProps)(ConnectedDetailedRating);
 
 export default DetailedRating;
\ No newline at end of file

From ff7158bf00fa4b15472cb0cc02181761db88ad0f Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 17 Jun 2019 15:41:34 +0530
Subject: [PATCH 8/9] Remove redux from APPM store

---
 .../react-app/package.json                    |   3 -
 .../react-app/src/components/apps/AppCard.js  |  16 +-
 .../src/components/apps/ReleaseModal.js       |  85 ---------
 .../react-app/src/index.js                    |   7 +-
 .../react-app/src/js/actions/index.js         | 168 ------------------
 .../react-app/src/js/constants/ActionTypes.js |  17 --
 .../react-app/src/js/reducers/index.js        |  83 ---------
 .../react-app/src/js/store/index.js           |   5 -
 8 files changed, 4 insertions(+), 380 deletions(-)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/ReleaseModal.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/actions/index.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/constants/ActionTypes.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/reducers/index.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/store/index.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
index 784a4bc7024..6b4aba3fbd5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
@@ -31,7 +31,6 @@
     "react-scripts": "2.1.8",
     "react-star-ratings": "^2.3.0",
     "react-virtualized": "^9.21.1",
-    "redux-thunk": "^2.3.0",
     "reqwest": "^2.0.5",
     "storm-react-diagrams": "^5.2.1"
   },
@@ -66,8 +65,6 @@
     "react": "^15.6.2",
     "react-dom": "^15.6.2",
     "react-intl": "^2.4.0",
-    "react-redux": "^7.0.2",
-    "redux": "^4.0.1",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.18.2",
     "url-loader": "^1.1.2",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
index 44082e690bc..1ef3f3333ab 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
@@ -1,21 +1,13 @@
-import {
-    Skeleton, Switch, Card, Icon, Avatar, Typography, Col, Row, Rate
-} from 'antd';
+import {Card, Typography, Col, Row} from 'antd';
 import React from "react";
-import {openReleasesModal} from "../../js/actions";
-import {connect} from "react-redux";
 import {Link} from "react-router-dom";
 import "../../App.css";
 import StarRatings from 'react-star-ratings';
 
 const {Meta} = Card;
-const {Text, Title} = Typography;
+const {Text} = Typography;
 
-const mapDispatchToProps = dispatch => ({
-    openReleasesModal: (app) => dispatch(openReleasesModal(app))
-});
-
-class ConnectedAppCard extends React.Component {
+class AppCard extends React.Component {
 
     constructor(props) {
         super(props);
@@ -65,6 +57,4 @@ class ConnectedAppCard extends React.Component {
     }
 }
 
-const AppCard = connect(null, mapDispatchToProps)(ConnectedAppCard);
-
 export default AppCard;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/ReleaseModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/ReleaseModal.js
deleted file mode 100644
index 2265aa6d3f9..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/ReleaseModal.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from "react";
-import {Modal, Typography,List, Avatar} from 'antd';
-import {connect} from 'react-redux';
-import {Link} from "react-router-dom";
-
-// connecting state.releaseView with the component
-const mapStateToProps = state => {
-    return {releaseView: state.releaseView}
-};
-
-const Text = Typography;
-
-class ConnectedReleaseModal extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            visible: false,
-            app: null
-        };
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps !== this.props) {
-            this.setState({
-                visible: nextProps.releaseView.visible,
-                app: nextProps.releaseView.app
-            })
-        }
-    }
-
-    showModal = () => {
-        this.setState({
-            visible: true,
-        });
-    };
-
-    handleOk = (e) => {
-        this.setState({
-            visible: false,
-        });
-    };
-
-    handleCancel = (e) => {
-        this.setState({
-            visible: false,
-        });
-    };
-
-    render() {
-        if (this.props.releaseView.app != null) {
-            const app = this.props.releaseView.app;
-            return (
-                <div>
-                    <Modal
-                        title={app.name}
-                        visible={this.state.visible}
-                        onOk={this.handleOk}
-                        onCancel={this.handleCancel}
-                    >
-                        <p>Some contents...</p>
-                        <List
-                        itemLayout="horizontal"
-                        dataSource={app.applicationReleases}
-                        renderItem={release => (
-                            <List.Item>
-                                <List.Item.Meta
-                                    avatar={<Avatar src={release.iconPath} />}
-                                    title={<Link to={"/store/apps/"+release.uuid}>{release.version}</Link>}
-                                    description={release.description}
-                                />
-                            </List.Item>
-                        )}
-                    />
-                    </Modal>
-                </div>
-            );
-        } else {
-            return null;
-        }
-    }
-}
-
-const ReleaseModal = connect(mapStateToProps, null)(ConnectedReleaseModal);
-
-export default ReleaseModal;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
index f98a4a19390..3e415a3cee2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/index.js
@@ -7,9 +7,6 @@ import Dashboard from "./pages/dashboard/Dashboard";
 import Apps from "./pages/dashboard/apps/Apps";
 import Release from "./pages/dashboard/apps/release/Release";
 import './index.css';
-import store from "./js/store/index";
-import {Provider} from "react-redux";
-
 
 const routes = [
     {
@@ -38,9 +35,7 @@ const routes = [
 
 
 ReactDOM.render(
-    <Provider store={store}>
-        <App routes={routes}/>
-    </Provider>,
+    <App routes={routes}/>,
     document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/actions/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/actions/index.js
deleted file mode 100644
index aad30831b36..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/actions/index.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import axios from "axios";
-import ActionTypes from "../constants/ActionTypes";
-import config from "../../../public/conf/config.json";
-
-export const getApps = () => dispatch => {
-
-    const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications";
-
-    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
-    ).then(res => {
-        if (res.status === 200) {
-            let apps = [];
-
-            if (res.data.data.hasOwnProperty("applications")) {
-                apps = res.data.data.applications;
-            }
-            dispatch({type: ActionTypes.GET_APPS, payload: apps});
-        }
-
-    }).catch(function (error) {
-        if (error.response.status === 401) {
-            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
-        }
-    });
-
-};
-
-export const getRelease = (uuid) => dispatch => {
-
-    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications/" + uuid;
-
-    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
-    ).then(res => {
-        if (res.status === 200) {
-            let release = res.data.data.applicationReleases[0];
-            dispatch({
-                type: ActionTypes.GET_RELEASE,
-                payload: {
-                    release: release,
-                    releaseLoading: false
-                }
-            });
-        }
-    }).catch(function (error) {
-        if (error.response.status === 401) {
-            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
-        }else if(error.response.status===404){
-            dispatch({
-                type: ActionTypes.GET_RELEASE,
-                payload: {
-                    release: null,
-                    releaseLoading: false
-                }});
-        }
-    });
-
-
-};
-
-export const openReleasesModal = (app) => dispatch => {
-    dispatch({
-        type: ActionTypes.OPEN_RELEASES_MODAL,
-        payload: {
-            app: app
-        }
-    });
-};
-
-
-export const openLifecycleModal = (nextState) => dispatch => {
-    dispatch({
-        type: ActionTypes.OPEN_LIFECYCLE_MODAL,
-        payload: {
-            nextState: nextState
-        }
-    });
-};
-
-export const closeLifecycleModal = () => dispatch => {
-    dispatch({
-        type: ActionTypes.CLOSE_LIFECYCLE_MODAL
-    });
-};
-
-export const setLoading = (stateToLoad) => dispatch => {
-    dispatch({
-        type: ActionTypes.SET_LOADING_STATE,
-        payload: {
-            stateToLoad: stateToLoad
-        }
-    });
-};
-
-export const getLifecycle = () => dispatch => {
-    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications/lifecycle-config";
-
-    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
-    ).then(res => {
-        if (res.status === 200) {
-            let lifecycle = res.data.data;
-            dispatch({type: ActionTypes.GET_LIFECYCLE, payload: lifecycle});
-        }
-
-    }).catch(function (error) {
-        if (error.response.status === 401) {
-            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
-        }
-    });
-};
-
-export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
-
-    const payload = {
-        action: nextState,
-        reason: reason
-    };
-
-    const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-store/v1.0/applications/life-cycle/" + uuid;
-
-
-    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
-    ).then(res => {
-        if (res.status === 201) {
-            let release = res.data.data;
-            dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
-        }else {
-            alert("error");
-            dispatch({
-                type: ActionTypes.CLOSE_LIFECYCLE_MODAL
-            });
-        }
-
-    }).catch(function (error) {
-        if (error.response.status === 401) {
-            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
-        } else if (error.response.status === 500) {
-            alert("error");
-            dispatch({
-                type: ActionTypes.CLOSE_LIFECYCLE_MODAL
-            });
-        }
-    });
-
-
-};
-
-export const getDetailedRating = (uuid) => dispatch => {
-    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating";
-
-    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
-    ).then(res => {
-        if (res.status === 200) {
-            let detailedRating = res.data.data;
-            dispatch({type: ActionTypes.GET_DETAILED_RATING, payload: detailedRating});
-        }
-
-    }).catch(function (error) {
-        if (error.response.status === 401) {
-            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
-        } else{
-            dispatch({
-                type: ActionTypes.GET_DETAILED_RATING, payload: null
-            });
-        }
-    });
-
-
-};
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/constants/ActionTypes.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/constants/ActionTypes.js
deleted file mode 100644
index bd47f220740..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/constants/ActionTypes.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import keyMirror from 'keymirror';
-
-const ActionTypes = keyMirror({
-    LOGIN: null,
-    GET_APPS: null,
-    OPEN_RELEASES_MODAL: null,
-    CLOSE_RELEASES_MODAL: null,
-    GET_RELEASE: null,
-    GET_LIFECYCLE: null,
-    OPEN_LIFECYCLE_MODAL: null,
-    CLOSE_LIFECYCLE_MODAL: null,
-    UPDATE_LIFECYCLE_STATE: null,
-    SET_LOADING_STATE: null,
-    GET_DETAILED_RATING: null
-});
-
-export default ActionTypes;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/reducers/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/reducers/index.js
deleted file mode 100644
index fcf1aa7db64..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/reducers/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import ActionTypes from "../constants/ActionTypes";
-
-const initialState = {
-    apps: [],
-    releaseView: {
-        visible: false,
-        app: null
-    },
-    release: null,
-    lifecycle: null,
-    lifecycleModal: {
-        visible: false,
-        nextState: null
-    },
-    loadingState: {
-        release: true
-    },
-    detailedRating: null
-
-};
-
-function rootReducer(state = initialState, action) {
-    if (action.type === ActionTypes.GET_APPS) {
-        return Object.assign({}, state, {
-            apps: action.payload
-        });
-    } else if (action.type === ActionTypes.OPEN_RELEASES_MODAL) {
-        return Object.assign({}, state, {
-            releaseView: {
-                visible: true,
-                app: action.payload.app
-            }
-        });
-    } else if (action.type === ActionTypes.GET_RELEASE) {
-        let loadingState = {...state.loadingState};
-        loadingState.release = action.payload.releaseLoading;
-        return Object.assign({}, state, {
-            release: action.payload.release,
-            loadingState: loadingState
-        });
-    } else if (action.type === ActionTypes.GET_LIFECYCLE) {
-        return Object.assign({}, state, {
-            lifecycle: action.payload
-        });
-    } else if (action.type === ActionTypes.OPEN_LIFECYCLE_MODAL) {
-        return Object.assign({}, state, {
-            lifecycleModal: {
-                visible: true,
-                nextState: action.payload.nextState
-            }
-        });
-    } else if (action.type === ActionTypes.CLOSE_LIFECYCLE_MODAL) {
-        return Object.assign({}, state, {
-            lifecycleModal: {
-                visible: false,
-                nextState: null
-            }
-        });
-    } else if (action.type === ActionTypes.UPDATE_LIFECYCLE_STATE) {
-        return Object.assign({}, state, {
-            lifecycleModal: {
-                visible: false,
-                nextState: null,
-            },
-            release: action.payload
-        });
-    } else if (action.type === ActionTypes.SET_LOADING_STATE) {
-        let loadingState = {...state.loadingState};
-        loadingState[action.payload.stateToLoad] = true;
-        return Object.assign({}, state, {
-            loadingState: loadingState
-        });
-    } else if (action.type === ActionTypes.GET_DETAILED_RATING) {
-        return Object.assign({}, state, {
-            detailedRating: action.payload
-        });
-    }
-
-    return state;
-}
-
-
-export default rootReducer;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/store/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/store/index.js
deleted file mode 100644
index 04957eb39a8..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/store/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createStore, applyMiddleware } from "redux";
-import rootReducer from "../reducers/index";
-import thunk from "redux-thunk";
-const store = createStore(rootReducer, applyMiddleware(thunk));
-export default store;
\ No newline at end of file

From 3a3de0ff00773c325c6b584245187e96ae288c91 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 17 Jun 2019 15:53:49 +0530
Subject: [PATCH 9/9] Remove redux from apps table component

---
 .../react-app/src/components/apps/AppCard.js  | 60 -------------------
 .../react-app/src/components/apps/AppList.js  | 42 -------------
 .../components/apps/list-apps/AppsTable.js    |  9 +--
 .../src/pages/dashboard/apps/Apps-old.js      | 60 -------------------
 4 files changed, 1 insertion(+), 170 deletions(-)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps-old.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
deleted file mode 100644
index 2d78b656970..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppCard.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-    Skeleton, Switch, Card, Icon, Avatar, Typography
-} 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;
-
-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);
-    }
-
-
-    render() {
-        const defaultPlatformIcons = config.defaultPlatformIcons;
-        let icon = defaultPlatformIcons.default;
-        if(defaultPlatformIcons.hasOwnProperty(this.props.platform)){
-            icon = defaultPlatformIcons[this.props.platform];
-        }
-        let descriptionText = this.props.description;
-        if(descriptionText.length>50){
-            descriptionText = descriptionText.substring(0,50)+"...";
-        }
-        const description = (
-            <div>
-                <p>{descriptionText}</p>
-                <Text code>{this.props.type}</Text>
-                <Text> {this.props.subType}</Text>
-            </div>
-        );
-
-        return (
-                <Card style={{marginTop: 16 }}  actions={[<Icon type="edit" />, <Icon type="delete" />, <Icon type="appstore" theme="twoTone" onClick={this.handleReleasesClick} />]}>
-                    <Meta
-                        avatar={<Avatar src={icon} />}
-                        title={this.props.name}
-                        description={description}
-                    />
-                </Card>
-        );
-    }
-}
-
-const AppCard = connect(null,mapDispatchToProps)(ConnectedAppCard);
-
-export default AppCard;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
deleted file mode 100644
index 00f715825f0..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/AppList.js
+++ /dev/null
@@ -1,42 +0,0 @@
-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.apps with the component
-const mapStateToProps= state => {
-    return {apps : state.apps}
-};
-
-
-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}
-                                 app = {app}
-                                 name={app.name}
-                                 platform={app.deviceType}
-                                 type={app.type}
-                                 subType={app.subType}
-                                 description={app.description}/>
-                    </Col>
-                ))}
-            </Row>
-        );
-    }
-}
-
-const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
-
-export default AppList;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js
index 89949eb56e9..16a6659af8a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js
@@ -7,11 +7,6 @@ import config from "../../../../public/conf/config.json";
 
 const {Title} = Typography;
 
-// connecting state.apps with the component
-const mapStateToProps = state => {
-    return {apps: state.apps}
-};
-
 const columns = [
     {
         title: '',
@@ -71,7 +66,7 @@ const columns = [
     },
 ];
 
-class ConnectedAppsTable extends React.Component {
+class AppsTable extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -175,6 +170,4 @@ class ConnectedAppsTable extends React.Component {
     }
 }
 
-const AppsTable = connect(mapStateToProps, {getApps})(ConnectedAppsTable);
-
 export default AppsTable;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps-old.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps-old.js
deleted file mode 100644
index e24f40a6eae..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps-old.js
+++ /dev/null
@@ -1,60 +0,0 @@
-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;
-
-const routes = [
-    {
-        path: 'index',
-        breadcrumbName: 'Publisher',
-    },
-    {
-        path: 'first',
-        breadcrumbName: 'Dashboard',
-    },
-    {
-        path: 'second',
-        breadcrumbName: 'Apps',
-    },
-];
-
-
-class Apps extends React.Component {
-    routes;
-    constructor(props) {
-        super(props);
-        this.routes = props.routes;
-
-    }
-
-    render() {
-        return (
-            <div>
-                <PageHeader
-                    breadcrumb={{routes}}
-                />
-                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
-                    <Row style={{padding:10}}>
-                        <Col span={6} offset={18}>
-                            <Search
-                                placeholder="search"
-                                onSearch={value => console.log(value)}
-                                style={{ width: 200}}
-                            />
-                            <Button style={{margin:5}}>Advanced Search</Button>
-                        </Col>
-                    </Row>
-                    <ReleaseModal/>
-                    <AppList/>
-                </div>
-
-            </div>
-
-        );
-    }
-}
-
-export default Apps;