Merge branch 'application-mgt-new' into 'application-mgt-new'

Remove redux from release in APPM Store

See merge request entgra/carbon-device-mgt!132

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

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

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

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

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) {
+    componentDidUpdate(prevProps, prevState) {
-        if (nextProps !== this.props) {
+        if (prevProps.uuid !== this.props.uuid) {
             this.getData(this.props.uuid);
         }
     }

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;

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

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

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",
@@ -30,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"
   },
@@ -65,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",

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

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

@@ -1,21 +1,13 @@
-import {
+import {Card, Typography, Col, Row} from 'antd';
-    Skeleton, Switch, Card, Icon, Avatar, Typography, Col, Row, Rate
-} 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 => ({
+class AppCard extends React.Component {
-    openReleasesModal: (app) => dispatch(openReleasesModal(app))
-});
-
-class ConnectedAppCard extends React.Component {
 
     constructor(props) {
         super(props);
@@ -29,11 +21,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+"/apps/" + release.uuid}>
                     <Row className="release">
                         <Col span={24} className="release-icon">
                             <img src={release.iconPath} alt="icon"/>
@@ -66,6 +57,4 @@ class ConnectedAppCard extends React.Component {
     }
 }
 
-const AppCard = connect(null, mapDispatchToProps)(ConnectedAppCard);
-
 export default AppCard;

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

@@ -1,27 +1,84 @@
 import React from "react";
 import AppCard from "./AppCard";
-import {Col, Row} from "antd";
+import {Col, message, Row} from "antd";
-import {connect} from "react-redux";
+import axios from "axios";
-import {getApps} from "../../js/actions";
+import config from "../../../public/conf/config.json";
 
-// connecting state.apps with the component
+class AppList extends React.Component {
-const mapStateToProps= state => {
-    return {apps : state.apps}
-};
-
-
-class ConnectedAppList extends React.Component {
     constructor(props) {
         super(props);
+        this.state = {
+            apps: [],
+            loading: false
         }
-    componentDidMount() {
-        this.props.getApps();
     }
 
+    componentDidMount() {
+        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}
@@ -33,6 +90,4 @@ class ConnectedAppList extends React.Component {
     }
 }
 
-const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
-
 export default AppList;

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

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

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 config from "../../../../public/conf/config.json";
-import {getDetailedRating} from "../../../js/actions";
 
 const { Text } = Typography;
 
-// connecting state. with the component
+class DetailedRating extends React.Component{
-const mapStateToProps= state => {
-    return {detailedRating : state.detailedRating}
-};
 
-const mapDispatchToProps = dispatch => ({
+    constructor(props){
-    getDetailedRating: (uuid) => dispatch(getDetailedRating(uuid))
+        super(props);
-});
+        this.state={
-
+            detailedRating: null
-
+        }
-
-class ConnectedDetailedRating extends React.Component{
-
-    componentDidMount() {
-        this.props.getDetailedRating(this.props.uuid);
     }
 
+    componentDidMount() {
+        this.getData(this.props.uuid);
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.uuid !== this.props.uuid) {
+            this.getData(this.props.uuid);
+        }
+    }
+
+    getData = (uuid)=>{
+        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;
+                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;

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}
@@ -100,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"

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

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js

@@ -0,0 +1,225 @@
+import React from "react";
+import axios from "axios";
+import config from "../../../../../public/conf/config.json";
+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',
+        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>
+                <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}
+                    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;

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
+                <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>
-                    decore ubique sed,</Text>
                 <br/>
                 <br/>
                 <Select
@@ -110,7 +109,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>
         );

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
+                <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>
-                    decore ubique sed,</Text>
                 <br/>
                 <br/>
                 <Select
@@ -110,7 +109,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>
         );

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js

@@ -86,13 +86,11 @@ class UserInstall extends React.Component {
     };
 
     render() {
-
         const {fetching, data, value} = this.state;
 
         return (
             <div>
-                <Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro
+                <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>
-                    decore ubique sed,</Text>
                 <p>Select users</p>
                 <Select
                     mode="multiple"
@@ -110,7 +108,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>
         );

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

@@ -6,11 +6,7 @@ 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";
-
 
 const routes = [
     {
@@ -19,22 +15,17 @@ const routes = [
         component: Login
     },
     {
-        path: '/store/apps',
+        path: '/store',
         exact: false,
         component: Dashboard,
         routes: [
             {
-                path: '/store/apps',
+                path: '/store/:deviceType',
                 component: Apps,
                 exact: true
             },
             {
-                path: '/store/apps/new-app',
+                path: '/store/:deviceType/apps/:uuid',
-                component: AddNewApp,
-                exact: true
-            },
-            {
-                path: '/store/apps/:uuid',
                 exact: true,
                 component: Release
             }
@@ -44,9 +35,7 @@ const routes = [
 
 
 ReactDOM.render(
-    <Provider store={store}>
+    <App routes={routes}/>,
-        <App routes={routes}/>
-    </Provider>,
     document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change

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

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

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

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

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

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

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

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

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"/>
                     )}

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,23 +38,21 @@ class Dashboard extends React.Component {
                         <Menu
                             theme="light"
                             mode="horizontal"
-                            defaultSelectedKeys={['2']}
+                            selectedKeys={selectedKeys}
                             style={{lineHeight: '64px'}}
                         >
-                            <Menu.Item key="1"><Link to="/store/apps"><Icon type="appstore"/>Apps</Link></Menu.Item>
+                            <Menu.Item key="android"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item>
-                            <Menu.Item key="2"><Link to="/store/apps"><Icon
+                            <Menu.Item key="ios"><Link to="/store/ios"><Icon type="apple" theme="filled"/>iOS</Link></Menu.Item>
-                                type="line-chart"/>Apps</Link></Menu.Item>
+                            <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web Clips</Link></Menu.Item>
-                            <Menu.Item key="3"><Link to="/store/apps/new-app"><Icon type="upload"/>Add New
-                                App</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} />
+                                <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem} key={route.path} {...route} />
                             ))}
 
                         </Switch>

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

@@ -1,26 +1,6 @@
 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: 'store',
-    },
-    {
-        path: 'first',
-        breadcrumbName: 'Dashboard',
-    },
-    {
-        path: 'second',
-        breadcrumbName: 'Apps',
-    },
-];
-
 
 class Apps extends React.Component {
     routes;
@@ -30,25 +10,13 @@ class Apps extends React.Component {
 
     }
 
+
     render() {
+        const {deviceType} = this.props.match.params;
         return (
             <div>
-                <PageHeader
-                    breadcrumb={{routes}}
-                />
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
-                    <Row style={{padding:10}}>
+                    {deviceType!==null && <AppList changeSelectedMenuItem={this.props.changeSelectedMenuItem} deviceType={deviceType}/>}
-                        <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>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js

@@ -1,73 +1,98 @@
 import React from "react";
 import '../../../../App.css';
-import {Skeleton, Typography, Row, Col, Card} from "antd";
+import {Skeleton, Typography, Row, Col, Card, message} from "antd";
-import {connect} from "react-redux";
 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 = [
+class Release extends React.Component {
-    {
-        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 {
     routes;
 
     constructor(props) {
         super(props);
         this.routes = props.routes;
+        this.state={
+            loading: true,
+            app: null,
+            uuid: null
+        }
 
     }
 
     componentDidMount() {
-        const {uuid} = this.props.match.params;
+        const {uuid, deviceType} = this.props.match.params;
-        this.props.setLoading("release");
+        this.fetchData(uuid);
-        this.props.getRelease(uuid);
+        this.props.changeSelectedMenuItem(deviceType);
     }
 
-    render() {
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        console.log(prevState);
+        if (prevState.uuid !== this.state.uuid) {
+            const {uuid,deviceType} = this.props.match.params;
+            this.fetchData(uuid);
+            this.props.changeSelectedMenuItem(deviceType);
+        }
+    }
 
-        const release = this.props.release;
+    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,
+                    uuid: uuid
+                })
+            }
+
+        }).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});
+        });
+    };
+
+    render() {
+        const {app, loading} = this.state;
         let content = <Title level={3}>No Releases Found</Title>;
 
-        if (release != null) {
+        if (app != null && app.applicationReleases.length!==0) {
-            content = <ReleaseView release={release}/>;
+            content = <ReleaseView app={app}/>;
         }
 
 
         return (
-            <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+            <div style={{background: '#f0f2f5', minHeight: 780}}>
                 <Row style={{padding: 10}}>
                     <Col lg={4}>
 
                     </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 +101,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;