From 8ebde593e7091678f9550b19d96358c4dee9bffd Mon Sep 17 00:00:00 2001
From: Robert Skinner <ras2@live.com>
Date: Mon, 25 Sep 2023 09:39:06 -0500
Subject: [PATCH] useLocalStorage hook

---
 src/AppConstants.js          |  6 +++---
 src/hooks/UseLocalStorage.js | 19 +++++++++++++++++++
 src/pages/ShufflePlayer.js   | 12 +++---------
 3 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 src/hooks/UseLocalStorage.js

diff --git a/src/AppConstants.js b/src/AppConstants.js
index 477f2c5..227bb26 100644
--- a/src/AppConstants.js
+++ b/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;
\ No newline at end of file
diff --git a/src/hooks/UseLocalStorage.js b/src/hooks/UseLocalStorage.js
new file mode 100644
index 0000000..3f693f5
--- /dev/null
+++ b/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];
+}
\ No newline at end of file
diff --git a/src/pages/ShufflePlayer.js b/src/pages/ShufflePlayer.js
index 8517306..1a26048 100644
--- a/src/pages/ShufflePlayer.js
+++ b/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])