fix filter pokemon by type

src/actions/actionTypes.js

@@ -2,4 +2,4 @@ export const ADD_POKEMON = 'ADD_POKEMON';
 export const ADD_POKEMON_BY_TYPE = 'ADD_POKEMON_BY_TYPE';
 export const ADD_POKEMON_DETAIL = 'ADD_POKEMON_DETAIL';
 export const FILTER_POKEMON_BY_TYPE = 'FILTER_POKEMON_BY_TYPE';
-export const CLEAR_POKEMON_LIST = 'CLEAR_POKEMON_LIST';
+export const CLEAR_POKEMON_LIST_BY_TYPE = 'CLEAR_POKEMON_LIST_BY_TYPE';

src/actions/mainActions.js

@@ -21,9 +21,9 @@ export const filterPokemonByType = payload => ({
   payload,
 });
 
-export const clearPokemonList = payload => ({
-  type: types.CLEAR_POKEMON_LIST,
-  payload,
+export const clearPokemonListByType = payload => ({
+  type: types.CLEAR_POKEMON_LIST_BY_TYPE,
+  payload: [],
 });
 
 export const fetchPokemon = offset => dispatch => {

src/components/CardList/CardListByType.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as mainActions from '../../actions/mainActions';
+import Card from './Card';
+import { getPokemonId } from '../../utils';
+
+class CardListByType extends Component {
+    render() {
+        if (this.props.pokelisttype.length === 0) return this.renderLoader();
+
+        return (
+            <div className="card-list">
+                {this.renderCard()}
+            </div>
+        );
+    }
+
+    renderLoader(key) {
+        return <div key={key} className="loader">Loading...</div>;
+    }
+
+    renderCard() {
+        const { pokelisttype } = this.props;
+
+        return pokelisttype.map(({ pokemon }, index) => {
+            if (!pokemon) return this.renderLoader(index);
+
+            const pokemonId = parseFloat(getPokemonId(pokemon.url));
+            if (pokemonId > 10000) return;
+
+            return (
+                <Card key={index} 
+                    name={pokemon.name}
+                    url={pokemon.url}
+                    pokemonId={getPokemonId(pokemon.url)}
+                />
+            );
+        });
+    }
+}
+
+const mapStateToProps = (state) => ({
+  pokedetail: state.pokedetail,
+  pokelist: state.pokelist,
+  pokefilter: state.pokefilter,
+  pokelisttype: state.pokelisttype,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(mainActions, dispatch)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CardListByType);

src/components/CardList/index.js

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import * as mainActions from '../../actions/mainActions';
 import InfiniteScroll from 'react-infinite-scroller'
 import Card from './Card';
+import CardListByType from './CardListByType';
 import { getPokemonId } from '../../utils';
 import './index.css';
 
@@ -17,13 +18,15 @@ class CardList extends Component {
     }
 
     loadMore() {
-        if (this.section < 750 && this.props.pokefilter.isFilterByPokemonType === false) {
+        if (this.section < 750) {
             this.props.actions.fetchPokemon(this.section);
             this.section = this.section + 20;
         } 
     }
 
     render() {
+        if (this.props.pokefilter.isFilterByPokemonType) return <CardListByType/>;
+
         return (   
             <InfiniteScroll
                 className="card-list"
@@ -47,7 +50,7 @@ class CardList extends Component {
     renderCard() {
         const { pokelist, pokefilter } = this.props;
 
-        if (pokefilter.isFilterByPokemonType) {
+        /*if (pokefilter.isFilterByPokemonType) {
             return pokelist.map(({ pokemon }, index) => {
                 if (!pokemon) return this.renderLoader(index);
 
@@ -62,7 +65,7 @@ class CardList extends Component {
                     />
                 );
             });
-        }
+        }*/
 
         return pokelist.map((section, index) => {
             if (!section.map) return this.renderLoader(index);

src/components/TopBar/index.js

@@ -12,19 +12,15 @@ class TopBar extends Component {
     }
 
     filterPokemon(type) {
+        this.props.actions.clearPokemonListByType();
         this.props.actions.fetchPokemonByType(type);
-
         this.props.actions.filterPokemonByType({
             isFilterByPokemonType: true,
             type,
         });
     }
 
     clearFilter() {
-        this.props.actions.clearPokemonList([]);
-
-        this.props.actions.fetchPokemon();
-
         this.props.actions.filterPokemonByType({
             isFilterByPokemonType: false,
         });

src/reducers/index.js

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
 import pokelist from './pokelistReducer';
 import pokedetail from './pokedetailReducer';
 import pokefilter from './pokefilterReducer';
+import pokelisttype from './pokelisttypeReducer';
 
 const rootReducer = combineReducers({
   pokelist,
   pokedetail,
   pokefilter,
+  pokelisttype,
 });
 
 export default rootReducer;

src/reducers/pokelistReducer.js

@@ -9,12 +9,6 @@ export default function pokelistReducer(state = [], action) {
         action.payload
       ];
 
-    case types.ADD_POKEMON_BY_TYPE:
-      return action.payload;
-
-    case types.CLEAR_POKEMON_LIST:
-      return action.payload;
-
     default:
       return state;
   }

src/reducers/pokelisttypeReducer.js

@@ -0,0 +1,17 @@
+import * as types from '../actions/actionTypes';
+
+export default function pokelisttypeReducer(state = [], action) {
+  switch(action.type) {
+
+    case types.ADD_POKEMON_BY_TYPE:
+      return action.payload;
+
+
+    case types.CLEAR_POKEMON_LIST_BY_TYPE:
+      return action.payload;
+
+    default:
+      return state;
+  }
+
+}