From 3837e6ffdac856b926f4cfe28d3a430e5b2d5210 Mon Sep 17 00:00:00 2001 From: Raghart Date: Fri, 20 Mar 2026 18:54:40 -0400 Subject: [PATCH 1/5] r replacing old apollo client logic --- .../src/components/Utils/hooks/useLoadBtnLogic.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/front/src/components/Utils/hooks/useLoadBtnLogic.ts b/front/src/components/Utils/hooks/useLoadBtnLogic.ts index 18464ee..a13c915 100644 --- a/front/src/components/Utils/hooks/useLoadBtnLogic.ts +++ b/front/src/components/Utils/hooks/useLoadBtnLogic.ts @@ -3,16 +3,17 @@ import { useAppDispatch } from "../redux-hooks"; import { setActiveAudio } from "@/reducers/songReducer"; import { SongResponse } from "@/types/songTypes"; import { getNextSong, getPreviousSong } from "@/queries/MusicPlayerQueries"; +import { useEffect } from "react"; const useLoadBtnLogic = (activeSong: SongResponse | null) => { const dispatch = useAppDispatch(); - const [getPriorSong] = useLazyQuery(getPreviousSong, { - onCompleted: (data) => { - if (data.getPreviousSong) { - dispatch(setActiveAudio(data.getPreviousSong)); - }; - } - }); + const [getPriorSong, { data }] = useLazyQuery(getPreviousSong); + + useEffect(() => { + if (data?.getPreviousSong) { + dispatch(setActiveAudio(data.getPreviousSong)); + }; + }, [data, dispatch]) const [getFollowingSong] = useLazyQuery(getNextSong, { onCompleted: (data) => { From a040a97fe539a5a81715a601ca4a77482e532b7c Mon Sep 17 00:00:00 2001 From: Raghart Date: Fri, 20 Mar 2026 20:11:07 -0400 Subject: [PATCH 2/5] r added usePriorSong to separate logic --- .../components/Utils/hooks/usePriorSong.ts | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 front/src/components/Utils/hooks/usePriorSong.ts diff --git a/front/src/components/Utils/hooks/usePriorSong.ts b/front/src/components/Utils/hooks/usePriorSong.ts new file mode 100644 index 0000000..1f4d704 --- /dev/null +++ b/front/src/components/Utils/hooks/usePriorSong.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 usePriorSong = (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 usePriorSong; \ No newline at end of file From 310c502f50a7cc26c37a4303d0a3e57e9bbad398 Mon Sep 17 00:00:00 2001 From: Raghart Date: Fri, 20 Mar 2026 20:14:44 -0400 Subject: [PATCH 3/5] r changed useLoadBtnLogic to load only the next song --- .../MusicPlayer/Buttons/PlayControls.tsx | 2 +- ...{useLoadBtnLogic.ts => useLoadNextSong.ts} | 24 +++++++------------ .../{usePriorSong.ts => useLoadPriorSong.ts} | 0 3 files changed, 10 insertions(+), 16 deletions(-) rename front/src/components/Utils/hooks/{useLoadBtnLogic.ts => useLoadNextSong.ts} (53%) rename front/src/components/Utils/hooks/{usePriorSong.ts => useLoadPriorSong.ts} (100%) diff --git a/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx b/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx index ceeaaa7..fa09fbf 100644 --- a/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx +++ b/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx @@ -1,5 +1,5 @@ import { ButtonGroup } from "@chakra-ui/react"; -import useLoadBtnLogic from "@/components/Utils/hooks/useLoadBtnLogic"; +import useLoadBtnLogic from "@/components/Utils/hooks/useLoadNextSong"; import BtnPrevSong from "./BtnPrevSong"; import BtnNextSong from "./BtnNextSong"; import BtnPlaySong from "./BtnPlaySong"; diff --git a/front/src/components/Utils/hooks/useLoadBtnLogic.ts b/front/src/components/Utils/hooks/useLoadNextSong.ts similarity index 53% rename from front/src/components/Utils/hooks/useLoadBtnLogic.ts rename to front/src/components/Utils/hooks/useLoadNextSong.ts index a13c915..7b1c7d7 100644 --- a/front/src/components/Utils/hooks/useLoadBtnLogic.ts +++ b/front/src/components/Utils/hooks/useLoadNextSong.ts @@ -2,20 +2,13 @@ import { useLazyQuery } from "@apollo/client"; import { useAppDispatch } from "../redux-hooks"; import { setActiveAudio } from "@/reducers/songReducer"; import { SongResponse } from "@/types/songTypes"; -import { getNextSong, getPreviousSong } from "@/queries/MusicPlayerQueries"; +import { getNextSong } from "@/queries/MusicPlayerQueries"; import { useEffect } from "react"; const useLoadBtnLogic = (activeSong: SongResponse | null) => { const dispatch = useAppDispatch(); - const [getPriorSong, { data }] = useLazyQuery(getPreviousSong); - - useEffect(() => { - if (data?.getPreviousSong) { - dispatch(setActiveAudio(data.getPreviousSong)); - }; - }, [data, dispatch]) - const [getFollowingSong] = useLazyQuery(getNextSong, { + const [getFollowingSong, { data }] = useLazyQuery(getNextSong, { onCompleted: (data) => { if (data.getNextSong) { dispatch(setActiveAudio(data.getNextSong)); @@ -23,17 +16,18 @@ const useLoadBtnLogic = (activeSong: SongResponse | null) => { } }); + useEffect(() => { + if (data?.getNextSong) { + dispatch(setActiveAudio(data.getNextSong)); + }; + }, [data, dispatch]) + const loadNextSong = () => { if (!activeSong?.id) return; getFollowingSong({ variables: { songID: activeSong.id } }); }; - const loadPrevSong = () => { - if (!activeSong?.id) return; - getPriorSong({ variables: { songID: activeSong.id } }); - }; - - return { loadPrevSong, loadNextSong } + return loadNextSong }; export default useLoadBtnLogic; \ No newline at end of file diff --git a/front/src/components/Utils/hooks/usePriorSong.ts b/front/src/components/Utils/hooks/useLoadPriorSong.ts similarity index 100% rename from front/src/components/Utils/hooks/usePriorSong.ts rename to front/src/components/Utils/hooks/useLoadPriorSong.ts From bc71a9e26b0dc425a926f2999659d3793d6fe9f1 Mon Sep 17 00:00:00 2001 From: Raghart Date: Fri, 20 Mar 2026 20:20:22 -0400 Subject: [PATCH 4/5] r replacing old useBtnLogic with new hooks logic --- .../MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx | 4 ++-- .../MainLayout/MusicPlayer/Buttons/PlayControls.tsx | 7 ++++--- front/src/components/Utils/hooks/useLoadNextSong.ts | 12 +++--------- front/src/components/Utils/hooks/useLoadPriorSong.ts | 4 ++-- 4 files changed, 11 insertions(+), 16 deletions(-) diff --git a/front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx b/front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx index 1b04960..fb6ab43 100644 --- a/front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx +++ b/front/src/components/MainLayout/MusicPlayer/Buttons/BtnPrevSong.tsx @@ -7,8 +7,8 @@ const BtnPrevSong = ({ loadPrevSong } : { loadPrevSong: () => void }) => { + _hover={{ transform: "scale(1.1)", "& .icon-color": { color: "white" } }} + onClick={loadPrevSong} data-testid="PrevSongBtn"> diff --git a/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx b/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx index fa09fbf..756302c 100644 --- a/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx +++ b/front/src/components/MainLayout/MusicPlayer/Buttons/PlayControls.tsx @@ -1,13 +1,14 @@ import { ButtonGroup } from "@chakra-ui/react"; -import useLoadBtnLogic from "@/components/Utils/hooks/useLoadNextSong"; 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( diff --git a/front/src/components/Utils/hooks/useLoadNextSong.ts b/front/src/components/Utils/hooks/useLoadNextSong.ts index 7b1c7d7..e87450a 100644 --- a/front/src/components/Utils/hooks/useLoadNextSong.ts +++ b/front/src/components/Utils/hooks/useLoadNextSong.ts @@ -5,16 +5,10 @@ import { SongResponse } from "@/types/songTypes"; import { getNextSong } from "@/queries/MusicPlayerQueries"; import { useEffect } from "react"; -const useLoadBtnLogic = (activeSong: SongResponse | null) => { +const useLoadNextSong = (activeSong: SongResponse | null) => { const dispatch = useAppDispatch(); - const [getFollowingSong, { data }] = useLazyQuery(getNextSong, { - onCompleted: (data) => { - if (data.getNextSong) { - dispatch(setActiveAudio(data.getNextSong)); - }; - } - }); + const [getFollowingSong, { data }] = useLazyQuery(getNextSong); useEffect(() => { if (data?.getNextSong) { @@ -30,4 +24,4 @@ const useLoadBtnLogic = (activeSong: SongResponse | null) => { return loadNextSong }; -export default useLoadBtnLogic; \ No newline at end of file +export default useLoadNextSong; \ No newline at end of file diff --git a/front/src/components/Utils/hooks/useLoadPriorSong.ts b/front/src/components/Utils/hooks/useLoadPriorSong.ts index 1f4d704..beecf86 100644 --- a/front/src/components/Utils/hooks/useLoadPriorSong.ts +++ b/front/src/components/Utils/hooks/useLoadPriorSong.ts @@ -5,7 +5,7 @@ import { getPreviousSong } from "@/queries/MusicPlayerQueries"; import { useEffect } from "react"; import { setActiveAudio } from "@/reducers/songReducer"; -const usePriorSong = (activeSong: SongResponse | null) => { +const useLoadPriorSong = (activeSong: SongResponse | null) => { const dispatch = useAppDispatch(); const [getPriorSong, { data }] = useLazyQuery(getPreviousSong); @@ -23,4 +23,4 @@ const usePriorSong = (activeSong: SongResponse | null) => { return loadPrevSong; }; -export default usePriorSong; \ No newline at end of file +export default useLoadPriorSong; \ No newline at end of file From e06326227c19af215e4e192dd3ac547b59dc1ba7 Mon Sep 17 00:00:00 2001 From: Raghart Date: Fri, 20 Mar 2026 20:32:32 -0400 Subject: [PATCH 5/5] r replacing useStraySong to work with updated logic --- front/src/components/Utils/hooks/useStraySong.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/front/src/components/Utils/hooks/useStraySong.ts b/front/src/components/Utils/hooks/useStraySong.ts index c9e1d49..66e1991 100644 --- a/front/src/components/Utils/hooks/useStraySong.ts +++ b/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; };