refactor: settings route, link, component

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;