diff --git a/src/components/Board.jsx b/src/components/Board.jsx index 28a3e452..61425beb 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -4,6 +4,7 @@ import useBoardStore from '../useBoardStore'; import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled'; import ImageBanner from './ImageBanner'; import CaptchaModal from './CaptchaModal'; +import SettingsModal from './SettingsModal'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import InfiniteScroll from 'react-infinite-scroller'; import { Tooltip } from 'react-tooltip'; @@ -11,7 +12,6 @@ import onError from '../utils/onError'; import onSuccess from '../utils/onSuccess'; import getDate from '../utils/getDate'; import renderComments from '../utils/renderComments'; -import SettingsModal from './SettingsModal'; const Board = ({ setBodyStyle }) => { diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx index 4d76cd28..b6e86801 100644 --- a/src/components/Catalog.jsx +++ b/src/components/Catalog.jsx @@ -7,6 +7,7 @@ import { Threads } from './styles/Catalog.styled'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; import CaptchaModal from './CaptchaModal'; +import SettingsModal from './SettingsModal'; import onError from '../utils/onError'; import onSuccess from '../utils/onSuccess'; import InfiniteScroll from 'react-infinite-scroller'; @@ -34,6 +35,7 @@ const Catalog = ({ setBodyStyle }) => { const [comment, setComment] = useState(''); const { publishComment } = useAccountsActions(); const [isCaptchaOpen, setIsCaptchaOpen] = useState(false); + const [isSettingsOpen, setIsSettingsOpen] = useState(false); const [captchaImage, setCaptchaImage] = useState(''); const navigate = useNavigate(); const location = useLocation(); @@ -84,7 +86,7 @@ const Catalog = ({ setBodyStyle }) => { return () => window.removeEventListener('scroll', handleScroll); }, [prevScrollPos, visible]); - // post route handling + // nested routes handling useEffect(() => { const path = location.pathname; if (path.endsWith('/post')) { @@ -94,6 +96,13 @@ const Catalog = ({ setBodyStyle }) => { setShowPostFormLink(true); setShowPostForm(false); } + + if (path.endsWith('/settings')) { + setIsSettingsOpen(true); + } else { + setIsSettingsOpen(false); + } + }, [location.pathname]); // automatic dark mode without interefering with user's selected style @@ -255,6 +264,14 @@ const Catalog = ({ setBodyStyle }) => { setIsCaptchaOpen(false); }; + const handleSettingsClose = () => { + setIsSettingsOpen(false); + } + + const handleSettingsOpen = () => { + setIsSettingsOpen(true); + } + const handleStyleChange = (event) => { switch (event.target.value) { @@ -351,6 +368,10 @@ const Catalog = ({ setBodyStyle }) => { isOpen={isCaptchaOpen} closeModal={handleCaptchaClose} captchaImage={captchaImage} /> + <> {defaultSubplebbits.map(subplebbit => ( @@ -363,7 +384,7 @@ const Catalog = ({ setBodyStyle }) => { ))} [ - Settings + Settings ] [ handleStyleChange({target: {value: "Yotsuba"}} @@ -382,7 +403,7 @@ const Catalog = ({ setBodyStyle }) => {
- Settings + Settings   handleStyleChange({target: {value: "Yotsuba"}} )}>Home diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index 1c3178b8..ee3f3535 100644 --- a/src/components/Thread.jsx +++ b/src/components/Thread.jsx @@ -6,6 +6,7 @@ import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled'; import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; import CaptchaModal from './CaptchaModal'; +import SettingsModal from './SettingsModal'; import { Tooltip } from 'react-tooltip'; import onError from '../utils/onError'; import onSuccess from '../utils/onSuccess'; @@ -36,6 +37,7 @@ const Thread = ({ setBodyStyle }) => { const [commentContent, setCommentContent] = useState(''); const { publishComment } = useAccountsActions(); const [isCaptchaOpen, setIsCaptchaOpen] = useState(false); + const [isSettingsOpen, setIsSettingsOpen] = useState(false); const [captchaImage, setCaptchaImage] = useState(''); const navigate = useNavigate(); const location = useLocation(); @@ -87,7 +89,7 @@ const Thread = ({ setBodyStyle }) => { return () => window.removeEventListener('scroll', handleScroll); }, [prevScrollPos, visible]); - // post route handling + // nested routes handling useEffect(() => { const path = location.pathname; if (path.endsWith('/post')) { @@ -97,6 +99,13 @@ const Thread = ({ setBodyStyle }) => { setShowPostFormLink(true); setShowPostForm(false); } + + if (path.endsWith('/settings')) { + setIsSettingsOpen(true); + } else { + setIsSettingsOpen(false); + } + }, [location.pathname]); // automatic dark mode without interefering with user's selected style @@ -266,6 +275,14 @@ const Thread = ({ setBodyStyle }) => { setIsCaptchaOpen(false); }; + const handleSettingsClose = () => { + setIsSettingsOpen(false); + } + + const handleSettingsOpen = () => { + setIsSettingsOpen(true); + } + const handleStyleChange = (event) => { switch (event.target.value) { @@ -362,6 +379,10 @@ const Thread = ({ setBodyStyle }) => { isOpen={isCaptchaOpen} closeModal={handleCaptchaClose} captchaImage={captchaImage} /> + <> {defaultSubplebbits.map(subplebbit => ( @@ -376,7 +397,7 @@ const Thread = ({ setBodyStyle }) => { ))} [ - Settings + Settings ] [ handleStyleChange({target: {value: "Yotsuba"}} @@ -395,7 +416,7 @@ const Thread = ({ setBodyStyle }) => {
- Settings + Settings   handleStyleChange({target: {value: "Yotsuba"}} )}>Home