fixes usenocturne#65

An error occurs when no active players are available. The code is trying to parse the JSON response from the API https://api.spotify.com/v1/me/player
vakst · Dec 18, 2024 · 12ab18c · 12ab18c
1 parent 8fb591f
commit 12ab18c
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 85 deletions.
diff --git a/src/pages/album/[albumId].jsx b/src/pages/album/[albumId].jsx
@@ -3,6 +3,7 @@ import { useEffect, useState, useRef, useCallback } from "react";
 import LongPressLink from "../../components/LongPressLink";
 import Image from "next/image";
 import { getCurrentDevice } from "@/services/deviceService";
+import { setPlaybackShuffleState } from "@/services/playerService";
 
 export const runtime = "experimental-edge";
 
@@ -63,23 +64,7 @@ const AlbumPage = ({
   }, [isShuffleEnabled]);
 
   useEffect(() => {
-    const fetchPlaybackState = async () => {
-      try {
-        const response = await fetch("https://api.spotify.com/v1/me/player", {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        });
-        if (response.ok) {
-          const data = await response.json();
-          setIsShuffleEnabled(data.shuffle_state);
-        }
-      } catch (error) {
-        handleError("FETCH_PLAYBACK_STATE_ERROR", error.message);
-      }
-    };
-
-    fetchPlaybackState();
+    void setPlaybackShuffleState(accessToken, handleError, setIsShuffleEnabled);
   }, [accessToken]);
 
   const loadMoreTracks = async () => {

diff --git a/src/pages/artist/[artistId].jsx b/src/pages/artist/[artistId].jsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import LongPressLink from "../../components/LongPressLink";
 import Image from "next/image";
 import { getCurrentDevice } from "@/services/deviceService";
+import {setPlaybackShuffleState} from "@/services/playerService";
 
 export const runtime = "experimental-edge";
 
@@ -42,23 +43,7 @@ const ArtistPage = ({
   }, [isShuffleEnabled]);
 
   useEffect(() => {
-    const fetchPlaybackState = async () => {
-      try {
-        const response = await fetch("https://api.spotify.com/v1/me/player", {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        });
-        if (response.ok) {
-          const data = await response.json();
-          setIsShuffleEnabled(data.shuffle_state);
-        }
-      } catch (error) {
-        handleError("FETCH_PLAYBACK_STATE_ERROR", error.message);
-      }
-    };
-
-    fetchPlaybackState();
+    void setPlaybackShuffleState(accessToken, handleError, setIsShuffleEnabled);
   }, [accessToken]);
 
   const playArtistTopTracks = async () => {

diff --git a/src/pages/collection/tracks.jsx b/src/pages/collection/tracks.jsx
@@ -4,6 +4,7 @@ import LongPressLink from "../../components/LongPressLink";
 import Image from "next/image";
 import SuccessAlert from "../../components/SuccessAlert";
 import { getCurrentDevice } from "@/services/deviceService";
+import {setPlaybackShuffleState} from "@/services/playerService";
 export const runtime = "experimental-edge";
 
 const LikedSongsPage = ({
@@ -97,23 +98,7 @@ const LikedSongsPage = ({
   );
 
   useEffect(() => {
-    const fetchPlaybackState = async () => {
-      try {
-        const response = await fetch("https://api.spotify.com/v1/me/player", {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        });
-        if (response.ok) {
-          const data = await response.json();
-          setIsShuffleEnabled(data.shuffle_state);
-        }
-      } catch (error) {
-        handleError("FETCH_PLAYBACK_STATE_ERROR", error.message);
-      }
-    };
-
-    fetchPlaybackState();
+    void setPlaybackShuffleState(accessToken, handleError, setIsShuffleEnabled);
   }, [accessToken]);
 
   useEffect(() => {

diff --git a/src/pages/mix/[mixId].jsx b/src/pages/mix/[mixId].jsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import SuccessAlert from "../../components/SuccessAlert";
 import { fetchUserRadio } from "../../services";
 import { getCurrentDevice } from "@/services/deviceService";
+import {setPlaybackShuffleState} from "@/services/playerService";
 export const runtime = "experimental-edge";
 
 const MixPage = ({
@@ -98,23 +99,7 @@ const MixPage = ({
   }, [mix]);
 
   useEffect(() => {
-    const fetchPlaybackState = async () => {
-      try {
-        const response = await fetch("https://api.spotify.com/v1/me/player", {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        });
-        if (response.ok) {
-          const data = await response.json();
-          setIsShuffleEnabled(data.shuffle_state);
-        }
-      } catch (error) {
-        return;
-      }
-    };
-
-    fetchPlaybackState();
+    void setPlaybackShuffleState(accessToken, handleError, setIsShuffleEnabled);
   }, [accessToken]);
 
   const playMix = async () => {

diff --git a/src/pages/playlist/[playlistId].jsx b/src/pages/playlist/[playlistId].jsx
@@ -4,6 +4,7 @@ import LongPressLink from "../../components/LongPressLink";
 import Image from "next/image";
 import SuccessAlert from "../../components/SuccessAlert";
 import { getCurrentDevice } from "@/services/deviceService";
+import {setPlaybackShuffleState} from "@/services/playerService";
 export const runtime = "experimental-edge";
 
 const PlaylistPage = ({
@@ -167,23 +168,7 @@ const PlaylistPage = ({
   }, [playlist]);
 
   useEffect(() => {
-    const fetchPlaybackState = async () => {
-      try {
-        const response = await fetch("https://api.spotify.com/v1/me/player", {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        });
-        if (response.ok) {
-          const data = await response.json();
-          setIsShuffleEnabled(data.shuffle_state);
-        }
-      } catch (error) {
-        return;
-      }
-    };
-
-    fetchPlaybackState();
+    void setPlaybackShuffleState(accessToken, handleError, setIsShuffleEnabled);
   }, [accessToken]);
 
   const loadMoreTracks = async () => {

diff --git a/src/services/playerService.js b/src/services/playerService.js
@@ -0,0 +1,27 @@
+export const setPlaybackShuffleState = async (
+    accessToken,
+    handleError,
+    setIsShuffleEnabled
+) => {
+    try {
+        const response = await fetch("https://api.spotify.com/v1/me/player", {
+            headers: {
+                Authorization: `Bearer ${accessToken}`,
+            },
+        });
+        if (response.ok) {
+            const data = await response.text();
+            if (data.length > 0) {
+                try {
+                    const parsed = JSON.parse(JSON.stringify(data));
+                    setIsShuffleEnabled(parsed.shuffle_state);
+                } catch (error) {
+                    handleError("FETCH_PLAYBACK_STATE_ERROR", error.message);
+                }
+            }
+        }
+    } catch (error) {
+        handleError("FETCH_PLAYBACK_STATE_ERROR", error.message);
+    }
+
+}