From 9150390c72050619bb7ed58a1c7038158111e2e9 Mon Sep 17 00:00:00 2001 From: frzyc Date: Mon, 11 Nov 2024 22:34:48 -0500 Subject: [PATCH] refactor --- libs/common/ui/src/hooks/useRefOverflow.tsx | 4 +- libs/common/ui/src/hooks/useRefSize.tsx | 4 +- libs/sr/consts/src/relic.ts | 7 +++ .../DataManagers/BuildTcDataManager.ts | 15 ++++--- libs/sr/page-team/src/BuildsDisplay.tsx | 23 +++++----- libs/sr/page-team/src/TeamCalcProvider.tsx | 5 ++- libs/sr/page-team/src/TeammateDisplay.tsx | 2 +- .../LightConeEditor/LightConeEditor.tsx | 45 +++++++------------ .../LightConeEditor/LightConeEditorCard.tsx | 4 +- libs/sr/ui/src/Relic/RelicCardCompact.tsx | 4 +- libs/sr/ui/src/Relic/RelicRarityDropdown.tsx | 32 +++++++------ 11 files changed, 73 insertions(+), 72 deletions(-) diff --git a/libs/common/ui/src/hooks/useRefOverflow.tsx b/libs/common/ui/src/hooks/useRefOverflow.tsx index acffa471ef..ce512f3c16 100644 --- a/libs/common/ui/src/hooks/useRefOverflow.tsx +++ b/libs/common/ui/src/hooks/useRefOverflow.tsx @@ -14,11 +14,11 @@ export function useRefOverflow() { setIsOverflowY(ele ? isOverflowedY(ele) : false) } handleResize() // Check on mount and whenever the window resizes - if (ref.current) window.addEventListener('resize', handleResize) + window.addEventListener('resize', handleResize) return () => { window.removeEventListener('resize', handleResize) } - }, []) + }, []) // Safe to keep empty as we only want mount/unmount behavior return { isOverflowX, isOverflowY, ref } } function isOverflowedX(ref: HTMLElement) { diff --git a/libs/common/ui/src/hooks/useRefSize.tsx b/libs/common/ui/src/hooks/useRefSize.tsx index ef6fac22b7..36a6e7174b 100644 --- a/libs/common/ui/src/hooks/useRefSize.tsx +++ b/libs/common/ui/src/hooks/useRefSize.tsx @@ -12,10 +12,10 @@ export function useRefSize() { setHeight(ref.current?.clientHeight ?? 0) } handleResize() // Check on mount and whenever the window resizes - if (ref.current) window.addEventListener('resize', handleResize) + window.addEventListener('resize', handleResize) return () => { window.removeEventListener('resize', handleResize) } - }, []) + }, []) // Safe to keep empty as we only want mount/unmount behavior return { width, height, ref } } diff --git a/libs/sr/consts/src/relic.ts b/libs/sr/consts/src/relic.ts index 52a26a52ce..a8ba9512c7 100644 --- a/libs/sr/consts/src/relic.ts +++ b/libs/sr/consts/src/relic.ts @@ -106,6 +106,13 @@ export type RelicMainStatKey = (typeof allRelicMainStatKeys)[number] export const allRelicRarityKeys = [2, 3, 4, 5] as const export type RelicRarityKey = (typeof allRelicRarityKeys)[number] +export function isRelicRarityKey(rarity: unknown): rarity is RelicRarityKey { + return ( + typeof rarity === 'number' && + allRelicRarityKeys.includes(rarity as RelicRarityKey) + ) +} + export const allRelicSetCountKeys = [2, 4] as const export type RelicSetCountKey = (typeof allRelicSetCountKeys)[number] diff --git a/libs/sr/db/src/Database/DataManagers/BuildTcDataManager.ts b/libs/sr/db/src/Database/DataManagers/BuildTcDataManager.ts index b3f0cc1fd0..444ac92f79 100644 --- a/libs/sr/db/src/Database/DataManagers/BuildTcDataManager.ts +++ b/libs/sr/db/src/Database/DataManagers/BuildTcDataManager.ts @@ -2,15 +2,16 @@ import { clamp, objKeyMap, objMap } from '@genshin-optimizer/common/util' import type { CharacterKey, RelicMainStatKey, + RelicRarityKey, RelicSetKey, RelicSlotKey, } from '@genshin-optimizer/sr/consts' import { allCharacterKeys, allLightConeKeys, - allRelicRarityKeys, allRelicSlotKeys, allRelicSubStatKeys, + isRelicRarityKey, relicMaxLevel, relicSubstatTypeKeys, } from '@genshin-optimizer/sr/consts' @@ -155,14 +156,17 @@ function validateCharTCRelic(relic: unknown): IBuildTc['relic'] | undefined { stats = objKeyMap(allRelicSubStatKeys, (k) => typeof stats[k] === 'number' ? stats[k] : 0 ) - if (typeof rarity !== 'number' || !allRelicRarityKeys.includes(rarity)) - rarity = 5 + rarity = validateRelicRarity(rarity) if (typeof sets !== 'object') sets = {} // TODO: validate sets return { slots, substats: { type, stats, rarity }, sets } } + +function validateRelicRarity(rarity: unknown): RelicRarityKey { + return isRelicRarityKey(rarity) ? rarity : 5 +} function validateCharTCRelicSlots( slots: unknown ): IBuildTc['relic']['slots'] | undefined { @@ -179,10 +183,9 @@ function validateCharTCRelicSlots( return objMap( slots as IBuildTc['relic']['slots'], ({ level, rarity, ...rest }) => { - if (typeof rarity !== 'number' || !allRelicRarityKeys.includes(rarity)) - rarity = 5 + rarity = validateRelicRarity(rarity) return { - level: clamp(level, 0, relicMaxLevel[5]), + level: clamp(level, 0, relicMaxLevel[rarity]), rarity, ...rest, } diff --git a/libs/sr/page-team/src/BuildsDisplay.tsx b/libs/sr/page-team/src/BuildsDisplay.tsx index 47fc8d2a72..e78e138dcd 100644 --- a/libs/sr/page-team/src/BuildsDisplay.tsx +++ b/libs/sr/page-team/src/BuildsDisplay.tsx @@ -94,12 +94,14 @@ export function BuildsDisplay({ onClose }: { onClose?: () => void }) { () => dbTCDirty && database.buildTcs.getBuildTcIds(characterKey), [dbTCDirty, database, characterKey] ) - useEffect(() => { - database.builds.followAny(setDbDirty) - }, [database.builds, setDbDirty]) - useEffect(() => { - database.buildTcs.followAny(setDbTCDirty) - }, [database.buildTcs, setDbTCDirty]) + useEffect( + () => database.builds.followAny(setDbDirty), + [database.builds, setDbDirty] + ) + useEffect( + () => database.buildTcs.followAny(setDbTCDirty), + [database.buildTcs, setDbTCDirty] + ) return ( @@ -168,9 +170,9 @@ function useActiveBuildSwap( return } teammateDatum.buildType = newBuildType - if (newBuildId === 'real' && newBuildId) + if (newBuildType === 'real' && newBuildId) teammateDatum.buildId = newBuildId - if (newBuildType === 'tc' && newBuildId) + else if (newBuildType === 'tc' && newBuildId) teammateDatum.buildTcId = newBuildId }) }, @@ -309,7 +311,6 @@ export function EquipRow({ gridTemplateRows: `repeat(${rows}, ${COMPACT_ELE_HEIGHT})`, maxWidth: '100%', width: '100%', - overflex: 'hidden', }} > @@ -327,8 +328,8 @@ export function EquipRow({ ) } export function BuildTC({ buildTcId }: { buildTcId: string }) { - const build = useBuildTc(buildTcId)! - const { name, description } = build + const build = useBuildTc(buildTcId) + const { name = 'ERROR', description = 'ERROR' } = build ?? {} const { active, onActive: onClick } = useActiveBuildSwap('tc', buildTcId) return ( { - if (meta?.buildType === 'tc' && buildTc) return relicTcData(buildTc?.relic) + const tcrelic = buildTc?.relic + if (meta?.buildType === 'tc' && tcrelic) return relicTcData(tcrelic) if (!relics) return [] return relicsData(Object.values(relics).filter(notEmpty)) - }, [buildTc, meta?.buildType, relics]) + }, [buildTc?.relic, meta?.buildType, relics]) return useMemo(() => { if (!character) return [] return withMember( diff --git a/libs/sr/page-team/src/TeammateDisplay.tsx b/libs/sr/page-team/src/TeammateDisplay.tsx index c6ba271c03..1a9825772e 100644 --- a/libs/sr/page-team/src/TeammateDisplay.tsx +++ b/libs/sr/page-team/src/TeammateDisplay.tsx @@ -85,7 +85,7 @@ function CurrentBuildDisplay() { if (buildType === 'tc') unFollow = database.buildTcs.follow(buildTcId, setDbDirty) return () => unFollow() - }) + }, [buildId, buildTcId, buildType, database, setDbDirty]) const [show, onShow, onHide] = useBoolState() return ( diff --git a/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditor.tsx b/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditor.tsx index 4aa7af2036..315fe9331f 100644 --- a/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditor.tsx +++ b/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditor.tsx @@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next' import { LightConeEditorCard } from './LightConeEditorCard' export type LightConeEditorProps = { - lightConeIdToEdit?: string + lightConeIdToEdit?: string | '' | 'new' cancelEdit: () => void } @@ -68,41 +68,26 @@ export function LightConeEditor({ const footer = useMemo( () => ( - {dbLightCone ? ( + + {validatedLightcone && dbLightCone && ( - ) : ( - - )} - {validatedLightcone && dbLightCone && ( -