some more fixing type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/hotbar/hotbar-switch-command.tsx

@@ -25,21 +25,35 @@ interface Dependencies {
   commandOverlay: CommandOverlay;
 }
 
-function ignoreIf<T>(check: boolean, menuItems: T) {
+function ignoreIf<T>(check: boolean, menuItems: T[]): T[] {
   return check ? [] : menuItems;
 }
 
-function getHotbarSwitchOptions(hotbars: Hotbar[]): (Hotbar | typeof hotbarAddAction | typeof hotbarRemoveAction | typeof hotbarRenameAction)[] {
+interface HotbarSwitchActionOption {
+  action: typeof hotbarAddAction | typeof hotbarRemoveAction | typeof hotbarRenameAction;
+}
+
+interface SwitchToHotbarOption {
+  hotbar: Hotbar;
+}
+
+type HotbarSwitchOption = SwitchToHotbarOption | HotbarSwitchActionOption;
+
+function getHotbarSwitchOptions(hotbars: Hotbar[]): HotbarSwitchOption[] {
   return [
-    ...hotbars,
+    ...hotbars.map(hotbar => ({ hotbar })),
-    hotbarAddAction,
+    { action: hotbarAddAction },
     ...ignoreIf(hotbars.length > 1, [
-      hotbarRemoveAction,
+      { action: hotbarRemoveAction } as const,
-    ] as const),
+    ]),
-    hotbarRenameAction,
+    { action: hotbarRenameAction },
   ];
 }
 
+function isActionOption(option: HotbarSwitchOption): option is HotbarSwitchActionOption {
+  return Boolean((option as HotbarSwitchActionOption).action);
+}
+
 const NonInjectedHotbarSwitchCommand = observer(({
   hotbarStore,
   commandOverlay,
@@ -47,40 +61,45 @@ const NonInjectedHotbarSwitchCommand = observer(({
   <Select
     id="switch-to-hotbar-input"
     menuPortalTarget={null}
-    onChange={(value) => {
+    onChange={(option) => {
-      switch (value) {
+      if (!option) {
-        case hotbarAddAction:
+        return;
-          return commandOverlay.open(<HotbarAddCommand />);
+      }
-        case hotbarRemoveAction:
-          return commandOverlay.open(<HotbarRemoveCommand />);
-        case hotbarRenameAction:
-          return commandOverlay.open(<HotbarRenameCommand />);
 
-        default: {
+      if (isActionOption(option)) {
-          if (value) {
+        switch (option.action) {
-            hotbarStore.setActiveHotbar(value);
+          case hotbarAddAction:
-            commandOverlay.close();
+            return commandOverlay.open(<HotbarAddCommand />);
-          }
+          case hotbarRemoveAction:
+            return commandOverlay.open(<HotbarRemoveCommand />);
+          case hotbarRenameAction:
+            return commandOverlay.open(<HotbarRenameCommand />);
         }
       }
-    } }
+
+      hotbarStore.setActiveHotbar(option.hotbar);
+      commandOverlay.close();
+    }}
     components={{ DropdownIndicator: null, IndicatorSeparator: null }}
     menuIsOpen={true}
     options={getHotbarSwitchOptions(hotbarStore.hotbars)}
-    getOptionLabel={actionOrId => {
+    getOptionLabel={option => {
-      switch (actionOrId) {
+      if (isActionOption(option)) {
-        case hotbarAddAction:
+        switch (option.action) {
-          return "Add hotbar ...";
+          case hotbarAddAction:
-        case hotbarRemoveAction:
+            return "Add hotbar ...";
-          return "Remove hotbar ...";
+          case hotbarRemoveAction:
-        case hotbarRenameAction:
+            return "Remove hotbar ...";
-          return "Rename hotbar ...";
+          case hotbarRenameAction:
-        default:
+            return "Rename hotbar ...";
-          return hotbarStore.getDisplayLabel(actionOrId);
+        }
       }
-    } }
+
+      return hotbarStore.getDisplayLabel(option.hotbar);
+    }}
     autoFocus={true}
     escapeClearsValue={false}
+    isClearable={false}
     placeholder="Switch to hotbar"
   />
 ));

src/renderer/components/table/react-table.tsx

@@ -5,7 +5,7 @@
 
 import styles from "./react-table.module.scss";
 import React, { useCallback, useMemo } from "react";
-import type { UseTableOptions } from "react-table";
+import type { Row, UseTableOptions } from "react-table";
 import { useFlexLayout, useSortBy, useTable } from "react-table";
 import { Icon } from "../icon";
 import { cssNames } from "../../utils";
@@ -39,19 +39,12 @@ export function ReactTable({ columns, data, headless }: ReactTableProps) {
     useSortBy,
   );
 
-  const RenderRow = useCallback(
+  const renderRow = useCallback(
-    ({ index, style }) => {
+    (row: Row<object>) => {
-      const row = rows[index];
-
       prepareRow(row);
 
       return (
-        <div
+        <div className={styles.tr}>
-          {...row.getRowProps({
-            style,
-          })}
-          className={styles.tr}
-        >
           {row.cells.map((cell, index) => (
             <div
               {...cell.getCellProps()}
@@ -64,7 +57,7 @@ export function ReactTable({ columns, data, headless }: ReactTableProps) {
         </div>
       );
     },
-    [columns, prepareRow, rows],
+    [columns, prepareRow],
   );
 
   return (
@@ -106,7 +99,7 @@ export function ReactTable({ columns, data, headless }: ReactTableProps) {
       )}
 
       <div {...getTableBodyProps()}>
-        {rows.map((row, index) => RenderRow({ index }))}
+        {rows.map(renderRow)}
       </div>
     </div>
   );