fix: leaderboard duplicate hover popup

Author: kevinjosethomas

src/components/Leaderboard/LeaderboardContext.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+interface LeaderboardContextType {
+  activePopup: string | null
+  setActivePopup: (entryKey: string | null) => void
+}
+
+const LeaderboardContext = createContext<LeaderboardContextType | undefined>(
+  undefined,
+)
+
+export const useLeaderboardContext = () => {
+  const context = useContext(LeaderboardContext)
+  if (!context) {
+    throw new Error(
+      'useLeaderboardContext must be used within a LeaderboardProvider',
+    )
+  }
+  return context
+}
+
+interface LeaderboardProviderProps {
+  children: ReactNode
+}
+
+export const LeaderboardProvider: React.FC<LeaderboardProviderProps> = ({
+  children,
+}) => {
+  const [activePopup, setActivePopup] = useState<string | null>(null)
+
+  return (
+    <LeaderboardContext.Provider value={{ activePopup, setActivePopup }}>
+      {children}
+    </LeaderboardContext.Provider>
+  )
+}

src/components/Leaderboard/LeaderboardEntry.tsx

@@ -1,8 +1,9 @@
 import Link from 'next/link'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { PlayerStats } from 'src/types'
 import { getPlayerStats } from 'src/api'
+import { useLeaderboardContext } from './LeaderboardContext'
 
 interface Props {
   index: number
@@ -20,8 +21,12 @@ export const LeaderboardEntry = ({
   elo,
 }: Props) => {
   const [hover, setHover] = useState(false)
-  const [popup, setPopup] = useState(false)
   const [stats, setStats] = useState<PlayerStats | null>(null)
+  const shouldShowPopupRef = useRef(false)
+  const { activePopup, setActivePopup } = useLeaderboardContext()
+
+  const entryKey = `${typeId}-${display_name}-${index}`
+  const isPopupVisible = activePopup === entryKey
 
   let ratingKey:
     | 'regularRating'
@@ -88,28 +93,38 @@ export const LeaderboardEntry = ({
       break
   }
 
+  const fetchStats = useCallback(async () => {
+    try {
+      const playerStats = await getPlayerStats(display_name)
+      setStats(playerStats)
+      // Only show popup if we're still supposed to (user still hovering)
+      if (shouldShowPopupRef.current && hover) {
+        setActivePopup(entryKey)
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }, [display_name, hover, entryKey, setActivePopup])
+
   useEffect(() => {
     let timer: NodeJS.Timeout
     if (hover) {
+      shouldShowPopupRef.current = true
       timer = setTimeout(() => {
         fetchStats()
       }, 500)
     } else {
-      setPopup(false)
+      shouldShowPopupRef.current = false
+      setActivePopup(null)
     }
 
-    return () => clearTimeout(timer)
-  }, [hover])
-
-  const fetchStats = async () => {
-    try {
-      const playerStats = await getPlayerStats(display_name)
-      setStats(playerStats)
-      setPopup(true)
-    } catch (error) {
-      console.error(error)
+    return () => {
+      clearTimeout(timer)
+      if (!hover) {
+        shouldShowPopupRef.current = false
+      }
     }
-  }
+  }, [hover, setActivePopup, entryKey, fetchStats])
 
   return (
     <div
@@ -129,7 +144,7 @@ export const LeaderboardEntry = ({
         </Link>
       </div>
       <p>{elo}</p>
-      {popup && stats && (
+      {isPopupVisible && stats && (
         <div className="absolute left-0 top-[100%] z-20 flex w-full max-w-[26rem] flex-col overflow-hidden rounded border border-white/10 bg-background-1">
           <div className="flex w-full justify-between bg-backdrop/50 px-4 py-2">
             <p>

src/components/Leaderboard/index.ts

@@ -1,2 +1,3 @@
 export * from './LeaderboardEntry'
 export * from './LeaderboardColumn'
+export * from './LeaderboardContext'

src/pages/leaderboard.tsx

@@ -10,6 +10,7 @@ import {
 } from 'src/components/Icons/icons'
 import { getLeaderboard } from 'src/api'
 import { LeaderboardColumn } from 'src/components'
+import { LeaderboardProvider } from 'src/components/Leaderboard/LeaderboardContext'
 
 const Leaderboard: React.FC = () => {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
@@ -63,36 +64,38 @@ const Leaderboard: React.FC = () => {
   }, [fetchLeaderboard])
 
   return (
-    <div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-8 py-[2%]">
-      <Head>
-        <title>Leaderboard – Maia Chess</title>
-        <meta
-          name="description"
-          content="Top users across all Maia Chess leaderboards"
-        />
-      </Head>
-      <div className="flex flex-col">
-        <h1 className="text-4xl font-bold">Rating Leaderboards</h1>
-        <p>
-          Last Updated:{' '}
-          {lastUpdated
-            ? lastUpdated.toLocaleString(undefined, {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: true,
-              })
-            : '...'}
-        </p>
+    <LeaderboardProvider>
+      <div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-8 py-[2%]">
+        <Head>
+          <title>Leaderboard – Maia Chess</title>
+          <meta
+            name="description"
+            content="Top users across all Maia Chess leaderboards"
+          />
+        </Head>
+        <div className="flex flex-col">
+          <h1 className="text-4xl font-bold">Rating Leaderboards</h1>
+          <p>
+            Last Updated:{' '}
+            {lastUpdated
+              ? lastUpdated.toLocaleString(undefined, {
+                  year: 'numeric',
+                  month: 'short',
+                  day: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  hour12: true,
+                })
+              : '...'}
+          </p>
+        </div>
+        <div className="grid h-full w-full grid-cols-1 justify-start gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {leaderboard?.map((column, index) => (
+            <LeaderboardColumn key={index} {...column} />
+          ))}
+        </div>
       </div>
-      <div className="grid h-full w-full grid-cols-1 justify-start gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {leaderboard?.map((column, index) => (
-          <LeaderboardColumn key={index} {...column} />
-        ))}
-      </div>
-    </div>
+    </LeaderboardProvider>
   )
 }