[
- 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