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

add route validation checks

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-10-29 17:40:09 +01:00
parent b123102988
commit 6692c65c4b
19 changed files with 86 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+52 -34
View File
@@ -1,10 +1,10 @@
import { useEffect, useState } from 'react';
import { Outlet, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import { useAccountComment, useAccountComments } from '@plebbit/plebbit-react-hooks';
import { isAllView, isSubscriptionsView } from './lib/utils/view-utils';
import useIsMobile from './hooks/use-is-mobile';
import useTheme from './hooks/use-theme';
import { timeFilterNames } from './hooks/use-time-filter';
import useTimeFilter from './hooks/use-time-filter';
import styles from './app.module.css';
import Board from './views/board';
import Catalog from './views/catalog';
@@ -20,20 +20,37 @@ import PostForm from './components/post-form';
import SubplebbitStats from './components/subplebbit-stats';
import TopBar from './components/topbar';
const BoardLayout = () => {
const { accountCommentIndex, subplebbitAddress, timeFilterName } = useParams();
const location = useLocation();
const isMobile = useIsMobile();
const isInAllView = isAllView(location.pathname, useParams());
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const pendingPost = useAccountComment({ commentIndex: accountCommentIndex ? parseInt(accountCommentIndex) : undefined });
const CheckRouteParams = () => {
const { accountCommentIndex, timeFilterName } = useParams();
const { timeFilterNames, lastVisitTimeFilterName } = useTimeFilter();
const { accountComments } = useAccountComments();
const isValidAccountCommentIndex = !accountCommentIndex || (!isNaN(Number(accountCommentIndex)) && Number(accountCommentIndex) >= 0);
const isValidAccountCommentIndex =
!accountCommentIndex ||
(!isNaN(parseInt(accountCommentIndex)) &&
parseInt(accountCommentIndex) >= 0 &&
accountComments?.length > 0 &&
parseInt(accountCommentIndex) < accountComments.length);
if (!isValidAccountCommentIndex || (timeFilterName && !timeFilterNames.includes(timeFilterName))) {
const isDynamicTimeFilter = (filter: string) => /^\d+[dwmy]$/.test(filter);
const isTimeFilterNameValid =
!timeFilterName || timeFilterNames.includes(timeFilterName as any) || timeFilterName === lastVisitTimeFilterName || isDynamicTimeFilter(timeFilterName);
if (!isValidAccountCommentIndex || !isTimeFilterNameValid) {
return <NotFound />;
}
return <Outlet />;
};
const BoardLayout = () => {
const { accountCommentIndex, subplebbitAddress } = useParams();
const location = useLocation();
const isMobile = useIsMobile();
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const pendingPost = useAccountComment({ commentIndex: accountCommentIndex ? parseInt(accountCommentIndex) : undefined });
// force rerender of post form when navigating between pages, except when opening settings modal in current view
const key = location.pathname.endsWith('/settings')
? `${subplebbitAddress}-${location.pathname.replace(/\/settings$/, '')}`
@@ -108,33 +125,34 @@ const App = () => {
<Route path='/' element={<Home />} />
<Route path='/faq' element={<FAQ />} />
<Route path='*' element={<NotFound />} />
<Route element={<CheckRouteParams />}>
<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 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={<Post />} />
<Route path='/p/:subplebbitAddress/c/:commentCid/settings' element={<Post />} />
<Route path='/p/:subplebbitAddress/description' element={<Post />} />
<Route path='/p/:subplebbitAddress/description/settings' element={<Post />} />
<Route path='/p/:subplebbitAddress/rules' element={<Post />} />
<Route path='/p/:subplebbitAddress/rules/settings' element={<Post />} />
<Route path='/p/:subplebbitAddress/c/:commentCid' element={<Post />} />
<Route path='/p/:subplebbitAddress/c/:commentCid/settings' element={<Post />} />
<Route path='/p/:subplebbitAddress/description' element={<Post />} />
<Route path='/p/:subplebbitAddress/description/settings' element={<Post />} />
<Route path='/p/:subplebbitAddress/rules' element={<Post />} />
<Route path='/p/:subplebbitAddress/rules/settings' element={<Post />} />
<Route path='/p/all/:timeFilterName?' element={<Board />} />
<Route path='/p/all/:timeFilterName?/settings' element={<Board />} />
<Route path='/p/all/description' element={<Post />} />
<Route path='/p/all/catalog/:timeFilterName?' element={<Catalog />} />
<Route path='/p/all/catalog/:timeFilterName?/settings' element={<Catalog />} />
<Route path='/p/all/:timeFilterName?' element={<Board />} />
<Route path='/p/all/:timeFilterName?/settings' element={<Board />} />
<Route path='/p/all/description' element={<Post />} />
<Route path='/p/all/catalog/:timeFilterName?' element={<Catalog />} />
<Route path='/p/all/catalog/:timeFilterName?/settings' element={<Catalog />} />
<Route path='/p/subscriptions/:timeFilterName?' element={<Board />} />
<Route path='/p/subscriptions/:timeFilterName?/settings' element={<Board />} />
<Route path='/p/subscriptions/catalog/:timeFilterName?' element={<Catalog />} />
<Route path='/p/subscriptions/catalog/:timeFilterName?/settings' element={<Catalog />} />
<Route path='/p/subscriptions/:timeFilterName?' element={<Board />} />
<Route path='/p/subscriptions/:timeFilterName?/settings' element={<Board />} />
<Route path='/p/subscriptions/catalog/:timeFilterName?' element={<Catalog />} />
<Route path='/p/subscriptions/catalog/:timeFilterName?/settings' element={<Catalog />} />
<Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
<Route path='/profile/:accountCommentIndex/settings' element={<PendingPost />} />
<Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
<Route path='/profile/:accountCommentIndex/settings' element={<PendingPost />} />
</Route>
</Route>
</Route>
</Routes>
src/components/board-buttons/board-buttons.tsx
+9 -9
View File
@@ -178,10 +178,8 @@ const ShowOPCommentOption = () => {
export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView, isTopbar = false }: BoardButtonsProps) => {
const { t } = useTranslation();
const params = useParams();
const navigate = useNavigate();
const { timeFilterNames } = useTimeFilter();
const selectedTimeFilterName = params.timeFilterName;
const { timeFilterName, timeFilterNames } = useTimeFilter();
const changeTimeFilter = (event: React.ChangeEvent<HTMLSelectElement>) => {
const timeFilterName = event.target.value;
@@ -199,6 +197,8 @@ export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView
const { sortType } = useSortingStore();
const allTimeFilterNames = timeFilterName && !timeFilterNames.includes(timeFilterName) ? [timeFilterName, ...timeFilterNames.slice(1)] : timeFilterNames.slice(1);
return (
<>
{!isTopbar ? (
@@ -208,10 +208,10 @@ export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView
) : (
<> </>
)}
<select onChange={changeTimeFilter} className={[styles.feedName, styles.menuItem, 'capitalize'].join(' ')} value={selectedTimeFilterName}>
{timeFilterNames.map((timeFilterName, i) => (
<option key={timeFilterName + i} value={timeFilterName}>
{timeFilterName}
<select onChange={changeTimeFilter} className={[styles.feedName, styles.menuItem, 'capitalize'].join(' ')} value={timeFilterName}>
{allTimeFilterNames.map((name, i) => (
<option key={name + i} value={name}>
{name}
</option>
))}
</select>
@@ -223,7 +223,7 @@ export const MobileBoardButtons = () => {
const { t } = useTranslation();
const params = useParams();
const location = useLocation();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname, params);
const isInPendingPostPage = isPendingPostView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
@@ -317,7 +317,7 @@ export const DesktopBoardButtons = () => {
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
const isInCatalogView = isCatalogView(location.pathname, params);
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInPendingPostPage = isPendingPostView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
src/components/board-header/board-header.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const ImageBanner = () => {
const BoardHeader = () => {
const location = useLocation();
const params = useParams();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
src/components/catalog-row/catalog-row.tsx
+1 -1
View File
@@ -136,7 +136,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
const location = useLocation();
const params = useParams();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const postLink = isInAllView && isDescription ? `/p/all/description` : `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`;
src/components/post-desktop/post-desktop.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
const params = useParams();
const location = useLocation();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInPostPageView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+1 -1
View File
@@ -147,7 +147,7 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
const location = useLocation();
const params = useParams();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname, params);
const isInPostPageView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
src/components/post-form/post-form.tsx
+2 -2
View File
@@ -44,7 +44,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
const subjectRef = useRef<HTMLInputElement>(null);
const location = useLocation();
const isInAllView = isAllView(location.pathname, useParams());
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const subscriptions = account?.subscriptions || [];
const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
@@ -322,7 +322,7 @@ const PostForm = () => {
const isInDescriptionView = isDescriptionView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params);
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const post = useComment({ commentCid: useParams().commentCid });
src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose
const { t } = useTranslation();
const location = useLocation();
const params = useParams();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const getViewOnOtherClientLink = () => {
src/components/post-mobile/post-mobile.tsx
+2 -2
View File
@@ -36,7 +36,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
const params = useParams();
const location = useLocation();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInPostPageView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
@@ -349,7 +349,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInPendingPostView = isPendingPostView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
const linksCount = useCountLinksInReplies(post);
src/components/reply-modal/reply-modal.tsx
+1 -1
View File
@@ -120,7 +120,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
}, [parentCid]);
const location = useLocation();
const isInAllView = isAllView(location.pathname, useParams());
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const subplebbit = useSubplebbit({ subplebbitAddress });
const { updatedAt } = subplebbit || {};
src/components/subplebbit-description/subplebbit-description.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { Post } from '../../views/post';
import { useTranslation } from 'react-i18next';
import { isAllView } from '../../lib/utils/view-utils';
import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
import { useLocation, useParams } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
interface DescriptionPostProps {
avatarUrl?: string;
@@ -17,7 +17,7 @@ interface DescriptionPostProps {
const SubplebbitDescription = ({ avatarUrl, createdAt, description, replyCount, shortAddress, subplebbitAddress, title }: DescriptionPostProps) => {
const { t } = useTranslation();
const location = useLocation();
const isInAllView = isAllView(location.pathname, useParams());
const isInAllView = isAllView(location.pathname);
const multisubMetadata = useMultisubMetadata();
const post = {
src/components/topbar/topbar.tsx
+1 -1
View File
@@ -130,7 +130,7 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
const location = useLocation();
const params = useParams();
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const selectValue = isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbitAddress;
src/hooks/use-catalog-feed-rows.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams, useLocation } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { useAccountComments, Subplebbit } from '@plebbit/plebbit-react-hooks';
import useInterfaceSettingsStore from '../stores/use-interface-settings-store';
import { getCommentMediaInfo, getHasThumbnail } from '../lib/utils/media-utils';
@@ -15,7 +15,7 @@ const useCatalogFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolea
const { hideThreadsWithoutImages } = useInterfaceSettingsStore();
const location = useLocation();
const isInAllView = isAllView(location.pathname, useParams());
const isInAllView = isAllView(location.pathname);
const multisub = useMultisubMetadata();
const { accountComments } = useAccountComments();
src/hooks/use-initial-theme.ts
+1 -1
View File
@@ -17,7 +17,7 @@ const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
const params = useParams();
const isInHomeView = isHomeView(location.pathname);
const isInNotFoundView = isNotFoundView(location.pathname, params);
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const isInPendingPostView = isPendingPostView(location.pathname, params);
src/hooks/use-theme.ts
+2 -2
View File
@@ -34,7 +34,7 @@ const useTheme = (): [string, (theme: string) => void] => {
const getCurrentTheme = useCallback(() => {
const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
let storedTheme = null;
@@ -67,7 +67,7 @@ const useTheme = (): [string, (theme: string) => void] => {
const setSubplebbitTheme = useCallback(
async (newTheme: string) => {
const subplebbitAddress = params?.subplebbitAddress || pendingPostSubplebbitAddress;
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
if (isInAllView || isInSubscriptionsView) {
src/lib/utils/view-utils.ts
+3 -22
View File
@@ -1,5 +1,3 @@
import { timeFilterNames } from '../../hooks/use-time-filter';
export type ParamsType = {
accountCommentIndex?: string;
commentCid?: string;
@@ -7,25 +5,8 @@ export type ParamsType = {
timeFilterName?: string;
};
export const isAllView = (pathname: string, params: ParamsType): boolean => {
const { timeFilterName } = params;
if (timeFilterName && !timeFilterNames.includes(timeFilterName)) {
return false;
}
return (
pathname === '/p/all' ||
pathname === '/p/all/settings' ||
pathname === `/p/all/${timeFilterName}` ||
pathname === `/p/all/${timeFilterName}/settings` ||
pathname === '/p/all/catalog' ||
pathname === '/p/all/catalog/settings' ||
pathname === `/p/all/catalog/${timeFilterName}` ||
pathname === `/p/all/catalog/${timeFilterName}/settings` ||
pathname === '/p/all/description' ||
pathname === '/p/all/description/settings'
);
export const isAllView = (pathname: string): boolean => {
return pathname.startsWith('/p/all');
};
export const isBoardView = (pathname: string, params: ParamsType): boolean => {
@@ -105,7 +86,7 @@ export const isSubscriptionsView = (pathname: string, params: ParamsType): boole
export const isNotFoundView = (pathname: string, params: ParamsType): boolean => {
return (
!isAllView(pathname, params) &&
!isAllView(pathname) &&
!isBoardView(pathname, params) &&
!isCatalogView(pathname, params) &&
!isDescriptionView(pathname, params) &&
src/views/board/board.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ const Board = () => {
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
const { hideThreadsWithoutImages } = useInterfaceSettingsStore();
const isInAllView = isAllView(location.pathname, useParams());
const isInAllView = isAllView(location.pathname);
const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
const account = useAccount();
src/views/catalog/catalog.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ const Catalog = () => {
const location = useLocation();
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
const isInAllView = isAllView(location.pathname, useParams());
const isInAllView = isAllView(location.pathname);
const defaultSubplebbits = useDefaultSubplebbits();
const { hideAdultBoards, hideGoreBoards } = useInterfaceSettingsStore();
const { hideThreadsWithoutImages } = useInterfaceSettingsStore();
@@ -153,7 +153,7 @@ const Catalog = () => {
</div>
);
const params = useParams();
const params = useParams<{ sortType?: string; timeFilterName?: string }>();
const currentTimeFilterName = params?.timeFilterName || timeFilterName;
const Footer = () => {
src/views/post/post.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ const PostPage = () => {
const params = useParams();
const location = useLocation();
const { commentCid, subplebbitAddress } = params;
const isInAllView = isAllView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInSettigsView = isSettingsView(location.pathname, params);
const isInDescriptionView = isDescriptionView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params);