refactor: fix code smells

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);
 }
 

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);
+          }
         }}
       >
         <AlertContent
@@ -220,7 +226,9 @@ function RecoveryDialog({ open, onOpenChange }: RecoveryDialogProps) {
       <Dialog
         open={open}
         onOpenChange={(state) => {
-          if (onOpenChange) onOpenChange(state);
+          if (onOpenChange) {
+            onOpenChange(state);
+          }
         }}
       >
         <DialogContent
@@ -315,7 +323,9 @@ function ReportDialog({ open, onOpenChange, errorData }: ReportDialogProps) {
       <Alert
         open={open}
         onOpenChange={(state) => {
-          if (onOpenChange) onOpenChange(state);
+          if (onOpenChange) {
+            onOpenChange(state);
+          }
         }}
       >
         <AlertContent
@@ -353,7 +363,9 @@ function ReportDialog({ open, onOpenChange, errorData }: ReportDialogProps) {
         defaultOpen={false}
         open={!!submissionError}
         onOpenChange={(val: boolean) => {
-          if (!val) setSubmissionError(null);
+          if (!val) {
+            setSubmissionError(null);
+          }
         }}
       >
         <AlertContent
@@ -370,7 +382,9 @@ function ReportDialog({ open, onOpenChange, errorData }: ReportDialogProps) {
       <Dialog
         open={open}
         onOpenChange={(state) => {
-          if (onOpenChange) onOpenChange(state);
+          if (onOpenChange) {
+            onOpenChange(state);
+          }
         }}
       >
         <DialogContent

frontend/src/ui/components/DataTable.tsx

@@ -1,5 +1,5 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { SortFunction } from '~/lib/types';
 import { styled } from '../theme';
 import { Table, TableHeader } from '../theme/table';
@@ -26,7 +26,7 @@ export interface DataTableProps<T> {
       }
   ))[];
   defaultSort: SortingOrder<T>;
-  view: (data: T) => React.ReactNode;
+  rowComponent: (data: { data: T }) => ReactElement;
   sort: (key: keyof T) => SortFunction<T>;
 }
 
@@ -45,7 +45,7 @@ export function DataTable<T>({
   columns,
   defaultSort,
   sort,
-  view,
+  rowComponent,
 }: DataTableProps<T>): React.ReactElement {
   const [entriesPerPage, setEntriesPerPage] = useState(15);
   const [page, setPage] = useState(0);
@@ -83,6 +83,8 @@ export function DataTable<T>({
   const paged = sortedEntries.slice(offset, offset + entriesPerPage);
   const totalPages = Math.floor(sortedEntries.length / entriesPerPage);
 
+  const RowComponent = rowComponent;
+
   return (
     <>
       <PageList
@@ -115,7 +117,11 @@ export function DataTable<T>({
             ))}
           </tr>
         </thead>
-        <tbody>{paged.map(view)}</tbody>
+        <tbody>
+          {paged.map((entry) => (
+            <RowComponent data={entry} />
+          ))}
+        </tbody>
       </Table>
       <PageList
         current={page + 1}

frontend/src/ui/components/LogViewer.tsx

@@ -277,7 +277,7 @@ export function LogItem({ data, expandDefault }: LogItemProps) {
       {details.length > 0 && showDetails ? (
         <LogDetails level={levelStyle}>
           {details.map(([key, value]) => (
-            <LogDetailItem>
+            <LogDetailItem key={key}>
               <LogDetailKey level={levelStyle}>{key}</LogDetailKey>
               <LogDetailValue>{JSON.stringify(value)}</LogDetailValue>
             </LogDetailItem>

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}
     />

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 (
+    <TableRow key={`${data.when.toString()}${data.username}`}>
+      <TableCell css={{ width: '22%', fontSize: '0.8rem' }}>
+        {data.date.toLocaleString()}
+      </TableCell>
+      <TableCell css={{ width: '10%' }}>{data.username}</TableCell>
+      <TableCell css={{ width: '18%' }}>{data.reward?.name}</TableCell>
+      <TableCell css={{ width: '40%' }}>{data.request_text}</TableCell>
+      <TableCell>
+        <FlexRow spacing="1">
+          <Button
+            size="small"
+            onClick={() => {
+              void dispatch(removeRedeem(data));
+            }}
+          >
+            {t('pages.loyalty-queue.accept')}
+          </Button>
+          <Button
+            size="small"
+            onClick={() => {
+              // Give points back to the viewer
+              void dispatch(
+                setUserPoints({
+                  user: data.username,
+                  points: data.reward.price,
+                  relative: true,
+                }),
+              );
+              // Take the redeem off the list
+              void dispatch(removeRedeem(data));
+            }}
+          >
+            {t('pages.loyalty-queue.refund')}
+          </Button>
+        </FlexRow>
+      </TableCell>
+    </TableRow>
+  );
+}
+
 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) => (
+          rowComponent={RewardQueueRow}
-            <TableRow key={`${entry.when.toString()}${entry.username}`}>
-              <TableCell css={{ width: '22%', fontSize: '0.8rem' }}>
-                {entry.date.toLocaleString()}
-              </TableCell>
-              <TableCell css={{ width: '10%' }}>{entry.username}</TableCell>
-              <TableCell css={{ width: '18%' }}>{entry.reward?.name}</TableCell>
-              <TableCell css={{ width: '40%' }}>{entry.request_text}</TableCell>
-              <TableCell>
-                <FlexRow spacing="1">
-                  <Button
-                    size="small"
-                    onClick={() => {
-                      void dispatch(removeRedeem(entry));
-                    }}
-                  >
-                    {t('pages.loyalty-queue.accept')}
-                  </Button>
-                  <Button
-                    size="small"
-                    onClick={() => {
-                      // Give points back to the viewer
-                      void dispatch(
-                        setUserPoints({
-                          user: entry.username,
-                          points: entry.reward.price,
-                          relative: true,
-                        }),
-                      );
-                      // Take the redeem off the list
-                      void dispatch(removeRedeem(entry));
-                    }}
-                  >
-                    {t('pages.loyalty-queue.refund')}
-                  </Button>
-                </FlexRow>
-              </TableCell>
-            </TableRow>
-          )}
         />
       )) || <NoneText>{t('pages.loyalty-queue.no-redeems')}</NoneText>}
     </>
@@ -175,6 +182,18 @@ function UserList() {
     }
   };
 
+  const UserListRow = ({ data }: { data: UserEntry }) => (
+    <TableRow key={data.username}>
+      <TableCell css={{ width: '100%' }}>{data.username}</TableCell>
+      <TableCell>{data.points}</TableCell>
+      <TableCell>
+        <Button onClick={() => setCurrentEntry(data)} size="small">
+          {t('form-actions.edit')}
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+
   return (
     <>
       <Dialog
@@ -360,17 +379,7 @@ function UserList() {
             },
           ]}
           defaultSort={{ key: 'points', order: 'desc' }}
-          view={(entry) => (
+          rowComponent={UserListRow}
-            <TableRow key={entry.username}>
-              <TableCell css={{ width: '100%' }}>{entry.username}</TableCell>
-              <TableCell>{entry.points}</TableCell>
-              <TableCell>
-                <Button onClick={() => setCurrentEntry(entry)} size="small">
-                  {t('form-actions.edit')}
-                </Button>
-              </TableCell>
-            </TableRow>
-          )}
         />
       )) || <NoneText>{t('pages.loyalty-queue.no-users')}</NoneText>}
     </>

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 (