switched handleStyleChange to localStorage

src/App.js

@@ -10,7 +10,6 @@ import CaptchaModal from './components/CaptchaModal';
 import { createGlobalStyle } from 'styled-components';
 import 'react-tooltip/dist/react-tooltip.css';
 import preloadImages from './utils/preloadImages';
-import { useCookies } from 'react-cookie';
 
 export const BoardContext = React.createContext();
 
@@ -33,31 +32,31 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 export default function App() {
-  const [bodyStyle, setBodyStyle] = useState({
+  const [selectedTitle, setSelectedTitle] = useState('');
+  const [selectedAddress, setSelectedAddress] = useState('');
+  const [selectedThread, setSelectedThread] = useState('');
+  const [selectedStyle, setSelectedStyle] = useState(localStorage.getItem('selectedStyle') || 'Yotsuba');
+  const [bodyStyle, setBodyStyle] = useState(JSON.parse(localStorage.getItem('bodyStyle')) || {
     background: "#ffe url(/assets/fade.png) top repeat-x",
     color: "maroon",
     fontFamily: "Helvetica, Arial, sans-serif"
   });
-
-  const [selectedTitle, setSelectedTitle] = useState('');
-  const [selectedAddress, setSelectedAddress] = useState('');
-  const [selectedThread, setSelectedThread] = useState('');
-  const [cookies, setCookie] = useCookies(['selectedStyle']);
-  const [selectedStyle, setSelectedStyle] = useState(cookies.selectedStyle || 'Yotsuba');
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
 
 
-
   const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`);
 
   useEffect(() => {
     preloadImages([...imageUrls]);
   }, []);
 
+
   const handleCaptchaClose = () => {
     setIsCaptchaOpen(false);
   };
 
+
+
   return (
   <div>
     <Helmet>
@@ -90,4 +89,4 @@ export default function App() {
     </BoardContext.Provider>
     <CaptchaModal isOpen={isCaptchaOpen} closeModal={handleCaptchaClose} />
   </div>
-)}
+)}

src/components/Board.jsx

@@ -8,7 +8,6 @@ import InfiniteScroll from 'react-infinite-scroller';
 import { Tooltip } from 'react-tooltip';
 import getDate from '../utils/getDate';
 import renderComments from '../utils/renderComments';
-import { useCookies } from 'react-cookie';
 
 
 const Board = ({ setBodyStyle }) => {
@@ -29,7 +28,7 @@ const Board = ({ setBodyStyle }) => {
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const renderedFeed = selectedFeed.slice(0, endIndex);
   const { subplebbitAddress } = useParams();
-  const [cookies, setCookie] = useCookies(['selectedStyle']);
+  // const [cookies, setCookie] = useCookies(['selectedStyle']);
 
 
   // temporary title from JSON, gets subplebbitAddress from URL
@@ -107,7 +106,7 @@ const Board = ({ setBodyStyle }) => {
         color: '#c5c8c6',
         fontFamily: 'Arial, Helvetica, sans-serif'
       });
-      setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
+      localStorage.setItem('selectedStyle', 'Tomorrow');
     }
   
     const darkModeListener = (e) => {
@@ -118,7 +117,7 @@ const Board = ({ setBodyStyle }) => {
           color: '#c5c8c6',
           fontFamily: 'Arial, Helvetica, sans-serif'
         });
-        setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
+        localStorage.setItem('selectedStyle', 'Tomorrow');
       }
     };
   
@@ -288,88 +287,90 @@ const Board = ({ setBodyStyle }) => {
   const handleStyleChange = (event) => {
     switch (event.target.value) {
       case "Yotsuba":
-        setBodyStyle({
+        const yotsubaBodyStyle = {
           background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(yotsubaBodyStyle);
         setSelectedStyle("Yotsuba");
-        setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Yotsuba");
+        localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBodyStyle));
         break;
-
+  
       case "Yotsuba-B":
-        setBodyStyle({
+        const yotsubaBBodyStyle = {
           background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
           color: "#000",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(yotsubaBBodyStyle);
         setSelectedStyle("Yotsuba-B");
-        setCookie("selectedStyle", "Yotsuba-B", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Yotsuba-B");
+        localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBBodyStyle));
         break;
-
+  
       case "Futaba":
-        setBodyStyle({
+        const futabaBodyStyle = {
           background: "#ffe",
           color: "maroon",
           fontFamily: "times new roman, serif"
-        });
+        };
+        setBodyStyle(futabaBodyStyle);
         setSelectedStyle("Futaba");
-        setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Futaba");
+        localStorage.setItem("bodyStyle", JSON.stringify(futabaBodyStyle));
         break;
-
+  
       case "Burichan":
-        setBodyStyle({
+        const burichanBodyStyle = {
           background: "#eef2ff",
           color: "#000",
           fontFamily: "times new roman, serif"
-        });
+        };
+        setBodyStyle(burichanBodyStyle);
         setSelectedStyle("Burichan");
-        setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Burichan");
+        localStorage.setItem("bodyStyle", JSON.stringify(burichanBodyStyle));
         break;
-        
+  
       case "Tomorrow":
-        setBodyStyle({
+        const tomorrowBodyStyle = {
           background: "#1d1f21 none",
           color: "#c5c8c6",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(tomorrowBodyStyle);
         setSelectedStyle("Tomorrow");
-        setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Tomorrow");
+        localStorage.setItem("bodyStyle", JSON.stringify(tomorrowBodyStyle));
         break;
-
+  
       case "Photon":
-        setBodyStyle({
+        const photonBodyStyle = {
           background: "#eee none",
           color: "#333",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(photonBodyStyle);
         setSelectedStyle("Photon");
-        setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Photon");
+        localStorage.setItem("bodyStyle", JSON.stringify(photonBodyStyle));
         break;
-
+  
       default:
-        setBodyStyle({
+        const defaultBodyStyle = {
           background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(defaultBodyStyle);
         setSelectedStyle("Yotsuba");
-        setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Yotsuba");
+        localStorage.setItem("bodyStyle", JSON.stringify(defaultBodyStyle));
     }
   }
 
-  function getCookie(name) {
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
-    if (parts.length === 2) return parts.pop().split(";").shift();
-  }
-  
-  useEffect(() => {
-    const style = getCookie("selectedStyle");
-    if (style) {
-      handleStyleChange({ target: { value: style } });
-    }
-  }, []);  
 
 
   return (

src/components/Catalog.jsx

@@ -7,7 +7,6 @@ import { BoardContext } from '../App';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
 import InfiniteScroll from 'react-infinite-scroller';
-import { useCookies } from 'react-cookie';
 
 
 const Catalog = ({ setBodyStyle }) => {
@@ -25,7 +24,6 @@ const Catalog = ({ setBodyStyle }) => {
   const { publishComment } = useAccountsActions();
   const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
   const { subplebbitAddress } = useParams();
-  const [cookies, setCookie] = useCookies(['selectedStyle']);
 
 
 
@@ -93,7 +91,7 @@ const Catalog = ({ setBodyStyle }) => {
         color: '#c5c8c6',
         fontFamily: 'Arial, Helvetica, sans-serif'
       });
-      setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
+      localStorage.setItem('selectedStyle', 'Tomorrow');
     }
   
     const darkModeListener = (e) => {
@@ -104,7 +102,7 @@ const Catalog = ({ setBodyStyle }) => {
           color: '#c5c8c6',
           fontFamily: 'Arial, Helvetica, sans-serif'
         });
-        setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
+        localStorage.setItem('selectedStyle', 'Tomorrow');
       }
     };
   
@@ -250,89 +248,90 @@ const Catalog = ({ setBodyStyle }) => {
   const handleStyleChange = (event) => {
     switch (event.target.value) {
       case "Yotsuba":
-        setBodyStyle({
+        const yotsubaBodyStyle = {
           background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(yotsubaBodyStyle);
         setSelectedStyle("Yotsuba");
-        setCookie("selectedStyle", "Yotsuba", { path: "/" });
+        localStorage.setItem("selectedStyle", "Yotsuba");
+        localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBodyStyle));
         break;
-
+  
       case "Yotsuba-B":
-        setBodyStyle({
+        const yotsubaBBodyStyle = {
           background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
           color: "#000",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(yotsubaBBodyStyle);
         setSelectedStyle("Yotsuba-B");
-        setCookie("selectedStyle", "Yotsuba-B", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Yotsuba-B");
+        localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBBodyStyle));
         break;
-
+  
       case "Futaba":
-        setBodyStyle({
+        const futabaBodyStyle = {
           background: "#ffe",
           color: "maroon",
           fontFamily: "times new roman, serif"
-        });
+        };
+        setBodyStyle(futabaBodyStyle);
         setSelectedStyle("Futaba");
-        setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Futaba");
+        localStorage.setItem("bodyStyle", JSON.stringify(futabaBodyStyle));
         break;
-
+  
       case "Burichan":
-        setBodyStyle({
+        const burichanBodyStyle = {
           background: "#eef2ff",
           color: "#000",
           fontFamily: "times new roman, serif"
-        });
+        };
+        setBodyStyle(burichanBodyStyle);
         setSelectedStyle("Burichan");
-        setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Burichan");
+        localStorage.setItem("bodyStyle", JSON.stringify(burichanBodyStyle));
         break;
-        
+  
       case "Tomorrow":
-        setBodyStyle({
+        const tomorrowBodyStyle = {
           background: "#1d1f21 none",
           color: "#c5c8c6",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(tomorrowBodyStyle);
         setSelectedStyle("Tomorrow");
-        setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Tomorrow");
+        localStorage.setItem("bodyStyle", JSON.stringify(tomorrowBodyStyle));
         break;
-
+  
       case "Photon":
-        setBodyStyle({
+        const photonBodyStyle = {
           background: "#eee none",
           color: "#333",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(photonBodyStyle);
         setSelectedStyle("Photon");
-        setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Photon");
+        localStorage.setItem("bodyStyle", JSON.stringify(photonBodyStyle));
         break;
-
+  
       default:
-        setBodyStyle({
+        const defaultBodyStyle = {
           background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(defaultBodyStyle);
         setSelectedStyle("Yotsuba");
-        setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Yotsuba");
+        localStorage.setItem("bodyStyle", JSON.stringify(defaultBodyStyle));
     }
   }
 
-  function getCookie(name) {
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
-    if (parts.length === 2) return parts.pop().split(";").shift();
-  }
-  
-  useEffect(() => {
-    const style = getCookie("selectedStyle");
-    if (style) {
-      handleStyleChange({ target: { value: style } });
-    }
-  }, []);
-
 
 
   return (

src/components/Thread.jsx

@@ -8,7 +8,6 @@ import ImageBanner from './ImageBanner';
 import { Tooltip } from 'react-tooltip';
 import getDate from '../utils/getDate';
 import renderThreadComments from '../utils/renderThreadComments';
-import { useCookies } from 'react-cookie';
 
 
 const Thread = ({ setBodyStyle }) => {
@@ -22,7 +21,6 @@ const Thread = ({ setBodyStyle }) => {
   const [visible, setVisible] = useState(true);
   const comment = useComment(`${selectedThread}`);
   const { subplebbitAddress, threadCid } = useParams();
-  const [cookies, setCookie] = useCookies(['selectedStyle']);
 
 
   // temporary title from JSON, gets subplebbitAddress and threadCid from URL
@@ -91,7 +89,7 @@ const Thread = ({ setBodyStyle }) => {
         color: '#c5c8c6',
         fontFamily: 'Arial, Helvetica, sans-serif'
       });
-      setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
+      localStorage.setItem('selectedStyle', 'Tomorrow');
     }
   
     const darkModeListener = (e) => {
@@ -102,7 +100,7 @@ const Thread = ({ setBodyStyle }) => {
           color: '#c5c8c6',
           fontFamily: 'Arial, Helvetica, sans-serif'
         });
-        setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
+        localStorage.setItem('selectedStyle', 'Tomorrow');
       }
     };
   
@@ -169,88 +167,89 @@ const Thread = ({ setBodyStyle }) => {
   const handleStyleChange = (event) => {
     switch (event.target.value) {
       case "Yotsuba":
-        setBodyStyle({
+        const yotsubaBodyStyle = {
           background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(yotsubaBodyStyle);
         setSelectedStyle("Yotsuba");
-        setCookie("selectedStyle", "Yotsuba", { path: "/" });
+        localStorage.setItem("selectedStyle", "Yotsuba");
+        localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBodyStyle));
         break;
-
+  
       case "Yotsuba-B":
-        setBodyStyle({
+        const yotsubaBBodyStyle = {
           background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
           color: "#000",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(yotsubaBBodyStyle);
         setSelectedStyle("Yotsuba-B");
-        setCookie("selectedStyle", "Yotsuba-B", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Yotsuba-B");
+        localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBBodyStyle));
         break;
-
+  
       case "Futaba":
-        setBodyStyle({
+        const futabaBodyStyle = {
           background: "#ffe",
           color: "maroon",
           fontFamily: "times new roman, serif"
-        });
+        };
+        setBodyStyle(futabaBodyStyle);
         setSelectedStyle("Futaba");
-        setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Futaba");
+        localStorage.setItem("bodyStyle", JSON.stringify(futabaBodyStyle));
         break;
-
+  
       case "Burichan":
-        setBodyStyle({
+        const burichanBodyStyle = {
           background: "#eef2ff",
           color: "#000",
           fontFamily: "times new roman, serif"
-        });
+        };
+        setBodyStyle(burichanBodyStyle);
         setSelectedStyle("Burichan");
-        setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Burichan");
+        localStorage.setItem("bodyStyle", JSON.stringify(burichanBodyStyle));
         break;
-        
+  
       case "Tomorrow":
-        setBodyStyle({
+        const tomorrowBodyStyle = {
           background: "#1d1f21 none",
           color: "#c5c8c6",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(tomorrowBodyStyle);
         setSelectedStyle("Tomorrow");
-        setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Tomorrow");
+        localStorage.setItem("bodyStyle", JSON.stringify(tomorrowBodyStyle));
         break;
-
+  
       case "Photon":
-        setBodyStyle({
+        const photonBodyStyle = {
           background: "#eee none",
           color: "#333",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(photonBodyStyle);
         setSelectedStyle("Photon");
-        setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Photon");
+        localStorage.setItem("bodyStyle", JSON.stringify(photonBodyStyle));
         break;
-
+  
       default:
-        setBodyStyle({
+        const defaultBodyStyle = {
           background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
-        });
+        };
+        setBodyStyle(defaultBodyStyle);
         setSelectedStyle("Yotsuba");
-        setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true });
+        localStorage.setItem("selectedStyle", "Yotsuba");
+        localStorage.setItem("bodyStyle", JSON.stringify(defaultBodyStyle));
     }
-  }
-
-  function getCookie(name) {
-    const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
-    if (parts.length === 2) return parts.pop().split(";").shift();
-  }
-  
-  useEffect(() => {
-    const style = getCookie("selectedStyle");
-    if (style) {
-      handleStyleChange({ target: { value: style } });
-    }
-  }, []);
+  }