chore: refactor GameManager component (#3)

Author: jsardev

src/modules/game/ui/GameBoard/hooks.tsx

@@ -23,7 +23,7 @@ const useFocusFirstCardOnMount = () => {
   }, [allCardsRegistered, cardRefs])
 }
 
-const useFocusNextCardOnSelectCard = () => {
+const useFocusNextCardOnCardSelect = () => {
   const cardRefs = useCardRefs()
   const selectedCards = useSelectedCards()
   const allCardsRegistered = useAllCardsRegistered()
@@ -48,7 +48,7 @@ export const useGameBoard = () => {
   const { selectCard } = useGameActions()
 
   useFocusFirstCardOnMount()
-  useFocusNextCardOnSelectCard()
+  useFocusNextCardOnCardSelect()
 
   return {
     cards,

src/modules/game/ui/GameBoardCard/hooks.tsx

@@ -1,24 +1,25 @@
-import { RefObject, useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 import { GameBoardCardProps } from './GameBoardCard'
 import { useGameActions } from '../..'
 
 type UseGameBoardCardProps = Pick<GameBoardCardProps, 'card' | 'onClick'>
 
-const useRegisterGameCardOnMount = (ref: RefObject<HTMLElement>) => {
+const useRegisterGameCardOnMount = () => {
+  const ref = useRef(null)
   const { registerCardRef } = useGameActions()
 
   useEffect(() => {
     if (ref.current) {
       return registerCardRef(ref.current)
     }
-  }, [ref, registerCardRef])
+  }, [registerCardRef])
+
+  return ref
 }
 
 export const useGameBoardCard = ({ card, onClick }: UseGameBoardCardProps) => {
-  const ref = useRef<HTMLButtonElement>(null)
-
-  useRegisterGameCardOnMount(ref)
+  const ref = useRegisterGameCardOnMount()
 
   const handleClick = useCallback(() => {
     onClick(card)

src/modules/game/ui/GameManager/GameManager.tsx

@@ -0,0 +1,7 @@
+import { useGameManager } from './hooks'
+
+export const GameManager = () => {
+  useGameManager()
+
+  return null
+}

src/modules/game/ui/GameManager.tsx renamed to src/modules/game/ui/GameManager/hooks.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
-import { useGameActions, listenForAllCardsCollected } from '..'
+import { listenForAllCardsCollected, useGameActions } from '../..'
 
-export const GameManager = () => {
+export const useGameManager = () => {
   const navigate = useNavigate()
   const { endGame } = useGameActions()
 
@@ -15,6 +15,4 @@ export const GameManager = () => {
       }
     })
   }, [navigate, endGame])
-
-  return null
 }

src/modules/game/ui/GameManager/index.ts

@@ -0,0 +1 @@
+export * from './GameManager'

src/modules/game/ui/GameNextTurnButton/GameNextTurnButton.tsx

@@ -1,24 +1,21 @@
 import clsx from 'clsx'
-import { useRef } from 'react'
 
 import { useGameActions, useTurn } from '@/modules/game'
 import { Button } from '@/shared/ui/Button'
 
-import { useFocusButtonOnTurnEnd } from './hooks'
+import { useFocusElementOnTurnEnd } from './hooks'
 
 type GameNextTurnButtonProps = {
   className?: string
 }
 
 export const GameNextTurnButton = ({ className }: GameNextTurnButtonProps) => {
-  const ref = useRef<HTMLButtonElement>(null)
   const { isFinished } = useTurn()
   const { endTurn } = useGameActions()
+  const ref = useFocusElementOnTurnEnd<HTMLButtonElement>()
 
   const icon = isFinished ? 'i-lucide-play' : 'i-lucide-hourglass'
 
-  useFocusButtonOnTurnEnd(ref)
-
   return (
     <Button
       ref={ref}

src/modules/game/ui/GameNextTurnButton/hooks.ts

@@ -1,13 +1,16 @@
-import { RefObject, useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { useTurn } from '../..'
 
-export const useFocusButtonOnTurnEnd = (ref: RefObject<HTMLElement>) => {
+export const useFocusElementOnTurnEnd = <T extends HTMLElement>() => {
+  const ref = useRef<T>(null)
   const { isFinished } = useTurn()
 
   useEffect(() => {
     if (isFinished) {
       ref.current?.focus()
     }
   }, [isFinished, ref])
+
+  return ref
 }

src/pages/GamePage.tsx

@@ -1,9 +1,9 @@
 import {
   GameBoard,
-  GameManager,
   GameOverlay,
   GameNextTurnButton,
   useAreCardsLoading,
+  GameManager,
 } from '@/modules/game'
 import { Loader } from '@/shared/ui/Loader'
 

src/shared/ui/BoardCard/hooks.tsx

@@ -12,7 +12,9 @@ export const useBoardCard = (forwardedRef: ForwardedRef<HTMLButtonElement>) => {
     if (ref.current) {
       return registerCardElement(ref.current)
     }
-  }, [ref, registerCardElement])
+    // ref does not need to be in the dependency array as it's a RefObject
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [registerCardElement])
 
   return { ref }
 }