From c0e01f304d3fde0149eb2661f35c501f45985ad8 Mon Sep 17 00:00:00 2001
From: catloversg <152669316+catloversg@users.noreply.github.com>
Date: Sat, 1 Mar 2025 03:56:00 +0700
Subject: [PATCH] CODEBASE: Refactor KeyBindingPage (#1984)

---
 src/GameOptions/ui/KeyBindingPage.tsx | 63 +++++++++++----------------
 1 file changed, 25 insertions(+), 38 deletions(-)

diff --git a/src/GameOptions/ui/KeyBindingPage.tsx b/src/GameOptions/ui/KeyBindingPage.tsx
index d347c6053..5a39f66c6 100644
--- a/src/GameOptions/ui/KeyBindingPage.tsx
+++ b/src/GameOptions/ui/KeyBindingPage.tsx
@@ -289,49 +289,36 @@ export function KeyBindingPage(): React.ReactElement {
         knowAboutBitverse() || !(SpoilerKeyBindingTypes as unknown as string[]).includes(keyBindingType),
     )
     .map((keyBindingType) => {
-      const primaryKeyCombination = CurrentKeyBindings[keyBindingType][0] ? (
-        parseKeyCombinationToString(CurrentKeyBindings[keyBindingType][0])
-      ) : (
-        // Use a non-breaking space to make the button fit to the parent td element.
-        <>&nbsp;</>
-      );
-      const secondaryKeyCombination = CurrentKeyBindings[keyBindingType][1] ? (
-        parseKeyCombinationToString(CurrentKeyBindings[keyBindingType][1])
-      ) : (
-        // Use a non-breaking space to make the button fit to the parent td element.
-        <>&nbsp;</>
-      );
       return (
         <tr key={keyBindingType}>
           <td>
             <Typography minWidth="250px">{keyBindingType}</Typography>
           </td>
-          <td>
-            <Button
-              sx={{
-                minWidth: "250px",
-                color: `${
-                  isCustomKeyCombination(keyBindingType, true) ? Settings.theme.warning : Settings.theme.primary
-                }`,
-              }}
-              onClick={() => showModal(keyBindingType, true)}
-            >
-              {primaryKeyCombination}
-            </Button>
-          </td>
-          <td>
-            <Button
-              sx={{
-                minWidth: "250px",
-                color: `${
-                  isCustomKeyCombination(keyBindingType, false) ? Settings.theme.warning : Settings.theme.primary
-                }`,
-              }}
-              onClick={() => showModal(keyBindingType, false)}
-            >
-              {secondaryKeyCombination}
-            </Button>
-          </td>
+          {[0, 1].map((value) => {
+            const isPrimary = value === 0;
+            return (
+              <td key={`${keyBindingType}-${value}`}>
+                <Button
+                  sx={{
+                    minWidth: "250px",
+                    color: `${
+                      isCustomKeyCombination(keyBindingType, isPrimary)
+                        ? Settings.theme.warning
+                        : Settings.theme.primary
+                    }`,
+                  }}
+                  onClick={() => showModal(keyBindingType, isPrimary)}
+                >
+                  {CurrentKeyBindings[keyBindingType][value] ? (
+                    parseKeyCombinationToString(CurrentKeyBindings[keyBindingType][value])
+                  ) : (
+                    // Use a non-breaking space to make the button fit to the parent td element.
+                    <>&nbsp;</>
+                  )}
+                </Button>
+              </td>
+            );
+          })}
         </tr>
       );
     });