added cookies for selected style

This commit is contained in:
plebbitor
2023-03-08 11:51:57 +01:00
parent 47390fce99
commit f425b4b8c6
7 changed files with 107 additions and 3 deletions
+21
View File
@@ -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 (
+22
View File
@@ -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 (
+1 -1
View File
@@ -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>
+22
View File
@@ -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])