From 1a2f0a6e94a91a87fbe29993cf4f7090a612c809 Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Sun, 18 Jun 2023 10:48:05 +1000
Subject: [PATCH] Add keyboard shortcuts for selection controls

---
 .../AvailabilityEditor/AvailabilityEditor.tsx | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
index b684e67..ee87d00 100644
--- a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
+++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 
 import Button from '/src/components/Button/Button'
 import Content from '/src/components/Content/Content'
@@ -36,13 +36,33 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
   // Create the colour palette
   const palette = usePalette(2)
 
+  // Selection control
+  const selectAll = useCallback(() => onChange(times), [onChange, times])
+  const selectNone = useCallback(() => onChange([]), [onChange])
+  const selectInvert = useCallback(() => onChange(times.filter(t => !value.includes(t))), [onChange, times, value])
+
+  // Selection keyboard shortcuts
+  useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && (e.key === 'a' || e.key === 'i')) {
+        e.preventDefault()
+        if (e.shiftKey && e.key === 'a') selectNone()
+        else if (e.key === 'a') selectAll()
+        else selectInvert()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeydown)
+    return () => document.removeEventListener('keydown', handleKeydown)
+  }, [selectAll, selectNone, selectInvert])
+
   return <>
     <Content isCentered>
       <div>{t('you.info')}</div>
       <div className={styles.selectionControls}>
-        <Button isSmall onClick={() => onChange(times)}>{t('you.select_all')}</Button>
-        <Button isSmall onClick={() => onChange([])}>{t('you.select_none')}</Button>
-        <Button isSmall onClick={() => onChange(times.filter(t => !value.includes(t)))}>{t('you.select_invert')}</Button>
+        <Button isSmall onClick={selectAll} title="Ctrl + A (⌘ A)">{t('you.select_all')}</Button>
+        <Button isSmall onClick={selectNone} title="Ctrl + Shift + A (⌘ ⇧ A)">{t('you.select_none')}</Button>
+        <Button isSmall onClick={selectInvert} title="Ctrl + I (⌘ I)">{t('you.select_invert')}</Button>
       </div>
     </Content>
     {times[0].length === 13 && <Content>