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

refactor: settings route, link, component

Browse Source
This commit is contained in:
plebeius.eth
2024-05-09 16:04:24 +02:00
parent c0a703015d
commit 59365df71a
12 changed files with 101 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+8 -3
View File
@@ -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
+6 -3
View File
@@ -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
+1
View File
@@ -0,0 +1 @@
export { default } from './settings-modal';
src/components/settings-modal/settings-modal.module.css
+50
View File
@@ -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
+18
View File
@@ -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
+1 -1
View File
@@ -27,7 +27,7 @@ const useReplyModal = () => {
setShowReplyModal(true);
}
},
[activeCid, closeModal, isMobile],
[activeCid, isMobile],
);
return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal };
src/views/board/board.tsx
+4 -1
View File
@@ -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
+4 -1
View File
@@ -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
+9 -4
View File
@@ -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
View File
@@ -1 +0,0 @@
export { default } from './settings';
src/views/settings/settings.module.css
-23
View File
@@ -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
-76
View File
@@ -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;