From e362a2b4f6634ea7f94705b8a1ea242d83b4300b Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
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: {
         <ContractsGrid
           contracts={hitsByPage[0] === undefined ? undefined : contracts}
           loadMore={loadMore}
-          hasMore={true}
           showTime={showTime}
           onContractClick={onContractClick}
           overrideGridClassName={overrideGridClassName}
diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx
index 31a564d3..77269ea3 100644
--- a/web/components/contract/contracts-grid.tsx
+++ b/web/components/contract/contracts-grid.tsx
@@ -5,10 +5,10 @@ import { SiteLink } from '../site-link'
 import { ContractCard } from './contract-card'
 import { ShowTime } from './contract-details'
 import { ContractSearch } from '../contract-search'
-import { useIsVisible } from 'web/hooks/use-is-visible'
-import { useEffect, useState } from 'react'
+import { useCallback } from 'react'
 import clsx from 'clsx'
 import { LoadingIndicator } from '../loading-indicator'
+import { VisibilityObserver } from '../visibility-observer'
 
 export type ContractHighlightOptions = {
   contractIds?: string[]
@@ -17,8 +17,7 @@ export type ContractHighlightOptions = {
 
 export function ContractsGrid(props: {
   contracts: Contract[] | undefined
-  loadMore: () => 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<HTMLElement | null>(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 <LoadingIndicator />
@@ -92,7 +89,10 @@ export function ContractsGrid(props: {
           />
         ))}
       </ul>
-      <div ref={setElem} className="relative -top-96 h-1" />
+      <VisibilityObserver
+        onVisibilityUpdated={onVisibilityUpdated}
+        className="relative -top-96 h-1"
+      />
     </Col>
   )
 }
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<HTMLElement | null>(null)
-  useSaveSeenContract(elem, contract)
+  const onVisibilityUpdated = useCallback(
+    (visible) => {
+      if (visible && user) {
+        pushSeenContract(contract.id)
+        trackView(user.id, contract.id)
+      }
+    },
+    [contract.id, user]
+  )
 
   return (
-    <div className={clsx('flow-root', className)} ref={setElem}>
+    <div className={clsx('flow-root', className)}>
+      <VisibilityObserver onVisibilityUpdated={onVisibilityUpdated} />
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
         {items.map((item, activityItemIdx) => (
           <div key={item.id} className={'relative pb-4'}>
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[] }) {
         <SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
         Trending markets
       </Row>
-      <ContractsGrid
-        contracts={hotContracts?.slice(0, 10) || []}
-        loadMore={() => {}}
-        hasMore={false}
-      />
+      <ContractsGrid contracts={hotContracts?.slice(0, 10) || []} />
     </>
   )
 }
diff --git a/web/components/visibility-observer.tsx b/web/components/visibility-observer.tsx
new file mode 100644
index 00000000..ba459ef7
--- /dev/null
+++ b/web/components/visibility-observer.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+
+export function VisibilityObserver(props: {
+  className?: string
+  onVisibilityUpdated: (visible: boolean) => void
+}) {
+  const { className, onVisibilityUpdated } = props
+  const [elem, setElem] = useState<HTMLElement | null>(null)
+
+  useEffect(() => {
+    const hasIOSupport = !!window.IntersectionObserver
+    if (!hasIOSupport || !elem) return
+
+    const observer = new IntersectionObserver(([entry]) => {
+      onVisibilityUpdated(entry.isIntersecting)
+    }, {})
+    observer.observe(elem)
+    return () => observer.disconnect()
+  }, [elem, onVisibilityUpdated])
+
+  return <div ref={setElem} className={className}></div>
+}
diff --git a/web/hooks/use-is-visible.ts b/web/hooks/use-is-visible.ts
deleted file mode 100644
index a3e2c1fa..00000000
--- a/web/hooks/use-is-visible.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export function useIsVisible(element: HTMLElement | null) {
-  return !!useIntersectionObserver(element)?.isIntersecting
-}
-
-function useIntersectionObserver(
-  elem: HTMLElement | null
-): IntersectionObserverEntry | undefined {
-  const [entry, setEntry] = useState<IntersectionObserverEntry>()
-
-  const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
-    setEntry(entry)
-  }
-
-  useEffect(() => {
-    const hasIOSupport = !!window.IntersectionObserver
-
-    if (!hasIOSupport || !elem) return
-
-    const observer = new IntersectionObserver(updateEntry, {})
-    observer.observe(elem)
-
-    return () => observer.disconnect()
-  }, [elem])
-
-  return entry
-}
diff --git a/web/hooks/use-seen-contracts.ts b/web/hooks/use-seen-contracts.ts
deleted file mode 100644
index d21ca84c..00000000
--- a/web/hooks/use-seen-contracts.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { mapValues } from 'lodash'
-import { useEffect, useState } from 'react'
-import { Contract } from 'common/contract'
-import { trackView } from 'web/lib/firebase/tracking'
-import { useIsVisible } from './use-is-visible'
-import { useUser } from './use-user'
-
-export const useSeenContracts = () => {
-  const [seenContracts, setSeenContracts] = useState<{
-    [contractId: string]: number
-  }>({})
-
-  useEffect(() => {
-    setSeenContracts(getSeenContracts())
-  }, [])
-
-  return seenContracts
-}
-
-export const useSaveSeenContract = (
-  elem: HTMLElement | null,
-  contract: Contract
-) => {
-  const isVisible = useIsVisible(elem)
-  const user = useUser()
-
-  useEffect(() => {
-    if (isVisible && user) {
-      const newSeenContracts = {
-        ...getSeenContracts(),
-        [contract.id]: Date.now(),
-      }
-      localStorage.setItem(key, JSON.stringify(newSeenContracts))
-
-      trackView(user.id, contract.id)
-    }
-  }, [isVisible, user, contract])
-}
-
-const key = 'feed-seen-contracts'
-
-const getSeenContracts = () => {
-  return mapValues(
-    JSON.parse(localStorage.getItem(key) ?? '{}'),
-    (time) => +time
-  )
-}
diff --git a/web/lib/firebase/seen-contracts.ts b/web/lib/firebase/seen-contracts.ts
new file mode 100644
index 00000000..f16e5fb5
--- /dev/null
+++ b/web/lib/firebase/seen-contracts.ts
@@ -0,0 +1,22 @@
+import { mapValues } from 'lodash'
+
+const key = 'feed-seen-contracts'
+
+export const pushSeenContract = (contractId: string) => {
+  const newSeenContracts = {
+    ...getSeenContracts(),
+    [contractId]: Date.now(),
+  }
+  setSeenContracts(newSeenContracts)
+}
+
+export const setSeenContracts = (timestampsById: { [k: string]: number }) => {
+  localStorage.setItem(key, JSON.stringify(timestampsById))
+}
+
+export const getSeenContracts = () => {
+  return mapValues(
+    JSON.parse(localStorage.getItem(key) ?? '{}'),
+    (time) => +time
+  )
+}
diff --git a/web/pages/contract-search-firestore.tsx b/web/pages/contract-search-firestore.tsx
index e2ca308c..fb05cf3a 100644
--- a/web/pages/contract-search-firestore.tsx
+++ b/web/pages/contract-search-firestore.tsx
@@ -110,12 +110,7 @@ export default function ContractSearchFirestore(props: {
           <option value="close-date">Closing soon</option>
         </select>
       </div>
-      <ContractsGrid
-        contracts={matches}
-        loadMore={() => {}}
-        hasMore={false}
-        showTime={showTime}
-      />
+      <ContractsGrid contracts={matches} showTime={showTime} />
     </div>
   )
 }