diff --git a/package.json b/package.json index b7319e8..c615cba 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@capacitor/app": "1.1.1", "@floating-ui/react": "0.24.8", "@plebbit/plebbit-logger": "https://github.com/plebbit/plebbit-logger.git", - "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#8293c15b666b6b57128d750410f3f6060dfdc6d4", + "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#6b614e0bf6c304de7b184564198a0ce7b98bca1d", "electron-context-menu": "3.3.0", "electron-is-dev": "2.0.0", "ext-name": "5.0.0", diff --git a/src/hooks/use-time-filter.js b/src/hooks/use-time-filter.js index 9b5e7ad..7a815e5 100644 --- a/src/hooks/use-time-filter.js +++ b/src/hooks/use-time-filter.js @@ -1,72 +1,60 @@ import assert from 'assert' +import {useParams} from 'react-router-dom' // the timestamp the last time the user visited const lastVisitTimestamp = localStorage.getItem('plebonesLastVisitTimestamp') -// TODO: remove debug, test setting some older date in console -// localStorage.setItem('plebonesLastVisitTimestamp', Date.now() - 20 * 24 * 60 * 60 * 1000) -console.log('lastVisitTimestamp', lastVisitTimestamp, ((Date.now() - lastVisitTimestamp) / (60 * 60 * 1000)).toFixed(2) + ' hours ago') - // update the last visited timestamp every n seconds setInterval(() => { localStorage.setItem('plebonesLastVisitTimestamp', Date.now()) }, 60 * 1000) -const timeFilters = { - '1h': (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60, - '12h': (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 12, - '24h': (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 24, - '48h': (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 24 * 2, - week: (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 24 * 7, - month: (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 24 * 30, - year: (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 24 * 365, - '1h-active': (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60, - '12h-active': (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60 * 12, - '24h-active': (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60 * 24, - '48h-active': (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60 * 24 * 2, - 'week-active': (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60 * 24 * 7, - 'month-active': (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60 * 24 * 30, - 'year-active': (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60 * 24 * 365, +const timeFilterNamesToSeconds = { + '1h': 60 * 60, + '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, all: undefined, } -// calculate the last visit filter +// calculate the last visit timeFilterNamesToSeconds const secondsSinceLastVisit = lastVisitTimestamp ? (Date.now() - lastVisitTimestamp) / 1000 : Infinity const day = 24 * 60 * 60 let lastVisitTimeFilterName if (secondsSinceLastVisit > 30 * day) { lastVisitTimeFilterName = 'month' - timeFilters[lastVisitTimeFilterName] = timeFilters['month'] - timeFilters[`${lastVisitTimeFilterName}-active`] = timeFilters['month-active'] + timeFilterNamesToSeconds[lastVisitTimeFilterName] = timeFilterNamesToSeconds['month'] } else if (secondsSinceLastVisit > 7 * day) { const weeks = Math.ceil(secondsSinceLastVisit / day / 7) lastVisitTimeFilterName = `${weeks}w` - timeFilters[lastVisitTimeFilterName] = (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 24 * 7 * weeks - timeFilters[`${lastVisitTimeFilterName}-active`] = (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60 * 24 * 7 * weeks + timeFilterNamesToSeconds[lastVisitTimeFilterName] = 60 * 60 * 24 * 7 * weeks } else if (secondsSinceLastVisit > day) { const days = Math.ceil(secondsSinceLastVisit / day) lastVisitTimeFilterName = `${days}d` - timeFilters[lastVisitTimeFilterName] = (comment) => comment.timestamp > Date.now() / 1000 - 60 * 60 * 24 * days - timeFilters[`${lastVisitTimeFilterName}-active`] = (comment) => (comment.lastReplyTimestamp || comment.timestamp) > Date.now() / 1000 - 60 * 60 * 24 * days + timeFilterNamesToSeconds[lastVisitTimeFilterName] = 60 * 60 * 24 * days } else { lastVisitTimeFilterName = '24h' - timeFilters[lastVisitTimeFilterName] = timeFilters['24h'] - timeFilters[`${lastVisitTimeFilterName}-active`] = timeFilters['24h-active'] + timeFilterNamesToSeconds[lastVisitTimeFilterName] = timeFilterNamesToSeconds['24h'] } const timeFilterNames = [lastVisitTimeFilterName, '1h', '12h', '24h', '48h', 'week', 'month', 'year', 'all'] -const useTimeFilter = (sortType, timeFilterName) => { +const useTimeFilter = () => { + const params = useParams() + let timeFilterName = params.timeFilterName + // the default time filter is the last visit time filter if (!timeFilterName) { timeFilterName = lastVisitTimeFilterName } - assert(!sortType || typeof sortType === 'string', `useTimeFilter sortType argument '${sortType}' not a string`) assert(!timeFilterName || typeof timeFilterName === 'string', `useTimeFilter timeFilterName argument '${timeFilterName}' not a string`) - const timeFilter = sortType === 'active' ? timeFilters[timeFilterName + '-active'] : timeFilters[timeFilterName] - assert(!timeFilterName || timeFilterName === 'all' || timeFilter !== undefined, `useTimeFilter no filter for timeFilterName '${timeFilterName}'`) - return {timeFilter, timeFilterNames} + const timeFilterSeconds = timeFilterNamesToSeconds[timeFilterName] + assert(!timeFilterName || timeFilterName === 'all' || timeFilterSeconds !== undefined, `useTimeFilter no filter for timeFilterName '${timeFilterName}'`) + return {timeFilterSeconds, timeFilterNames} } export default useTimeFilter diff --git a/src/views/catalog/catalog.jsx b/src/views/catalog/catalog.jsx index 647e706..f0c9270 100644 --- a/src/views/catalog/catalog.jsx +++ b/src/views/catalog/catalog.jsx @@ -7,6 +7,7 @@ import {useParams} from 'react-router-dom' import utils from '../../lib/utils' import CatalogRow from '../../components/catalog-row' import useFeedStateString from '../../hooks/use-feed-state-string' +import useTimeFilter from '../../hooks/use-time-filter' const useFeedRows = (feed, columnCount) => { const rowsRef = useRef() @@ -39,10 +40,11 @@ function Catalog() { const params = useParams() const subplebbitAddresses = useDefaultSubplebbitAddresses() const sortType = params?.sortType || 'active' + const {timeFilterSeconds} = useTimeFilter() // postPerPage based on columnCount for optimized feed, dont change value after first render // eslint-disable-next-line const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []) - const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage, filter: utils.catalogFilter}) + const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage, filter: utils.catalogFilter, newerThan: timeFilterSeconds}) const loadingStateString = useFeedStateString(subplebbitAddresses) || 'loading...' // split feed into rows diff --git a/src/views/home/home.jsx b/src/views/home/home.jsx index 6eff418..3225eed 100644 --- a/src/views/home/home.jsx +++ b/src/views/home/home.jsx @@ -15,9 +15,8 @@ function Home() { const params = useParams() const subplebbitAddresses = useDefaultSubplebbitAddresses() const sortType = params?.sortType || 'hot' - const timeFilterName = params.timeFilterName - const {timeFilter} = useTimeFilter(sortType, timeFilterName) - const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage: 10, filter: timeFilter}) + const {timeFilterSeconds} = useTimeFilter() + const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage: 10, newerThan: timeFilterSeconds}) const loadingStateString = useFeedStateString(subplebbitAddresses) || 'loading...' let Footer @@ -35,14 +34,14 @@ function Home() { virtuosoRef.current?.getState((snapshot) => { // TODO: not sure if checking for empty snapshot.ranges works for all scenarios if (snapshot?.ranges?.length) { - lastVirtuosoStates[sortType + timeFilterName] = snapshot + lastVirtuosoStates[sortType + timeFilterSeconds] = snapshot } }) window.addEventListener('scroll', setLastVirtuosoState) // clean listener on unmount return () => window.removeEventListener('scroll', setLastVirtuosoState) - }, [sortType, timeFilterName]) - const lastVirtuosoState = lastVirtuosoStates?.[sortType + timeFilterName] + }, [sortType, timeFilterSeconds]) + const lastVirtuosoState = lastVirtuosoStates?.[sortType + timeFilterSeconds] return (
diff --git a/src/views/subplebbit-catalog/subplebbit-catalog.jsx b/src/views/subplebbit-catalog/subplebbit-catalog.jsx index 1b21fb3..adb2d69 100644 --- a/src/views/subplebbit-catalog/subplebbit-catalog.jsx +++ b/src/views/subplebbit-catalog/subplebbit-catalog.jsx @@ -6,6 +6,7 @@ import {useParams} from 'react-router-dom' import utils from '../../lib/utils' import CatalogRow from '../../components/catalog-row' import useFeedStateString from '../../hooks/use-feed-state-string' +import useTimeFilter from '../../hooks/use-time-filter' const useFeedRows = (feed, columnCount) => { const rowsRef = useRef() @@ -40,10 +41,11 @@ function Catalog() { const subplebbitAddress = params.subplebbitAddress const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) const sortType = params?.sortType || 'active' + const {timeFilterSeconds} = useTimeFilter() // postPerPage based on columnCount for optimized feed, dont change value after first render // eslint-disable-next-line const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []) - const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage, filter: utils.catalogFilter}) + const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage, filter: utils.catalogFilter, newerThan: timeFilterSeconds}) const loadingStateString = useFeedStateString(subplebbitAddresses) || 'loading...' // split feed into rows diff --git a/src/views/subplebbit/subplebbit.jsx b/src/views/subplebbit/subplebbit.jsx index 0e5455e..66f5725 100644 --- a/src/views/subplebbit/subplebbit.jsx +++ b/src/views/subplebbit/subplebbit.jsx @@ -6,6 +6,7 @@ import {useParams} from 'react-router-dom' import styles from './subplebbit.module.css' import {Link} from 'react-router-dom' import useFeedStateString from '../../hooks/use-feed-state-string' +import useTimeFilter from '../../hooks/use-time-filter' const SubplebbitInfo = ({subplebbitAddress}) => { const subplebbit = useSubplebbit({subplebbitAddress}) @@ -60,7 +61,8 @@ function Subplebbit() { const subplebbitAddress = params.subplebbitAddress const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) const sortType = params?.sortType || 'hot' - const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType}) + const {timeFilterSeconds} = useTimeFilter() + const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, newerThan: timeFilterSeconds}) const loadingStateString = useFeedStateString(subplebbitAddresses) || 'loading...' let Footer diff --git a/src/views/subscriptions-catalog/subscriptions-catalog.jsx b/src/views/subscriptions-catalog/subscriptions-catalog.jsx index b2d066b..0ffd893 100644 --- a/src/views/subscriptions-catalog/subscriptions-catalog.jsx +++ b/src/views/subscriptions-catalog/subscriptions-catalog.jsx @@ -6,6 +6,7 @@ import {useParams} from 'react-router-dom' import utils from '../../lib/utils' import CatalogRow from '../../components/catalog-row' import useFeedStateString from '../../hooks/use-feed-state-string' +import useTimeFilter from '../../hooks/use-time-filter' const useFeedRows = (feed, columnCount) => { const rowsRef = useRef() @@ -40,10 +41,11 @@ function Catalog() { const account = useAccount() const subplebbitAddresses = account?.subscriptions const sortType = params?.sortType || 'active' + const {timeFilterSeconds} = useTimeFilter() // postPerPage based on columnCount for optimized feed, dont change value after first render // eslint-disable-next-line const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []) - const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage, filter: utils.catalogFilter}) + const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage, filter: utils.catalogFilter, newerThan: timeFilterSeconds}) const loadingStateString = useFeedStateString(subplebbitAddresses) || 'loading...' // split feed into rows diff --git a/src/views/subscriptions/subscriptions.jsx b/src/views/subscriptions/subscriptions.jsx index f91ca22..a0682f0 100644 --- a/src/views/subscriptions/subscriptions.jsx +++ b/src/views/subscriptions/subscriptions.jsx @@ -4,6 +4,7 @@ import {Virtuoso} from 'react-virtuoso' import FeedPost from '../../components/feed-post' import {useParams} from 'react-router-dom' import useFeedStateString from '../../hooks/use-feed-state-string' +import useTimeFilter from '../../hooks/use-time-filter' const lastVirtuosoStates = {} @@ -15,7 +16,8 @@ function Subscriptions() { const account = useAccount() const subplebbitAddresses = account?.subscriptions const sortType = params?.sortType || 'hot' - const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage: 10}) + const {timeFilterSeconds} = useTimeFilter() + const {feed, hasMore, loadMore} = useFeed({subplebbitAddresses, sortType, postsPerPage: 10, newerThan: timeFilterSeconds}) const loadingStateString = useFeedStateString(subplebbitAddresses) || 'loading...' let Footer diff --git a/yarn.lock b/yarn.lock index 01070b4..8ac293f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2764,9 +2764,9 @@ dependencies: debug "4.3.3" -"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#8293c15b666b6b57128d750410f3f6060dfdc6d4": +"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#6b614e0bf6c304de7b184564198a0ce7b98bca1d": version "0.0.1" - resolved "https://github.com/plebbit/plebbit-react-hooks.git#8293c15b666b6b57128d750410f3f6060dfdc6d4" + resolved "https://github.com/plebbit/plebbit-react-hooks.git#6b614e0bf6c304de7b184564198a0ce7b98bca1d" dependencies: "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#4a7ced7497fcbf863e9457b7e83a7bb2889bd518" "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"