From 2c6d8eb993c55f5255871c55784f1012905975e3 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 28 Oct 2019 16:03:26 +0530 Subject: [PATCH] Add infinite scroll to apps view in APPM store UI Additional changes, - Remove padding from the footer in APPM UI --- .../react-app/src/pages/Login.css | 4 +- .../react-app/src/pages/Login.js | 2 +- .../src/pages/dashboard/Dashboard.css | 20 +-- .../react-app/src/components/apps/AppList.js | 122 ++++++++++++------ .../react-app/src/pages/Login.css | 4 +- .../react-app/src/pages/Login.js | 2 +- .../src/pages/dashboard/Dashboard.css | 17 --- 7 files changed, 92 insertions(+), 79 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css index 5ad1b6a70a3..378252aa424 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css +++ b/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; } \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js index 63ea79f8ca1..55c8643ffad 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js +++ b/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 ( -
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.css index 63cb9777e6f..96c85a341f2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.css +++ b/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%; - } -} +} \ 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/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js index 710821f3247..1f2350de59b 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 @@ -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, Pagination} 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,13 +85,11 @@ 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) => { + console.log(error); handleApiError(error, "Error occurred while trying to load apps.", true); if (error.hasOwnProperty("response") && error.response.status === 403) { const {forbiddenErrors} = this.state; @@ -92,37 +106,71 @@ class AppList extends React.Component { }); }; + handlePaginationChange = (page, pageSize) => { + this.fetchData(page, pageSize); + }; + + 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, totalAppCount, hasMore} = this.state; return ( - - - {(forbiddenErrors.apps) && ( - Back Home} - /> - )} - {!((forbiddenErrors.apps)) && apps.length === 0 && ( - Back Home} - /> - )} - {apps.map(app => ( - - - - ))} - - +
+ + + {(forbiddenErrors.apps) && ( + Back Home} + /> + )} + {!((forbiddenErrors.apps)) && apps.length === 0 && ( + Back Home} + /> + )} + {apps.map(app => ( + + + + ))} + + +
); } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css index debb603a350..90e9a36828f 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css +++ b/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; } \ No newline at end of file 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 3f1ff09306d..05b3a7305c5 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 @@ -30,7 +30,7 @@ class Login extends React.Component { render() { const config = this.props.context; return ( -
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.css index c62c54c6b10..08e60a79814 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.css +++ b/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%; - } } \ No newline at end of file