refactor: fix code smells

2024-09-18 01:50:50 +00:00 · 2023-05-03 18:20:52 +02:00 · 2023-05-03 18:20:52 +02:00 · 4eac451432
commit 4eac451432
parent bc6c76c581
7 changed files with 104 additions and 68 deletions
--- 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);
 }

--- 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);
+          }
        }}
      >
        <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
--- a/frontend/src/ui/components/DataTable.tsx
+++ b/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}
--- a/frontend/src/ui/components/LogViewer.tsx
+++ b/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>
--- 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}
    />
--- 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 (
+    <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) => (
-            <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>
-          )}
+          rowComponent={RewardQueueRow}
        />
      )) || <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) => (
-            <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>
-          )}
+          rowComponent={UserListRow}
        />
      )) || <NoneText>{t('pages.loyalty-queue.no-users')}</NoneText>}
    </>
--- 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 (