diff --git a/src/hooks/use-time-filter.ts b/src/hooks/use-time-filter.ts index 8ec5d709..ee10954d 100644 --- a/src/hooks/use-time-filter.ts +++ b/src/hooks/use-time-filter.ts @@ -14,9 +14,9 @@ const timeFilterNamesToSeconds: Record = { '12h': 60 * 60 * 12, '24h': 60 * 60 * 24, '48h': 60 * 60 * 24 * 2, - week: 60 * 60 * 24 * 7, - month: 60 * 60 * 24 * 30, - year: 60 * 60 * 24 * 365, + '1w': 60 * 60 * 24 * 7, + '1m': 60 * 60 * 24 * 30, + '1y': 60 * 60 * 24 * 365, all: undefined, }; @@ -25,8 +25,8 @@ const secondsSinceLastVisit = lastVisitTimestamp ? (Date.now() - parseInt(lastVi const day = 24 * 60 * 60; let lastVisitTimeFilterName: string | undefined; if (secondsSinceLastVisit > 30 * day) { - lastVisitTimeFilterName = 'month'; - timeFilterNamesToSeconds[lastVisitTimeFilterName] = timeFilterNamesToSeconds['month']; + lastVisitTimeFilterName = '1m'; + timeFilterNamesToSeconds[lastVisitTimeFilterName] = timeFilterNamesToSeconds['1m']; } else if (secondsSinceLastVisit > 7 * day) { const weeks = Math.ceil(secondsSinceLastVisit / day / 7); lastVisitTimeFilterName = `${weeks}w`; @@ -40,7 +40,7 @@ if (secondsSinceLastVisit > 30 * day) { timeFilterNamesToSeconds[lastVisitTimeFilterName] = timeFilterNamesToSeconds['24h']; } -export const timeFilterNames = [lastVisitTimeFilterName, '1h', '12h', '24h', '48h', 'week', 'month', 'year', 'all']; +export const timeFilterNames = [lastVisitTimeFilterName, '1h', '12h', '24h', '48h', '1w', '1m', '1y', 'all']; const useTimeFilter = () => { const params = useParams(); diff --git a/src/views/board/board.module.css b/src/views/board/board.module.css index fedc2cb0..b7a74231 100644 --- a/src/views/board/board.module.css +++ b/src/views/board/board.module.css @@ -1,5 +1,14 @@ .footer { - padding-top: 10px; + padding: 15px 0 10px 5px; +} + +.footer a { + text-decoration: var(--button-text-decoration); + color: var(--button-desktop-text-color); +} + +.footer a:hover { + color: var(--button-desktop-text-color-hover); } .button { diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index 0d22f879..d2ee7ae5 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -1,8 +1,8 @@ -import { useEffect, useMemo, useRef } from 'react'; -import { useLocation, useParams } from 'react-router-dom'; +import { useEffect, useMemo, useRef, useState } from 'react'; +import { Link, useLocation, useParams } from 'react-router-dom'; import { Comment, useAccount, useAccountComments, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; -import { useTranslation } from 'react-i18next'; +import { Trans, useTranslation } from 'react-i18next'; import styles from './board.module.css'; import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; @@ -53,7 +53,7 @@ const Board = () => { }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions]); const { sortType } = useSortingStore(); - const { timeFilterSeconds } = useTimeFilter(); + const { timeFilterSeconds, timeFilterName } = useTimeFilter(); const feedOptions: any = useMemo( () => ({ @@ -66,7 +66,7 @@ const Board = () => { [subplebbitAddresses, sortType, timeFilterSeconds, isInAllView, isInSubscriptionsView, hideThreadsWithoutImages], ); - const { feed, hasMore, loadMore, reset } = useFeed(feedOptions); + const { feed, hasMore, loadMore, reset, subplebbitAddressesWithNewerPosts } = useFeed(feedOptions); const { accountComments } = useAccountComments(); const resetTriggeredRef = useRef(false); @@ -142,8 +142,89 @@ const Board = () => { ); + const handleNewerPostsButtonClick = () => { + window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); + setTimeout(() => { + reset(); + }, 300); + }; + + // suggest the user to change time filter if there aren't enough posts + const { feed: weeklyFeed } = useFeed({ + subplebbitAddresses, + sortType, + newerThan: 60 * 60 * 24 * 7, + filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined, + }); + const { feed: monthlyFeed } = useFeed({ + subplebbitAddresses, + sortType, + newerThan: 60 * 60 * 24 * 30, + filter: hideThreadsWithoutImages ? threadsWithoutImagesFilter : undefined, + }); + + const [showMorePostsSuggestion, setShowMorePostsSuggestion] = useState(false); + useEffect(() => { + const timer = setTimeout(() => { + setShowMorePostsSuggestion(true); + }, 5000); + + return () => clearTimeout(timer); + }, []); + + const params = useParams(); + const currentTimeFilterName = params?.timeFilterName || timeFilterName; + const Footer = () => { - return
{loadingString}
; + let footerContent; + if (feed.length === 0) { + footerContent = t('no_posts'); + } + if (hasMore || (subplebbitAddresses && subplebbitAddresses.length === 0)) { + footerContent = ( + <> + {subplebbitAddressesWithNewerPosts.length > 0 ? ( +
+ , + }} + /> +
+ ) : ( + (isInAllView || isInSubscriptionsView) && + showMorePostsSuggestion && + monthlyFeed.length > feed.length && + (weeklyFeed.length > feed.length ? ( +
+ , + }} + /> +
+ ) : ( +
+ , + }} + /> +
+ )) + )} +
+ +
+ + ); + } + return
{footerContent}
; }; // save the last Virtuoso state to restore it when navigating back