added cookies for selected style

package.json

@@ -19,6 +19,7 @@
     "ext-name": "^5.0.0",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
+    "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-infinite-scroller": "^1.2.6",

src/App.js

@@ -9,6 +9,7 @@ import NotFound from './components/NotFound';
 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();
 
@@ -40,7 +41,9 @@ export default function App() {
   const [selectedTitle, setSelectedTitle] = useState('');
   const [selectedAddress, setSelectedAddress] = useState('');
   const [selectedThread, setSelectedThread] = useState('');
-  const [selectedStyle, setSelectedStyle] = useState('Yotsuba');
+  const [cookies, setCookie] = useCookies(['selectedStyle']);
+  const [selectedStyle, setSelectedStyle] = useState(cookies.selectedStyle || 'Yotsuba');
+
 
 
   const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`);

src/components/Board.jsx

@@ -8,6 +8,7 @@ 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 }) => {
@@ -28,6 +29,7 @@ const Board = ({ setBodyStyle }) => {
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const renderedFeed = selectedFeed.slice(0, endIndex);
   const { subplebbitAddress } = useParams();
+  const [cookies, setCookie] = useCookies(['selectedStyle']);
 
 
   // temporary title from JSON, gets subplebbitAddress from URL
@@ -258,6 +260,7 @@ const Board = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba");
+        setCookie("selectedStyle", "Yotsuba", { path: "/" });
         break;
 
       case "Yotsuba B":
@@ -267,6 +270,7 @@ const Board = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba B");
+        setCookie("selectedStyle", "Yotsuba B", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Futaba":
@@ -276,6 +280,7 @@ const Board = ({ setBodyStyle }) => {
           fontFamily: "times new roman, serif"
         });
         setSelectedStyle("Futaba");
+        setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Burichan":
@@ -285,6 +290,7 @@ const Board = ({ setBodyStyle }) => {
           fontFamily: "times new roman, serif"
         });
         setSelectedStyle("Burichan");
+        setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true });
         break;
         
       case "Tomorrow":
@@ -294,6 +300,7 @@ const Board = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Tomorrow");
+        setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Photon":
@@ -303,6 +310,7 @@ const Board = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Photon");
+        setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true });
         break;
 
       default:
@@ -312,9 +320,22 @@ const Board = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba");
+        setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true });
     }
   }
 
+  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}});
+    }
+  }, [selectedStyle])
 
 
   return (

src/components/Catalog.jsx

@@ -7,6 +7,7 @@ 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 }) => {
@@ -24,6 +25,7 @@ const Catalog = ({ setBodyStyle }) => {
   const { publishComment } = useAccountsActions();
   const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
   const { subplebbitAddress } = useParams();
+  const [cookies, setCookie] = useCookies(['selectedStyle']);
 
 
 
@@ -220,6 +222,7 @@ const Catalog = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba");
+        setCookie("selectedStyle", "Yotsuba", { path: "/" });
         break;
 
       case "Yotsuba B":
@@ -229,6 +232,7 @@ const Catalog = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba B");
+        setCookie("selectedStyle", "Yotsuba B", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Futaba":
@@ -238,6 +242,7 @@ const Catalog = ({ setBodyStyle }) => {
           fontFamily: "times new roman, serif"
         });
         setSelectedStyle("Futaba");
+        setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Burichan":
@@ -247,6 +252,7 @@ const Catalog = ({ setBodyStyle }) => {
           fontFamily: "times new roman, serif"
         });
         setSelectedStyle("Burichan");
+        setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true });
         break;
         
       case "Tomorrow":
@@ -256,6 +262,7 @@ const Catalog = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Tomorrow");
+        setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Photon":
@@ -265,6 +272,7 @@ const Catalog = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Photon");
+        setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true });
         break;
 
       default:
@@ -274,9 +282,23 @@ const Catalog = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba");
+        setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true });
     }
   }
 
+  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}});
+    }
+  }, [selectedStyle])
+
 
 
   return (

src/components/NotFound.jsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { Container, Header, Logo, Page, Boards, BoardsTitle } from './styles/Home.styled';
 
 
-const NotFound = ({ setBodyStyle }) => {
+const NotFound = () => {
 
   return (
     <Container>

src/components/Thread.jsx

@@ -8,6 +8,7 @@ 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 }) => {
@@ -21,6 +22,7 @@ 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
@@ -139,6 +141,7 @@ const Thread = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba");
+        setCookie("selectedStyle", "Yotsuba", { path: "/" });
         break;
 
       case "Yotsuba B":
@@ -148,6 +151,7 @@ const Thread = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba B");
+        setCookie("selectedStyle", "Yotsuba B", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Futaba":
@@ -157,6 +161,7 @@ const Thread = ({ setBodyStyle }) => {
           fontFamily: "times new roman, serif"
         });
         setSelectedStyle("Futaba");
+        setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Burichan":
@@ -166,6 +171,7 @@ const Thread = ({ setBodyStyle }) => {
           fontFamily: "times new roman, serif"
         });
         setSelectedStyle("Burichan");
+        setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true });
         break;
         
       case "Tomorrow":
@@ -175,6 +181,7 @@ const Thread = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Tomorrow");
+        setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true });
         break;
 
       case "Photon":
@@ -184,6 +191,7 @@ const Thread = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Photon");
+        setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true });
         break;
 
       default:
@@ -193,8 +201,22 @@ const Thread = ({ setBodyStyle }) => {
           fontFamily: "Arial, Helvetica, sans-serif"
         });
         setSelectedStyle("Yotsuba");
+        setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true });
     }
   }
+
+  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}});
+    }
+  }, [selectedStyle])
   
   
 

yarn.lock

@@ -2853,6 +2853,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@@ -2910,6 +2915,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.0.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -4511,6 +4524,11 @@ cookie@0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+cookie@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
 core-js-compat@^3.25.1:
   version "3.27.2"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.27.2.tgz#607c50ad6db8fd8326af0b2883ebb987be3786da"
@@ -6455,7 +6473,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -9976,6 +9994,15 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-cookie@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-4.1.1.tgz#832e134ad720e0de3e03deaceaab179c4061a19d"
+  integrity sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.0.1"
+    hoist-non-react-statics "^3.0.0"
+    universal-cookie "^4.0.0"
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -11622,6 +11649,14 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
+universal-cookie@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
+  integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie "^0.4.0"
+
 universalify@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"