[FEATURE] introducing wave info to expansion (#500)

* [FEATURE] introducing wave info to expansion

Issue: #467

Phase 2:
 - Sort expansions by wave in Settings -> Expansions
 - Display expansion/wave language dependent in Randomizer -> Nemesis
 - Display expansion/wave language dependent in Randomizer -> Nemesis Cards
 - Display expansion/wave language dependent in Randomizer -> Mages
 - Display expansion/wave language dependent in Nemesis details
 - Display expansion/wave language dependent in Nemesis Card details
 - Display expansion/wave language dependent in Mage details

* [FEATURE] introducing wave info to expansion

Issue: #467

Small fixes in Pull Request

Author: MilanTheHawk

src/Redux/Store/Settings/Expansions/Expansions/index.ts

@@ -6,6 +6,7 @@ import { selectors as LanguageSelectors } from '../Languages'
 import * as Content from './content'
 import * as Selected from './selected'
 import * as Ids from './ids'
+import * as types from 'aer-types/types'
 import { createAction, ActionsUnion } from '@martin_hotell/rex-tils'
 import { EXPANSIONS_DB_KEY } from './constants'
 import { getContentWithLanguageFallback } from './content/selectors'
@@ -62,7 +63,7 @@ export const Reducer = reduceReducers(
   (state: State, action: Action) => {
     switch (action.type) {
       case ActionTypes.TOGGLE_ALL: {
-        const allExpansionsSelected = state.ids.every(id =>
+        const allExpansionsSelected = state.ids.every((id) =>
           state.selected.includes(id)
         )
 
@@ -105,54 +106,38 @@ const getExpansionIds = (
 
 const getExpansionsByIdList = createSelector(
   [Content.selectors.getContent, getExpansionIds],
-  (content, ids) => ids.map(id => content.ENG[id])
+  (content, ids) => ids.map((id) => content.ENG[id])
 )
 
 const getExpansionNamesByIdList = createSelector(
   [getExpansionsByIdList],
-  expansions => expansions.map(e => e.name)
+  (expansions) => expansions.map((e) => e.name)
 )
 
 const getAllExpansionsSelected = createSelector(
   [Ids.selectors.getIds, Selected.selectors.getSelected],
-  (ids, selectedIds) => ids.every(id => selectedIds.includes(id))
+  (ids, selectedIds) => ids.every((id) => selectedIds.includes(id))
 )
 
 const getHasStandaloneExpansion = createSelector(
   [Selected.selectors.getSelected, Content.selectors.getContent],
   (selectedIds, content) =>
-    selectedIds.some(id => content.ENG[id].type === 'standalone')
+    selectedIds.some((id) => content.ENG[id].type === 'standalone')
 )
 
 const getStandaloneExpansionIds = createSelector(
   [Ids.selectors.getIds, Content.selectors.getContent],
-  (ids, content) => ids.filter(id => content.ENG[id].type === 'standalone')
+  (ids, content) => ids.filter((id) => content.ENG[id].type === 'standalone')
 )
 
 const getMiniExpansionIds = createSelector(
   [Ids.selectors.getIds, Content.selectors.getContent],
-  (ids, content) => ids.filter(id => content.ENG[id].type === 'mini')
+  (ids, content) => ids.filter((id) => content.ENG[id].type === 'mini')
 )
 
 const getPromoIds = createSelector(
   [Ids.selectors.getIds, Content.selectors.getContent],
-  (ids, content) =>
-    ids
-      .filter(id => content.ENG[id].type === 'promo')
-      .sort((a, b) => {
-        const promoA = content.ENG[a].name
-        const promoB = content.ENG[b].name
-
-        if (promoA < promoB) {
-          return -1
-        }
-
-        if (promoA > promoB) {
-          return 1
-        }
-
-        return 0
-      })
+  (ids, content) => ids.filter((id) => content.ENG[id].type === 'promo')
 )
 
 const getStandaloneExpansions = createSelector(
@@ -161,28 +146,62 @@ const getStandaloneExpansions = createSelector(
     getStandaloneExpansionIds,
     LanguageSelectors.getLanguagesByExpansion,
   ],
-  (content, ids, languages) =>
-    ids.map(id => getContentWithLanguageFallback(languages, content, id))
+  (content, ids, languages) => {
+    const expansions = ids.map((id) =>
+      getContentWithLanguageFallback(languages, content, id)
+    )
+    return sortExpansions(expansions)
+  }
 )
 const getMiniExpansions = createSelector(
   [
     Content.selectors.getContent,
     getMiniExpansionIds,
     LanguageSelectors.getLanguagesByExpansion,
   ],
-  (content, ids, languages) =>
-    ids.map(id => getContentWithLanguageFallback(languages, content, id))
+  (content, ids, languages) => {
+    const expansions = ids.map((id) =>
+      getContentWithLanguageFallback(languages, content, id)
+    )
+    return sortExpansions(expansions)
+  }
 )
 const getPromos = createSelector(
   [
     Content.selectors.getContent,
     getPromoIds,
     LanguageSelectors.getLanguagesByExpansion,
   ],
-  (content, ids, languages) =>
-    ids.map(id => getContentWithLanguageFallback(languages, content, id))
+  (content, ids, languages) => {
+    const expansions = ids.map((id) =>
+      getContentWithLanguageFallback(languages, content, id)
+    )
+    return sortExpansions(expansions)
+  }
 )
 
+function sortExpansions(expansions: types.Expansion[]): types.Expansion[] {
+  return expansions.sort((e1, e2) => {
+    if (e1.wave < e2.wave) {
+      return -1
+    }
+
+    if (e1.wave > e2.wave) {
+      return 1
+    }
+
+    if (e1.name < e2.name) {
+      return -1
+    }
+
+    if (e1.name > e2.name) {
+      return 1
+    }
+
+    return 0
+  })
+}
+
 export const selectors = {
   selected: Selected.selectors,
   ids: Ids.selectors,

src/components/molecules/BasicNemesisCardInformation/index.tsx

@@ -11,13 +11,14 @@ import AbilityText from 'components/atoms/AbilityText'
 
 type Props = {
   card: types.BasicNemesisCard | types.UpgradedBasicNemesisCard
-  expansionName: string
+  expansion: types.Expansion
   theme: any
 }
 
-const Body = ({ card, expansionName, theme }: Props) => (
+const Body = ({ card, expansion, theme }: Props) => (
   <React.Fragment>
-    <InfoItem label="Expansion" info={expansionName} />
+    <InfoItem label="Expansion" info={expansion.name} />
+    <InfoItem label="Wave" info={expansion.wave || '-'} />
     <InfoItem label="Tier" info={card.tier.toString()} />
     {card.type && <InfoItem label="Type" info={card.type} />}
     {card.type === 'Minion' && (

src/components/molecules/BasicNemesisCardModal/index.tsx

@@ -15,9 +15,10 @@ import ModalBodyWrapper from 'components/atoms/ModalBodyWrapper'
 import P from 'components/atoms/P'
 
 const mapStateToProps = (state: RootState, _: any) => ({
-  expansions: selectors.Settings.Expansions.Expansions.content.getContent(
-    state
-  ),
+  expansions:
+    selectors.Settings.Expansions.Expansions.content.getExpansionsWithLanguageFallback(
+      state
+    ),
 })
 
 type Props = ReturnType<typeof mapStateToProps> & {
@@ -41,10 +42,7 @@ const BasicNemesisCardModal = ({
     <RenderModal titleColor={titleColor} titleLabel={titleLabel}>
       <ModalBodyWrapper>
         {card ? (
-          <Body
-            card={card}
-            expansionName={expansions.ENG[card.expansion].name || ''}
-          />
+          <Body card={card} expansion={expansions[card.expansion]} />
         ) : (
           <P>No content</P>
         )}

src/components/molecules/MageInformation/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { withTheme } from 'styled-components/macro'
 
-import { Mage, ICard } from 'aer-types/types'
+import { Mage, ICard, Expansion } from 'aer-types/types'
 
 import InfoItem from '../InfoItem'
 
@@ -21,7 +21,7 @@ const renderUniqueStarters = (uniqueStarters: ICard[]) => {
 type Props = {
   mage: Mage
   player: 'player1' | 'player2' | 'player3' | 'player4'
-  expansionName: string
+  expansion: Expansion
   theme: any
 }
 
@@ -34,10 +34,11 @@ function formatCharges(
   }`
 }
 
-const MageInformation = ({ mage, player, expansionName, theme }: Props) => (
+const MageInformation = ({ mage, player, expansion, theme }: Props) => (
   <React.Fragment>
     <InfoItem label="Title" info={mage.mageTitle} />
-    <InfoItem label="Expansion" info={expansionName} />
+    <InfoItem label="Expansion" info={expansion.name} />
+    <InfoItem label="Wave" info={expansion.wave || '-'} />
     <InfoItem
       label="Charges"
       info={formatCharges(mage.numberOfCharges, mage.numberOfOvercharges)}

src/components/molecules/MageList/MageTile/Body.tsx

@@ -1,19 +1,22 @@
 import React from 'react'
 
-import { Mage } from 'aer-types/types'
+import { Mage, Expansion } from 'aer-types/types'
+import { formatExpansionName } from 'helpers'
 
 import ExpansionName from './ExpansionName'
 import Name from './Name'
 import Title from './Title'
 
 type Props = {
   mage: Mage
-  expansionName: string
+  expansion: Expansion
 }
 
-const Body = ({ mage, expansionName }: Props) => (
+const Body = ({ mage, expansion }: Props) => (
   <React.Fragment>
-    <ExpansionName color="textSecondary">{expansionName}</ExpansionName>
+    <ExpansionName color="textSecondary">
+      {formatExpansionName(expansion)}
+    </ExpansionName>
     <Name variant="h6" component="h2">
       {mage.name}
     </Name>

src/components/molecules/MageList/MageTile/index.tsx

@@ -23,10 +23,10 @@ type OwnProps = {
 
 const mapStateToProps = (state: RootState, ownProps: OwnProps) => {
   return {
-    expansion: selectors.Settings.Expansions.Expansions.content.getExpansionById(
-      state,
-      { expansionId: ownProps.mage.expansion }
-    ),
+    expansion:
+      selectors.Settings.Expansions.Expansions.content.getExpansionById(state, {
+        expansionId: ownProps.mage.expansion,
+      }),
   }
 }
 
@@ -53,7 +53,7 @@ const MageTile = ({ mage, playerNumber, theme, expansion }: Props) => {
   return (
     <Wrapper item xs={12} sm={6} md={3} data-test="mage-tile">
       <Tile
-        body={<Body mage={mage} expansionName={expansion.name} />}
+        body={<Body mage={mage} expansion={expansion} />}
         bgColor={bgColor}
         fontColor={theme.colors.white}
         icon={theme.icons.mage}

src/components/molecules/MageModal/index.tsx

@@ -13,9 +13,10 @@ import ModalBodyWrapper from '../../atoms/ModalBodyWrapper'
 import MageInformation from '../MageInformation'
 
 const mapStateToProps = (state: RootState, _: any) => ({
-  expansions: selectors.Settings.Expansions.Expansions.content.getContent(
-    state
-  ),
+  expansions:
+    selectors.Settings.Expansions.Expansions.content.getExpansionsWithLanguageFallback(
+      state
+    ),
 })
 
 type Props = ReturnType<typeof mapStateToProps> & {
@@ -35,7 +36,7 @@ const MageModal = ({ player, mage, expansions, theme, RenderModal }: Props) => {
     <MageInformation
       mage={mage}
       player={player}
-      expansionName={expansions.ENG[mage.expansion].name || ''}
+      expansion={expansions[mage.expansion]}
     />
   ) : (
     'No content'

src/components/molecules/NemesisInformation/index.tsx

@@ -42,6 +42,7 @@ const NemesisInformation = ({ nemesis, expansion, theme }: Props) => {
   return (
     <React.Fragment>
       <InfoItem label="Expansion" info={expansion.name} />
+      <InfoItem label="Wave" info={expansion.wave || '-'} />
       <InfoItem label="Health" info={nemesis.health.toString()} />
       <InfoItem label="Difficulty" info={nemesis.difficulty.toString()} />
       <InfoItem

src/components/pages/Randomizer/BasicNemesisCards/BasicNemesisCardList/BasicNemesisCardTile/Body.tsx

@@ -14,9 +14,10 @@ type OwnProps = {
 }
 
 const mapStateToProps = (state: RootState) => ({
-  expansions: selectors.Settings.Expansions.Expansions.content.getContent(
-    state
-  ),
+  expansions:
+    selectors.Settings.Expansions.Expansions.content.getExpansionsWithLanguageFallback(
+      state
+    ),
 })
 
 const mapDispatchToProps = {}
@@ -31,7 +32,11 @@ const Body = ({ nemesisCard, expansions }: Props) => (
     <List>
       <InfoItem
         label="Set"
-        info={expansions.ENG[nemesisCard.expansion]?.name || ''}
+        info={expansions[nemesisCard.expansion]?.name || ''}
+      />
+      <InfoItem
+        label="Wave"
+        info={expansions[nemesisCard.expansion]?.wave || ''}
       />
       <InfoItem label="Tier" info={nemesisCard.tier.toString()} />
       {nemesisCard.type && <InfoItem label="Type" info={nemesisCard.type} />}

src/components/pages/Randomizer/Nemeses/NemesisTile/Body.tsx

@@ -1,17 +1,20 @@
 import React from 'react'
-import { Nemesis } from 'aer-types/types'
+import { Nemesis, Expansion } from 'aer-types/types'
+import { formatExpansionName } from 'helpers'
 
 import ExpansionName from './ExpansionName'
 import Name from './Name'
 
 type Props = {
   nemesis: Nemesis
-  expansionName: string
+  expansion: Expansion
 }
 
-const Body = ({ nemesis, expansionName }: Props) => (
+const Body = ({ nemesis, expansion }: Props) => (
   <React.Fragment>
-    <ExpansionName color="textSecondary">{expansionName}</ExpansionName>
+    <ExpansionName color="textSecondary">
+      {formatExpansionName(expansion)}
+    </ExpansionName>
     <Name variant="h6" component="h2">
       {nemesis['name']}
     </Name>

src/components/pages/Randomizer/Nemeses/NemesisTile/index.tsx

@@ -18,10 +18,10 @@ type OwnProps = {
 
 const mapStateToProps = (state: RootState, ownProps: OwnProps) => {
   return {
-    expansion: selectors.Settings.Expansions.Expansions.content.getExpansionById(
-      state,
-      { expansionId: ownProps.nemesis.expansion }
-    ),
+    expansion:
+      selectors.Settings.Expansions.Expansions.content.getExpansionById(state, {
+        expansionId: ownProps.nemesis.expansion,
+      }),
   }
 }
 
@@ -39,7 +39,7 @@ const NemesisTile = ({
 }: Props) => {
   return (
     <Tile
-      body={<Body nemesis={nemesis} expansionName={expansion.name} />}
+      body={<Body nemesis={nemesis} expansion={expansion} />}
       bgColor={theme.colors.turnOrderCards.nemesis.normal}
       fontColor={theme.colors.white}
       icon={theme.icons.nemesis}

src/components/pages/Settings/Expansions/ActiveSets/ExpansionList/Checkbox.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react'
 import { connect } from 'react-redux'
 
 import * as types from 'aer-types/types'
+import { formatExpansionName } from 'helpers'
 
 import CheckboxWithControls from '../../../../../molecules/CheckboxWithControls'
 
@@ -52,9 +53,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(React.memo(Checkbox))
-
-function formatExpansionName(expansion: types.Expansion): string {
-  return expansion.wave
-    ? expansion.name + ' (' + expansion.wave + ')'
-    : expansion.name + ' (-)'
-}