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

Add infinite scroll to apps view in APPM store UI

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

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css

@@ -44,7 +44,7 @@
     }
 }
 
-.background {
+.login .background {
     position: absolute;
     height: 100%;
     width: 100%;
@@ -56,7 +56,7 @@
     animation: spin 200s infinite linear;
 }
 
-.content {
+.login .content {
     position: relative;
     z-index: 1;
 }

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

@@ -31,7 +31,7 @@ class Login extends React.Component {
     render() {
         const config = this.props.context;
         return (
-            <div>
+            <div className="login">
                 <div className="background">
                 </div>
                 <div className="content">

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.css

@@ -86,22 +86,4 @@
         margin-top: 9%;
     }
 
-}
-
-@media only screen and (min-width: 760px) {
-
-    @media screen and (max-width: 1030px) {
-
-        Footer{
-            margin-bottom: 43%;
-        }
-
-    }
-}
-
-@media only screen and (min-width: 1030px) {
-
-        Footer{
-            margin-bottom: 5%;
-        }
-}
+}

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

@@ -18,10 +18,13 @@
 
 import React from "react";
 import AppCard from "./AppCard";
-import {Col, message, notification, Row, Result, Skeleton, Alert} from "antd";
+import {Col, Row, Result} from "antd";
 import axios from "axios";
 import {withConfigContext} from "../../context/ConfigContext";
 import {handleApiError} from "../../js/Utils";
+import InfiniteScroll from "react-infinite-scroller";
+
+const limit = 10;
 
 class AppList extends React.Component {
     constructor(props) {
@@ -29,16 +32,24 @@ class AppList extends React.Component {
         this.state = {
             apps: [],
             loading: true,
+            hasMore: true,
+            loadMore: true,
             forbiddenErrors: {
                 apps: false
-            }
+            },
+            totalAppCount: 0
         }
     }
 
     componentDidMount() {
         const {deviceType} = this.props;
         this.props.changeSelectedMenuItem(deviceType);
-        this.fetchData(deviceType);
+        this.fetchData(0, limit, res => {
+            this.setState({
+                apps: res,
+                loading: false
+            });
+        });
     }
 
 
@@ -50,14 +61,19 @@ class AppList extends React.Component {
         }
     }
 
-    fetchData = (deviceType) => {
+    fetchData = (offset, limit, callbackFunction) => {
+        const {deviceType} = this.props;
         const config = this.props.context;
-        const payload = {};
+        const payload = {
+            offset,
+            limit
+        };
         if (deviceType === "web-clip") {
             payload.appType = "WEB_CLIP";
         } else {
             payload.deviceType = deviceType;
         }
+
         this.setState({
             loading: true
         });
@@ -69,10 +85,7 @@ class AppList extends React.Component {
             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
-                })
+                callbackFunction(apps);
             }
 
         }).catch((error) => {
@@ -92,37 +105,65 @@ class AppList extends React.Component {
         });
     };
 
+    handleInfiniteOnLoad = (count) => {
+        const offset = count * limit;
+        let apps = this.state.apps;
+        this.setState({
+            loading: true,
+        });
+
+        this.fetchData(offset, limit, res => {
+            if (res.length > 0) {
+                apps = apps.concat(res);
+                this.setState({
+                    apps,
+                    loading: false,
+                });
+            } else {
+                this.setState({
+                    hasMore: false,
+                    loading: false
+                });
+            }
+        });
+    };
+
     render() {
-        const {apps, loading, forbiddenErrors} = this.state;
+        const {apps, loading, forbiddenErrors, hasMore} = this.state;
 
         return (
-            <Skeleton loading={loading} active>
-                <Row gutter={16}>
-                    {(forbiddenErrors.apps) && (
-                        <Result
-                            status="403"
-                            title="403"
-                            subTitle="You don't have permission to view apps."
-                            // extra={<Button type="primary">Back Home</Button>}
-                        />
-                    )}
-                    {!((forbiddenErrors.apps)) && apps.length === 0 && (
-                        <Result
-                            status="404"
-                            title="No apps, yet."
-                            subTitle="No apps available, yet! When the administration uploads, apps will show up here."
-                            // extra={<Button type="primary">Back Home</Button>}
-                        />
-                    )}
-                    {apps.map(app => (
-                        <Col key={app.id} xs={12} sm={6} md={6} lg={4} xl={3}>
-                            <AppCard key={app.id}
-                                     app={app}
+            <div>
+                <InfiniteScroll
+                    initialLoad={false}
+                    pageStart={0}
+                    loadMore={this.handleInfiniteOnLoad}
+                    hasMore={!loading && hasMore}
+                    useWindow={true}>
+                    <Row gutter={16}>
+                        {(forbiddenErrors.apps) && (
+                            <Result
+                                status="403"
+                                title="403"
+                                subTitle="You don't have permission to view apps."
+                            />
+                        )}
+                        {!(forbiddenErrors.apps) && apps.length === 0 && (
+                            <Result
+                                status="404"
+                                title="No apps, yet."
+                                subTitle="No apps available, yet! When the administration uploads, apps will show up here."
                             />
-                        </Col>
-                    ))}
-                </Row>
-            </Skeleton>
+                        )}
+                        {apps.map(app => (
+                            <Col key={app.id} xs={12} sm={6} md={6} lg={4} xl={3}>
+                                <AppCard key={app.id}
+                                         app={app}
+                                />
+                            </Col>
+                        ))}
+                    </Row>
+                </InfiniteScroll>
+            </div>
         );
     }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css

@@ -44,7 +44,7 @@
   }
 }
 
-.background {
+.login .background {
   position: absolute;
   height: 100%;
   width: 100%;
@@ -56,7 +56,7 @@
   animation: spin 200s infinite linear;
 }
 
-.content {
+.login .content {
   position: relative;
   z-index: 1;
 }

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

@@ -30,7 +30,7 @@ class Login extends React.Component {
     render() {
         const config = this.props.context;
         return (
-            <div>
+            <div className="login">
                 <div className="background">
                 </div>
                 <div className="content">

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.css

@@ -87,21 +87,4 @@
         margin-top: 10%;
     }
 
-}
-
-@media only screen and (min-width: 760px) {
-
-    @media screen and (max-width: 1030px) {
-
-        Footer{
-            margin-bottom: 45%;
-        }
-    }
-}
-
-@media only screen and (min-width: 1030px) {
-
-    Footer{
-        margin-bottom: 5%;
-    }
 }