update,

002_source/cms/src/app/dashboard/lesson_categories/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 // RULES:
-// contains list page for lesson_categories (LessonsCategories)
+// contains list page for lesson_categories (LessonCategories)
 // contain definition to collection only
 //
 import * as React from 'react';
@@ -29,7 +29,7 @@ import type { Filters } from '@/components/dashboard/lesson_category/lesson-cate
 import { LessonCategoriesPagination } from '@/components/dashboard/lesson_category/lesson-categories-pagination';
 import { LessonCategoriesSelectionProvider } from '@/components/dashboard/lesson_category/lesson-categories-selection-context';
 import { LessonCategoriesTable } from '@/components/dashboard/lesson_category/lesson-categories-table';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 import FormLoading from '@/components/loading';
 
@@ -61,8 +61,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
 
   //
   const reloadRows = async (): Promise<void> => {
-    setShowLoading(true);
-
     try {
       const models: ListResult<RecordModel> = await pb
         .collection(COL_LESSON_CATEGORIES)
@@ -120,8 +118,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
       // reset page number as tab changes
       setLastListOption(listOption);
       setCurrentPage(0);
@@ -129,7 +126,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     } else {
       void reloadRows();
     }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {
@@ -180,8 +176,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       />
     );
 
-  // return <pre>{JSON.stringify(lessonCategoriesData, null, 2)}</pre>;
-
   return (
     <Box
       sx={{
@@ -210,6 +204,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               startIcon={<PlusIcon />}
               variant="contained"
             >
+              {/* add new lesson type */}
               {t('list.add')}
             </LoadingButton>
           </Box>

002_source/cms/src/app/dashboard/lesson_types/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 // RULES:
-// contains list page for lp_categories (QuizLPCategories)
+// contains list page for lesson_types (LessonTypes)
 // contain definition to collection only
 //
 import * as React from 'react';
@@ -18,6 +18,7 @@ import type { ListResult, RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
@@ -43,8 +44,10 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const [showError, setShowError] = React.useState({ show: false, detail: '' });
   //
   const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  //
   const [f, setF] = React.useState<LessonType[]>([]);
   const [currentPage, setCurrentPage] = React.useState<number>(0);
+  //
   const [recordCount, setRecordCount] = React.useState<number>(0);
   const [listOption, setListOption] = React.useState({});
   const [listSort, setListSort] = React.useState({});
@@ -63,17 +66,33 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       setLessonTypesData(tempLessonTypes);
       setRecordCount(totalItems);
       setF(tempLessonTypes);
+      // console.log({ currentPage, f });
     } catch (error) {
       //
       logger.error(error);
-      setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
+      setShowError({
+        //
+        show: true,
+        detail: JSON.stringify(error, null, 2),
+      });
     } finally {
       setShowLoading(false);
     }
   };
 
+  const [lastListOption, setLastListOption] = React.useState({});
+  const isFirstRun = React.useRef(false);
   React.useEffect(() => {
+    if (!isFirstRun.current) {
+      isFirstRun.current = true;
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+      // reset page number as tab changes
+      setLastListOption(listOption);
+      setCurrentPage(0);
       void reloadRows();
+    } else {
+      void reloadRows();
+    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {
@@ -96,16 +115,26 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       tempFilter.push(`type ~ "%${type}%"`);
     }
 
-    setListOption({
+    let preFinalListOption = {};
-      filter: tempFilter.join(' && '),
+    if (tempFilter.length > 0) {
-      sort: tempSortDir,
+      preFinalListOption = { filter: tempFilter.join(' && ') };
-      //
+    }
-    });
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+    // setListOption({
+    //   filter: tempFilter.join(' && '),
+    //   sort: tempSortDir,
+    //   //
+    // });
   }, [visible, sortDir, name, type]);
 
-  if (f.length === 0 || showLoading) return <FormLoading />;
+  // return <>helloworld</>;
 
-  if (showError)
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
     return (
       <ErrorDisplay
         message={t('error.unable-to-process-request')}
@@ -143,6 +172,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               variant="contained"
             >
               {/* add new lesson type */}
+              {/* TODO: refactor translations.json */}
               {t('dashboard.lessonTypes.add')}
             </LoadingButton>
           </Box>
@@ -153,14 +183,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               filters={{ email, phone, status, name, visible, type }}
               fullData={lessonTypesData}
               sortDir={sortDir}
-              //
             />
             <Divider />
             <Box sx={{ overflowX: 'auto' }}>
               <LessonTypesTable
                 reloadRows={reloadRows}
                 rows={f}
-                //
               />
             </Box>
             <Divider />
@@ -174,6 +202,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
           </Card>
         </LessonTypesSelectionProvider>
       </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
     </Box>
   );
 }
@@ -235,6 +266,5 @@ interface PageProps {
     name?: string;
     visible?: string;
     type?: string;
-    //
   };
 }

002_source/cms/src/app/dashboard/lp/categories/page.tsx

@@ -56,6 +56,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const sortedLessonCategories = applySort(lessonCategoriesData, sortDir);
   const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
 
+  //
   const reloadRows = async (): Promise<void> => {
     try {
       const models: ListResult<RecordModel> = await pb

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-pagination.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+// lesson-categories-pagination.tsx
+// RULES:
+// T.B.A.
 import * as React from 'react';
 import TablePagination from '@mui/material/TablePagination';
 
@@ -10,20 +13,39 @@ function noop(): void {
 interface LessonCategoriesPaginationProps {
   count: number;
   page: number;
+  //
+  setPage: (page: number) => void;
+  setRowsPerPage: (page: number) => void;
+  rowsPerPage: number;
 }
 
-export function LessonCategoriesPagination({ count, page }: LessonCategoriesPaginationProps): React.JSX.Element {
+export function LessonCategoriesPagination({
+  count,
+  page,
+  //
+  setPage,
+  setRowsPerPage,
+  rowsPerPage,
+}: LessonCategoriesPaginationProps): React.JSX.Element {
   // You should implement the pagination using a similar logic as the filters.
   // Note that when page change, you should keep the filter search params.
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value));
+    // console.log(parseInt(event.target.value));
+  };
 
   return (
     <TablePagination
       component="div"
       count={count}
-      onPageChange={noop}
+      onPageChange={handleChangePage}
-      onRowsPerPageChange={noop}
+      onRowsPerPageChange={handleChangeRowsPerPage}
       page={page}
-      rowsPerPage={5}
+      rowsPerPage={rowsPerPage}
       rowsPerPageOptions={[5, 10, 25]}
     />
   );

002_source/cms/src/components/dashboard/lp/categories/lp-categories-pagination.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+// lp-categories-pagination.tsx
+// RULES:
+// T.B.A.
 import * as React from 'react';
 import TablePagination from '@mui/material/TablePagination';
 
@@ -7,7 +10,7 @@ function noop(): void {
   return undefined;
 }
 
-interface LessonCategoriesPaginationProps {
+interface LpCategoriesPaginationProps {
   count: number;
   page: number;
   //
@@ -23,7 +26,7 @@ export function LpCategoriesPagination({
   setPage,
   setRowsPerPage,
   rowsPerPage,
-}: LessonCategoriesPaginationProps): React.JSX.Element {
+}: LpCategoriesPaginationProps): React.JSX.Element {
   // You should implement the pagination using a similar logic as the filters.
   // Note that when page change, you should keep the filter search params.
   const handleChangePage = (event: unknown, newPage: number) => {