diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index 4351262d..0dbb4bc3 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -5,7 +5,7 @@ import { useAccount } from '@plebbit/plebbit-react-hooks';
import { getShortAddress } from '@plebbit/plebbit-js';
import styles from './topbar.module.css';
import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
-import useTimeFilter from '../../hooks/use-time-filter';
+import useTimeFilter, { TimeFilterKey } from '../../hooks/use-time-filter';
import { isAllView, isHomeView, isSubplebbitView } from '../../lib/utils/view-utils';
const sortTypes = ['hot', 'new', 'active', 'controversialAll', 'topAll'];
@@ -16,14 +16,17 @@ const TopBar = () => {
const { t } = useTranslation();
const location = useLocation();
const params = useParams();
- const { timeFilterNames } = useTimeFilter();
const subscriptions = account?.subscriptions;
const isinAllView = isAllView(location.pathname);
const isInHomeView = isHomeView(location.pathname, params);
const isInSubplebbitView = isSubplebbitView(location.pathname, params);
const homeButtonClass = isInHomeView ? styles.selected : styles.choice;
- const selectedTimeFilterName = params.timeFilterName || (isInHomeView ? timeFilterNames[2] : timeFilterNames[5]);
+ const sortType = params?.sortType || 'hot';
+ const { timeFilterNames } = useTimeFilter();
+ const timeFilterName = params.timeFilterName as TimeFilterKey;
+ const { currentFilterName } = useTimeFilter(sortType, timeFilterName);
+ const selectedTimeFilter = isInSubplebbitView ? params.timeFilterName || 'all' : currentFilterName;
const [isSubsDropdownOpen, setIsSubsDropdownOpen] = useState(false);
const toggleSubsDropdown = () => setIsSubsDropdownOpen(!isSubsDropdownOpen);
@@ -133,7 +136,7 @@ const TopBar = () => {
-
{selectedTimeFilterName}
+
{selectedTimeFilter}
{timeFilterNames.map((choice, index) => (
diff --git a/src/hooks/use-time-filter.ts b/src/hooks/use-time-filter.ts
index d02e1912..8eb4a9e4 100644
--- a/src/hooks/use-time-filter.ts
+++ b/src/hooks/use-time-filter.ts
@@ -1,10 +1,16 @@
import assert from 'assert';
import { Comment } from '@plebbit/plebbit-react-hooks';
+// Type Definitions
type TimeFilter = (comment: Comment) => boolean;
export type TimeFilterKey = '1h' | '24h' | '1w' | '1m' | '1y' | 'all';
-type TimeFilters = { [key in TimeFilterKey]: TimeFilter | undefined };
+export const timeFilterNames: TimeFilterKey[] = ['1h', '24h', '1w', '1m', '1y', 'all'];
+interface TimeFilters {
+ [key: string]: TimeFilter | undefined;
+}
+
+// Time Filters
const timeFilters: TimeFilters = {
'1h': (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60,
'24h': (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 24,
@@ -14,7 +20,16 @@ const timeFilters: TimeFilters = {
all: undefined,
};
-const lastVisitTimestamp = Number(localStorage.getItem('seeditLastVisitTimestamp')) || Date.now();
+// Last Visit Timestamp
+const lastVisitTimestampString = localStorage.getItem('plebonesLastVisitTimestamp');
+const lastVisitTimestamp = lastVisitTimestampString ? Number(lastVisitTimestampString) : Date.now();
+
+// Update the last visited timestamp every n seconds
+setInterval(() => {
+ localStorage.setItem('plebonesLastVisitTimestamp', Date.now().toString());
+}, 60 * 1000);
+
+// Calculate the Last Visit Filter
const secondsSinceLastVisit = (Date.now() - lastVisitTimestamp) / 1000;
const day = 24 * 60 * 60;
let lastVisitTimeFilterName: TimeFilterKey = '24h';
@@ -26,19 +41,25 @@ if (secondsSinceLastVisit > 30 * day) {
} else if (secondsSinceLastVisit > day) {
lastVisitTimeFilterName = '24h';
} else {
- lastVisitTimeFilterName = '1h';
+ lastVisitTimeFilterName = '24h';
}
-export const timeFilterNames: TimeFilterKey[] = ['1h', '24h', '1w', '1m', '1y', 'all'];
+// useTimeFilter Function
+const useTimeFilter = (
+ sortType?: string,
+ timeFilterName: TimeFilterKey = lastVisitTimeFilterName,
+): { timeFilter: TimeFilter | undefined; timeFilterNames: TimeFilterKey[]; currentFilterName: TimeFilterKey } => {
+ // Default to the last visit time filter if no time filter name is provided
+ if (!timeFilterName) {
+ timeFilterName = lastVisitTimeFilterName;
+ }
-const useTimeFilter = (sortType: string = 'hot', timeFilterName: TimeFilterKey = lastVisitTimeFilterName) => {
- assert(typeof sortType === 'string', `useTimeFilter sortType argument '${sortType}' not a string`);
+ assert(!sortType || typeof sortType === 'string', `useTimeFilter sortType argument '${sortType}' not a string`);
assert(typeof timeFilterName === 'string', `useTimeFilter timeFilterName argument '${timeFilterName}' not a string`);
-
const timeFilter = timeFilters[timeFilterName];
assert(timeFilterName === 'all' || timeFilter !== undefined, `useTimeFilter no filter for timeFilterName '${timeFilterName}'`);
- return { timeFilter, timeFilterNames };
+ return { timeFilter, timeFilterNames, currentFilterName: timeFilterName };
};
export default useTimeFilter;
diff --git a/src/views/all/all.tsx b/src/views/all/all.tsx
index 4a0ecf70..de59cf9f 100644
--- a/src/views/all/all.tsx
+++ b/src/views/all/all.tsx
@@ -17,7 +17,7 @@ const All = () => {
const subplebbitAddresses = useDefaultSubplebbitAddresses();
const params = useParams<{ sortType?: string; timeFilterName?: string }>();
const sortType = params?.sortType || 'hot';
- const timeFilterName = (params.timeFilterName as TimeFilterKey) || 'all';
+ const timeFilterName = params.timeFilterName as TimeFilterKey;
const { timeFilter } = useTimeFilter(sortType, timeFilterName);
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType, filter: timeFilter });
const { t } = useTranslation();
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 388f7f14..2f0ff819 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -27,7 +27,7 @@ const Home = () => {
const params = useParams<{ sortType?: string; timeFilterName?: string }>();
const sortType = params?.sortType || 'hot';
- const timeFilterName = (params.timeFilterName as TimeFilterKey) || '1w';
+ const timeFilterName = params.timeFilterName as TimeFilterKey;
const { timeFilter } = useTimeFilter(sortType, timeFilterName);
const { feed, hasMore, loadMore } = useFeed({