Add random string option (#6)

* Add button

* Add random string

* Switch string visibility does not move other div

* Cleaning

* remove button

package.json

@@ -15,7 +15,8 @@
     "@emotion/styled": "^11.11.0",
     "framer-motion": "^10.16.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

src/components/NotesList/NotesList.tsx

@@ -1,9 +1,20 @@
-import { Note } from "../../config/Notes";
+import { Note } from "../../config";
 
-export const NotesList = ({ notes }: { notes: Note[] }) => {
+export const NotesList = ({
+  notes,
+  GuitarStringDecorator,
+}: {
+  notes: Note[];
+  GuitarStringDecorator?: React.ReactNode;
+}) => {
   return (
-    <div className="flex flex-col md:flex-row md:gap-7 text-[35px] md:text-[45px] mt-6 mb-6 font-bold">
-      {notes.map((note: Note, index: number) => <div key={index}>{note}</div>)}
-    </div>
+    <>
+      <div className="text-[25px] md:text-[25px] font-bold text-neutral-500">{GuitarStringDecorator}</div>
+      <div className="flex flex-col md:flex-row md:gap-7 text-[35px] md:text-[45px] mb-6 font-bold">
+        {notes.map((note: Note, index: number) => (
+          <div key={index}>{note}</div>
+        ))}
+      </div>
+    </>
   );
 };

src/components/index.ts

@@ -1,2 +1 @@
-export * from './Button';
 export * from './NotesList';

src/config/GuitarStrings.ts

@@ -0,0 +1,12 @@
+export enum GuitarStrings {
+	String1 = 'String 1',
+	String2 = 'String 2',
+	String3 = 'String 3',
+	String4 = 'String 4',
+	String5 = 'String 5',
+	String6 = 'String 6',
+}
+
+export type GuitarString = keyof typeof GuitarStrings;
+
+export const guitarStrings = Object.values(GuitarStrings) as unknown as GuitarString[];

src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './Notes';
+export * from './GuitarStrings';

src/pages/NotesPage.tsx

@@ -1,29 +1,61 @@
 import { useState } from "react";
+import { Button } from "@chakra-ui/react";
+import { MdBuild } from "react-icons/md";
+import { TbArrowsRandom } from "react-icons/tb";
 
+import { GuitarString, Note } from "../config";
 import { NotesList } from "../components";
-import { Note } from "../config/Notes";
-import { getListOfRandomNotes } from "../services/noteService";
-import { Button } from "@chakra-ui/react";
+
+import { getListOfRandomNotes, getRandomString } from "../services";
 
 export const NotesPage = () => {
   const [notes, setNotes] = useState<Note[]>(getListOfRandomNotes());
+  const [isStringVisible, setIsStringVisible] = useState(false);
+  const [guitarString, setGuitarString] = useState<GuitarString>(getRandomString());
 
-  const handleOnClick = () => {
+  const handleGetRandomNoteOnClick = () => {
     setNotes(getListOfRandomNotes());
+    setGuitarString(getRandomString());
+  };
+
+  const toggleStringVisible = () => {
+    setIsStringVisible((prevState: boolean) => !prevState);
   };
 
+  const GuitarStringDecorator: React.ReactNode = (
+    <div className={`${isStringVisible ? "" : "invisible"}`}>
+      {guitarString}
+    </div>
+  );
+
   return (
-    <div className="h-screen flex flex-col items-center justify-around">
-      <div className="text-lg font-semibold">RANDOM NOTES GENERATOR</div>
+    <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="w-screen flex items-center justify-center">
         <div className="flex flex-col items-center">
-          <NotesList notes={notes} />
-          <Button variant='outline' onClick={handleOnClick}>
-            Generate list of notes
-          </Button>
+          <NotesList
+            notes={notes}
+            GuitarStringDecorator={GuitarStringDecorator}
+          />
+          <div className="flex flex-col gap-1">
+            <Button
+              leftIcon={<TbArrowsRandom />}
+              variant="outline"
+              onClick={handleGetRandomNoteOnClick}
+            >
+              Generate list of notes
+            </Button>
+            <Button
+              leftIcon={<MdBuild />}
+              variant="outline"
+              onClick={toggleStringVisible}
+            >
+              Toggle string complexity
+            </Button>
+          </div>
         </div>
       </div>
-      <div>
+      <div className="mb-5">
         {"Made with ❤️ by "}
         <a
           href="https://github.com/cyrilgourgouillon"

src/services/index.ts

@@ -0,0 +1,2 @@
+export * from './noteService'
+export * from './stringService'

src/services/noteService.ts

@@ -1,4 +1,4 @@
-import { Note, notes } from "../config/Notes";
+import { Note, notes } from "../config";
 import { shuffle } from "../utils/shuffle";
 
 export const getListOfRandomNotes = (): Note[] => {

src/services/stringService.ts

@@ -0,0 +1,5 @@
+import { GuitarString, guitarStrings } from "../config";
+
+export const getRandomString = (): GuitarString => {
+  return guitarStrings[Math.floor(Math.random()*guitarStrings.length)];
+};