Press spacebar to generate (#33)

src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useNoteSettingsContext';
 export * from './useChordSettingsContext';
 export * from './useSpeedContext';
+export * from './useSpaceBarEffect';

src/hooks/useSpaceBarEffect.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+export const useSpaceBarEffect = (maFonction: () => void) => {
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+			event.preventDefault();
+      if (event.code === 'Space') {
+        maFonction();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [maFonction]);
+};

src/pages/ChordsPage.tsx

@@ -1,23 +1,26 @@
 import { ChordsList, ChordsSettings, TimerCue } from "../components";
 
-import { useChordSettingsContext, useSpeedContext } from "../hooks";
+import { useChordSettingsContext, useSpaceBarEffect, useSpeedContext } from "../hooks";
 
 export const ChordsPage = () => {
   const { chords, isShapeVisible, cagedPosition, getRandomChordsOnClick } =
     useChordSettingsContext();
   const { resetSecondsElapsed } = useSpeedContext();
-
+  
   const handleChordsListOnClick = () => {
     getRandomChordsOnClick();
     resetSecondsElapsed();
   }
 
+  useSpaceBarEffect(handleChordsListOnClick);
+
   const ShapeDecorator: React.ReactNode = (
     <div className={`${isShapeVisible ? "" : "invisible"}`}>
       {cagedPosition}
     </div>
   );
 
+
   return (
     <div className="h-full flex flex-col items-center justify-center">
       <div className="w-screen flex items-center justify-center">

src/pages/NotesPage.tsx

@@ -1,5 +1,5 @@
 import { NotesList, NotesSettings, TimerCue } from '../components';
-import { useNoteSettingsContext, useSpeedContext } from '../hooks';
+import { useNoteSettingsContext, useSpaceBarEffect, useSpeedContext } from '../hooks';
 
 export const NotesPage = () => {
   const { notes, isStringVisible, guitarString, getRandomNotesOnClick } = useNoteSettingsContext();
@@ -10,6 +10,8 @@ export const NotesPage = () => {
     resetSecondsElapsed();
   }
 
+  useSpaceBarEffect(handleNotesListOnClick);
+
   const GuitarStringDecorator: React.ReactNode = (
     <div className={`${isStringVisible ? '' : 'invisible'}`}>{guitarString}</div>
   );