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({