From ad053d6656faa3cbe4b483c1aa451f6d9cde2a23 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:50:26 -0400
Subject: [PATCH] Add TablePage component

---
 src/apps/dashboard/components/TablePage.tsx  | 46 ++++++++++++++++++++
 src/apps/dashboard/routes/activity/index.tsx | 32 +++-----------
 src/components/Page.tsx                      |  6 ++-
 3 files changed, 56 insertions(+), 28 deletions(-)
 create mode 100644 src/apps/dashboard/components/TablePage.tsx

diff --git a/src/apps/dashboard/components/TablePage.tsx b/src/apps/dashboard/components/TablePage.tsx
new file mode 100644
index 0000000000..2061730996
--- /dev/null
+++ b/src/apps/dashboard/components/TablePage.tsx
@@ -0,0 +1,46 @@
+import Box from '@mui/material/Box/Box';
+import Typography from '@mui/material/Typography/Typography';
+import { type MRT_RowData, type MRT_TableInstance, MaterialReactTable } from 'material-react-table';
+import React from 'react';
+
+import Page, { type PageProps } from 'components/Page';
+
+interface TablePageProps<T extends MRT_RowData> extends PageProps {
+    title: string
+    table: MRT_TableInstance<T>
+}
+
+const TablePage = <T extends MRT_RowData>({
+    title,
+    table,
+    ...pageProps
+}: TablePageProps<T>) => {
+    return (
+        <Page
+            title={title}
+            {...pageProps}
+        >
+            <Box
+                className='content-primary'
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%'
+                }}
+            >
+                <Box
+                    sx={{
+                        marginBottom: 1
+                    }}
+                >
+                    <Typography variant='h2'>
+                        {title}
+                    </Typography>
+                </Box>
+                <MaterialReactTable table={table} />
+            </Box>
+        </Page>
+    );
+};
+
+export default TablePage;
diff --git a/src/apps/dashboard/routes/activity/index.tsx b/src/apps/dashboard/routes/activity/index.tsx
index 5b0e328777..2b424c9e5a 100644
--- a/src/apps/dashboard/routes/activity/index.tsx
+++ b/src/apps/dashboard/routes/activity/index.tsx
@@ -2,11 +2,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
 import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
-import Box from '@mui/material/Box';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import Typography from '@mui/material/Typography';
-import { type MRT_ColumnDef, MaterialReactTable, useMaterialReactTable } from 'material-react-table';
+import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
 import { useSearchParams } from 'react-router-dom';
 
 import { useLogEntries } from 'apps/dashboard/features/activity/api/useLogEntries';
@@ -15,12 +13,13 @@ import LogLevelCell from 'apps/dashboard/features/activity/components/LogLevelCe
 import OverviewCell from 'apps/dashboard/features/activity/components/OverviewCell';
 import UserAvatarButton from 'apps/dashboard/features/activity/components/UserAvatarButton';
 import type { ActivityLogEntryCell } from 'apps/dashboard/features/activity/types/ActivityLogEntryCell';
-import Page from 'components/Page';
 import { useUsers } from 'hooks/useUsers';
 import { parseISO8601Date, toLocaleString } from 'scripts/datetime';
 import globalize from 'lib/globalize';
 import { toBoolean } from 'utils/string';
 
+import TablePage from '../components/TablePage';
+
 type UsersRecords = Record<string, UserDto>;
 
 const DEFAULT_PAGE_SIZE = 25;
@@ -229,31 +228,12 @@ const Activity = () => {
     });
 
     return (
-        <Page
+        <TablePage
             id='serverActivityPage'
             title={globalize.translate('HeaderActivity')}
             className='mainAnimatedPage type-interior'
-        >
-            <Box
-                className='content-primary'
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%'
-                }}
-            >
-                <Box
-                    sx={{
-                        marginBottom: 1
-                    }}
-                >
-                    <Typography variant='h2'>
-                        {globalize.translate('HeaderActivity')}
-                    </Typography>
-                </Box>
-                <MaterialReactTable table={table} />
-            </Box>
-        </Page>
+            table={table}
+        />
     );
 };
 
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 6787e8f545..f3f9db7249 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -2,7 +2,7 @@ import React, { type FC, type PropsWithChildren, type HTMLAttributes, useEffect,
 
 import viewManager from './viewManager/viewManager';
 
-type PageProps = {
+type CustomPageProps = {
     id: string, // id is required for libraryMenu
     title?: string,
     isBackButtonEnabled?: boolean,
@@ -12,11 +12,13 @@ type PageProps = {
     backDropType?: string,
 };
 
+export type PageProps = CustomPageProps & HTMLAttributes<HTMLDivElement>;
+
 /**
  * Page component that handles hiding active non-react views, triggering the required events for
  * navigation and appRouter state updates, and setting the correct classes and data attributes.
  */
-const Page: FC<PropsWithChildren<PageProps & HTMLAttributes<HTMLDivElement>>> = ({
+const Page: FC<PropsWithChildren<PageProps>> = ({
     children,
     id,
     className = '',