FEATURE: Change expansion language globally (#477)

* FEATURE: Change expansion language globally

* TASK: Add tests for global language change for expansions in settings

* TASK: Set global language when all expansions have same language

Author: jannydiamond

src/Redux/Store/Settings/Expansions/GlobalLanguage/__test__/reducer.test.ts

@@ -0,0 +1,79 @@
+import { Cmd, getCmd, getModel } from 'redux-loop'
+import { set as setToDb, get as getFromDb } from 'idb-keyval'
+
+import { State } from '../types'
+import { GLOBAL_LANGUAGE_DB_KEY } from '../constants'
+import { actions } from '../actions'
+
+import { initialState, Reducer } from '../reducer'
+
+const mockSelectedState: State = initialState
+
+describe('Settings | Expansions | GlobalLanguage | reducer', () => {
+  it('should return the initial state', () => {
+    // @ts-ignore
+    const result = Reducer(undefined, {})
+
+    expect(result).toEqual(initialState)
+  })
+
+  it('should handle SELECT', () => {
+    const result = Reducer(mockSelectedState, actions.select('PL'))
+
+    const expected = 'PL'
+
+    const model = getModel(result)
+    const cmd = getCmd(result)
+
+    expect(model).toEqual(expected)
+
+    expect(cmd).toEqual(
+      Cmd.run(setToDb, {
+        args: [GLOBAL_LANGUAGE_DB_KEY, expected],
+        successActionCreator: actions.setToDBSuccessful,
+        failActionCreator: actions.setToDBFailed,
+      })
+    )
+  })
+
+  it('should handle FETCH_FROM_DB', () => {
+    const result = Reducer(initialState, actions.fetchFromDB())
+
+    const model = getModel(result)
+    const cmd = getCmd(result)
+
+    expect(model).toEqual(initialState)
+
+    expect(cmd).toEqual(
+      Cmd.run(getFromDb, {
+        args: [GLOBAL_LANGUAGE_DB_KEY],
+        successActionCreator: actions.fetchFromDBSuccessful,
+        failActionCreator: actions.fetchFromDBFailed,
+      })
+    )
+  })
+
+  it('should handle FETCH_FROM_DB_SUCCESS for defined state', () => {
+    const result = Reducer(
+      mockSelectedState,
+      actions.fetchFromDBSuccessful(initialState)
+    )
+
+    expect(getModel(result)).toEqual(mockSelectedState)
+  })
+
+  it('should handle FETCH_FROM_DB_SUCCESS for undefined state', () => {
+    const result = Reducer(
+      initialState,
+      // @ts-ignore
+      actions.fetchFromDBSuccessful(undefined)
+    )
+
+    expect(getModel(result)).toEqual(initialState)
+  })
+
+  it.todo('should handle FETCH_FROM_DB_FAILURE')
+  it.todo('should handle SET_TO_DB')
+  it.todo('should handle SET_TO_DB_SUCCESS')
+  it.todo('should handle SET_TO_DB_FAILURE')
+})

src/Redux/Store/Settings/Expansions/GlobalLanguage/__test__/selectors.test.ts

@@ -0,0 +1,22 @@
+import * as types from 'aer-types/types'
+
+import { SelectedGlobalLanguageStateSlice } from '../types'
+
+import { initialState } from '../reducer'
+import { selectors } from '../selectors'
+
+const mockLanguagesState: SelectedGlobalLanguageStateSlice = {
+  Settings: {
+    Expansions: {
+      GlobalLanguage: initialState,
+    },
+  },
+}
+
+describe('Settings | Expansions | GlobalLanguage | selectors', () => {
+  test('getGlobalLanguageOfExpansions()', () => {
+    expect(selectors.getGlobalLanguageOfExpansions(mockLanguagesState)).toEqual(
+      initialState
+    )
+  })
+})

src/Redux/Store/Settings/Expansions/GlobalLanguage/actions.ts

@@ -0,0 +1,19 @@
+import { createAction } from '@martin_hotell/rex-tils'
+
+import { ActionTypes, State } from './types'
+import { GlobalLanguageKey } from '../types'
+
+export const actions = {
+  noOp: () => createAction('@@REDUX_LOOP/ENFORCE_DEFAULT_HANDLING'),
+  select: (lang: GlobalLanguageKey) =>
+    createAction(ActionTypes.SELECT, { lang }),
+  setToDB: (state: State) => createAction(ActionTypes.SET_TO_DB, state),
+  setToDBSuccessful: () => createAction(ActionTypes.SET_TO_DB_SUCCESS),
+  setToDBFailed: (error: Object) =>
+    createAction(ActionTypes.SET_TO_DB_FAILURE, error),
+  fetchFromDB: () => createAction(ActionTypes.FETCH_FROM_DB),
+  fetchFromDBSuccessful: (language: unknown) =>
+    createAction(ActionTypes.FETCH_FROM_DB_SUCCESS, language),
+  fetchFromDBFailed: (error: Object) =>
+    createAction(ActionTypes.FETCH_FROM_DB_FAILURE, error),
+}

src/Redux/Store/Settings/Expansions/GlobalLanguage/constants.ts

@@ -0,0 +1 @@
+export const GLOBAL_LANGUAGE_DB_KEY = 'global-language-1.8'

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

@@ -0,0 +1,4 @@
+export { actions } from './actions'
+export { initialState, Reducer } from './reducer'
+export { selectors } from './selectors'
+export * from './types'

src/Redux/Store/Settings/Expansions/GlobalLanguage/reducer.ts

@@ -0,0 +1,34 @@
+import { LoopReducer } from 'redux-loop'
+
+import { Action, ActionTypes, State } from './types'
+
+import * as reducerHelpers from './reducerHelpers'
+
+export const initialState: State = 'ENG'
+
+export const Reducer: LoopReducer<State, Action> = (
+  state: State = initialState,
+  action: Action
+) => {
+  switch (action.type) {
+    case ActionTypes.SELECT: {
+      return reducerHelpers.select(action)
+    }
+
+    case ActionTypes.FETCH_FROM_DB: {
+      return reducerHelpers.fetchFromDb(state)
+    }
+
+    case ActionTypes.FETCH_FROM_DB_SUCCESS: {
+      return reducerHelpers.fetchFromDbSuccess(state, action)
+    }
+
+    case ActionTypes.FETCH_FROM_DB_FAILURE: {
+      return state
+    }
+
+    default: {
+      return state
+    }
+  }
+}

src/Redux/Store/Settings/Expansions/GlobalLanguage/reducerHelpers/fetchFromDb.ts

@@ -0,0 +1,28 @@
+import { loop, Cmd } from 'redux-loop'
+import { get as getFromDb } from 'idb-keyval'
+
+import { State } from '../types'
+import { GLOBAL_LANGUAGE_DB_KEY } from '../constants'
+import { initialState } from '../reducer'
+import { actions } from '../actions'
+
+export const fetchFromDb = (state: State) => {
+  return loop(
+    state,
+    Cmd.run(getFromDb, {
+      args: [GLOBAL_LANGUAGE_DB_KEY],
+      successActionCreator: actions.fetchFromDBSuccessful,
+      failActionCreator: actions.fetchFromDBFailed,
+    })
+  )
+}
+
+export const fetchFromDbSuccess = (
+  _: State,
+  action: ReturnType<typeof actions.fetchFromDBSuccessful>
+) => {
+  if (typeof action.payload === 'string' && action.payload !== null) {
+    return action.payload as State
+  }
+  return initialState
+}

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

@@ -0,0 +1,2 @@
+export * from './select'
+export * from './fetchFromDb'

src/Redux/Store/Settings/Expansions/GlobalLanguage/reducerHelpers/select.ts

@@ -0,0 +1,19 @@
+import { Cmd, loop } from 'redux-loop'
+import { set as setToDb } from 'idb-keyval'
+
+import { GLOBAL_LANGUAGE_DB_KEY } from '../constants'
+import { actions } from '../actions'
+
+export const select = (action: ReturnType<typeof actions.select>) => {
+  const { lang } = action.payload
+  const newState = lang
+
+  return loop(
+    newState,
+    Cmd.run(setToDb, {
+      args: [GLOBAL_LANGUAGE_DB_KEY, newState],
+      successActionCreator: actions.setToDBSuccessful,
+      failActionCreator: actions.setToDBFailed,
+    })
+  )
+}

src/Redux/Store/Settings/Expansions/GlobalLanguage/selectors.ts

@@ -0,0 +1,9 @@
+import { SelectedGlobalLanguageStateSlice } from './types'
+
+const getGlobalLanguageOfExpansions = (
+  state: SelectedGlobalLanguageStateSlice
+) => state.Settings.Expansions.GlobalLanguage
+
+export const selectors = {
+  getGlobalLanguageOfExpansions,
+}

src/Redux/Store/Settings/Expansions/GlobalLanguage/types.ts

@@ -0,0 +1,26 @@
+import { ActionsUnion } from '@martin_hotell/rex-tils'
+
+import { actions } from './actions'
+import { GlobalLanguageKey } from '../types'
+
+export type State = GlobalLanguageKey
+
+export enum ActionTypes {
+  SELECT = 'Settings/Expansions/GlobalLanguage/SELECT',
+  SET_TO_DB = 'Settings/Expansions/GlobalLanguage/SET_TO_DB',
+  SET_TO_DB_SUCCESS = 'Settings/Expansions/GlobalLanguage/SET_TO_DB_SUCCESS',
+  SET_TO_DB_FAILURE = 'Settings/Expansions/GlobalLanguage/SET_TO_DB_FAILURE',
+  FETCH_FROM_DB = 'Settings/Expansions/GlobalLanguage/FETCH_FROM_DB',
+  FETCH_FROM_DB_SUCCESS = 'Settings/Expansions/GlobalLanguage/FETCH_FROM_DB_SUCCESS',
+  FETCH_FROM_DB_FAILURE = 'Settings/Expansions/GlobalLanguage/FETCH_FROM_DB_FAILURE',
+}
+
+export type Action = ActionsUnion<typeof actions>
+
+export type SelectedGlobalLanguageStateSlice = {
+  Settings: {
+    Expansions: {
+      GlobalLanguage: State
+    }
+  }
+}

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

@@ -10,6 +10,7 @@ import * as Treasures from './Treasures'
 import * as BasicNemesisCards from './BasicNemesisCards'
 import * as UpgradedBasicNemesisCards from './UpgradedBasicNemesisCards'
 import * as Languages from './Languages'
+import * as GlobalLanguage from './GlobalLanguage'
 
 import * as topLevelSelectors from './selectors'
 
@@ -20,6 +21,7 @@ import * as types from 'aer-types/types'
 ///////////
 
 export type State = {
+  GlobalLanguage: GlobalLanguage.State
   Languages: Languages.State
   Expansions: Expansions.State
   Cards: Cards.State
@@ -31,6 +33,7 @@ export type State = {
 }
 
 export const initialState: State = {
+  GlobalLanguage: GlobalLanguage.initialState,
   Languages: Languages.initialState,
   Expansions: Expansions.initialState,
   Cards: Cards.initialState,
@@ -63,6 +66,7 @@ export const mainActions = {
 export type MainAction = ActionsUnion<typeof mainActions>
 
 export type Action =
+  | GlobalLanguage.Action
   | Languages.Action
   | Expansions.Action
   | Cards.Action
@@ -74,6 +78,7 @@ export type Action =
   | MainAction
 
 export const actions = {
+  GlobalLanguage: GlobalLanguage.actions,
   Languages: Languages.actions,
   Expansions: Expansions.actions,
   Cards: Cards.actions,
@@ -90,6 +95,7 @@ export const actions = {
 /////////////
 
 export const Reducer = combineReducers({
+  GlobalLanguage: GlobalLanguage.Reducer,
   Languages: Languages.Reducer,
   Expansions: Expansions.Reducer,
   Cards: Cards.Reducer,
@@ -131,6 +137,7 @@ const getAllContentOfExpansionSelected = createSelector(
 )
 
 export const selectors = {
+  GlobalLanguage: GlobalLanguage.selectors,
   Languages: Languages.selectors,
   Expansions: Expansions.selectors,
   Cards: Cards.selectors,

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

@@ -2,3 +2,5 @@ import AERData from 'aer-data/src/index'
 
 export const LANGUAGE_KEYS = Object.keys(AERData.normalizedData)
 export type LanguageKey = keyof typeof AERData.normalizedData
+
+export type GlobalLanguageKey = LanguageKey | 'CUSTOM'

src/components/pages/Settings/Expansions/ActiveSets/Wrapper.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+import { Select } from 'components/atoms/SelectField'
+
+const Wrapper = styled('div')`
+  ${Select} {
+    margin: 16px 0 0;
+  }
+`
+
+export default Wrapper