feat: add pagination on studio pages

Author: leofvo

apps/polyflix/public/locales/en/studio.json

@@ -30,7 +30,8 @@
       "global": "Something went wrong, please try again later"
     },
     "informations": {
-      "publish": "published by"
+      "publish": "published by",
+      "rowsPerPage": "Rows per page"
     }
   },
   "quizzes": {

apps/polyflix/public/locales/fr/studio.json

@@ -30,7 +30,8 @@
       "global": "Quelque chose a mal tourné, veuillez réessayer plus tard"
     },
     "informations": {
-      "publish": "publié par"
+      "publish": "publié par",
+      "rowsPerPage": "Élements par page"
     }
   },
   "quizzes": {

apps/polyflix/src/modules/studio/components/ghost-list.component.tsx

@@ -12,8 +12,12 @@ import {
   Stack,
 } from '@mui/material'
 
-export const GhostList = () => {
-  const skeletons = buildSkeletons(5)
+export const GhostList = ({
+  skeletonsNumber = 5,
+}: {
+  skeletonsNumber?: number
+}) => {
+  const skeletons = buildSkeletons(skeletonsNumber)
   return (
     <List component={Stack} direction="column" gap={1}>
       {skeletons.map((_, i: number) => (

apps/polyflix/src/modules/studio/pages/courses/courses-list.page.tsx

@@ -11,6 +11,7 @@ import {
   ListItemText,
   Paper,
   Stack,
+  TablePagination,
 } from '@mui/material'
 import { Header } from '../../components/header.component'
 import { GhostList } from '../../components/ghost-list.component'
@@ -20,11 +21,14 @@ import { Icon } from '@core/components/Icon/Icon.component'
 import { useGetCoursesQuery } from '@courses/services/course.service'
 import { polyflixRouter } from '@core/utils/routes'
 import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
 
 export const CoursesListPage = () => {
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
   const { data, isLoading, isFetching, isError } = useGetCoursesQuery({
-    page: 1,
-    pageSize: 5,
+    page,
+    pageSize,
   })
 
   const { PopOver, onClick, handleClose, outputData } = usePopOverModal()
@@ -33,7 +37,7 @@ export const CoursesListPage = () => {
 
   const content = () => {
     if (isLoading || isFetching) {
-      return <GhostList />
+      return <GhostList skeletonsNumber={pageSize} />
     }
 
     if (isError) {
@@ -125,6 +129,16 @@ export const CoursesListPage = () => {
         description={t('courses.description')}
       />
       {content()}
+      <TablePagination
+        component="div"
+        count={data?.total || 0}
+        page={page - 1}
+        onPageChange={(e, newPage) => setPage(newPage + 1)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => setPageSize(Number(e.target.value))}
+        rowsPerPageOptions={[5, 10, 25, 50, 100]}
+        labelRowsPerPage={t('common.informations.rowsPerPage')}
+      />
     </Box>
   )
 }

apps/polyflix/src/modules/studio/pages/quizzes/quizzes-list.page.tsx

@@ -11,6 +11,7 @@ import {
   ListItemText,
   Paper,
   Stack,
+  TablePagination,
 } from '@mui/material'
 import { Header } from '../../components/header.component'
 import { GhostList } from '../../components/ghost-list.component'
@@ -20,11 +21,14 @@ import { Icon } from '@core/components/Icon/Icon.component'
 import { useGetQuizzesQuery } from '@quizzes/services/quizz.service'
 import { polyflixRouter } from '@core/utils/routes'
 import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
 
 export const QuizzesListPage = () => {
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
   const { data, isLoading, isFetching, isError } = useGetQuizzesQuery({
-    page: 1,
-    pageSize: 5,
+    page,
+    pageSize,
   })
 
   const { PopOver, onClick, handleClose, outputData } = usePopOverModal()
@@ -33,7 +37,7 @@ export const QuizzesListPage = () => {
 
   const content = () => {
     if (isLoading || isFetching) {
-      return <GhostList />
+      return <GhostList skeletonsNumber={pageSize} />
     }
 
     if (isError) {
@@ -125,6 +129,16 @@ export const QuizzesListPage = () => {
         description={t('videos.description')}
       />
       {content()}
+      <TablePagination
+        component="div"
+        count={data?.total || 0}
+        page={page - 1}
+        onPageChange={(e, newPage) => setPage(newPage + 1)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => setPageSize(Number(e.target.value))}
+        rowsPerPageOptions={[5, 10, 25, 50, 100]}
+        labelRowsPerPage={t('common.informations.rowsPerPage')}
+      />
     </Box>
   )
 }

apps/polyflix/src/modules/studio/pages/users/users-list.page.tsx

@@ -10,6 +10,7 @@ import {
   ListItemText,
   Paper,
   Stack,
+  TablePagination,
   Tooltip,
   Typography,
 } from '@mui/material'
@@ -23,11 +24,14 @@ import { useTranslation } from 'react-i18next'
 import { useGetUsersQuery } from '@users/services/user.service'
 import { User } from '@users/models/user.model'
 import { UserAvatar } from '@users/components/UserAvatar/UserAvatar.component'
+import { useState } from 'react'
 
 export const UsersListPage = () => {
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
   const { data, isLoading, isFetching, isError } = useGetUsersQuery({
-    page: 1,
-    pageSize: 5,
+    page,
+    pageSize,
   })
 
   const { PopOver, onClick, handleClose, outputData } = usePopOverModal()
@@ -36,7 +40,7 @@ export const UsersListPage = () => {
 
   const content = () => {
     if (isLoading || isFetching) {
-      return <GhostList />
+      return <GhostList skeletonsNumber={pageSize} />
     }
 
     if (isError) {
@@ -156,6 +160,16 @@ export const UsersListPage = () => {
         createAvailable={false}
       />
       {content()}
+      <TablePagination
+        component="div"
+        count={data?.totalElements || 0}
+        page={page - 1}
+        onPageChange={(e, newPage) => setPage(newPage + 1)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => setPageSize(Number(e.target.value))}
+        rowsPerPageOptions={[5, 10, 25, 50, 100]}
+        labelRowsPerPage={t('common.informations.rowsPerPage')}
+      />
     </Box>
   )
 }

apps/polyflix/src/modules/studio/pages/videos/videos-list.page.tsx

@@ -11,6 +11,7 @@ import {
   ListItemText,
   Paper,
   Stack,
+  TablePagination,
   Tooltip,
   Typography,
 } from '@mui/material'
@@ -25,11 +26,14 @@ import { useTranslation } from 'react-i18next'
 import { ImageCover } from '@core/components/ImageCover/image-cover.component'
 import { Video } from '@videos/models/video.model'
 import { abbreviateNumber } from 'js-abbreviation-number'
+import { useState } from 'react'
 
 export const VideosListPage = () => {
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(5)
   const { data, isLoading, isFetching, isError } = useGetVideosQuery({
-    page: 1,
-    pageSize: 5,
+    page,
+    pageSize,
   })
 
   const { PopOver, onClick, handleClose, outputData } = usePopOverModal()
@@ -38,7 +42,7 @@ export const VideosListPage = () => {
 
   const content = () => {
     if (isLoading || isFetching) {
-      return <GhostList />
+      return <GhostList skeletonsNumber={pageSize} />
     }
 
     if (isError) {
@@ -173,6 +177,16 @@ export const VideosListPage = () => {
     >
       <Header title={t('videos.title')} description={t('videos.description')} />
       {content()}
+      <TablePagination
+        component="div"
+        count={data?.totalCount || 0}
+        page={page - 1}
+        onPageChange={(e, newPage) => setPage(newPage + 1)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => setPageSize(Number(e.target.value))}
+        rowsPerPageOptions={[5, 10, 25, 50, 100]}
+        labelRowsPerPage={t('common.informations.rowsPerPage')}
+      />
     </Box>
   )
 }

packages/mock-server/fixtures/course.ts

@@ -43,7 +43,7 @@ export class CourseMock implements Mock {
       const { models } = (schema as any).courses.all();
       return {
         data: models.slice(0, pageSize ?? 100),
-        totalCount: models.length,
+        total: models.length,
       };
     });
 

packages/mock-server/fixtures/user.ts

@@ -29,11 +29,13 @@ export class UserMock implements Mock {
   }
 
   routes(server: Server<AnyRegistry>): void {
-    server.get("users", (schema) => {
+    server.get("users", (schema, request) => {
+      const { size: pageSize } = request.queryParams;
+
       const { models } = (schema as any).users.all();
       return {
         currentPage: 0,
-        data: models,
+        data: models.slice(0, pageSize ?? 100),
         totalElements: models.length,
         totalPages: 1,
       };