From 90231cc2300e45d451b7a76d399e313a4dd73354 Mon Sep 17 00:00:00 2001
From: Youssef Khedher <khedher.youssef@hotmail.fr>
Date: Thu, 20 Jan 2022 10:12:27 +0100
Subject: [PATCH] fix: add pagination to project access list (#615)

* fix: add pagination to project access list

* fix: typo

Co-authored-by: Fredrik Oseberg <fredrik.no@gmail.com>
---
 .../component/common/PaginateUI/PaginateUI.tsx   |  8 ++++----
 .../project/ProjectAccess/ProjectAccess.tsx      | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/common/PaginateUI/PaginateUI.tsx b/frontend/src/component/common/PaginateUI/PaginateUI.tsx
index fabe28f703..c776481f5d 100644
--- a/frontend/src/component/common/PaginateUI/PaginateUI.tsx
+++ b/frontend/src/component/common/PaginateUI/PaginateUI.tsx
@@ -23,6 +23,7 @@ const PaginateUI = ({
     prevPage,
     setPageIndex,
     nextPage,
+    ...rest
 }: IPaginateUIProps) => {
     const STARTLIMIT = 6;
     const theme = useTheme();
@@ -37,19 +38,18 @@ const PaginateUI = ({
         }
     }, [matches]);
 
-
     useEffect(() => {
-        if(pageIndex === 0 && start !== 0) {
+        if (pageIndex === 0 && start !== 0) {
             setStart(0);
             setLimit(STARTLIMIT);
         }
-    }, [pageIndex, start])
+    }, [pageIndex, start]);
 
     return (
         <ConditionallyRender
             condition={pages.length > 1}
             show={
-                <div className={styles.pagination}>
+                <div className={styles.pagination} {...rest}>
                     <div className={styles.paginationInnerContainer}>
                         <ConditionallyRender
                             condition={pageIndex > 0}
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
index 71f6c1635c..2d4ce8fd14 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
@@ -28,6 +28,8 @@ import PermissionIconButton from '../../common/PermissionIconButton/PermissionIc
 import { useParams } from 'react-router-dom';
 import { IFeatureViewParams } from '../../../interfaces/params';
 import ProjectRoleSelect from './ProjectRoleSelect/ProjectRoleSelect';
+import usePagination from '../../../hooks/usePagination';
+import PaginateUI from '../../common/PaginateUI/PaginateUI';
 
 const ProjectAccess = () => {
     const { id } = useParams<IFeatureViewParams>();
@@ -36,6 +38,8 @@ const ProjectAccess = () => {
     const [users, setUsers] = useState([]);
     const [error, setError] = useState();
     const { isOss } = useUiConfig();
+    const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
+        usePagination(users, 10);
 
     useEffect(() => {
         fetchAccess();
@@ -135,7 +139,7 @@ const ProjectAccess = () => {
             </Dialog>
             <div className={styles.divider}></div>
             <List>
-                {users.map(user => {
+                {page.map(user => {
                     const labelId = `checkbox-list-secondary-label-${user.id}`;
                     return (
                         <ListItem key={user.id} button>
@@ -177,7 +181,7 @@ const ProjectAccess = () => {
                                     tooltip={
                                         users.length === 1
                                             ? 'A project must have at least one owner'
-                                            : 'Remove acccess'
+                                            : 'Remove access'
                                     }
                                 >
                                     <Delete />
@@ -186,6 +190,14 @@ const ProjectAccess = () => {
                         </ListItem>
                     );
                 })}
+                <PaginateUI
+                    pages={pages}
+                    pageIndex={pageIndex}
+                    setPageIndex={setPageIndex}
+                    nextPage={nextPage}
+                    prevPage={prevPage}
+                    style={{ bottom: '-21px' }}
+                />
             </List>
         </PageContent>
     );