Update SRO context usage/UI issues, add useLightCone hook (#1406)

* Fix minor bugs and refactor context usage

* Add UseLightCone hook

* Unexport databasecontext

* Add remove trigger

apps/sr-frontend/src/app/Character.tsx

@@ -6,17 +6,27 @@ import {
   srCalculatorWithEntries,
 } from '@genshin-optimizer/sr-formula'
 import {
-  CharacterContext,
   useCharacter,
+  useCharacterContext,
   useCharacterReducer,
 } from '@genshin-optimizer/sr-ui'
 import { CardThemed } from '@genshin-optimizer/ui-common'
-import { Box, CardContent, Stack, TextField, Typography } from '@mui/material'
+import { ExpandMore } from '@mui/icons-material'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  CardContent,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material'
 import { Container } from '@mui/system'
-import { useContext, useMemo } from 'react'
+import { useMemo } from 'react'
 
 export default function Character() {
-  const { characterKey } = useContext(CharacterContext)
+  const { characterKey } = useCharacterContext()
   const character = useCharacter(characterKey)
   const charReducer = useCharacterReducer(characterKey)
 
@@ -45,33 +55,40 @@ export default function Character() {
               label="Level"
               variant="outlined"
               inputProps={{ min: 1, max: 90 }}
-              value={character?.level}
+              value={character?.level || 0}
               onChange={(e) => charReducer({ level: parseInt(e.target.value) })}
             />
             <TextField
               type="number"
               label="Ascension"
               variant="outlined"
               inputProps={{ min: 0, max: 6 }}
-              value={character?.ascension}
+              value={character?.ascension || 0}
               onChange={(e) =>
                 charReducer({
                   ascension: parseInt(e.target.value) as AscensionKey,
                 })
               }
             />
-            {(
-              [
-                ['ATK', 'atk'],
-                ['DEF', 'def'],
-                ['HP', 'hp'],
-                ['SPD', 'spd'],
-              ] as const
-            ).map(([txt, skey]) => (
-              <Typography key={skey}>
-                {txt}: {calc?.compute(self.stat[skey].src('char')).val}
-              </Typography>
-            ))}
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMore />}>
+                Basic stats for all chars
+              </AccordionSummary>
+              <AccordionDetails>
+                {(
+                  [
+                    ['ATK', 'atk'],
+                    ['DEF', 'def'],
+                    ['HP', 'hp'],
+                    ['SPD', 'spd'],
+                  ] as const
+                ).map(([txt, skey]) => (
+                  <Typography key={skey}>
+                    {txt}: {calc?.compute(self.stat[skey].src('char')).val}
+                  </Typography>
+                ))}
+              </AccordionDetails>
+            </Accordion>
           </Stack>
         </CardContent>
       </CardThemed>

apps/sr-frontend/src/app/CharacterSelector.tsx

@@ -1,13 +1,12 @@
 import {
   CharacterAutocomplete,
-  CharacterContext,
+  useCharacterContext,
 } from '@genshin-optimizer/sr-ui'
 import { CardThemed } from '@genshin-optimizer/ui-common'
 import { CardContent, Container } from '@mui/material'
-import { useContext } from 'react'
 
 export default function CharacterSelector() {
-  const { characterKey, setCharacterKey } = useContext(CharacterContext)
+  const { characterKey, setCharacterKey } = useCharacterContext()
 
   return (
     <Container>

apps/sr-frontend/src/app/Database.tsx

@@ -1,6 +1,6 @@
 import { SandboxStorage } from '@genshin-optimizer/database'
-import { DatabaseContext } from '@genshin-optimizer/sr-ui'
 import { SroDatabase } from '@genshin-optimizer/sr-db'
+import { useDatabaseContext } from '@genshin-optimizer/sr-ui'
 import { CardThemed, DropdownButton } from '@genshin-optimizer/ui-common'
 import { range } from '@genshin-optimizer/util'
 import {
@@ -12,14 +12,10 @@ import {
   Typography,
 } from '@mui/material'
 import type { ChangeEvent } from 'react'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 export default function Database() {
-  const {
-    database: mainDB,
-    databases,
-    setDatabase,
-  } = useContext(DatabaseContext)
+  const { database: mainDB, databases, setDatabase } = useDatabaseContext()
   const [index, setIndex] = useState(0)
   const database = databases[index]
   const current = database === mainDB

libs/sr-ui/src/Character/CharacterAutocomplete.tsx

@@ -5,8 +5,8 @@ import type { GeneralAutocompleteOption } from '@genshin-optimizer/ui-common'
 import { GeneralAutocomplete } from '@genshin-optimizer/ui-common'
 import { objKeyMap } from '@genshin-optimizer/util'
 import { Skeleton } from '@mui/material'
-import { Suspense, useContext, useEffect, useMemo } from 'react'
-import { DatabaseContext } from '../Context'
+import { Suspense, useEffect, useMemo } from 'react'
+import { useDatabaseContext } from '../Context'
 
 type CharacterAutocompleteProps = {
   charKey: CharacterKey | ''
@@ -16,7 +16,7 @@ export function CharacterAutocomplete({
   charKey,
   setCharKey,
 }: CharacterAutocompleteProps) {
-  const { database } = useContext(DatabaseContext)
+  const { database } = useDatabaseContext()
   const [charListDirty, setCharListDirty] = useForceUpdate()
   useEffect(
     () => database.chars.followAny(() => setCharListDirty()),

libs/sr-ui/src/Context/CharacterContext.tsx

@@ -1,12 +1,16 @@
 import type { CharacterKey } from '@genshin-optimizer/sr-consts'
 import type { ReactNode } from 'react'
-import { createContext, useMemo, useState } from 'react'
-export type CharacterContextObj = {
+import { createContext, useContext, useMemo, useState } from 'react'
+type CharacterContextObj = {
   characterKey: CharacterKey | ''
   setCharacterKey: (key: CharacterKey | '') => void
 }
 
-export const CharacterContext = createContext({} as CharacterContextObj)
+const CharacterContext = createContext({} as CharacterContextObj)
+
+export function useCharacterContext() {
+  return useContext(CharacterContext)
+}
 
 export function CharacterProvider({ children }: { children: ReactNode }) {
   const [characterKey, setCharacterKey] = useState<CharacterKey | ''>('')

libs/sr-ui/src/Context/DatabaseContext.tsx

@@ -1,14 +1,25 @@
 import { DBLocalStorage, SandboxStorage } from '@genshin-optimizer/database'
 import { SroDatabase } from '@genshin-optimizer/sr-db'
 import type { ReactNode } from 'react'
-import { createContext, useCallback, useMemo, useState } from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
 
 type DatabaseContextObj = {
   databases: SroDatabase[]
   setDatabase: (index: number, db: SroDatabase) => void
   database: SroDatabase
 }
-export const DatabaseContext = createContext({} as DatabaseContextObj)
+
+const DatabaseContext = createContext({} as DatabaseContextObj)
+
+export function useDatabaseContext() {
+  return useContext(DatabaseContext)
+}
 
 export function DatabaseProvider({ children }: { children: ReactNode }) {
   const dbIndex = parseInt(localStorage.getItem('sro_dbIndex') || '1')

libs/sr-ui/src/Hook/index.ts

@@ -1,2 +1,3 @@
 export * from './useCharacter'
 export * from './useCharacterReducer'
+export * from './useLightCone'

libs/sr-ui/src/Hook/useCharacter.ts

@@ -1,9 +1,9 @@
 import type { CharacterKey } from '@genshin-optimizer/sr-consts'
-import { useContext, useEffect, useState } from 'react'
-import { DatabaseContext } from '../Context'
+import { useEffect, useState } from 'react'
+import { useDatabaseContext } from '../Context'
 
 export function useCharacter(characterKey: CharacterKey | '' | undefined = '') {
-  const { database } = useContext(DatabaseContext)
+  const { database } = useDatabaseContext()
   const [character, setCharacter] = useState(database.chars.get(characterKey))
   useEffect(
     () => setCharacter(database.chars.get(characterKey)),

libs/sr-ui/src/Hook/useCharacterReducer.ts

@@ -1,7 +1,7 @@
 import type { CharacterKey } from '@genshin-optimizer/sr-consts'
 import type { ICachedSroCharacter } from '@genshin-optimizer/sr-db'
-import { useCallback, useContext } from 'react'
-import { DatabaseContext } from '../Context'
+import { useCallback } from 'react'
+import { useDatabaseContext } from '../Context'
 
 type characterTeamAction = {
   type: 'team'
@@ -13,7 +13,7 @@ export type characterReducerAction =
   | Partial<ICachedSroCharacter>
 
 export function useCharacterReducer(characterKey: CharacterKey | '') {
-  const { database } = useContext(DatabaseContext)
+  const { database } = useDatabaseContext()
 
   return useCallback(
     (action: characterReducerAction): void => {

libs/sr-ui/src/Hook/useLightCone.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+import { useDatabaseContext } from '../Context'
+
+export function useLightCone(lightConeId: string | '' | undefined = '') {
+  const { database } = useDatabaseContext()
+  const [lightCone, setLightCone] = useState(
+    database.lightCones.get(lightConeId)
+  )
+  useEffect(
+    () => setLightCone(database.lightCones.get(lightConeId)),
+    [database, lightConeId]
+  )
+  useEffect(
+    () =>
+      lightConeId
+        ? database.lightCones.follow(
+            lightConeId,
+            (_k, r, v) => (r === 'update' || r === 'remove') && setLightCone(v)
+          )
+        : undefined,
+    [lightConeId, setLightCone, database]
+  )
+  return lightCone
+}