Week 6: Add sound for send-message and toggle button

package.json

@@ -16,6 +16,7 @@
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "use-sound": "^4.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/BottomInputComponent.js

@@ -6,6 +6,9 @@ import { BsFillArrowUpSquareFill } from "react-icons/bs"
 import Container from "react-bootstrap/Container"
 import Navbar from "react-bootstrap/Navbar"
 import { ThemeContext } from "../context.js"
+// import use-sound React hook for sound effects
+import useSound from "use-sound"
+import buttonSound from "../sounds/stories_sounds_boop.mp3"
 
 function BottomInputComponent({ currentUser, isFocused }) {
   const [message, setMessage] = useState("")
@@ -34,7 +37,7 @@ function BottomInputComponent({ currentUser, isFocused }) {
     }
   }
 
-//  ========================================================
+  //  ========================================================
   // add character limit & prevent page reload on space submission
   //  ========================================================
   const handleSubmitMessage = (e) => {
@@ -44,9 +47,12 @@ function BottomInputComponent({ currentUser, isFocused }) {
       e.preventDefault()
       saveMessage(message)
       setMessage("")
+      buttonSfx()
     }
   }
 
+  const [buttonSfx] = useSound(buttonSound)
+
   // Perform focus on input field's element via the DOM API when component renders/dependency changes
   // (imperative approach)
   const inputRef = React.useRef()

src/components/TopNavigationBar.js

@@ -12,6 +12,7 @@ import UserLogo from "../assets/sparrow-user-profile.svg"
 
 function TopNavigationBar({ currentUser }) {
   const { toggle } = useContext(ThemeContext)
+
   // When signing out removes user from 'users' collection and signs out user.
   const handleSignOutUser = () => {
     removeUser(currentUser)

src/context.js

@@ -1,5 +1,7 @@
 import { useEffect } from "react"
 import { createContext, useState } from "react"
+import useSound from "use-sound"
+import toggleSound from "./sounds/stories_sounds_switch-off.mp3"
 
 //theme object
 const themes = {
@@ -43,7 +45,9 @@ function ThemeContextProvider({ children }) {
     localStorage.setItem("light", JSON.stringify(isLight))
     setLight(isLight)
     setToggleOn(!toggleOn)
+    toggleSfx()
   }
+  const [toggleSfx] = useSound(toggleSound)
 
   const theme = light ? themes.light : themes.dark