refactor

frzyc · Nov 12, 2024 · 9150390 · 9150390
1 parent 8fb6453
commit 9150390
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 72 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
     <CardThemed bgt="dark">
@@ -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',
       }}
     >
       <LightConeCardCompact bgt="light" lightConeId={lightConeId} />
@@ -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 (
     <BuildBase

diff --git a/libs/sr/page-team/src/TeamCalcProvider.tsx b/libs/sr/page-team/src/TeamCalcProvider.tsx
@@ -133,10 +133,11 @@ function useCharacterAndEquipment(meta: TeammateDatum | undefined) {
     )
   }, [meta?.buildType, buildTc?.lightCone, lightCone])
   const relicTagEntries = useMemo(() => {
-    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
@@ -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 (
     <CardThemed sx={{ width: '100%' }}>

diff --git 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(
     () => (
       <Box display="flex" gap={2}>
-        {dbLightCone ? (
+        <Button
+          startIcon={<Add />}
+          onClick={() => {
+            validatedLightcone && database.lightCones.new(validatedLightcone)
+            clear()
+          }}
+          disabled={!validatedLightcone}
+          color="primary"
+        >
+          {t('editor.btnAdd')}
+        </Button>
+        {validatedLightcone && dbLightCone && (
           <Button
-            startIcon={<Add />}
+            startIcon={<Update />}
             onClick={() => {
               validatedLightcone &&
                 database.lightCones.set(dbLightCone.id, validatedLightcone)
               clear()
             }}
             disabled={!validatedLightcone}
-            color="primary"
-          >
-            {t('editor.btnSave')}
-          </Button>
-        ) : (
-          <Button
-            startIcon={<Add />}
-            onClick={() => {
-              validatedLightcone && database.lightCones.new(validatedLightcone)
-              clear()
-            }}
-            disabled={!validatedLightcone}
-            color="primary"
-          >
-            {t('editor.btnAdd')}
-          </Button>
-        )}
-        {validatedLightcone && dbLightCone && (
-          <Button
-            startIcon={<Update />}
-            onClick={() => {
-              lightConeState &&
-                database.lightCones.set(dbLightCone.id, lightConeState)
-              clear()
-            }}
-            disabled={!lightConeState}
             color="success"
           >
             {t('editor.btnUpdate')}
@@ -125,7 +110,7 @@ export function LightConeEditor({
         )}
       </Box>
     ),
-    [clear, database, dbLightCone, lightConeState, t, validatedLightcone]
+    [clear, database, dbLightCone, t, validatedLightcone]
   )
 
   return (

diff --git a/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditorCard.tsx b/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditorCard.tsx
@@ -41,7 +41,7 @@ export function LightConeEditorCard({
   return (
     <CardThemed bgt="dark">
       <CardHeader
-        title="Light Cone Editor"
+        title="Light Cone Editor" // TODO: translation
         action={
           <IconButton onClick={onClose}>
             <CloseIcon />
@@ -175,7 +175,7 @@ function LevelDropdown({
     <DropdownButton
       title={
         level
-          ? `${t('lv')} ${level}/${ascensionMaxLevel[ascension!]}`
+          ? `${t('lv')} ${level}/${ascensionMaxLevel[ascension ?? 0]}`
           : t('common:selectlevel')
       }
       color="primary"

diff --git a/libs/sr/ui/src/Relic/RelicCardCompact.tsx b/libs/sr/ui/src/Relic/RelicCardCompact.tsx
@@ -308,12 +308,12 @@ export function RelicSubCard({
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                textWrap: 'nowrap',
+                whiteSpace: 'nowrap',
               }}
             >
               <StatIcon statKey={key} />
               <span>
-                {relic.substats.stats[key].toFixed(statToFixed(key))}
+                {(relic.substats.stats[key] ?? 0).toFixed(statToFixed(key))}
                 {getUnitStr(key)}
               </span>
             </Typography>

diff --git a/libs/sr/ui/src/Relic/RelicRarityDropdown.tsx b/libs/sr/ui/src/Relic/RelicRarityDropdown.tsx
@@ -1,4 +1,5 @@
 import { DropdownButton, StarsDisplay } from '@genshin-optimizer/common/ui'
+import type { RarityKey } from '@genshin-optimizer/sr/consts'
 import {
   allRelicRarityKeys,
   type RelicRarityKey,
@@ -27,13 +28,7 @@ export function RelicRarityDropdown({
       {...props}
       title={
         rarity ? (
-          showNumber ? (
-            <span>
-              {rarity} <StarsDisplay stars={1} inline />
-            </span>
-          ) : (
-            <StarsDisplay stars={rarity} inline />
-          )
+          <StarNumDisplay stars={rarity} showNumber={showNumber} />
         ) : (
           t('editor.rarity')
         )
@@ -46,15 +41,24 @@ export function RelicRarityDropdown({
           disabled={filter ? !filter?.(rarity) : false}
           onClick={() => onRarityChange(rarity)}
         >
-          {showNumber ? (
-            <span>
-              {rarity} <StarsDisplay stars={1} inline />
-            </span>
-          ) : (
-            <StarsDisplay stars={rarity} inline />
-          )}
+          <StarNumDisplay stars={rarity} showNumber={showNumber} />
         </MenuItem>
       ))}
     </DropdownButton>
   )
 }
+function StarNumDisplay({
+  stars,
+  showNumber,
+}: {
+  stars: RarityKey
+  showNumber?: boolean
+}) {
+  if (showNumber)
+    return (
+      <span>
+        {stars} <StarsDisplay stars={1} inline />
+      </span>
+    )
+  return <StarsDisplay stars={stars} inline />
+}