Add save shortcut to all forms

package.json

@@ -37,6 +37,7 @@
         "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.47.0",
         "react-hook-form-mui": "^6.5.4",
+        "react-hotkeys-hook": "^4.4.1",
         "react-redux": "^8.1.3",
         "use-firebase-auth": "^3.0.0",
         "uuid": "^9.0.1",

src/components/form/SaveShortcut.tsx

@@ -0,0 +1,16 @@
+import { useHotkeys } from 'react-hotkeys-hook'
+import { useRef } from 'react'
+
+export const SaveShortcut = () => {
+    const ref = useRef(null)
+    useHotkeys(['ctrl+s', 'meta+s'], (event) => {
+        event.preventDefault()
+        // @ts-ignore
+        const form = ref.current?.closest('form')
+        if (form) {
+            form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }))
+        }
+    })
+
+    return <div ref={ref}></div>
+}

src/events/page/sessions/EventSessionForm.tsx

@@ -14,6 +14,7 @@ import { useSpeakers } from '../../../services/hooks/useSpeakersMap'
 import LoadingButton from '@mui/lab/LoadingButton'
 import { ImageTextFieldElement } from '../../../components/form/ImageTextFieldElement'
 import { useLocation } from 'wouter'
+import { SaveShortcut } from '../../../components/form/SaveShortcut'
 
 export type EventSessionFormProps = {
     event: Event
@@ -287,6 +288,7 @@ export const EventSessionForm = ({ event, session, onSubmit }: EventSessionFormP
                     </LoadingButton>
                 </Grid>
             </Grid>
+            <SaveShortcut />
         </FormContainer>
     )
 }

src/events/page/settings/EventSettings.tsx

@@ -26,6 +26,7 @@ import {
     useFirestoreDocumentDeletion,
     useFirestoreDocumentMutation,
 } from '../../../services/hooks/firestoreMutationHooks'
+import { SaveShortcut } from '../../../components/form/SaveShortcut'
 
 const schema = yup
     .object({
@@ -172,6 +173,7 @@ export const EventSettings = ({ event }: EventSettingsProps) => {
                         </Grid>
                     </Grid>
                 </Card>
+                {!deleteOpen && !reImportOpen && <SaveShortcut />}
             </FormContainer>
 
             <Box mt={2}>

src/events/page/speakers/EventSpeakerForm.tsx

@@ -5,6 +5,7 @@ import { Grid } from '@mui/material'
 import LoadingButton from '@mui/lab/LoadingButton'
 import { SpeakerSocialFields } from './SpeakerSocials'
 import { ImageTextFieldElement } from '../../../components/form/ImageTextFieldElement'
+import { SaveShortcut } from '../../../components/form/SaveShortcut'
 
 export type EventSpeakerFormProps = {
     event: Event
@@ -165,6 +166,7 @@ export const EventSpeakerForm = ({ speaker, onSubmit, event }: EventSpeakerFormP
                     </LoadingButton>
                 </Grid>
             </Grid>
+            <SaveShortcut />
         </FormContainer>
     )
 }

src/events/page/sponsors/components/SponsorForm.tsx

@@ -4,6 +4,7 @@ import { FormContainer, TextFieldElement, useForm } from 'react-hook-form-mui'
 import { Grid } from '@mui/material'
 import LoadingButton from '@mui/lab/LoadingButton'
 import { ImageTextFieldElement } from '../../../../components/form/ImageTextFieldElement'
+import { SaveShortcut } from '../../../../components/form/SaveShortcut'
 
 export type SponsorFormProps = {
     event: Event
@@ -92,6 +93,7 @@ export const SponsorForm = ({ event, sponsor, onSubmit }: SponsorFormProps) => {
                     {sponsor ? 'Save' : 'Add sponsor'}
                 </LoadingButton>
             </Grid>
+            <SaveShortcut />
         </FormContainer>
     )
 }

src/events/page/team/components/MemberForm.tsx

@@ -4,6 +4,7 @@ import { FormContainer, TextFieldElement, useForm } from 'react-hook-form-mui'
 import { Grid } from '@mui/material'
 import LoadingButton from '@mui/lab/LoadingButton'
 import { ImageTextFieldElement } from '../../../../components/form/ImageTextFieldElement'
+import { SaveShortcut } from '../../../../components/form/SaveShortcut'
 
 export type MemberFormProps = {
     event: Event
@@ -97,6 +98,8 @@ export const MemberForm = ({ event, member, onSubmit }: MemberFormProps) => {
                     {member ? 'Save' : 'Add member'}
                 </LoadingButton>
             </Grid>
+
+            <SaveShortcut />
         </FormContainer>
     )
 }