diff --git a/src/app.tsx b/src/app.tsx
index 5ac2fb44..14803843 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -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 ;
}
+ return ;
+};
+
+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 = () => {
} />
} />
} />
+ }>
+ }>
+ } />
+ } />
+ } />
+ } />
- }>
- } />
- } />
- } />
- } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
- } />
- } />
- } />
- } />
- } />
- } />
+ } />
+ } />
+ } />
+ } />
+ } />
- } />
- } />
- } />
- } />
- } />
+ } />
+ } />
+ } />
+ } />
- } />
- } />
- } />
- } />
-
- } />
- } />
+ } />
+ } />
+
diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx
index 2ae00e4a..7db33822 100644
--- a/src/components/board-buttons/board-buttons.tsx
+++ b/src/components/board-buttons/board-buttons.tsx
@@ -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) => {
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
) : (
<>
)}
-