Updating Frontend Hooks to work with updated Apollo Client

front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx

@@ -7,8 +7,8 @@ const BtnPrevSong = ({ loadPrevSong } : { loadPrevSong: () => void }) => {
         <Tooltip showArrow content="Hear the prev. song" openDelay={300} closeDelay={0} 
             contentProps={{ css: { "--tooltip-bg": "colors.blue.500", color: "white" } }}>
             <IconButton bg="transparent" rounded="full" size={{ base: "xs", sm: "sm", md: "md", lg: "md"}}
-                _hover={{ transform: "scale(1.1)", "& .icon-color": { color: "white" } }} onClick={loadPrevSong}
-                data-testid="PrevSongBtn">
+                _hover={{ transform: "scale(1.1)", "& .icon-color": { color: "white" } }} 
+                onClick={loadPrevSong} data-testid="PrevSongBtn">
                 <Icon className="icon-color" as={PiSkipBackBold} color="gray.300" />
             </IconButton>
         </Tooltip>

front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx

@@ -1,13 +1,14 @@
 import { ButtonGroup } from "@chakra-ui/react";
-import useLoadBtnLogic from "@/components/Utils/hooks/useLoadBtnLogic";
 import BtnPrevSong from "./BtnPrevSong";
 import BtnNextSong from "./BtnNextSong";
 import BtnPlaySong from "./BtnPlaySong";
 import { SongResponse } from "@/types/songTypes";
+import useLoadNextSong from "@/components/Utils/hooks/useLoadNextSong";
+import useLoadPriorSong from "@/components/Utils/hooks/useLoadPriorSong";
 
 const PlayControls = ({ activeSong, isPlaying }: { activeSong: SongResponse | null, isPlaying: boolean }) => {
-    const { loadPrevSong, loadNextSong } = useLoadBtnLogic(activeSong);
-
+    const loadNextSong = useLoadNextSong(activeSong);
+    const loadPrevSong = useLoadPriorSong(activeSong);
     return(
         <ButtonGroup gap={0} pr={{ base: 1, sm: 2, md: 3, lg: 4 }}>
             <BtnPrevSong loadPrevSong={loadPrevSong} />

front/src/components/Utils/hooks/useLoadNextSong.ts

@@ -0,0 +1,27 @@
+import { useLazyQuery } from "@apollo/client";
+import { useAppDispatch } from "../redux-hooks";
+import { setActiveAudio } from "@/reducers/songReducer";
+import { SongResponse } from "@/types/songTypes";
+import { getNextSong } from "@/queries/MusicPlayerQueries";
+import { useEffect } from "react";
+
+const useLoadNextSong = (activeSong: SongResponse | null) => {
+    const dispatch = useAppDispatch();
+
+    const [getFollowingSong, { data }] = useLazyQuery(getNextSong);
+
+    useEffect(() => {
+        if (data?.getNextSong) {
+            dispatch(setActiveAudio(data.getNextSong));
+        };
+    }, [data, dispatch])
+
+    const loadNextSong = () => {
+        if (!activeSong?.id) return;
+        getFollowingSong({ variables: { songID: activeSong.id } });
+    };
+
+    return loadNextSong
+};
+
+export default useLoadNextSong;

front/src/components/Utils/hooks/useLoadPriorSong.ts

@@ -0,0 +1,26 @@
+import { SongResponse } from "@/types/songTypes";
+import { useAppDispatch } from "../redux-hooks";
+import { useLazyQuery } from "@apollo/client";
+import { getPreviousSong } from "@/queries/MusicPlayerQueries";
+import { useEffect } from "react";
+import { setActiveAudio } from "@/reducers/songReducer";
+
+const useLoadPriorSong = (activeSong: SongResponse | null) => {
+    const dispatch = useAppDispatch();
+    const [getPriorSong, { data }] = useLazyQuery(getPreviousSong);
+
+    useEffect(() => {
+        if (data?.getPreviousSong) {
+            dispatch(setActiveAudio(data.getPreviousSong));
+        };
+    }, [data, dispatch])
+
+    const loadPrevSong = () => {
+        if (!activeSong?.id) return;
+        getPriorSong({ variables: { songID: activeSong.id } })
+    };
+
+    return loadPrevSong;
+};
+
+export default useLoadPriorSong;

front/src/components/Utils/hooks/useStraySong.ts

@@ -2,18 +2,20 @@ import { useLazyQuery } from "@apollo/client";
 import { useAppDispatch } from "../redux-hooks";
 import { setActiveAudio } from "@/reducers/songReducer";
 import { getRandomSong } from "@/queries/MusicPlayerQueries";
+import { useEffect } from "react";
 
 const useStraySong = () => {
     const dispatch = useAppDispatch();
-    const [getStraySong] = useLazyQuery(getRandomSong, {
+    const [getStraySong, { data }] = useLazyQuery(getRandomSong, {
         fetchPolicy: "network-only",
-        onCompleted: (data) => {
-            if (data.getRandomSong) {
-                dispatch(setActiveAudio(data.getRandomSong));
-            };
-        }
     });
 
+    useEffect(() => {
+        if (data?.getRandomSong) {
+            dispatch(setActiveAudio(data.getRandomSong))
+        }
+    }, [data, dispatch])
+
     return getStraySong;
 };