Added active handling for all dropdown buttons

Signed-off-by: RaenonX <[email protected]>

Author: RaenonX

src/components/elements/gameData/unit/filter/main.tsx

@@ -107,7 +107,9 @@ export const UnitFilter = <S extends string,
               <DropdownButton title={sortTitle} variant="outline-light" menuVariant="dark">
                 {Object.entries(sortOrderNames).map(([sortBy, getNameFunc], idx) => (
                   <Dropdown.Item
-                    key={idx} onClick={() => setInputData({...inputData, sortBy: sortBy as S})}
+                    key={idx}
+                    onClick={() => setInputData({...inputData, sortBy: sortBy as S})}
+                    active={sortBy === inputData.sortBy}
                   >
                     {t(getNameFunc as GetTranslationFunction)}
                   </Dropdown.Item>

src/components/pages/gameData/skillAtk/sorter/main.tsx

@@ -28,7 +28,11 @@ export const AttackingSkillSorter = ({inputData, onOrderPicked}: Props) => {
   return (
     <DropdownButton title={title} variant="outline-light" menuVariant="dark">
       {Object.entries(orderName).map(([sortBy, getNameFunc], idx) => (
-        <Dropdown.Item key={idx} onClick={onItemPicked(sortBy as SortBy)}>
+        <Dropdown.Item
+          key={idx}
+          onClick={onItemPicked(sortBy as SortBy)}
+          active={sortBy === inputData.sortBy}
+        >
           {t(getNameFunc)}
         </Dropdown.Item>
       ))}

src/components/pages/tier/const.ts

@@ -36,9 +36,8 @@ export const sortFunc: SortFuncLookup = {
 };
 
 export const orderName: {[sortBy in SortOrder]: GetTranslationFunction} = {
-  unitId: (t) => t.game.unitTier.sort.unitId,
-  avgRanking: (t) => t.game.unitTier.sort.avgRanking,
   lastUpdated: (t) => t.game.unitTier.sort.lastUpdated,
+  avgRanking: (t) => t.game.unitTier.sort.avgRanking,
   conSolo: (t) => t.game.unitTier.dimension.conSolo,
   conAi: (t) => t.game.unitTier.dimension.conAi,
   conCoop: (t) => t.game.unitTier.dimension.conCoop,
@@ -47,6 +46,7 @@ export const orderName: {[sortBy in SortOrder]: GetTranslationFunction} = {
   normalCoop: (t) => t.game.unitTier.dimension.normalCoop,
   sharedSkill: (t) => t.game.unitTier.dimension.sharedSkill,
   kaleidoscape: (t) => t.game.unitTier.dimension.kaleidoscape,
+  unitId: (t) => t.game.unitTier.sort.unitId,
 };
 
 export const rankingColor: {[ranking in Ranking]: Property.Color} = {

src/components/pages/tier/utils.ts

@@ -12,7 +12,7 @@ import {EntryPack, EntryPackOfRanking, InputData, KeyPointsOfType} from './types
 
 
 export const generateInputData = (): InputData => ({
-  ...generateFilterInput('avgRanking'),
+  ...generateFilterInput('lastUpdated'),
   display: 'all',
 });