refactor: replace some of the hooks imported from react-use by react-…

…hookz

package.json

@@ -19,6 +19,7 @@
     "@microsoft/microsoft-graph-client": "3.0.7",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-tooltip": "1.0.7",
+    "@react-hookz/web": "23.1.0",
     "@zip.js/zip.js": "2.7.30",
     "clsx": "2.0.0",
     "date-fns": "2.30.0",

src/views/components/common/cloud-service-login-button.tsx

@@ -1,7 +1,8 @@
+import { useIntervalEffect } from '@react-hookz/web'
 import clsx from 'clsx'
 import mitt from 'mitt'
 import { useRef, useState } from 'react'
-import { useAsync, useAsyncFn, useInterval } from 'react-use'
+import { useAsync, useAsyncFn } from 'react-use'
 import { type CloudService, detectNeedsLogin, getAuthorizeUrl, getTokenStorageKey } from '../../../core'
 import { BaseButton } from '../primitives/base-button'
 import { ReturnToHomeButton } from './return-to-home-button'
@@ -37,7 +38,7 @@ export function CloudServiceLoginButton({
   const authorizeWindow = useRef<Window | null>(null)
   const [isAuthWindowOpening, setIsAuthWindowOpening] = useState(false)
 
-  useInterval(() => {
+  useIntervalEffect(() => {
     const newIsAuthWindowOpening = authorizeWindow.current ? !authorizeWindow.current?.closed : false
     setIsAuthWindowOpening(newIsAuthWindowOpening)
     if (isAuthWindowOpening && !newIsAuthWindowOpening) {

src/views/components/home-screen/index.tsx

@@ -1,7 +1,8 @@
+import { useMeasure } from '@react-hookz/web'
 import { useAtom, useAtomValue, useSetAtom, useStore } from 'jotai'
 import { some } from 'lodash-es'
 import { useEffect, useState } from 'react'
-import { useAsync, useAsyncRetry, useMeasure } from 'react-use'
+import { useAsync, useAsyncRetry } from 'react-use'
 import { getHistoryRoms, getSystemRoms, getSystems, peekHistoryRoms, peekSystemRoms, peekSystems } from '../../../core'
 import { isGameLaunchedAtom } from '../atoms'
 import { currentSystemNameAtom, romsAtom, systemsAtom } from './atoms'
@@ -58,9 +59,11 @@ export function HomeScreen() {
   const isGameLaunched = useAtomValue(isGameLaunchedAtom)
   const store = useStore()
   const [currentSystemName, setCurrentSystemName] = useAtom(currentSystemNameAtom)
-  const [gridContainerRef, { width: gridWidth, height: gridHeight }] = useMeasure<HTMLDivElement>()
+  const [measurements = { width: 0, height: 0 }, gridContainerRef] = useMeasure<HTMLDivElement>()
   const [isRetrying, setIsRetrying] = useState(false)
 
+  const { width: gridWidth, height: gridHeight } = measurements
+
   const columnCount = getColumnCount(gridWidth)
 
   // load systems from cache
@@ -155,7 +158,7 @@ export function HomeScreen() {
               rowHeight={columnWidth}
               width={gridWidth}
             />
-
+            <InputTips />
             <GameLaunching />
           </div>
         )}
@@ -166,7 +169,6 @@ export function HomeScreen() {
       {isGameLaunched ? (
         <>
           <GameMenus />
-          <InputTips />
           <VirtualController />
         </>
       ) : null}

src/views/components/home-screen/input-tips/index.tsx

@@ -1,8 +1,8 @@
+import { useEventListener } from '@react-hookz/web'
 import delay from 'delay'
 import { AnimatePresence, motion } from 'framer-motion'
 import $ from 'jquery'
 import { useRef, useState } from 'react'
-import { useEvent } from 'react-use'
 import { InputTipsContent } from './input-tips-content'
 
 async function hasIntersection(element1: HTMLElement, element2: HTMLElement) {
@@ -28,9 +28,10 @@ export function InputTips() {
   const [shouldMoveToLeft, setShouldMoveToLeft] = useState(false)
   const ref = useRef(null)
 
-  useEvent(
+  useEventListener(
+    document.body,
     'focus',
-    async (e) => {
+    async (e: FocusEvent) => {
       const button = e.target as HTMLButtonElement
       if (!button || !ref.current) {
         return
@@ -47,7 +48,6 @@ export function InputTips() {
         setShouldMoveToLeft(false)
       }
     },
-    document.body,
     { capture: true },
   )
 

src/views/components/setup-wizard/animated-icons.tsx

@@ -1,13 +1,13 @@
+import { useIntervalEffect } from '@react-hookz/web'
 import clsx from 'clsx'
 import delay from 'delay'
 import { useState } from 'react'
-import { useInterval } from 'react-use'
 
 export function AnimatedIcons({ wait = 0, children }: { wait?: number; children: any }) {
   const [frames, setFrames] = useState(0)
   const [enableAnimation, setEnableAnimation] = useState(true)
 
-  useInterval(async () => {
+  useIntervalEffect(async () => {
     if (wait) {
       await delay(wait)
     }