Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: add pagination filter (#631)

Browse Source
This commit is contained in:
Fredrik Strand Oseberg 2022-01-26 12:27:34 +01:00 committed by GitHub
parent 1d2bd717ee
commit 8462b00d5c
2 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
View File

@ -12,7 +12,7 @@ import { ADMIN } from '../../../../providers/AccessProvider/permissions';
import PaginateUI from '../../../../common/PaginateUI/PaginateUI';
import ProjectRoleListItem from './ProjectRoleListItem/ProjectRoleListItem';
import useProjectRoles from '../../../../../hooks/api/getters/useProjectRoles/useProjectRoles';
import { IProjectRole } from '../../../../../interfaces/role';
import IRole, { IProjectRole } from '../../../../../interfaces/role';
import useProjectRolesApi from '../../../../../hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
import useToast from '../../../../../hooks/useToast';
import ProjectRoleDeleteConfirm from '../ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm';
@ -22,8 +22,11 @@ const ROOTROLE = 'root';
const ProjectRoleList = () => {
const { hasAccess } = useContext(AccessContext);
const { roles } = useProjectRoles();
const paginationFilter = (role: IRole) => role?.type !== ROOTROLE;
const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
usePagination(roles, 10);
usePagination(roles, 10, paginationFilter);
const { deleteRole } = useProjectRolesApi();
const { refetch } = useProjectRoles();
const [currentRole, setCurrentRole] = useState<IProjectRole | null>(null);
@ -49,21 +52,19 @@ const ProjectRoleList = () => {
};
const renderRoles = () => {
return page
.filter(role => role?.type !== ROOTROLE)
.map((role: IProjectRole) => {
return (
<ProjectRoleListItem
key={role.id}
id={role.id}
name={role.name}
type={role.type}
description={role.description}
setCurrentRole={setCurrentRole}
setDelDialog={setDelDialog}
/>
);
});
return page.map((role: IProjectRole) => {
return (
<ProjectRoleListItem
key={role.id}
id={role.id}
name={role.name}
type={role.type}
description={role.description}
setCurrentRole={setCurrentRole}
setDelDialog={setDelDialog}
/>
);
});
};
if (!roles) return null;

15
frontend/src/hooks/usePagination.ts
View File

@ -1,13 +1,24 @@
import { useEffect, useState } from 'react';
import { paginate } from '../utils/paginate';
const usePagination = (data: any[], limit: number) => {
const usePagination = (
data: any[],
limit: number,
filterFunc?: (item: any) => boolean
) => {
const [paginatedData, setPaginatedData] = useState([[]]);
const [pageIndex, setPageIndex] = useState(0);
useEffect(() => {
const result = paginate(data, limit);
let dataToPaginate = data;
if (filterFunc) {
dataToPaginate = data.filter(filterFunc);
}
const result = paginate(dataToPaginate, limit);
setPaginatedData(result);
/* eslint-disable-next-line */
}, [data, limit]);
const nextPage = () => {