From f425b4b8c68853af3146f558a7ded92faa740b7c Mon Sep 17 00:00:00 2001 From: plebbitor Date: Wed, 8 Mar 2023 11:51:57 +0100 Subject: [PATCH] added cookies for selected style --- package.json | 1 + src/App.js | 5 ++++- src/components/Board.jsx | 21 +++++++++++++++++++++ src/components/Catalog.jsx | 22 ++++++++++++++++++++++ src/components/NotFound.jsx | 2 +- src/components/Thread.jsx | 22 ++++++++++++++++++++++ yarn.lock | 37 ++++++++++++++++++++++++++++++++++++- 7 files changed, 107 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 61ee7f05..e62a68c2 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 4a656b7e..f7428418 100644 --- a/src/App.js +++ b/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`); diff --git a/src/components/Board.jsx b/src/components/Board.jsx index a79069a3..5c42b4a7 100644 --- a/src/components/Board.jsx +++ b/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 ( diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx index 11f4c823..1886df38 100644 --- a/src/components/Catalog.jsx +++ b/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 ( diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx index 63b596d6..34d73f02 100644 --- a/src/components/NotFound.jsx +++ b/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 ( diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index f42d294a..cf8df104 100644 --- a/src/components/Thread.jsx +++ b/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]) diff --git a/yarn.lock b/yarn.lock index 3ba5a984..ca940bdb 100644 --- a/yarn.lock +++ b/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"