mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Refactor devices page components

Browse source
This commit is contained in:
Bill Thornton 2025-01-30 13:09:33 -05:00
parent e7c749307c
commit 671ab3751a
3 changed files with 41 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/apps/dashboard/features/devices/components/DeviceNameCell.tsx Normal file
View file

@ -0,0 +1,22 @@
import React, { FC } from 'react';
import { DeviceInfoCell } from 'apps/dashboard/features/devices/types/deviceInfoCell';
import { getDeviceIcon } from 'utils/image';
const DeviceNameCell: FC<DeviceInfoCell> = ({ row, renderedCellValue }) => (
<>
<img
alt={row.original.AppName || undefined}
src={getDeviceIcon(row.original)}
style={{
display: 'inline-block',
maxWidth: '1.5em',
maxHeight: '1.5em',
marginRight: '1rem'
}}
/>
{renderedCellValue}
</>
);
export default DeviceNameCell;

7
src/apps/dashboard/features/devices/types/deviceInfoCell.ts Normal file
View file

@ -0,0 +1,7 @@
import type { DeviceInfoDto } from '@jellyfin/sdk/lib/generated-client/models/device-info-dto';
import type { MRT_Row } from 'material-react-table';
export interface DeviceInfoCell {
renderedCellValue: React.ReactNode
row: MRT_Row<DeviceInfoDto>
}

44
src/apps/dashboard/routes/devices/index.tsx
View file

@ -5,41 +5,21 @@ import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button'; import Button from '@mui/material/Button/Button';
import IconButton from '@mui/material/IconButton/IconButton'; import IconButton from '@mui/material/IconButton/IconButton';
import Tooltip from '@mui/material/Tooltip/Tooltip'; import Tooltip from '@mui/material/Tooltip/Tooltip';
import React, { FC, useCallback, useMemo, useState } from 'react'; 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 TablePage, { DEFAULT_TABLE_OPTIONS } from 'apps/dashboard/components/TablePage';
import { useDevices } from 'apps/dashboard/features/devices/api/useDevices';
import globalize from 'lib/globalize';
import { type MRT_ColumnDef, MRT_Row, useMaterialReactTable } from 'material-react-table';
import { parseISO8601Date, toLocaleString } from 'scripts/datetime';
import { useApi } from 'hooks/useApi';
import { getDeviceIcon } from 'utils/image';
import UserAvatarButton from 'apps/dashboard/components/UserAvatarButton'; import UserAvatarButton from 'apps/dashboard/components/UserAvatarButton';
import { type UsersRecords, useUsersDetails } from 'hooks/useUsers';
import { useUpdateDevice } from 'apps/dashboard/features/devices/api/useUpdateDevice';
import { useDeleteDevice } from 'apps/dashboard/features/devices/api/useDeleteDevice'; import { useDeleteDevice } from 'apps/dashboard/features/devices/api/useDeleteDevice';
import { useDevices } from 'apps/dashboard/features/devices/api/useDevices';
import { useUpdateDevice } from 'apps/dashboard/features/devices/api/useUpdateDevice';
import DeviceNameCell from 'apps/dashboard/features/devices/components/DeviceNameCell';
import type { DeviceInfoCell } from 'apps/dashboard/features/devices/types/deviceInfoCell';
import ConfirmDialog from 'components/ConfirmDialog'; import ConfirmDialog from 'components/ConfirmDialog';
import { useApi } from 'hooks/useApi';
interface DeviceInfoCell { import { type UsersRecords, useUsersDetails } from 'hooks/useUsers';
renderedCellValue: React.ReactNode import globalize from 'lib/globalize';
row: MRT_Row<DeviceInfoDto> import { parseISO8601Date, toLocaleString } from 'scripts/datetime';
}
const DeviceNameCell: FC<DeviceInfoCell> = ({ row, renderedCellValue }) => (
<>
<img
alt={row.original.AppName || undefined}
src={getDeviceIcon(row.original)}
style={{
display: 'inline-block',
maxWidth: '1.5em',
maxHeight: '1.5em',
marginRight: '1rem'
}}
/>
{renderedCellValue}
</>
);
const getUserCell = (users: UsersRecords) => function UserCell({ renderedCellValue, row }: DeviceInfoCell) { const getUserCell = (users: UsersRecords) => function UserCell({ renderedCellValue, row }: DeviceInfoCell) {
return ( return (
@ -53,7 +33,7 @@ const getUserCell = (users: UsersRecords) => function UserCell({ renderedCellVal
); );
}; };
const DevicesPage = () => { export const Component = () => {
const { api } = useApi(); const { api } = useApi();
const { data: devices, isLoading: isDevicesLoading } = useDevices({}); const { data: devices, isLoading: isDevicesLoading } = useDevices({});
const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails(); const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails();
@ -267,4 +247,4 @@ const DevicesPage = () => {
); );
}; };
export default DevicesPage; Component.displayName = 'DevicesPage';