Merge branch 'bugfix/MS-103' into 'develop'

fixed live pagination bug

Closes MS-103

See merge request !487

src/shared/api/live.ts

@@ -97,12 +97,14 @@ export async function deleteLive(liveId: string) {
     await axiosInstance.delete(endpoints.live.delete(liveId));
     
     await mutate([localStorage.getItem('livesUrl')],
-        (lives: ILiveItem[] = []) => {
-            const index = lives.findIndex((live) => live.id === liveId);
-            if (index > -1) {
-                lives.splice(index, 1);
+        (livesResponse: { content: ILiveItem[] } | undefined = undefined) => {
+            if (livesResponse && livesResponse.content) {
+                const index = livesResponse.content.findIndex((live) => live.id === liveId);
+                if (index > -1) {
+                    livesResponse.content.splice(index, 1);
+                }
             }
-            return lives;
+            return livesResponse;
         },
         true
     );
@@ -114,13 +116,18 @@ export async function deleteLive(liveId: string) {
 export async function archiveLive(liveId: string) {
     await axiosInstance.post(endpoints.live.archive(liveId));
     
-    mutate([localStorage.getItem('livesUrl')], (lives: ILiveItem[] = []) => {
-        const index = lives.findIndex((live) => live.id === liveId);
-        if (index > -1) {
-            lives[index].status = LiveStatus.ARCHIVED;
-        }
-        return lives;
-    }, true);
+    mutate([localStorage.getItem('livesUrl')], 
+        (livesResponse: { content: ILiveItem[] } | undefined = undefined) => {
+            if (livesResponse && livesResponse.content) {
+                const index = livesResponse.content.findIndex((live) => live.id === liveId);
+                if (index > -1) {
+                    livesResponse.content[index].status = LiveStatus.ARCHIVED;
+                }
+            }
+            return livesResponse;
+        }, 
+        true
+    );
 
     mutate(
         [endpoints.live.get(liveId)],
@@ -141,13 +148,18 @@ export async function archiveLive(liveId: string) {
 export async function restoreLive(liveId: string) {
     await axiosInstance.post(endpoints.live.restore(liveId));
     
-    mutate([localStorage.getItem('livesUrl')], (lives: ILiveItem[] = []) => {
-        const index = lives.findIndex((live) => live.id === liveId);
-        if (index > -1) {
-            lives[index].status = LiveStatus.REVIEW;
-        }
-        return lives;
-    }, true);
+    mutate([localStorage.getItem('livesUrl')], 
+        (livesResponse: { content: ILiveItem[] } | undefined = undefined) => {
+            if (livesResponse && livesResponse.content) {
+                const index = livesResponse.content.findIndex((live) => live.id === liveId);
+                if (index > -1) {
+                    livesResponse.content[index].status = LiveStatus.REVIEW;
+                }
+            }
+            return livesResponse;
+        }, 
+        true
+    );
 
     mutate(
         [endpoints.live.get(liveId)],
@@ -187,12 +199,14 @@ export async function publishLive(liveId: string) {
 
     mutate(
         [localStorage.getItem('livesUrl')],
-        (lives: ILiveItem[] = []) => {
-            const index = lives.findIndex((live) => live.id === liveId);
-            if (index > -1) {
-                lives[index].status = LiveStatus.REPLAY;
+        (livesResponse: { content: ILiveItem[] } | undefined = undefined) => {
+            if (livesResponse && livesResponse.content) {
+                const index = livesResponse.content.findIndex((live) => live.id === liveId);
+                if (index > -1) {
+                    livesResponse.content[index].status = LiveStatus.REPLAY;
+                }
             }
-            return [...lives];
+            return livesResponse;
         },
         true
     );
@@ -210,11 +224,29 @@ export async function publishLive(liveId: string) {
 export function useGetLives(page: number, size: number, sort: string, sortBy: string, status: string, search: string) {
     const URL = [endpoints.live.all(page, size, sort, sortBy, status, search)];
     localStorage.setItem('livesUrl', endpoints.live.all(page, size, sort, sortBy, status, search));
-    const { data, isLoading, error, isValidating } = useSWR<ILiveItem[]>(URL, fetcher, options);
+    const { data, isLoading, error, isValidating } = useSWR<{
+        content: ILiveItem[],
+        totalElements: number,
+        totalPages: number,
+        size: number,
+        number: number,
+        first: boolean,
+        last: boolean,
+        numberOfElements: number,
+        empty: boolean
+    }>(URL, fetcher, options);
 
     return useMemo(
         () => ({
-            livesData: data || [],
+            livesData: data?.content || [],
+            totalElements: data?.totalElements || 0,
+            totalPages: data?.totalPages || 0,
+            currentPage: data?.number || 0,
+            pageSize: data?.size || 10,
+            isFirstPage: data?.first || true,
+            isLastPage: data?.last || true,
+            numberOfElements: data?.numberOfElements || 0,
+            isEmpty: data?.empty || true,
             livesLoading: isLoading,
             livesError: error,
             livesValidating: isValidating,
@@ -351,12 +383,14 @@ export async function stopLive(liveId: string) {
 
     mutate(
         [localStorage.getItem('livesUrl')],
-        (lives: ILiveItem[] = []) => {
-            const index = lives.findIndex((live) => live.id === liveId);
-            if (index > -1) {
-                lives[index].status = LiveStatus.REVIEW;
+        (livesResponse: { content: ILiveItem[] } | undefined = undefined) => {
+            if (livesResponse && livesResponse.content) {
+                const index = livesResponse.content.findIndex((live) => live.id === liveId);
+                if (index > -1) {
+                    livesResponse.content[index].status = LiveStatus.REVIEW;
+                }
             }
-            return [...lives];
+            return livesResponse;
         },
         true
     );
@@ -379,12 +413,14 @@ export async function startLive(liveId: string) {
 
     mutate(
         [localStorage.getItem('livesUrl')],
-        (lives: ILiveItem[] = []) => {
-            const index = lives.findIndex((live) => live.id === liveId);
-            if (index > -1) {
-                lives[index].status = LiveStatus.ONGOING;
+        (livesResponse: { content: ILiveItem[] } | undefined = undefined) => {
+            if (livesResponse && livesResponse.content) {
+                const index = livesResponse.content.findIndex((live) => live.id === liveId);
+                if (index > -1) {
+                    livesResponse.content[index].status = LiveStatus.ONGOING;
+                }
             }
-            return [...lives];
+            return livesResponse;
         },
         true
     );

src/shared/api/server.ts

@@ -101,7 +101,8 @@ export const endpoints = {
     downloadProductZebraFile: (productId: string) => `/api/stock/products/download-product-zebra-file/${productId}`,
   },
   live: {
-    all: (page: number, size: number, sort: string, sortBy: string, status: string, search: string) => `/api/stream/live/all?search=${search}&page=${page}&size=${size}&sortDir=${sort}&sortBy=${sortBy}&status=${status}`,
+    all: (page: number, size: number, sort: string, sortBy: string, status: string, search: string) => 
+      `/api/stream/live/all?search=${search}&page=${page}&size=${size}&sortDir=${sort}&sortBy=${sortBy}&status=${status}`,
     allNoFilter: '/api/stream/live/all',
     serverTime: "/api/stream/live/server-time",
     client: "/api/stream/live/client",

src/shared/sections/lives/all-lives/view.tsx

@@ -35,6 +35,7 @@ import LiveTableRow from './live-table-row';
 import LiveSearch from './live-search';
 import TableHead from './live-table-head';
 import { useGetLives, useGetLiveStatusCount } from '@/shared/api/live';
+import { TableRow } from '@mui/material';
 
 const defaultFilters: ILiveTableFilter = {
   status: 'ALL',
@@ -49,7 +50,20 @@ export default function AllLivesView() {
   const table = useTable({ defaultOrderBy: 'startDate', defaultOrder: 'desc' });
   const [filters, setFilters] = useState(defaultFilters);
   const [searchQuery, setSearchQuery] = useState('');
-  const { livesData } = useGetLives(table.page, table.rowsPerPage, table.order, table.orderBy, filters.status, searchQuery);
+  const { 
+    livesData, 
+    totalElements, 
+    currentPage, 
+    pageSize, 
+    livesLoading 
+  } = useGetLives(
+    table.page, 
+    table.rowsPerPage, 
+    table.order.toLowerCase(), 
+    table.orderBy, 
+    filters.status, 
+    searchQuery
+  );
 
   const denseHeight = table.dense ? 56 : 56 + 20;
 
@@ -186,28 +200,33 @@ export default function AllLivesView() {
                 <Table size={table.dense ? 'small' : 'medium'} sx={{ minWidth: 800 }}>
                   <TableHead order={table.order} orderBy={table.orderBy} onSort={table.onSort} />
                   <TableBody>
-                    {livesData
-                      .slice(table.page * table.rowsPerPage, table.page * table.rowsPerPage + table.rowsPerPage)
-                      .map((row) => (
-                        <LiveTableRow
-                          key={row.id}
-                          row={row}
-                          onDetails={() => handleViewInfo(row.id)}
-                          selected={table.selected.includes(row.id)}
-                          onViewRow={() => handleViewRow(row.id)}
-                          onViewStats={() => handleViewStats(row.id)}
-                          onEditRow={() => handleEditRow(row.id)}
-                        />
-                      ))}
-                    <TableEmptyRows height={denseHeight} emptyRows={emptyRows(table.page, table.rowsPerPage, livesData.length)} />
-                    <TableNoData notFound={notFound} />
+                    {livesLoading ? (
+                      <TableRow>
+                        <TableEmptyRows height={denseHeight} emptyRows={5} />
+                      </TableRow>
+                    ) : (
+                      <>
+                        {livesData.map((row) => (
+                          <LiveTableRow
+                            key={row.id}
+                            row={row}
+                            onDetails={() => handleViewInfo(row.id)}
+                            selected={table.selected.includes(row.id)}
+                            onViewRow={() => handleViewRow(row.id)}
+                            onViewStats={() => handleViewStats(row.id)}
+                            onEditRow={() => handleEditRow(row.id)}
+                          />
+                        ))}
+                        <TableNoData notFound={notFound} />
+                      </>
+                    )}
                   </TableBody>
                 </Table>
               </Scrollbar>
             </TableContainer>
 
             <TablePaginationCustom
-              count={livesData.length}
+              count={totalElements}
               page={table.page}
               rowsPerPage={table.rowsPerPage}
               onPageChange={table.onChangePage}