From 709040d5a41d921ef12d6227dfbc6b972883507b Mon Sep 17 00:00:00 2001
From: Cyril Gourgouillon <cyrilgour@gmail.com>
Date: Tue, 19 Dec 2023 16:08:06 -0500
Subject: [PATCH] Press spacebar to generate (#33)

---
 src/hooks/index.ts             |  1 +
 src/hooks/useSpaceBarEffect.ts | 18 ++++++++++++++++++
 src/pages/ChordsPage.tsx       |  7 +++++--
 src/pages/NotesPage.tsx        |  4 +++-
 4 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useSpaceBarEffect.ts

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 3ba731b..4c50c91 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useNoteSettingsContext';
 export * from './useChordSettingsContext';
 export * from './useSpeedContext';
+export * from './useSpaceBarEffect';
diff --git a/src/hooks/useSpaceBarEffect.ts b/src/hooks/useSpaceBarEffect.ts
new file mode 100644
index 0000000..8b9468f
--- /dev/null
+++ b/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]);
+};
diff --git a/src/pages/ChordsPage.tsx b/src/pages/ChordsPage.tsx
index 861441b..10a86f0 100644
--- a/src/pages/ChordsPage.tsx
+++ b/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">
diff --git a/src/pages/NotesPage.tsx b/src/pages/NotesPage.tsx
index bbc4837..f2c7cdb 100644
--- a/src/pages/NotesPage.tsx
+++ b/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>
   );