README.md

POKEMON APP

This project is solution for POKEMON APP task.

App is bootstrapped with Create React App.

About

App doesn't use Redux, but Context API instead.

App uses ant design for UI components and react-router-dom for router.

Context API

I built wrapper for Context API so I can use it similar to Redux. You can find code in /src/context-store folder. Wrapper has 2 components Provider and connect.

Provider

Provider is React component that renders Context's Provider component with actions, store and App component.

ReactDOM.render(
  <Provider actions={actions} state={initState}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Actions

Actions are function or Promises and they return part of state.

export const getTypes = async () => {
  const { data } = await axios({
    method: 'get',
    url: `${config.API_URL}types`
  })

  return data
}

export const toggleFavouritePokemons = (id, { favouritePokemons }) => {
  if (favouritePokemons.indexOf(id) !== -1) {
    return {
      favouritePokemons: favouritePokemons.filter(i => i !== id)
    }
  }
  return {
    favouritePokemons: [...favouritePokemons, id]
  }
}

Store

Store is object with application data, like Redux store.

export const initState = {
  count: 0,
  types: [],
  pokemons: [],
  favouritePokemons: [],
  allPokemons: []
}

Connect

Connect is function that returns React component wrapped into Context's Consumer component. Functions adds all actions in single object and part of store component is subscribed to. Connect is written like react-redux connect but it recieves 1 parameter which can be function like react-redux connect or array of strings with keys from store object.

const mapStore = state => ({
  types: state.types,
  pokemons: state.pokemons.map(i => ({
    ...i,
    favourited: state.favouritePokemons.indexOf(i.id) !== -1
  })),
  count: state.count
})

export default connect(mapStore)(Home)

export default connect(['allPokemons'])(Details)