From 26b25b31091069c2711b93dd4a1011f9ac32a9e7 Mon Sep 17 00:00:00 2001 From: dnaroma Date: Wed, 24 Apr 2024 20:24:37 +0200 Subject: [PATCH] refactor: :zap: better isReady handling --- src/pages/card/CardList.tsx | 39 +++++++++++-------- src/pages/comic/ComicList.tsx | 8 ++-- src/pages/event/EventList.tsx | 4 +- src/pages/gacha/GachaList.tsx | 8 ++-- src/pages/honor/HonorList.tsx | 21 ++-------- .../mission/beginner/BeginnerMissionList.tsx | 15 ++----- .../character/CharacterMissionList.tsx | 6 +-- src/pages/mission/honor/TitleMissionList.tsx | 15 ++----- .../mission/normal/NormalMissionList.tsx | 15 ++----- src/pages/music/MusicList.tsx | 15 ++++++- src/pages/stamp/StampList.tsx | 17 ++------ src/pages/virtual_live/VirtualLiveList.tsx | 8 ++-- 12 files changed, 71 insertions(+), 100 deletions(-) diff --git a/src/pages/card/CardList.tsx b/src/pages/card/CardList.tsx index 79eba771..a134ac6c 100644 --- a/src/pages/card/CardList.tsx +++ b/src/pages/card/CardList.tsx @@ -250,10 +250,19 @@ const CardList: React.FC = observer(() => { useLayoutEffect(() => { setIsReady( - Boolean(cardsCache && cardsCache.length) && - Boolean(charas && charas.length) + !!cardsCache?.length && + !!charas?.length && + !!rarities?.length && + !!episodes?.length && + !!skills?.length ); - }, [setIsReady, cardsCache, charas]); + }, [ + rarities?.length, + episodes?.length, + skills?.length, + cardsCache?.length, + charas?.length, + ]); useEffect(() => { if (!isCurrEventLoading && !!currEvent) { @@ -263,14 +272,10 @@ const CardList: React.FC = observer(() => { const doFilter = useCallback(() => { if ( - cardsCache && - cardsCache.length && - rarities && - rarities.length && - episodes && - episodes.length && - skills && - skills.length + cardsCache?.length && + rarities?.length && + episodes?.length && + skills?.length ) { let result = [...cardsCache]; // do filter @@ -355,19 +360,19 @@ const CardList: React.FC = observer(() => { setPage(0); } }, [ + attrSelected, cardsCache, - rarities, + characterSelected, episodes, - skills, isShowSpoiler, - characterSelected, - attrSelected, - supportUnitSelected, + rarities, raritySelected, + region, skillSelected, + skills, sortBy, - region, sortType, + supportUnitSelected, ]); const resetFilter = useCallback(() => { diff --git a/src/pages/comic/ComicList.tsx b/src/pages/comic/ComicList.tsx index d0395a42..13ca2f0d 100644 --- a/src/pages/comic/ComicList.tsx +++ b/src/pages/comic/ComicList.tsx @@ -131,7 +131,7 @@ const ComicList: React.FC = observer(() => { }, [t]); useEffect(() => { - if (tipsCache && tipsCache.length) { + if (tipsCache?.length) { const filtered = tipsCache.filter( (tip): tip is ITipInfoComic => "assetbundleName" in tip ); @@ -139,7 +139,7 @@ const ComicList: React.FC = observer(() => { setComics([]); setPage(0); } - }, [tipsCache, setComics, setPage, setFilteredCache]); + }, [tipsCache]); useEffect(() => { setComics((tips) => [...tips, ...getPaginatedTips(page, limit)]); @@ -147,8 +147,8 @@ const ComicList: React.FC = observer(() => { }, [page, limit, tipsCache, setLastQueryFin, getPaginatedTips]); useEffect(() => { - setIsReady(Boolean(tipsCache && tipsCache.length)); - }, [setIsReady, tipsCache]); + setIsReady(!!tipsCache?.length); + }, [tipsCache?.length]); return ( diff --git a/src/pages/event/EventList.tsx b/src/pages/event/EventList.tsx index c62ebaff..1d1f8734 100644 --- a/src/pages/event/EventList.tsx +++ b/src/pages/event/EventList.tsx @@ -92,8 +92,8 @@ const EventList: React.FC = observer(() => { }, [eventsCache, setPage, sortType, sortBy, isShowSpoiler]); useEffect(() => { - setIsReady(Boolean(eventsCache && eventsCache.length)); - }, [setIsReady, eventsCache]); + setIsReady(!!eventsCache?.length); + }, [eventsCache?.length]); const callback = useCallback( ( diff --git a/src/pages/gacha/GachaList.tsx b/src/pages/gacha/GachaList.tsx index 6f872d9a..a8c1c514 100644 --- a/src/pages/gacha/GachaList.tsx +++ b/src/pages/gacha/GachaList.tsx @@ -63,7 +63,7 @@ const GachaList: React.FC = observer(() => { }, [page, limit, setLastQueryFin, sortedCache]); useEffect(() => { - if (!gachasCache || !gachasCache.length) return; + if (!gachasCache?.length) return; let sortedCache = [...gachasCache]; if (region === "en") { // only show gacha after release (2021/12/7) @@ -86,11 +86,11 @@ const GachaList: React.FC = observer(() => { setSortedCache(sortedCache); setGachas([]); setPage(0); - }, [gachasCache, setPage, sortType, sortBy, isShowSpoiler, region]); + }, [gachasCache, isShowSpoiler, region, sortBy, sortType]); useEffect(() => { - setIsReady(Boolean(gachasCache && gachasCache.length)); - }, [setIsReady, gachasCache]); + setIsReady(!!gachasCache?.length); + }, [gachasCache?.length]); const callback = useCallback( ( diff --git a/src/pages/honor/HonorList.tsx b/src/pages/honor/HonorList.tsx index cf5fe7f0..362b0164 100644 --- a/src/pages/honor/HonorList.tsx +++ b/src/pages/honor/HonorList.tsx @@ -80,12 +80,7 @@ const HonorList = () => { }, [t]); useEffect(() => { - if ( - honorsCache && - honorsCache.length && - honorGroups && - honorGroups.length - ) { + if (honorGroups?.length && honorsCache?.length) { let result = [...honorsCache]; // do filter if (honorType) { @@ -114,15 +109,7 @@ const HonorList = () => { setHonors([]); setPage(0); } - }, [ - setPage, - honorsCache, - honorType, - honorGroups, - isHonorGroupOnce, - sortBy, - sortType, - ]); + }, [honorGroups, honorType, honorsCache, isHonorGroupOnce, sortBy, sortType]); useLayoutEffect(() => { setHonors((honors) => [ @@ -133,8 +120,8 @@ const HonorList = () => { }, [page, limit, setLastQueryFin, filteredCache]); useLayoutEffect(() => { - setIsReady(Boolean(honorsCache && honorsCache.length)); - }, [honorsCache, setIsReady]); + setIsReady(!!honorsCache?.length && !!honorGroups?.length); + }, [honorsCache?.length, honorGroups?.length]); const callback = useCallback( ( diff --git a/src/pages/mission/beginner/BeginnerMissionList.tsx b/src/pages/mission/beginner/BeginnerMissionList.tsx index 57088fce..38c3db0d 100644 --- a/src/pages/mission/beginner/BeginnerMissionList.tsx +++ b/src/pages/mission/beginner/BeginnerMissionList.tsx @@ -89,7 +89,7 @@ const BeginnerMissionList: React.FC = () => { }, [t]); useEffect(() => { - if (beginnerMissionsCache && beginnerMissionsCache.length) { + if (beginnerMissionsCache?.length) { let result = [...beginnerMissionsCache]; // do filter if (missionTypeSelected.length) { @@ -109,14 +109,7 @@ const BeginnerMissionList: React.FC = () => { setBeginnerMissions([]); setPage(0); } - }, [ - beginnerMissionsCache, - setPage, - setSortedCache, - missionTypeSelected, - sortBy, - sortType, - ]); + }, [beginnerMissionsCache, missionTypeSelected, sortBy, sortType]); useEffect(() => { setBeginnerMissions((events) => [ @@ -127,8 +120,8 @@ const BeginnerMissionList: React.FC = () => { }, [page, limit, setLastQueryFin, sortedCache]); useEffect(() => { - setIsReady(Boolean(beginnerMissionsCache && beginnerMissionsCache.length)); - }, [setIsReady, beginnerMissionsCache]); + setIsReady(!!beginnerMissionsCache?.length); + }, [beginnerMissionsCache?.length]); const callback = useCallback( ( diff --git a/src/pages/mission/character/CharacterMissionList.tsx b/src/pages/mission/character/CharacterMissionList.tsx index 3986dea7..572b63d7 100644 --- a/src/pages/mission/character/CharacterMissionList.tsx +++ b/src/pages/mission/character/CharacterMissionList.tsx @@ -82,10 +82,8 @@ const CharacterMissionList: React.FC = () => { }, [page, limit, setLastQueryFin, sortedCache]); useEffect(() => { - setIsReady( - Boolean(characterMissionsCache && characterMissionsCache.length) - ); - }, [setIsReady, characterMissionsCache]); + setIsReady(!!characterMissionsCache?.length && !!characterProfiles?.length); + }, [characterMissionsCache?.length, characterProfiles?.length]); const callback = useCallback( ( diff --git a/src/pages/mission/honor/TitleMissionList.tsx b/src/pages/mission/honor/TitleMissionList.tsx index 4b3ad55f..2fed7c40 100644 --- a/src/pages/mission/honor/TitleMissionList.tsx +++ b/src/pages/mission/honor/TitleMissionList.tsx @@ -305,7 +305,7 @@ const TitleMissionList: React.FC = () => { }, [t]); useEffect(() => { - if (honorMissionsCache && honorMissionsCache.length) { + if (honorMissionsCache?.length) { let result = [...honorMissionsCache]; // do filter if (missionTypeSelected.length) { @@ -325,14 +325,7 @@ const TitleMissionList: React.FC = () => { setHonorMissions([]); setPage(0); } - }, [ - honorMissionsCache, - setPage, - setSortedCache, - missionTypeSelected, - sortBy, - sortType, - ]); + }, [honorMissionsCache, missionTypeSelected, sortBy, sortType]); useEffect(() => { setHonorMissions((events) => [ @@ -343,8 +336,8 @@ const TitleMissionList: React.FC = () => { }, [page, limit, setLastQueryFin, sortedCache]); useEffect(() => { - setIsReady(Boolean(honorMissionsCache && honorMissionsCache.length)); - }, [setIsReady, honorMissionsCache]); + setIsReady(!!honorMissionsCache?.length); + }, [honorMissionsCache?.length]); const callback = useCallback( ( diff --git a/src/pages/mission/normal/NormalMissionList.tsx b/src/pages/mission/normal/NormalMissionList.tsx index 4adda139..3c682e6a 100644 --- a/src/pages/mission/normal/NormalMissionList.tsx +++ b/src/pages/mission/normal/NormalMissionList.tsx @@ -84,7 +84,7 @@ const NormalMissionList: React.FC = () => { }, [t]); useEffect(() => { - if (normalMissionsCache && normalMissionsCache.length) { + if (normalMissionsCache?.length) { let result = [...normalMissionsCache]; // do filter if (missionTypeSelected.length) { @@ -104,14 +104,7 @@ const NormalMissionList: React.FC = () => { setNormalMissions([]); setPage(0); } - }, [ - normalMissionsCache, - setPage, - setSortedCache, - missionTypeSelected, - sortBy, - sortType, - ]); + }, [missionTypeSelected, normalMissionsCache, sortBy, sortType]); useEffect(() => { setNormalMissions((events) => [ @@ -122,8 +115,8 @@ const NormalMissionList: React.FC = () => { }, [page, limit, setLastQueryFin, sortedCache]); useEffect(() => { - setIsReady(Boolean(normalMissionsCache && normalMissionsCache.length)); - }, [setIsReady, normalMissionsCache]); + setIsReady(!!normalMissionsCache?.length); + }, [normalMissionsCache?.length]); const callback = useCallback( ( diff --git a/src/pages/music/MusicList.tsx b/src/pages/music/MusicList.tsx index 4ce668f9..562169a6 100644 --- a/src/pages/music/MusicList.tsx +++ b/src/pages/music/MusicList.tsx @@ -149,8 +149,19 @@ const MusicList: React.FC = observer(() => { }, [t]); useEffect(() => { - setIsReady(Boolean(musicsCache)); - }, [setIsReady, musicsCache]); + setIsReady( + !!musicsCache?.length && + !!musicTags?.length && + !!musicVocals?.length && + !!musicDiffis?.length + ); + }, [ + musicDiffis?.length, + musicTags?.length, + musicVocals?.length, + musicsCache?.length, + setIsReady, + ]); const doFilter = useCallback(() => { if (musicsCache && musicTags && musicVocals && musicDiffis) { diff --git a/src/pages/stamp/StampList.tsx b/src/pages/stamp/StampList.tsx index c1508d6b..88485a7c 100644 --- a/src/pages/stamp/StampList.tsx +++ b/src/pages/stamp/StampList.tsx @@ -93,7 +93,7 @@ const StampList: React.FC = () => { }, [t]); useEffect(() => { - if (stampsCache && stampsCache.length) { + if (stampsCache?.length) { let cache = stampsCache; if (characterSelected.length) { cache = stampsCache.filter((s) => @@ -115,16 +115,7 @@ const StampList: React.FC = () => { setStamps([]); setPage(0); } - }, [ - characterSelected, - stampsCache, - setStamps, - setPage, - setFilteredCache, - sortType, - sortBy, - stampType, - ]); + }, [characterSelected, sortBy, sortType, stampType, stampsCache]); useEffect(() => { setStamps((stamps) => [...stamps, ...getPaginatedStamps(page, limit)]); @@ -132,8 +123,8 @@ const StampList: React.FC = () => { }, [page, limit, setLastQueryFin, getPaginatedStamps]); useEffect(() => { - setIsReady(Boolean(stampsCache && stampsCache.length)); - }, [setIsReady, stampsCache]); + setIsReady(!!stampsCache?.length); + }, [stampsCache?.length]); const handleUpdateSortType = useCallback( (_, sort: string) => { diff --git a/src/pages/virtual_live/VirtualLiveList.tsx b/src/pages/virtual_live/VirtualLiveList.tsx index be3fbd33..7df5ed6a 100644 --- a/src/pages/virtual_live/VirtualLiveList.tsx +++ b/src/pages/virtual_live/VirtualLiveList.tsx @@ -73,7 +73,7 @@ const VirtualLiveList: React.FC = observer(() => { }, [page, limit, setLastQueryFin, sortedCache]); useEffect(() => { - if (!virtualLivesCache) return; + if (!virtualLivesCache?.length) return; let sortedCache = [...virtualLivesCache]; if (!isShowSpoiler) { sortedCache = sortedCache.filter( @@ -95,11 +95,11 @@ const VirtualLiveList: React.FC = observer(() => { setSortedCache(sortedCache); setVirtualLives([]); setPage(0); - }, [isShowSpoiler, setPage, sortBy, sortType, virtualLivesCache]); + }, [isShowSpoiler, sortBy, sortType, virtualLivesCache]); useEffect(() => { - setIsReady(Boolean(virtualLivesCache)); - }, [setIsReady, virtualLivesCache]); + setIsReady(!!virtualLivesCache?.length); + }, [virtualLivesCache?.length]); const callback = useCallback( (