From 4eac451432e5545aa5cbb99d3eeeaab13c714808 Mon Sep 17 00:00:00 2001 From: Ash Keel Date: Wed, 3 May 2023 18:20:52 +0200 Subject: [PATCH] refactor: fix code smells --- .../lib/extensions/workers/extensionHost.ts | 5 +- frontend/src/ui/ErrorWindow.tsx | 28 +++-- frontend/src/ui/components/DataTable.tsx | 14 ++- frontend/src/ui/components/LogViewer.tsx | 2 +- .../ui/components/forms/ControlledInput.tsx | 8 +- frontend/src/ui/pages/LoyaltyQueue.tsx | 111 ++++++++++-------- frontend/src/ui/pages/LoyaltyRewards.tsx | 4 +- 7 files changed, 104 insertions(+), 68 deletions(-) diff --git a/frontend/src/lib/extensions/workers/extensionHost.ts b/frontend/src/lib/extensions/workers/extensionHost.ts index a8be6a1..b05f9ad 100644 --- a/frontend/src/lib/extensions/workers/extensionHost.ts +++ b/frontend/src/lib/extensions/workers/extensionHost.ts @@ -39,8 +39,10 @@ function log(level: string) { } function start() { - if (!extFn || !kv || extensionStatus !== ExtensionStatus.Ready) + if (!extFn || !kv || extensionStatus !== ExtensionStatus.Ready) { throw new Error('extension not ready'); + } + void extFn(kv) .then(() => { setStatus(ExtensionStatus.Finished); @@ -51,6 +53,7 @@ function start() { error, }); }); + setStatus(ExtensionStatus.Running); } diff --git a/frontend/src/ui/ErrorWindow.tsx b/frontend/src/ui/ErrorWindow.tsx index a0b28cb..182df91 100644 --- a/frontend/src/ui/ErrorWindow.tsx +++ b/frontend/src/ui/ErrorWindow.tsx @@ -178,7 +178,9 @@ function RecoveryDialog({ open, onOpenChange }: RecoveryDialogProps) { defaultOpen={true} open={open} onOpenChange={(state) => { - if (onOpenChange) onOpenChange(state); + if (onOpenChange) { + onOpenChange(state); + } setRestored('idle'); }} > @@ -188,7 +190,9 @@ function RecoveryDialog({ open, onOpenChange }: RecoveryDialogProps) { description={t('pages.crash.recovery.restore-succeeded-body')} actionText={t('form-actions.ok')} onAction={() => { - if (onOpenChange) onOpenChange(false); + if (onOpenChange) { + onOpenChange(false); + } setRestored('idle'); }} /> @@ -202,7 +206,9 @@ function RecoveryDialog({ open, onOpenChange }: RecoveryDialogProps) { defaultOpen={false} open={!!restoreError} onOpenChange={(val: boolean) => { - if (!val) setRestoreError(null); + if (!val) { + setRestoreError(null); + } }} > { - if (onOpenChange) onOpenChange(state); + if (onOpenChange) { + onOpenChange(state); + } }} > { - if (onOpenChange) onOpenChange(state); + if (onOpenChange) { + onOpenChange(state); + } }} > { - if (!val) setSubmissionError(null); + if (!val) { + setSubmissionError(null); + } }} > { - if (onOpenChange) onOpenChange(state); + if (onOpenChange) { + onOpenChange(state); + } }} > { } ))[]; defaultSort: SortingOrder; - view: (data: T) => React.ReactNode; + rowComponent: (data: { data: T }) => ReactElement; sort: (key: keyof T) => SortFunction; } @@ -45,7 +45,7 @@ export function DataTable({ columns, defaultSort, sort, - view, + rowComponent, }: DataTableProps): React.ReactElement { const [entriesPerPage, setEntriesPerPage] = useState(15); const [page, setPage] = useState(0); @@ -83,6 +83,8 @@ export function DataTable({ const paged = sortedEntries.slice(offset, offset + entriesPerPage); const totalPages = Math.floor(sortedEntries.length / entriesPerPage); + const RowComponent = rowComponent; + return ( <> ({ ))} - {paged.map(view)} + + {paged.map((entry) => ( + + ))} + 0 && showDetails ? ( {details.map(([key, value]) => ( - + {key} {JSON.stringify(value)} diff --git a/frontend/src/ui/components/forms/ControlledInput.tsx b/frontend/src/ui/components/forms/ControlledInput.tsx index 1fd807d..a93aaeb 100644 --- a/frontend/src/ui/components/forms/ControlledInput.tsx +++ b/frontend/src/ui/components/forms/ControlledInput.tsx @@ -16,7 +16,9 @@ const ControlledInput = ( useEffect(() => { const input = ref.current; - if (input) input.setSelectionRange(cursor, cursor); + if (input) { + input.setSelectionRange(cursor, cursor); + } }, [ref, cursor, value]); return ( @@ -25,7 +27,9 @@ const ControlledInput = ( value={value} onChange={(e) => { setCursor(e.target.selectionStart); - if (onChange) onChange(e); + if (onChange) { + onChange(e); + } }} {...rest} /> diff --git a/frontend/src/ui/pages/LoyaltyQueue.tsx b/frontend/src/ui/pages/LoyaltyQueue.tsx index 0baeb8e..5f49211 100644 --- a/frontend/src/ui/pages/LoyaltyQueue.tsx +++ b/frontend/src/ui/pages/LoyaltyQueue.tsx @@ -4,6 +4,7 @@ import { useModule, useUserPoints } from '~/lib/react'; import { SortFunction } from '~/lib/types'; import { useAppDispatch } from '~/store'; import { modules, removeRedeem, setUserPoints } from '~/store/api/reducer'; +import { LoyaltyRedeem } from '~/store/api/types'; import { DataTable } from '../components/DataTable'; import DialogContent from '../components/DialogContent'; import { @@ -26,10 +27,54 @@ import { } from '../theme'; import { TableCell, TableRow } from '../theme/table'; +function RewardQueueRow({ data }: { data: LoyaltyRedeem & { date: Date } }) { + const dispatch = useAppDispatch(); + const { t } = useTranslation(); + + return ( + + + {data.date.toLocaleString()} + + {data.username} + {data.reward?.name} + {data.request_text} + + + + + + + + ); +} + function RewardQueue() { const { t } = useTranslation(); const [queue] = useModule(modules.loyaltyRedeemQueue); - const dispatch = useAppDispatch(); // Big hack but this is required or refunds break useUserPoints(); @@ -98,45 +143,7 @@ function RewardQueue() { }, ]} defaultSort={{ key: 'when', order: 'desc' }} - view={(entry) => ( - - - {entry.date.toLocaleString()} - - {entry.username} - {entry.reward?.name} - {entry.request_text} - - - - - - - - )} + rowComponent={RewardQueueRow} /> )) || {t('pages.loyalty-queue.no-redeems')}} @@ -175,6 +182,18 @@ function UserList() { } }; + const UserListRow = ({ data }: { data: UserEntry }) => ( + + {data.username} + {data.points} + + + + + ); + return ( <> ( - - {entry.username} - {entry.points} - - - - - )} + rowComponent={UserListRow} /> )) || {t('pages.loyalty-queue.no-users')}} diff --git a/frontend/src/ui/pages/LoyaltyRewards.tsx b/frontend/src/ui/pages/LoyaltyRewards.tsx index ebd102b..c156811 100644 --- a/frontend/src/ui/pages/LoyaltyRewards.tsx +++ b/frontend/src/ui/pages/LoyaltyRewards.tsx @@ -361,7 +361,7 @@ function RewardsPage() { id: e.target.value ?.toLowerCase() - .replace(/[^a-zA-Z0-9]/gi, '-') ?? '', + .replace(/[^a-z0-9]/gi, '-') ?? '', }, }); if ( @@ -685,7 +685,7 @@ function GoalsPage() { id: e.target.value ?.toLowerCase() - .replace(/[^a-zA-Z0-9]/gi, '-') ?? '', + .replace(/[^a-z0-9]/gi, '-') ?? '', }, }); if (