Implement sound settings update and integrate sound context in sightings widget

src/hooks/useSightingFeed.ts

@@ -2,10 +2,10 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
 import { useSoundOnChange } from "react-sounds";
-import switchSound from "../assets/sounds/ui/switch.mp3";
-import popup from "../assets/sounds/ui/popup_open.mp3";
-import notification from "../assets/sounds/ui/notification.mp3";
+
 import { useSoundContext } from "../context/SoundContext";
+import { getSoundFileName } from "../utils/utils";
+import switchSound from "../assets/sounds/ui/switch.mp3";
 
 async function fetchSighting(
   url: string | undefined,
@@ -16,15 +16,6 @@ async function fetchSighting(
   return res.json();
 }
 
-function getSoundFileName(name: string) {
-  const sounds: Record<string, string> = {
-    switch: switchSound,
-    popup: popup,
-    notification: notification,
-  };
-  return sounds[name] ?? null;
-}
-
 export function useSightingFeed(url: string | undefined) {
   const { state } = useSoundContext();
   const [sightings, setSightings] = useState<SightingType[]>([]);