From dd579c67de333c204b82985bd0cf62fc30e3aef0 Mon Sep 17 00:00:00 2001
From: Cyril Gourgouillon <cyrilgour@gmail.com>
Date: Wed, 22 Nov 2023 17:09:42 -0500
Subject: [PATCH] Cleaning (#9)

---
 src/App.tsx                   | 16 +++++++-
 src/config/constants/index.ts |  1 +
 src/config/constants/notes.ts |  3 ++
 src/pages/NotesPage.tsx       | 69 ++++++++++++++++++++++-------------
 src/services/noteService.ts   |  9 ++++-
 5 files changed, 69 insertions(+), 29 deletions(-)
 create mode 100644 src/config/constants/index.ts
 create mode 100644 src/config/constants/notes.ts

diff --git a/src/App.tsx b/src/App.tsx
index a3f0c53..ac5d31d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,22 @@
-import { ChakraProvider } from '@chakra-ui/react'
+import { ChakraProvider } from "@chakra-ui/react";
 import { NotesPage } from "./pages";
 
 const App = () => {
   return (
     <ChakraProvider>
-      <NotesPage />
+      <div className="h-screen flex flex-col items-center justify-between">
+        <NotesPage />
+        <div className="mb-5">
+          {"Made with ❤️ by "}
+          <a
+            href="https://github.com/cyrilgourgouillon"
+            target="_blank"
+            className="text-red-700"
+          >
+            Cyril Gourgouillon
+          </a>
+        </div>
+      </div>
     </ChakraProvider>
   );
 };
diff --git a/src/config/constants/index.ts b/src/config/constants/index.ts
new file mode 100644
index 0000000..0329d15
--- /dev/null
+++ b/src/config/constants/index.ts
@@ -0,0 +1 @@
+export * from './notes';
diff --git a/src/config/constants/notes.ts b/src/config/constants/notes.ts
new file mode 100644
index 0000000..dbc1bb2
--- /dev/null
+++ b/src/config/constants/notes.ts
@@ -0,0 +1,3 @@
+export const DEFAULT_NUMBER_OF_NOTE = 7;
+export const NOTES_LIST_MAX = 7;
+export const NOTES_LIST_MIN = 1;
diff --git a/src/pages/NotesPage.tsx b/src/pages/NotesPage.tsx
index eb425ba..e410f29 100644
--- a/src/pages/NotesPage.tsx
+++ b/src/pages/NotesPage.tsx
@@ -1,20 +1,27 @@
 import { useState } from "react";
-import { Button } from "@chakra-ui/react";
+import { Button, IconButton } from "@chakra-ui/react";
+
 import { MdBuild } from "react-icons/md";
-import { TbArrowsRandom } from "react-icons/tb";
+import { FaPlus, FaMinus } from "react-icons/fa";
 
 import { GuitarString, Note } from "../config";
 import { NotesList } from "../components";
 
-import { getListOfRandomNotes, getRandomString } from "../services";
+import { getListOfRandomNotes, getRandomString, isValidCountList } from "../services";
+import { DEFAULT_NUMBER_OF_NOTE, NOTES_LIST_MAX, NOTES_LIST_MIN } from "../config/constants";
 
 export const NotesPage = () => {
-  const [notes, setNotes] = useState<Note[]>(getListOfRandomNotes());
+  const [notes, setNotes] = useState<Note[]>(getListOfRandomNotes(DEFAULT_NUMBER_OF_NOTE));
   const [isStringVisible, setIsStringVisible] = useState(false);
-  const [guitarString, setGuitarString] = useState<GuitarString>(getRandomString());
+  const [guitarString, setGuitarString] = useState<GuitarString>(
+    getRandomString()
+  );
+  const [numberOfNoteDisplayed, setNumberOfNoteDisplayed] = useState(
+    DEFAULT_NUMBER_OF_NOTE
+  );
 
   const handleGetRandomNoteOnClick = () => {
-    setNotes(getListOfRandomNotes());
+    setNotes(getListOfRandomNotes(numberOfNoteDisplayed));
     setGuitarString(getRandomString());
   };
 
@@ -22,6 +29,16 @@ export const NotesPage = () => {
     setIsStringVisible((prevState: boolean) => !prevState);
   };
 
+  const handleChangeNumberOfNoteDisplayed = (step: number) => {
+    setNumberOfNoteDisplayed((prevState: number) => {
+      const value = prevState + step;
+      if (isValidCountList(value)) {
+        return value;
+      }
+      return prevState;
+    });
+  };
+
   const GuitarStringDecorator: React.ReactNode = (
     <div className={`${isStringVisible ? "" : "invisible"}`}>
       {guitarString}
@@ -29,8 +46,8 @@ export const NotesPage = () => {
   );
 
   return (
-    <div className="h-screen flex flex-col items-center justify-between">
-      <div className="text-lg font-semibold mt-5">RANDOM NOTES GENERATOR</div>
+    <div className="h-full flex flex-col items-center justify-center">
+      <div className="text-lg font-semibold mb-10">RANDOM NOTES GENERATOR</div>
       <div className="w-screen flex items-center justify-center">
         <div className="flex flex-col items-center">
           <NotesList
@@ -38,13 +55,25 @@ export const NotesPage = () => {
             GuitarStringDecorator={GuitarStringDecorator}
           />
           <div className="flex flex-col gap-1">
-            <Button
-              leftIcon={<TbArrowsRandom />}
-              variant="outline"
-              onClick={handleGetRandomNoteOnClick}
-            >
-              Generate list of notes
-            </Button>
+            <div className="flex gap-1">
+              <IconButton
+                aria-label="minus"
+                icon={<FaMinus />}
+                variant="outline"
+                onClick={() => handleChangeNumberOfNoteDisplayed(-1)}
+                disabled={numberOfNoteDisplayed === NOTES_LIST_MIN}
+              />
+              <Button variant="outline" onClick={handleGetRandomNoteOnClick}>
+                Generate list of {numberOfNoteDisplayed} notes
+              </Button>
+              <IconButton
+                aria-label="plus"
+                icon={<FaPlus />}
+                variant="outline"
+                onClick={() => handleChangeNumberOfNoteDisplayed(1)}
+                disabled={numberOfNoteDisplayed === NOTES_LIST_MAX}
+              />
+            </div>
             <Button
               leftIcon={<MdBuild />}
               variant="outline"
@@ -55,16 +84,6 @@ export const NotesPage = () => {
           </div>
         </div>
       </div>
-      <div className="mb-5">
-        {"Made with ❤️ by "}
-        <a
-          href="https://github.com/cyrilgourgouillon"
-          target="_blank"
-          className="text-red-700"
-        >
-          Cyril Gourgouillon
-        </a>
-      </div>
     </div>
   );
 };
diff --git a/src/services/noteService.ts b/src/services/noteService.ts
index 032afb6..612cf6b 100644
--- a/src/services/noteService.ts
+++ b/src/services/noteService.ts
@@ -1,8 +1,13 @@
 import { Note, notes } from "../config";
+import { NOTES_LIST_MAX, NOTES_LIST_MIN } from "../config/constants";
 import { shuffle } from "../utils/shuffle";
 
-export const getListOfRandomNotes = (): Note[] => {
+export const getListOfRandomNotes = (count: number): Note[] => {
   const randomNotes = shuffle(notes);
 
-  return randomNotes.slice(undefined, 7);
+  return randomNotes.slice(undefined, count);
 };
+
+export const isValidCountList = (count: number): boolean => {
+  return count >= NOTES_LIST_MIN && count <= NOTES_LIST_MAX
+}