Merge pull request #17 from byandrev/dev

feat: add click sound effect

src/components/Header.jsx

@@ -27,7 +27,7 @@ function Header() {
           ></Button>
           <Button
             variant="ghost"
-            colorScheme="red"
+            colorScheme="gray"
             leftIcon={<SettingsIcon />}
             iconSpacing={0}
           ></Button>

src/components/PomodoroActions.jsx

@@ -1,9 +1,27 @@
 import { Button, Flex } from "@chakra-ui/react";
-import { FaPlay, FaPause, FaUndoAlt } from "react-icons/fa";
+import { FaPause, FaPlay, FaUndoAlt } from "react-icons/fa";
+
+import useAudio from "../hooks/useAudio";
 import useTimer from "../hooks/useTimer";
 
 function PomodoroActions() {
   const { handleStart, handleStop, handleRestart } = useTimer();
+  const { toggle } = useAudio("/click.wav");
+
+  const handleClickStart = () => {
+    toggle();
+    handleStart();
+  };
+
+  const handleClickRestart = () => {
+    toggle();
+    handleRestart();
+  };
+
+  const handleClickStop = () => {
+    toggle();
+    handleStop();
+  };
 
   return (
     <Flex justifyContent="center">
@@ -13,26 +31,26 @@ function PomodoroActions() {
         leftIcon={<FaUndoAlt />}
         iconSpacing={0}
         fontSize="2rem"
-        onClick={handleRestart}
+        onClick={handleClickRestart}
       ></Button>
       <Button
         variant="ghost"
         color="brand.base"
         leftIcon={<FaPlay />}
         iconSpacing={0}
         fontSize="2rem"
-        onClick={handleStart}
+        onClick={handleClickStart}
       ></Button>
       <Button
         variant="ghost"
         color="brand.base"
         leftIcon={<FaPause />}
         iconSpacing={0}
         fontSize="2rem"
-        onClick={handleStop}
+        onClick={handleClickStop}
       ></Button>
     </Flex>
   );
 }
 
-export default PomodoroActions;
+export default PomodoroActions;

src/hooks/useAudio.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const useAudio = (url) => {
+  const [audio] = useState(new Audio(url));
+  const [playing, setPlaying] = useState(false);
+
+  const toggle = () => setPlaying(!playing);
+
+  useEffect(() => {
+    playing ? audio.play() : audio.pause();
+  }, [audio, playing]);
+
+  useEffect(() => {
+    audio.addEventListener("ended", () => setPlaying(false));
+    return () => {
+      audio.removeEventListener("ended", () => setPlaying(false));
+    };
+  }, [audio]);
+
+  return { playing, toggle };
+};
+
+export default useAudio;