refactor: settings route, link, component

src/app.tsx

@@ -9,7 +9,6 @@ import Home from './views/home';
 import NotFound from './views/not-found';
 import PendingPost from './views/pending-post';
 import PostPage from './views/post-page';
-import Settings from './views/settings';
 import BoardBanner from './components/board-banner';
 import { DesktopBoardButtons, MobileBoardButtons } from './components/board-buttons';
 import BoardNav from './components/board-nav';
@@ -70,17 +69,23 @@ const App = () => {
           <Route path='/' element={<Home />} />
           <Route element={<BoardLayout />}>
             <Route path='/p/:subplebbitAddress' element={<Board />} />
+            <Route path='/p/:subplebbitAddress/settings' element={<Board />} />
 
             <Route path='/p/:subplebbitAddress/catalog' element={<Catalog />} />
+            <Route path='/p/:subplebbitAddress/catalog/settings' element={<Catalog />} />
 
             <Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/c/:commentCid/settings' element={<PostPage />} />
+
             <Route path='/p/:subplebbitAddress/description' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/description/settings' element={<PostPage />} />
+
             <Route path='/p/:subplebbitAddress/rules' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/rules/settings' element={<PostPage />} />
 
             <Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
+            <Route path='/profile/:accountCommentIndex/settings' element={<PendingPost />} />
           </Route>
-          <Route path='/settings' element={<Settings />} />
-
           <Route path='*' element={<NotFound />} />
         </Route>
       </Routes>

src/components/board-nav/board-nav.tsx

@@ -12,7 +12,9 @@ interface BoardNavProps {
 
 const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
   const { t } = useTranslation();
-  const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
+  const location = useLocation();
+  const params = useParams();
+  const isInCatalogView = isCatalogView(location.pathname, params);
 
   return (
     <div className={styles.boardNavDesktop}>
@@ -30,7 +32,8 @@ const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
         ]
       </span>
       <span className={styles.navTopRight}>
-        [<Link to='/settings'>{t('settings')}</Link>] [<Link to='/'>{t('home')}</Link>]
+        [<Link to={!location.pathname.endsWith('settings') ? location.pathname + '/settings' : location.pathname}>{t('settings')}</Link>] [<Link to='/'>{t('home')}</Link>
+        ]
       </span>
     </div>
   );
@@ -68,7 +71,7 @@ const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProp
         {boardSelect}
       </div>
       <div className={styles.pageJump}>
-        <Link to='settings'>{t('settings')}</Link>
+        <Link to={useLocation().pathname + '/settings'}>{t('settings')}</Link>
         <Link to='/'>{t('home')}</Link>
       </div>
     </div>

src/components/settings-modal/index.ts

@@ -0,0 +1 @@
+export { default } from './settings-modal';

src/components/settings-modal/settings-modal.module.css

@@ -0,0 +1,50 @@
+.settingsModal {
+  top: 60px;
+  width: 400px;
+  height: auto;
+  max-height: 80%;
+  left: calc(50% - 25px);
+  overflow-y: auto;
+  margin-left: -178px;
+  position: absolute;
+  padding: 2px 5px 5px;
+  font-size: 14px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
+}
+
+.header {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-bottom: 5px;
+  text-align: center;
+  line-height: 14px;
+}
+
+.version {
+  font-size: 11px;
+  position: absolute;
+  display: block;
+  margin-left: 5px;
+}
+
+.closeButton {
+  right: 5px;
+  width: 18px;
+  height: 18px;
+  display: block;
+  background-size: 100%;
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+  image-rendering: pixelated;
+}
+
+@media (max-width: 640px) {
+  .settingsModal {
+    width: 350px !important;
+    max-height: 60% !important;
+    left: calc(50% - 2px) !important;
+  }
+}

src/components/settings-modal/settings-modal.tsx

@@ -0,0 +1,18 @@
+import styles from './settings-modal.module.css';
+import { useNavigate } from 'react-router-dom';
+
+const SettingsModal = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className={styles.settingsModal}>
+      <div className={styles.header}>
+        <span className={styles.version}>v0.2.0</span>
+        Settings
+        <span className={styles.closeButton} title='close' onClick={() => navigate(-1)} />
+      </div>
+    </div>
+  );
+};
+
+export default SettingsModal;

src/hooks/use-reply-modal.ts

@@ -27,7 +27,7 @@ const useReplyModal = () => {
         setShowReplyModal(true);
       }
     },
-    [activeCid, closeModal, isMobile],
+    [activeCid, isMobile],
   );
 
   return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal };

src/views/board/board.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useTranslation } from 'react-i18next';
@@ -9,6 +9,7 @@ import useReplyModal from '../../hooks/use-reply-modal';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
 import ReplyModal from '../../components/reply-modal';
+import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
 
