Remove redux from release view in store

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

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}

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
             }

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="1"><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="2"><Link to="/store/apps"><Icon type="apple" theme="filled"/>iOS</Link></Menu.Item>
-                                type="line-chart"/>Apps</Link></Menu.Item>
+                            <Menu.Item key="3"><Link to="/store/apps/new-app"><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} />
                             ))}

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>

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 {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
+        }
 
     }
 
     componentDidMount() {
         const {uuid} = this.props.match.params;
-        this.props.setLoading("release");
+        this.fetchData(uuid);
-        this.props.getRelease(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('&');
 
-        const release = this.props.release;
+        //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});
+        });
+    };
+
+    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}/>;
         }
 
 
@@ -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;