Cleaning (#9)

cyrilgourgouillon · Nov 22, 2023 · dd579c6 · dd579c6
1 parent 3fc08a3
commit dd579c6
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 29 deletions.
diff --git 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
@@ -0,0 +1 @@
+export * from './notes';
diff --git a/src/config/constants/notes.ts 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
@@ -1,50 +1,79 @@
 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());
   };
 
   const toggleStringVisible = () => {
     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}
     </div>
   );
 
   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
             notes={notes}
             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
@@ -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
+}