External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

switched handleStyleChange to localStorage

Browse Source
This commit is contained in:
plebbitor
2023-03-11 17:27:46 +01:00
parent ba2a66ba70
commit 9da24c76d1
6 changed files with 141 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Board.jsx
+44 -43
View File
@@ -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
+43 -44
View File
@@ -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
+44 -45
View File
@@ -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 } });
}
}, []);
}