function useEntities(summonerName) {
  const summoner = useSelector(getSummonerSelector)
  const rankedSolo = useSelector(state => getSoloFlexRanked(state, 'RANKED_SOLO_5x5'))
  const league = useSelector(getLeagueSelector)

  useSaga('summoner', Api.getSummonerByName, summonerName)
  useSaga('myleague', Api.getSummonerLeague, summoner.id)
  useSaga('league', Api.getSummonerLeagueName, rankedSolo.leagueId)
  useSaga('allchampions', Api.getAllChampions)
  useSaga('summonerspells', Api.getSummonerSpells)
  useSaga('items', Api.getItems)
  useSaga('matchlists', Api.getMatchList, summoner.accountId)

  return { summoner, league }
}

function DashboardContainer({
  match: {
    params: { summonerName },
  },
}: Props) {
  const { summoner, league } = useEntities(summonerName)
  const isFetching = useSelector(isEntityFetching)
  const entityError = useSelector(hasEntityError)
  const rankedSolo = useSelector(state => getSoloFlexRanked(state, 'RANKED_SOLO_5x5'))
  const rankedFlex = useSelector(state => getSoloFlexRanked(state, 'RANKED_FLEX_SR'))
  const matchLists = useSelector(getMatchListsSelector)

  if (!summonerName) return <Redirect to="/" />
  if (isFetching) return <div>Loading...</div>
  if (entityError) return <div>{`Error while fetching: ${entityError}`}</div>

  return (
    <SummonerContext.Provider
      value={{
        summoner,
        league,
        rankedSolo,
        rankedFlex,
        matchLists,
      }}
    >
      <Dashboard summoner={summoner} rankedSolo={rankedSolo} />
    </SummonerContext.Provider>
  )
}

export default DashboardContainer

export function useSaga(entityName, apiEndpoint, ...args) {
  const entity = useSelector(state => state.entities[entityName])
  const dispatch = useDispatch()

  if (args.some(param => param === null || param === undefined)) return

  if (!entity || isEmpty(entity))
    dispatch(
      fetchInfo({
        entityName,
        apiEndpoint,
        args,
      }),
    )
}

// @flow

type TypeParams = {
  entityName: string,
  apiEndpoint: () => void,
  args: Array<String>,
}

export const fetchInfo = ({ entityName, apiEndpoint, args }: TypeParams) => ({
  type: 'ENTITY_REQUEST',
  entityName,
  apiEndpoint,
  payload: args,
})

export function* fetchEntity(action) {
  const { apiEndpoint, entityName, payload } = action
  let response = {}
  try {
    if (Array.isArray(payload[0])) {
      response = yield all(payload[0].map(key => call(apiEndpoint, key)))
    } else response = yield call(apiEndpoint, ...payload)

    yield put({
      type: `${entityName.toUpperCase()}_SUCCESS`,
      entityName,
      payload: Array.isArray(response) ? response.map(item => item.data) : response.data,
    })

    return response.data
  } catch (error) {
    yield put({
      type: `${entityName.toUpperCase()}_FAILURE`,
      entityName,
      error: error.message,
    })
  }
}

export default function* saga() {
  yield takeEvery('ENTITY_REQUEST', fetchEntity)
}

import { set } from 'app/utils/object'

function entitiesReducer(state = {}, action) {
  const { type, payload, error, entityName } = action

  if (type.endsWith('REQUEST')) {
    return set({ ...state }, entityName.toLowerCase(), {
      isFetching: true,
      error: null,
    })
  }

  if (type.endsWith('SUCCESS')) {
    return set({ ...state }, entityName.toLowerCase(), {
      ...payload,
      isFetching: false,
      error: null,
    })
  }

  if (type.endsWith('FAILURE')) {
    return set({ ...state }, entityName.toLowerCase(), {
      error,
      isFetching: false,
    })
  }

  return state
}

export default entitiesReducer