useLocalStorage hook

src/AppConstants.js

@@ -4,8 +4,8 @@ const appConstants = {
   APIEndpoints: {
     SHUFFLE: APIRoot + "/shuffle",
     TRACKED_PLAYLISTS: APIRoot + "/tracked-playlists",
-    TRACKED_VIDEOS:    APIRoot + "/videos",
+    TRACKED_VIDEOS: APIRoot + "/videos",
   },
+  SelectedPlaylistIdsKey: "selectedPlaylistIds"
 };
-
-export default appConstants;
+export default appConstants;

src/hooks/UseLocalStorage.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+export default function useLocalStorage(key, initialValue) {
+    const [storedValue, setStoredValue] = useState(() => {
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.log(error);
+            return initialValue;
+        }
+    });
+
+    useEffect(() => {
+        window.localStorage.setItem(key, JSON.stringify(storedValue));
+    }, [key, storedValue]);
+
+    return [storedValue, setStoredValue];
+}

src/pages/ShufflePlayer.js

@@ -1,30 +1,24 @@
 import React, { useState, useEffect } from 'react';
+import AppConstants from '../AppConstants';
 import ButtonList from '../components/ButtonList';
 import CurrentVideoInfo from '../components/CurrentVideoInfo';
 import LoadingPlaceholder from '../components/LoadingPlaceholder';
 import Player from '../components/Player';
 import PlaylistSelector from '../components/PlaylistSelector';
 import VideoSelector from '../components/VideoSelector';
+import useLocalStorage from '../hooks/UseLocalStorage';
 import usePlaylistDataFetcher from '../hooks/UsePlaylistDataFetcher';
 import useVideoDataFetcher from '../hooks/UseVideoDataFetcher';
 
 export default function ShufflePlayer() {
   const [currentVideo, setCurrentVideo] = useState({})
   const [playedVideos, setPlayedVideos] = useState([])
-  const [selectedPlaylistIds, setSelectedPlaylistIds] = useState(() => {
-    const saved = localStorage.getItem("selectedPlaylistIds");
-    const initialValue = JSON.parse(saved);
-    return initialValue || [];
-  })
   const [repeatVideo, setRepeatVideo] = useState(false)
   const [hideVideo, setHideVideo] = useState(true)
   const [hideDescription, setHideDescription] = useState(true)
 
+  const [selectedPlaylistIds, setSelectedPlaylistIds] = useLocalStorage(AppConstants.SelectedPlaylistIdsKey, []);
   const [playlists, setPlaylists] = usePlaylistDataFetcher(selectedPlaylistIds);
-
-  useEffect(() => {
-    localStorage.setItem("selectedPlaylistIds", JSON.stringify(selectedPlaylistIds));
-  }, [selectedPlaylistIds]);
   const [videoFetchResult, setVideoFetchPlaylistIds] = useVideoDataFetcher()
   useEffect(pickNextVideo, [videoFetchResult])