From 013de4af9521bbd985ee19bd9a8ec5e8ddc2abe0 Mon Sep 17 00:00:00 2001 From: Arianrhod Sandlot Date: Fri, 20 Oct 2023 21:09:59 +0800 Subject: [PATCH] refactor: replace some of the hooks imported from react-use by react-hookz --- package.json | 1 + pnpm-lock.yaml | 28 +++++++++++++++++-- .../common/cloud-service-login-button.tsx | 5 ++-- src/views/components/home-screen/index.tsx | 10 ++++--- .../home-screen/input-tips/index.tsx | 8 +++--- .../setup-wizard/animated-icons.tsx | 4 +-- 6 files changed, 41 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 7469803..ba912b5 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0da83d5..7c9a01e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ dependencies: '@radix-ui/react-tooltip': specifier: 1.0.7 version: 1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0) + '@react-hookz/web': + specifier: 23.1.0 + version: 23.1.0(react-dom@18.2.0)(react@18.2.0) '@zip.js/zip.js': specifier: 2.7.30 version: 2.7.30 @@ -1819,8 +1822,8 @@ packages: '@types/gapi.client.discovery-v1': 0.0.3 dev: true - /@maxim_mazurok/gapi.client.drive-v3@0.0.20231011: - resolution: {integrity: sha512-h+A08aoYI2IL2nnCtrH5RLbPe/P0gznp7BSVKZMyDFVKNYMuwsrO0xWDF6K2IIcZkYRWoHRVyIc/dLWRGwPfJg==} + /@maxim_mazurok/gapi.client.drive-v3@0.0.20231017: + resolution: {integrity: sha512-nYKFtQ9Wek53103VzamXX0JgfvK89YuIZjaRvYSgRis1yhwziGmmMEhymSNRsw2uVhIuK7HXDLGPFgYP0GNy8w==} dependencies: '@types/gapi.client': 1.0.7 '@types/gapi.client.discovery-v1': 0.0.3 @@ -2317,6 +2320,25 @@ packages: '@babel/runtime': 7.23.2 dev: false + /@react-hookz/deep-equal@1.0.4: + resolution: {integrity: sha512-N56fTrAPUDz/R423pag+n6TXWbvlBZDtTehaGFjK0InmN+V2OFWLE/WmORhmn6Ce7dlwH5+tQN1LJFw3ngTJVg==} + dev: false + + /@react-hookz/web@23.1.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-fvbURdsa1ukttbLR1ASE/XmqXP09vZ1PiCYppYeR1sNMzCrdkG0iBnjxniFSVjJ8gIw2fRs6nqMTbeBz2uAkuA==} + peerDependencies: + js-cookie: ^3.0.5 + react: ^16.8 || ^17 || ^18 + react-dom: ^16.8 || ^17 || ^18 + peerDependenciesMeta: + js-cookie: + optional: true + dependencies: + '@react-hookz/deep-equal': 1.0.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@rollup/plugin-babel@5.3.1(@babel/core@7.23.2)(rollup@2.79.1): resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==} engines: {node: '>= 10.0.0'} @@ -2550,7 +2572,7 @@ packages: /@types/gapi.client.drive-v3@0.0.3: resolution: {integrity: sha512-61jlYBTz9GSFNkl0RgM2jD7TXkayWgb50XKimnVMtM7s2ymZhxxaAE4pr6u4j6z0pfpt54MHTjUxXZ7V3u5LFQ==} dependencies: - '@maxim_mazurok/gapi.client.drive-v3': 0.0.20231011 + '@maxim_mazurok/gapi.client.drive-v3': 0.0.20231017 dev: true /@types/gapi.client@1.0.7: diff --git a/src/views/components/common/cloud-service-login-button.tsx b/src/views/components/common/cloud-service-login-button.tsx index 96476b1..6ba0959 100644 --- a/src/views/components/common/cloud-service-login-button.tsx +++ b/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(null) const [isAuthWindowOpening, setIsAuthWindowOpening] = useState(false) - useInterval(() => { + useIntervalEffect(() => { const newIsAuthWindowOpening = authorizeWindow.current ? !authorizeWindow.current?.closed : false setIsAuthWindowOpening(newIsAuthWindowOpening) if (isAuthWindowOpening && !newIsAuthWindowOpening) { diff --git a/src/views/components/home-screen/index.tsx b/src/views/components/home-screen/index.tsx index 3687151..2e920b7 100644 --- a/src/views/components/home-screen/index.tsx +++ b/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() + const [measurements = { width: 0, height: 0 }, gridContainerRef] = useMeasure() 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} /> - + )} @@ -166,7 +169,6 @@ export function HomeScreen() { {isGameLaunched ? ( <> - ) : null} diff --git a/src/views/components/home-screen/input-tips/index.tsx b/src/views/components/home-screen/input-tips/index.tsx index 9902b41..f6844f0 100644 --- a/src/views/components/home-screen/input-tips/index.tsx +++ b/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 }, ) diff --git a/src/views/components/setup-wizard/animated-icons.tsx b/src/views/components/setup-wizard/animated-icons.tsx index 6724585..b4d4eb9 100644 --- a/src/views/components/setup-wizard/animated-icons.tsx +++ b/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) }