From e362a2b4f6634ea7f94705b8a1ea242d83b4300b Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Tue, 9 Aug 2022 00:25:43 -0700 Subject: [PATCH] Fix problems with visibility checking code --- web/components/contract-search.tsx | 1 - web/components/contract/contracts-grid.tsx | 30 +++++++------- web/components/feed/feed-items.tsx | 21 +++++++--- web/components/landing-page-panel.tsx | 6 +-- web/components/visibility-observer.tsx | 22 ++++++++++ web/hooks/use-is-visible.ts | 28 ------------- web/hooks/use-seen-contracts.ts | 47 ---------------------- web/lib/firebase/seen-contracts.ts | 22 ++++++++++ web/pages/contract-search-firestore.tsx | 7 +--- 9 files changed, 76 insertions(+), 108 deletions(-) create mode 100644 web/components/visibility-observer.tsx delete mode 100644 web/hooks/use-is-visible.ts delete mode 100644 web/hooks/use-seen-contracts.ts create mode 100644 web/lib/firebase/seen-contracts.ts diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx index 265b25c6..8bc1341f 100644 --- a/web/components/contract-search.tsx +++ b/web/components/contract-search.tsx @@ -345,7 +345,6 @@ export function ContractSearch(props: { void - hasMore: boolean + loadMore?: () => void showTime?: ShowTime onContractClick?: (contract: Contract) => void overrideGridClassName?: string @@ -31,7 +30,6 @@ export function ContractsGrid(props: { const { contracts, showTime, - hasMore, loadMore, onContractClick, overrideGridClassName, @@ -39,16 +37,15 @@ export function ContractsGrid(props: { highlightOptions, } = props const { hideQuickBet, hideGroupLink } = cardHideOptions || {} - const { contractIds, highlightClassName } = highlightOptions || {} - const [elem, setElem] = useState(null) - const isBottomVisible = useIsVisible(elem) - - useEffect(() => { - if (isBottomVisible && hasMore) { - loadMore() - } - }, [isBottomVisible, hasMore, loadMore]) + const onVisibilityUpdated = useCallback( + (visible) => { + if (visible && loadMore) { + loadMore() + } + }, + [loadMore] + ) if (contracts === undefined) { return @@ -92,7 +89,10 @@ export function ContractsGrid(props: { /> ))} -
+ ) } diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx index b1cd765c..b8018a1c 100644 --- a/web/components/feed/feed-items.tsx +++ b/web/components/feed/feed-items.tsx @@ -1,5 +1,5 @@ // From https://tailwindui.com/components/application-ui/lists/feeds -import React, { useState } from 'react' +import React, { useCallback } from 'react' import { BanIcon, CheckIcon, @@ -22,9 +22,9 @@ import { UserLink } from '../user-page' import BetRow from '../bet-row' import { Avatar } from '../avatar' import { ActivityItem } from './activity-items' -import { useSaveSeenContract } from 'web/hooks/use-seen-contracts' +import { pushSeenContract } from 'web/lib/firebase/seen-contracts' import { useUser } from 'web/hooks/use-user' -import { trackClick } from 'web/lib/firebase/tracking' +import { trackClick, trackView } from 'web/lib/firebase/tracking' import { DAY_MS } from 'common/util/time' import NewContractBadge from '../new-contract-badge' import { RelativeTimestamp } from '../relative-timestamp' @@ -39,6 +39,7 @@ import { FeedLiquidity } from './feed-liquidity' import { SignUpPrompt } from '../sign-up-prompt' import { User } from 'common/user' import { PlayMoneyDisclaimer } from '../play-money-disclaimer' +import { VisibilityObserver } from '../visibility-observer' export function FeedItems(props: { contract: Contract @@ -50,11 +51,19 @@ export function FeedItems(props: { const { contract, items, className, betRowClassName, user } = props const { outcomeType } = contract - const [elem, setElem] = useState(null) - useSaveSeenContract(elem, contract) + const onVisibilityUpdated = useCallback( + (visible) => { + if (visible && user) { + pushSeenContract(contract.id) + trackView(user.id, contract.id) + } + }, + [contract.id, user] + ) return ( -
+
+
{items.map((item, activityItemIdx) => (
diff --git a/web/components/landing-page-panel.tsx b/web/components/landing-page-panel.tsx index 4b436442..2e3d85e2 100644 --- a/web/components/landing-page-panel.tsx +++ b/web/components/landing-page-panel.tsx @@ -59,11 +59,7 @@ export function LandingPagePanel(props: { hotContracts: Contract[] }) {
- {}} - hasMore={false} - showTime={showTime} - /> +
) }