Combo only UI redesign (#2514)

* Design I init

* preset conditionals, bonusStats

* futher fixes

* cleanup

* add opt UI

* initial funneling of combo to solver

* fix comment

* fix tag data

* clean up console logs

* remove page-team/s

* rename of page-combo/s to page-team/s

* more cleanup

* create sr-ui-db lib

* speeling + tag comparison

* some updates

* fixes and memoization

* rename teammateDatum

* reshuffle

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

@@ -1,7 +1,7 @@
 import { ScrollTop } from '@genshin-optimizer/common/ui'
+import { DatabaseProvider } from '@genshin-optimizer/sr/db-ui'
 import '@genshin-optimizer/sr/i18n' // import to load translations
 import { theme } from '@genshin-optimizer/sr/theme'
-import { DatabaseProvider } from '@genshin-optimizer/sr/ui'
 import {
   Box,
   Container,

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

@@ -1,12 +1,12 @@
 import { useDatabaseTally } from '@genshin-optimizer/common/database-ui'
 import { Tally } from '@genshin-optimizer/common/ui'
+import { useDatabaseContext } from '@genshin-optimizer/sr/db-ui'
 import {
   CharacterIcon,
   LightConeIcon,
   RelicIcon,
   TeamsIcon,
 } from '@genshin-optimizer/sr/svgicons'
-import { useDatabaseContext } from '@genshin-optimizer/sr/ui'
 import { Settings } from '@mui/icons-material'
 import MenuIcon from '@mui/icons-material/Menu'
 import {

libs/common/util/src/lib/object.ts

@@ -153,8 +153,8 @@ export const getObjectKeysRecursive = (obj: unknown): string[] =>
 
 export function deepFreeze<T>(obj: T, layers = 5): T {
   if (layers === 0) return obj
-  if (typeof obj === 'object')
-    Object.values(Object.freeze(obj)).forEach((o) => deepFreeze(o, layers--))
+  if (obj && typeof obj === 'object')
+    Object.values(Object.freeze(obj)).forEach((o) => deepFreeze(o, layers - 1))
   return obj
 }
 
@@ -215,3 +215,19 @@ export function reverseMap<K extends string, V extends string>(
     Object.entries(obj).map(([k, v]) => [v, k])
   ) as Record<V, K>
 }
+
+export function shallowCompareObj<T extends Record<string, any>>(
+  obj1: T,
+  obj2: T
+) {
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  // Check if the objects have the same number of keys
+  if (keys1.length !== keys2.length) return false
+
+  // Check if all keys and their values are the same
+  for (const key of keys1) if (obj1[key] !== obj2[key]) return false
+
+  return true
+}

libs/sr/db-ui/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage",
+        "importSource": "@emotion/react"
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

libs/sr/db-ui/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/sr/db-ui/README.md

@@ -0,0 +1,7 @@
+# sr-db-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test sr-db-ui` to execute the unit tests via [Jest](https://jestjs.io).

libs/sr/db-ui/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "sr-db-ui",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/sr/db-ui/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project sr-db-ui --web",
+  "targets": {}
+}

libs/sr/ui/src/Context/CharacterContext.tsx → libs/sr/db-ui/src/context/CharacterContext.ts

@@ -1,11 +1,9 @@
 import type { ICachedCharacter } from '@genshin-optimizer/sr/db'
 import { createContext, useContext } from 'react'
 
-export type CharacterContextObj = {
-  character: ICachedCharacter | undefined
-}
-
-export const CharacterContext = createContext({} as CharacterContextObj)
+export const CharacterContext = createContext(
+  undefined as ICachedCharacter | undefined
+)
 
 export function useCharacterContext() {
   return useContext(CharacterContext)

libs/sr/ui/src/Context/index.tsx → libs/sr/db-ui/src/context/index.ts

@@ -1,3 +1,2 @@
 export * from './CharacterContext'
 export * from './DatabaseContext'
-export * from './LoadoutContext'

libs/sr/db-ui/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useBuild'
+export * from './useCharacter'
+export * from './useEquippedRelics'
+export * from './useLightCone'
+export * from './useTeam'

libs/sr/ui/src/Hook/useBuild.ts → libs/sr/db-ui/src/hooks/useBuild.ts

@@ -1,5 +1,5 @@
 import { useDataManagerBase } from '@genshin-optimizer/common/database-ui'
-import { useDatabaseContext } from '../Context'
+import { useDatabaseContext } from '../context'
 export function useBuild(buildId: string | undefined) {
   const { database } = useDatabaseContext()
   return useDataManagerBase(database.builds, buildId ?? '')

libs/sr/db-ui/src/hooks/useCharacter.ts

@@ -0,0 +1,8 @@
+import { useDataManagerBase } from '@genshin-optimizer/common/database-ui'
+import type { CharacterKey } from '@genshin-optimizer/sr/consts'
+import { useDatabaseContext } from '../context'
+
+export function useCharacter(characterKey: CharacterKey | '' | undefined) {
+  const { database } = useDatabaseContext()
+  return useDataManagerBase(database.chars, characterKey as CharacterKey)
+}

libs/sr/ui/src/Hook/useEquippedRelics.ts → libs/sr/db-ui/src/hooks/useEquippedRelics.ts

@@ -5,7 +5,7 @@ import {
 } from '@genshin-optimizer/sr/consts'
 import type { ICachedCharacter, ICachedRelic } from '@genshin-optimizer/sr/db'
 import { useEffect, useMemo, useState } from 'react'
-import { useDatabaseContext } from '../Context/DatabaseContext'
+import { useDatabaseContext } from '../context'
 
 export function useEquippedRelics(
   equippedRelics: ICachedCharacter['equippedRelics'] | undefined

libs/sr/db-ui/src/hooks/useLightCone.ts

@@ -0,0 +1,7 @@
+import { useDataManagerBase } from '@genshin-optimizer/common/database-ui'
+import { useDatabaseContext } from '../context'
+
+export function useLightCone(lightConeId: string | undefined) {
+  const { database } = useDatabaseContext()
+  return useDataManagerBase(database.lightCones, lightConeId ?? '')
+}

libs/sr/ui/src/Hook/useTeam.ts → libs/sr/db-ui/src/hooks/useTeam.ts

@@ -1,5 +1,5 @@
 import { useDataManagerBase } from '@genshin-optimizer/common/database-ui'
-import { useDatabaseContext } from '../Context'
+import { useDatabaseContext } from '../context'
 export function useTeam(teamId: string) {
   const { database } = useDatabaseContext()
   return useDataManagerBase(database.teams, teamId)

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

@@ -0,0 +1,3 @@
+export * from './context'
+export * from './hooks'
+export * from './provider'

libs/sr/ui/src/Provider/DatabaseProvider.tsx → libs/sr/db-ui/src/provider/DatabaseProvider.tsx

@@ -5,10 +5,7 @@ import {
 import { SroDatabase } from '@genshin-optimizer/sr/db'
 import type { ReactNode } from 'react'
 import { useCallback, useMemo, useState } from 'react'
-import {
-  DatabaseContext,
-  type DatabaseContextObj,
-} from '../Context/DatabaseContext'
+import { DatabaseContext, type DatabaseContextObj } from '../context'
 
 export function DatabaseProvider({ children }: { children: ReactNode }) {
   const dbIndex = parseInt(localStorage.getItem('sro_dbIndex') || '1')

libs/sr/ui/src/Provider/index.tsx → libs/sr/db-ui/src/provider/index.ts

@@ -1,2 +1 @@
 export * from './DatabaseProvider'
-export * from './TeamCalcProvider'

libs/sr/db-ui/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsxImportSource": "@emotion/react"
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

libs/sr/db-ui/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

libs/sr/db/src/Database/DataManagers/BuildDataManager.ts

@@ -60,22 +60,7 @@ export class BuildDataManager extends DataManager<
   }
   override remove(key: string, notify?: boolean): Build | undefined {
     const build = super.remove(key, notify)
-    // remove data from loadout first
-    this.database.loadouts.entries.forEach(
-      ([loadoutId, loadout]) =>
-        loadout.buildIds.includes(key) &&
-        this.database.loadouts.set(loadoutId, {})
-    )
-    // once loadouts are validated, teams can be validated as well
-    this.database.teams.entries.forEach(
-      ([teamId, team]) =>
-        team.loadoutMetadata?.some(
-          (loadoutMetadatum) =>
-            loadoutMetadatum?.buildId === key ||
-            loadoutMetadatum?.compareBuildId
-        ) && this.database.teams.set(teamId, {}) // trigger a validation
-    )
-
+    // TODO: remove builds from teams
     return build
   }
 }

libs/sr/db/src/Database/DataManagers/BuildTcDataManager.ts

@@ -59,21 +59,7 @@ export class BuildTcDataManager extends DataManager<
   }
   override remove(key: string, notify?: boolean): IBuildTc | undefined {
     const buildTc = super.remove(key, notify)
-    // remove data from loadout first
-    this.database.loadouts.entries.forEach(
-      ([loadoutId, loadout]) =>
-        loadout.buildTcIds.includes(key) &&
-        this.database.loadouts.set(loadoutId, {})
-    )
-    // once loadouts are validated, teams can be validated as well
-    this.database.teams.entries.forEach(
-      ([teamId, team]) =>
-        team.loadoutMetadata?.some(
-          (loadoutMetadatum) =>
-            loadoutMetadatum?.buildTcId === key ||
-            loadoutMetadatum?.compareBuildTcId === key
-        ) && this.database.teams.set(teamId, {}) // trigger a validation
-    )
+    // TODO: remove tcbuild from teams?
 
     return buildTc
   }