Add common DateTimeCell for tables

jellyfin · Jan 31, 2025 · a15943a · a15943a
1 parent d7a81c3
commit a15943a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 15 deletions.
diff --git a/src/apps/dashboard/components/table/DateTimeCell.tsx b/src/apps/dashboard/components/table/DateTimeCell.tsx
@@ -0,0 +1,17 @@
+import format from 'date-fns/format';
+import type { MRT_Cell, MRT_RowData } from 'material-react-table';
+import { FC } from 'react';
+
+import { useLocale } from 'hooks/useLocale';
+
+interface CellProps {
+    cell: MRT_Cell<MRT_RowData>
+}
+
+const DateTimeCell: FC<CellProps> = ({ cell }) => {
+    const { dateFnsLocale } = useLocale();
+
+    return format(cell.getValue<Date>(), 'Pp', { locale: dateFnsLocale });
+};
+
+export default DateTimeCell;
diff --git a/src/apps/dashboard/components/TablePage.tsx → .../dashboard/components/table/TablePage.tsx b/src/apps/dashboard/components/TablePage.tsx → .../dashboard/components/table/TablePage.tsx
diff --git a/src/apps/dashboard/routes/activity/index.tsx b/src/apps/dashboard/routes/activity/index.tsx
@@ -1,3 +1,4 @@
+import parseISO from 'date-fns/parseISO';
 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';
@@ -6,15 +7,15 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
 import { useSearchParams } from 'react-router-dom';
 
-import TablePage, { DEFAULT_TABLE_OPTIONS } from 'apps/dashboard/components/TablePage';
+import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
+import TablePage, { DEFAULT_TABLE_OPTIONS } from 'apps/dashboard/components/table/TablePage';
 import { useLogEntries } from 'apps/dashboard/features/activity/api/useLogEntries';
 import ActionsCell from 'apps/dashboard/features/activity/components/ActionsCell';
 import LogLevelCell from 'apps/dashboard/features/activity/components/LogLevelCell';
 import OverviewCell from 'apps/dashboard/features/activity/components/OverviewCell';
 import UserAvatarButton from 'apps/dashboard/components/UserAvatarButton';
 import type { ActivityLogEntryCell } from 'apps/dashboard/features/activity/types/ActivityLogEntryCell';
 import { type UsersRecords, useUsersDetails } from 'hooks/useUsers';
-import { parseISO8601Date, toLocaleString } from 'scripts/datetime';
 import globalize from 'lib/globalize';
 import { toBoolean } from 'utils/string';
 
@@ -82,10 +83,10 @@ const Activity = () => {
     const columns = useMemo<MRT_ColumnDef<ActivityLogEntry>[]>(() => [
         {
             id: 'Date',
-            accessorFn: row => parseISO8601Date(row.Date),
+            accessorFn: row => row.Date ? parseISO(row.Date) : undefined,
             header: globalize.translate('LabelTime'),
             size: 160,
-            Cell: ({ cell }) => toLocaleString(cell.getValue<Date>()),
+            Cell: DateTimeCell,
             filterVariant: 'datetime-range'
         },
         {

diff --git a/src/apps/dashboard/routes/devices/index.tsx b/src/apps/dashboard/routes/devices/index.tsx
@@ -5,12 +5,12 @@ import Box from '@mui/material/Box/Box';
 import Button from '@mui/material/Button/Button';
 import IconButton from '@mui/material/IconButton/IconButton';
 import Tooltip from '@mui/material/Tooltip/Tooltip';
-import format from 'date-fns/format';
 import parseISO from 'date-fns/parseISO';
 import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import TablePage, { DEFAULT_TABLE_OPTIONS } from 'apps/dashboard/components/TablePage';
+import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
+import TablePage, { DEFAULT_TABLE_OPTIONS } from 'apps/dashboard/components/table/TablePage';
 import UserAvatarButton from 'apps/dashboard/components/UserAvatarButton';
 import { useDeleteDevice } from 'apps/dashboard/features/devices/api/useDeleteDevice';
 import { useDevices } from 'apps/dashboard/features/devices/api/useDevices';
@@ -19,7 +19,6 @@ import DeviceNameCell from 'apps/dashboard/features/devices/components/DeviceNam
 import type { DeviceInfoCell } from 'apps/dashboard/features/devices/types/deviceInfoCell';
 import ConfirmDialog from 'components/ConfirmDialog';
 import { useApi } from 'hooks/useApi';
-import { useLocale } from 'hooks/useLocale';
 import { type UsersRecords, useUsersDetails } from 'hooks/useUsers';
 import globalize from 'lib/globalize';
 
@@ -38,7 +37,6 @@ const getUserCell = (users: UsersRecords) => function UserCell({ renderedCellVal
 export const Component = () => {
     const { api } = useApi();
     const { data: devices, isLoading: isDevicesLoading } = useDevices({});
-    const { dateFnsLocale } = useLocale();
     const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails();
 
     const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState(false);
@@ -105,7 +103,7 @@ export const Component = () => {
             accessorFn: row => row.DateLastActivity ? parseISO(row.DateLastActivity) : undefined,
             header: globalize.translate('LastActive'),
             size: 160,
-            Cell: ({ cell }) => format(cell.getValue<Date>(), 'Pp', { locale: dateFnsLocale }),
+            Cell: DateTimeCell,
             filterVariant: 'datetime-range',
             enableEditing: false
         },
@@ -134,7 +132,7 @@ export const Component = () => {
             filterVariant: 'multi-select',
             filterSelectOptions: userNames
         }
-    ], [ UserCell, dateFnsLocale, userNames ]);
+    ], [ UserCell, userNames ]);
 
     const mrTable = useMaterialReactTable({
         ...DEFAULT_TABLE_OPTIONS,

diff --git a/src/apps/dashboard/routes/keys/index.tsx b/src/apps/dashboard/routes/keys/index.tsx
@@ -1,3 +1,6 @@
+import parseISO from 'date-fns/parseISO';
+
+import DateTimeCell from 'apps/dashboard/components/table/DateTimeCell';
 import Page from 'components/Page';
 import { useApi } from 'hooks/useApi';
 import globalize from 'lib/globalize';
@@ -14,7 +17,6 @@ import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { MaterialReactTable, MRT_ColumnDef, useMaterialReactTable } from 'material-react-table';
-import { getDisplayTime, parseISO8601Date, toLocaleDateString } from 'scripts/datetime';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 
@@ -38,8 +40,8 @@ const ApiKeys = () => {
         },
         {
             id: 'DateIssued',
-            accessorFn: item => parseISO8601Date(item.DateCreated),
-            Cell: ({ cell }) => toLocaleDateString(cell.getValue<Date>()) + ' ' + getDisplayTime(cell.getValue<Date>()),
+            accessorFn: item => item.DateCreated ? parseISO(item.DateCreated) : undefined,
+            Cell: DateTimeCell,
             header: globalize.translate('HeaderDateIssued'),
             filterVariant: 'datetime-range'
         }
@@ -77,8 +79,10 @@ const ApiKeys = () => {
         },
 
         renderTopToolbarCustomActions: () => (
-            <Button onClick={showNewKeyPopup}>
-                <AddIcon />
+            <Button
+                startIcon={<AddIcon />}
+                onClick={showNewKeyPopup}
+            >
                 {globalize.translate('HeaderNewApiKey')}
             </Button>
         ),