fix react-hooks/exhaustive-deps warnings

src/components/discover/Roulette.tsx

@@ -95,21 +95,21 @@ function RouletteModal({
 
   const pick = pool[pickIndex % Math.max(1, pool.length)] || null
 
-  function spin() {
+  const spin = useCallback(() => {
     if (pool.length < 2) return
     let next = pickIndex
     // Avoid landing on the same pick consecutively.
     while (next === pickIndex) next = Math.floor(Math.random() * pool.length)
     setPickIndex(next)
     setSpinNonce(n => n + 1)
-  }
+  }, [pool.length, pickIndex])
 
-  function open() {
+  const open = useCallback(() => {
     if (!pick) return
     const mediaType = pick.media_type === 'tv' || pick.first_air_date ? 'tv' : 'movie'
     navigate(`/item/tmdb-${mediaType}-${pick.id}`)
     onClose()
-  }
+  }, [pick, navigate, onClose])
 
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
@@ -121,8 +121,7 @@ function RouletteModal({
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pickIndex, pool.length])
+  }, [pickIndex, pool.length, onClose, spin])
 
   const title = pick?.title || pick?.name || ''
   const year = (pick?.release_date || pick?.first_air_date || '').slice(0, 4)