Convert Page components to TypeScript

(cherry picked from commit f35a27449d253260ba9c9fae28909cec8a87b4fe)

frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Shortcut, shortcuts } from 'Components/keyboardShortcuts';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import translate from 'Utilities/String/translate';
+import styles from './KeyboardShortcutsModalContent.css';
+
+function getShortcuts() {
+  const allShortcuts: Shortcut[] = [];
+
+  Object.keys(shortcuts).forEach((key) => {
+    allShortcuts.push(shortcuts[key]);
+  });
+
+  return allShortcuts;
+}
+
+function getShortcutKey(combo: string, isOsx: boolean) {
+  const comboMatch = combo.match(/(.+?)\+(.)/);
+
+  if (!comboMatch) {
+    return combo;
+  }
+
+  const modifier = comboMatch[1];
+  let key = comboMatch[2];
+  let osModifier = modifier;
+
+  if (modifier === 'mod') {
+    osModifier = isOsx ? 'cmd' : 'Ctrl';
+  }
+
+  if (key === 'home') {
+    key = isOsx ? '↑' : 'Home';
+  }
+
+  if (key === 'end') {
+    key = isOsx ? '↓' : 'End';
+  }
+
+  return `${osModifier} + ${key}`;
+}
+
+interface KeyboardShortcutsModalContentProps {
+  onModalClose: () => void;
+}
+
+function KeyboardShortcutsModalContent({
+  onModalClose,
+}: KeyboardShortcutsModalContentProps) {
+  const { isOsx } = useSelector(createSystemStatusSelector());
+  const allShortcuts = getShortcuts();
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('KeyboardShortcuts')}</ModalHeader>
+
+      <ModalBody>
+        {allShortcuts.map((shortcut) => {
+          return (
+            <div key={shortcut.name} className={styles.shortcut}>
+              <div className={styles.key}>
+                {getShortcutKey(shortcut.key, isOsx)}
+              </div>
+
+              <div>{shortcut.name}</div>
+            </div>
+          );
+        })}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default KeyboardShortcutsModalContent;