Merge pull request #1 from notV3NOM/development

Additionally sort the generated builds

apps/frontend/src/app/Components/Character/StatDisplayComponent.tsx

@@ -15,7 +15,13 @@ import { FieldDisplayList, NodeFieldDisplay } from '../FieldDisplay'
 import ImgIcon from '../Image/ImgIcon'
 import SqBadge from '../SqBadge'
 
-export default function StatDisplayComponent() {
+export default function StatDisplayComponent({
+  index,
+  sortOptions,
+}: {
+  index?: number
+  sortOptions?: { sortBase: string[]; ascending: boolean }
+}) {
   const { data } = useContext(DataContext)
   const sections = useMemo(
     () =>
@@ -24,6 +30,20 @@ export default function StatDisplayComponent() {
       ),
     [data]
   )
+  if (sortOptions) {
+    const sortValues = JSON.parse(localStorage.getItem('sortValues') || '{}')
+    for (const [sectionKey, displayNs] of sections) {
+      for (const [nodeKey, n] of Object.entries(displayNs)) {
+        if (
+          JSON.stringify(sortOptions.sortBase) ===
+          JSON.stringify([sectionKey, nodeKey])
+        ) {
+          sortValues[index.toString()] = n.value
+          localStorage.setItem('sortValues', JSON.stringify(sortValues))
+        }
+      }
+    }
+  }
   return (
     <Box sx={{ mr: -1, mb: -1 }}>
       <Masonry columns={{ xs: 1, sm: 2, md: 3, xl: 4 }} spacing={1}>

apps/frontend/src/app/Database/DataManagers/BuildSettingData.ts

@@ -75,6 +75,8 @@ export interface BuildSetting {
   compareBuild: boolean
   levelLow: number
   levelHigh: number
+  sortBase?: string[]
+  sortAsc?: boolean
 }
 
 export class BuildSettingDataManager extends DataManager<
@@ -115,6 +117,8 @@ export class BuildSettingDataManager extends DataManager<
       compareBuild,
       levelLow,
       levelHigh,
+      sortBase,
+      sortAsc,
     } = obj as BuildSetting
 
     if (typeof statFilters !== 'object') statFilters = {}
@@ -166,6 +170,8 @@ export class BuildSettingDataManager extends DataManager<
     )
       maxBuildsToShow = maxBuildsToShowDefault
     if (!plotBase || !Array.isArray(plotBase)) plotBase = undefined
+    if (!sortBase || !Array.isArray(sortBase)) sortBase = undefined
+    if (sortAsc === undefined) sortAsc = false
     if (compareBuild === undefined) compareBuild = false
     if (levelLow === undefined) levelLow = 0
     if (levelHigh === undefined) levelHigh = 20
@@ -193,6 +199,8 @@ export class BuildSettingDataManager extends DataManager<
       compareBuild,
       levelLow,
       levelHigh,
+      sortBase,
+      sortAsc,
     }
   }
   override get(key: CharacterKey) {
@@ -220,6 +228,8 @@ const initialBuildSettings: BuildSetting = deepFreeze({
   compareBuild: true,
   levelLow: 0,
   levelHigh: 20,
+  sortBase: undefined,
+  sortAsc: false,
 })
 
 export function handleArtSetExclusion(

apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/BuildDisplayItem.tsx

@@ -56,6 +56,8 @@ type BuildDisplayItemProps = {
   disabled?: boolean
   extraButtonsRight?: JSX.Element
   extraButtonsLeft?: JSX.Element
+  index?: number
+  sortOptions?: { sortBase: string[]; ascending: boolean }
 }
 //for displaying each artifact build
 export default function BuildDisplayItem({
@@ -64,6 +66,8 @@ export default function BuildDisplayItem({
   extraButtonsRight,
   extraButtonsLeft,
   disabled,
+  index,
+  sortOptions,
 }: BuildDisplayItemProps) {
   const {
     character: { key: characterKey, equippedArtifacts },
@@ -213,7 +217,7 @@ export default function BuildDisplayItem({
             {artNanos}
           </Grid>
           <DataContext.Provider value={statProviderContext}>
-            <StatDisplayComponent />
+            <StatDisplayComponent index={index} sortOptions={sortOptions} />
           </DataContext.Provider>
         </CardContent>
       </Suspense>

apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/Components/SortCard/index.tsx

@@ -5,23 +5,17 @@ import BootstrapTooltip from '../../../../../../Components/BootstrapTooltip'
 import CardLight from '../../../../../../Components/Card/CardLight'
 import SortIcon from '@mui/icons-material/Sort'
 import OptimizationTargetSelector from '../OptimizationTargetSelector'
+import { useContext } from 'react'
+import { CharacterContext } from '../../../../../../Context/CharacterContext'
+import useBuildSetting from '../../useBuildSetting'
 
-type SortCardProps = {
-  sortBase?: string[]
-  setSortBase: (path: string[] | undefined) => void
-  ascending: boolean
-  setAscending: (ascending: boolean) => void
-  optimizationTarget?: string[]
-}
-
-export default function SortCard({
-  sortBase,
-  setSortBase,
-  ascending,
-  setAscending,
-  optimizationTarget,
-}: SortCardProps) {
+export default function SortCard() {
   const { t } = useTranslation(['page_character_optimize', 'ui'])
+  const {
+    character: { key: characterKey },
+  } = useContext(CharacterContext)
+  const { buildSetting, buildSettingDispatch } = useBuildSetting(characterKey)
+  const { optimizationTarget, sortBase, sortAsc } = buildSetting
 
   return (
     <CardLight>
@@ -34,22 +28,28 @@ export default function SortCard({
             <span>
               <OptimizationTargetSelector
                 optimizationTarget={sortBase}
-                setTarget={(target) => setSortBase(target)}
+                setTarget={(target) => {
+                  buildSettingDispatch({ sortBase: target })
+                }}
                 defaultText={'Select a Sort Target'}
                 disabled={false}
               />
             </span>
           </Grid>
           <Grid item>
             <Button
-              onClick={() => setAscending(!ascending)}
+              onClick={() => {
+                buildSettingDispatch({ sortAsc: !sortAsc })
+              }}
               startIcon={
                 <SortIcon
-                  sx={{ transform: ascending ? 'scale(1, -1)' : 'scale(1)' }}
+                  sx={{
+                    transform: sortAsc ? 'scale(1, -1)' : 'scale(1)',
+                  }}
                 />
               }
             >
-              {ascending ? t('ui:Ascending') : t('ui:Descending')}
+              {sortAsc ? t('ui:Ascending') : t('ui:Descending')}
             </Button>
           </Grid>
           <Grid item>
@@ -61,8 +61,11 @@ export default function SortCard({
                 <Button
                   color="error"
                   onClick={() => {
-                    setSortBase(optimizationTarget)
-                    setAscending(false)
+                    localStorage.removeItem('sortValues')
+                    buildSettingDispatch({
+                      sortBase: optimizationTarget,
+                      sortAsc: false,
+                    })
                   }}
                   disabled={false}
                 >

apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/index.tsx

@@ -155,11 +155,15 @@ export default function TabBuild() {
     maxBuildsToShow,
     levelLow,
     levelHigh,
+    sortBase,
+    sortAsc,
   } = buildSetting
+
   const {
     buildResult: { builds, buildDate },
     buildResultDispatch,
   } = useBuildResult(characterKey)
+
   const teamData = useTeamData(characterKey, mainStatAssumptionLevel)
   const { characterSheet, target: data } =
     teamData?.[characterKey as CharacterKey] ?? {}
@@ -173,9 +177,6 @@ export default function TabBuild() {
     [setArtsDirty, database]
   )
 
-  const [sortBase, setSortBase] = useState<string[]>(optimizationTarget)
-  const [ascending, setAscending] = useState<boolean>(false)
-
   const deferredArtsDirty = useDeferredValue(artsDirty)
   const deferredBuildSetting = useDeferredValue(buildSetting)
   const filteredArts = useMemo(() => {
@@ -298,7 +299,8 @@ export default function TabBuild() {
     } = buildSetting
     if (!characterKey || !optimizationTarget) return
 
-    setSortBase(optimizationTarget)
+    buildSettingDispatch({ sortBase: optimizationTarget, sortAsc: false })
+
     const split = compactArtifacts(
       filteredArts,
       mainStatAssumptionLevel,
@@ -463,6 +465,7 @@ export default function TabBuild() {
   }, [
     buildSetting,
     characterKey,
+    buildSettingDispatch,
     filteredArts,
     database,
     gender,
@@ -751,13 +754,7 @@ export default function TabBuild() {
             />
           </Box>
           <Box>
-            <SortCard
-              sortBase={sortBase}
-              setSortBase={setSortBase}
-              ascending={ascending}
-              setAscending={setAscending}
-              optimizationTarget={optimizationTarget}
-            />
+            <SortCard />
           </Box>
           <CardLight>
             <CardContent>
@@ -789,6 +786,10 @@ export default function TabBuild() {
                   onClick={() => {
                     setGraphBuilds(undefined)
                     buildResultDispatch({ builds: [], buildDate: 0 })
+                    buildSettingDispatch({
+                      sortBase: optimizationTarget,
+                      sortAsc: false,
+                    })
                   }}
                 >
                   Clear Builds
@@ -831,8 +832,6 @@ export default function TabBuild() {
                 disabled={!!generatingBuilds}
                 getLabel={getGraphBuildLabel}
                 setBuilds={setGraphBuilds}
-                sortBase={sortBase}
-                ascending={ascending}
               />
             )}
             <BuildList
@@ -842,8 +841,7 @@ export default function TabBuild() {
               compareData={compareData}
               disabled={!!generatingBuilds}
               getLabel={getNormBuildLabel}
-              sortBase={sortBase}
-              ascending={ascending}
+              sortOptions={{ sortBase: sortBase, ascending: sortAsc }}
             />
           </OptimizationTargetContext.Provider>
         </DataContext.Provider>
@@ -860,20 +858,17 @@ function BuildList({
   compareData,
   disabled,
   getLabel,
-  sortBase,
-  ascending,
+  sortOptions,
 }: {
   builds: string[][]
   setBuilds?: (builds: string[][] | undefined) => void
-  characterKey?: '' | CharacterKey
+  characterKey?: CharacterKey
   data?: UIData
   compareData: boolean
   disabled: boolean
   getLabel: (index: number) => Displayable
-  sortBase: string[]
-  ascending: boolean
+  sortOptions?: { sortBase: string[]; ascending: boolean }
 }) {
-  if (ascending) builds = [...builds].reverse()
   const deleteBuild = useCallback(
     (index: number) => {
       if (setBuilds) {
@@ -891,7 +886,6 @@ function BuildList({
         fallback={<Skeleton variant="rectangular" width="100%" height={600} />}
       >
         {builds?.map((build, index) => {
-          index = ascending ? builds.length - 1 - index : index
           return (
             characterKey &&
             data && (
@@ -908,6 +902,7 @@ function BuildList({
                   compareData={compareData}
                   disabled={disabled}
                   deleteBuild={setBuilds ? deleteBuild : undefined}
+                  sortOptions={sortOptions}
                 />
               </DataContextWrapper>
             )
@@ -919,15 +914,19 @@ function BuildList({
       builds,
       characterKey,
       data,
+      getLabel,
       compareData,
       disabled,
-      getLabel,
-      deleteBuild,
       setBuilds,
-      ascending,
+      deleteBuild,
+      sortOptions,
     ]
   )
-  return list
+  const sortedList = useMemo(
+    () => SortList(list, sortOptions),
+    [list, sortOptions]
+  )
+  return sortedList
 }
 function BuildItemWrapper({
   index,
@@ -936,13 +935,15 @@ function BuildItemWrapper({
   compareData,
   disabled,
   deleteBuild,
+  sortOptions,
 }: {
   index: number
   label: Displayable
   build: string[]
   compareData: boolean
   disabled: boolean
   deleteBuild?: (index: number) => void
+  sortOptions?: { sortBase: string[]; ascending: boolean }
 }) {
   const { t } = useTranslation('page_character_optimize')
   const location = useLocation()
@@ -980,6 +981,8 @@ function BuildItemWrapper({
           )}
         </>
       }
+      index={index}
+      sortOptions={sortOptions}
     />
   )
 }
@@ -1026,3 +1029,23 @@ function DataContextWrapper({ children, characterKey, build, oldData }: Prop) {
     </DataContext.Provider>
   )
 }
+
+function SortList(
+  list: React.JSX.Element,
+  sortOptions: { sortBase: string[]; ascending: boolean }
+) {
+  const sortValues = JSON.parse(localStorage.getItem('sortValues') || '{}')
+
+  const sortedBuildsWithValues = {}
+  list.props.children.map((child: JSX.Element, index: number) => {
+    sortedBuildsWithValues[child.key] = sortValues[index.toString()]
+  })
+
+  list.props.children.sort((a, b) => {
+    const valueA = sortedBuildsWithValues[a.key] || 0
+    const valueB = sortedBuildsWithValues[b.key] || 0
+    return sortOptions.ascending ? valueA - valueB : valueB - valueA
+  })
+
+  return list
+}