add route validation checks

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