@@ -16,6 +17,7 @@ const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
 const Board = () => {
   const { t } = useTranslation();
+  const location = useLocation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
   const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
   const sortType = 'active';
@@ -62,6 +64,7 @@ const Board = () => {
 
   return (
     <div className={styles.content}>
+      {location.pathname === `/p/${subplebbitAddress}/settings` && <SettingsModal />}
       {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
       {feed.length > 0 && (
         <>

src/views/catalog/catalog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Subplebbit, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
@@ -7,6 +7,7 @@ import useFeedStateString from '../../hooks/use-feed-state-string';
 import useWindowWidth from '../../hooks/use-window-width';
 import CatalogRow from '../../components/catalog-row';
 import LoadingEllipsis from '../../components/loading-ellipsis';
+import SettingsModal from '../../components/settings-modal';
 import styles from './catalog.module.css';
 import _ from 'lodash';
 
@@ -69,6 +70,7 @@ const columnWidth = 180;
 
 const Catalog = () => {
   const { t } = useTranslation();
+  const location = useLocation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
   const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
 
@@ -122,6 +124,7 @@ const Catalog = () => {
 
   return (
     <div className={styles.content}>
+      {location.pathname === `/p/${subplebbitAddress}/catalog/settings` && <SettingsModal />}
       <hr />
       <div className={styles.catalog}>
         <Virtuoso

src/views/post-page/post-page.tsx

@@ -7,21 +7,25 @@ import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
 import useReplyModal from '../../hooks/use-reply-modal';
 import Post from '../../components/post';
 import ReplyModal from '../../components/reply-modal';
+import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
 
 const PostPage = () => {
   const { t } = useTranslation();
   const params = useParams();
+  const location = useLocation();
   const { commentCid, subplebbitAddress } = params;
+  const showSettings =
+    location.pathname === `/p/${subplebbitAddress}/c/${commentCid}/settings` ||
+    location.pathname === `/p/${subplebbitAddress}/description/settings` ||
+    location.pathname === `/p/${subplebbitAddress}/rules/settings`;
+  const isInDescriptionView = isDescriptionView(location.pathname, params);
+  const isInRulesView = isRulesView(location.pathname, params);
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit;
 
-  const location = useLocation();
-  const isInDescriptionView = isDescriptionView(location.pathname, params);
-  const isInRulesView = isRulesView(location.pathname, params);
-
   const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal();
 
   const post = useComment({ commentCid });
@@ -34,6 +38,7 @@ const PostPage = () => {
 
   return (
     <div className={styles.content}>
+      {showSettings && <SettingsModal />}
       {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
       {isInDescriptionView ? (
         <SubplebbitDescription

src/views/settings/index.ts

@@ -1 +0,0 @@
-export { default } from './settings';

src/views/settings/settings.module.css

@@ -1,23 +0,0 @@
-.content {
-  position: absolute;
-  top: 20%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.version {
-  display: block;
-}
-
-.content select {
-  background-color: var(--select-background-color, revert);
-  border: var(--select-border, revert);
-  color: var(--select-color, revert);
-  margin: 10px;
-}
-
-.content a {
-  margin: 10px;
-  margin-bottom: 40px;
-  display: block;
-}

src/views/settings/settings.tsx

@@ -1,76 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import useTheme from '../../hooks/use-theme';
-import styles from './settings.module.css';
-import { Link } from 'react-router-dom';
-import packageJson from '../../../package.json';
-const isElectron = window.isElectron === true;
-const commitRef = process.env.REACT_APP_COMMIT_REF;
-
-// TODO: remove theme and languages selectors for debugging
-const ThemeSettings = () => {
-  const [theme, setTheme] = useTheme();
-
-  return (
-    <select className={styles.themeSettings} value={theme} onChange={(e) => setTheme(e.target.value)}>
-      <option value='yotsuba'>Yotsuba</option>
-      <option value='yotsuba-b'>Yotsuba B</option>
-      <option value='futaba'>Futaba</option>
-      <option value='burichan'>Burichan</option>
-      <option value='tomorrow'>Tomorrow</option>
-      <option value='photon'>Photon</option>
-    </select>
-  );
-};
-
-// prettier-ignore
-const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
-
-const LanguageSettings = () => {
-  const { i18n } = useTranslation();
-  const { changeLanguage, language } = i18n;
-
-  const onSelectLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    changeLanguage(e.target.value);
-  };
-
-  return (
-    <div className={styles.languageSettings}>
-      <select value={language} onChange={onSelectLanguage}>
-        {availableLanguages.map((lang) => (
-          <option key={lang} value={lang}>
-            {lang}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-const Settings = () => {
-  return (
-    <div className={styles.content}>
-      <div className={styles.version}>
-        <a href={`https://github.com/plebbit/plebchan/releases/tag/v${packageJson.version}`} target='_blank' rel='noopener noreferrer'>
-          v{packageJson.version}
-        </a>
-        {isElectron && (
-          <a className={styles.fullNodeStats} href='http://localhost:5001/webui/' target='_blank' rel='noreferrer'>
-            node stats
-          </a>
-        )}
-        {commitRef && (
-          <a href={`https://github.com/plebbit/plebchan/commit/${commitRef}`} target='_blank' rel='noopener noreferrer'>
-            {commitRef.slice(0, 7)}
-          </a>
-        )}
-      </div>
-      <div>
-        <Link to='/'>Home</Link>
-      </div>
-      <ThemeSettings />
-      <LanguageSettings />
-    </div>
-  );
-};
-
-export default Settings;