From 68a262ee887e5e887bcd5c6201383779088460a9 Mon Sep 17 00:00:00 2001
From: dwicao <lutfiandwica@gmail.com>
Date: Sun, 16 Apr 2017 12:32:18 +0700
Subject: [PATCH] fix filter pokemon by type

---
 src/actions/actionTypes.js                |  2 +-
 src/actions/mainActions.js                |  6 +--
 src/components/CardList/CardListByType.js | 54 +++++++++++++++++++++++
 src/components/CardList/index.js          |  9 ++--
 src/components/TopBar/index.js            |  6 +--
 src/reducers/index.js                     |  2 +
 src/reducers/pokelistReducer.js           |  6 ---
 src/reducers/pokelisttypeReducer.js       | 17 +++++++
 8 files changed, 84 insertions(+), 18 deletions(-)
 create mode 100644 src/components/CardList/CardListByType.js
 create mode 100644 src/reducers/pokelisttypeReducer.js

diff --git a/src/actions/actionTypes.js b/src/actions/actionTypes.js
index 3c8f1e8..297d557 100644
--- a/src/actions/actionTypes.js
+++ b/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';
\ No newline at end of file
+export const CLEAR_POKEMON_LIST_BY_TYPE = 'CLEAR_POKEMON_LIST_BY_TYPE';
\ No newline at end of file
diff --git a/src/actions/mainActions.js b/src/actions/mainActions.js
index 6e077b9..fb65bc3 100644
--- a/src/actions/mainActions.js
+++ b/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 => {
diff --git a/src/components/CardList/CardListByType.js b/src/components/CardList/CardListByType.js
new file mode 100644
index 0000000..a9b2705
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/src/components/CardList/index.js b/src/components/CardList/index.js
index e9a0c02..d11c4d8 100644
--- a/src/components/CardList/index.js
+++ b/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);
diff --git a/src/components/TopBar/index.js b/src/components/TopBar/index.js
index aa6c97d..e379e0f 100644
--- a/src/components/TopBar/index.js
+++ b/src/components/TopBar/index.js
@@ -12,8 +12,8 @@ class TopBar extends Component {
     }
 
     filterPokemon(type) {
+        this.props.actions.clearPokemonListByType();
         this.props.actions.fetchPokemonByType(type);
-        
         this.props.actions.filterPokemonByType({
             isFilterByPokemonType: true,
             type,
@@ -21,10 +21,6 @@ class TopBar extends Component {
     }
 
     clearFilter() {
-        this.props.actions.clearPokemonList([]);
-
-        this.props.actions.fetchPokemon();
-
         this.props.actions.filterPokemonByType({
             isFilterByPokemonType: false,
         });
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 5116363..e770755 100644
--- a/src/reducers/index.js
+++ b/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;
\ No newline at end of file
diff --git a/src/reducers/pokelistReducer.js b/src/reducers/pokelistReducer.js
index d0a63a4..4e9b010 100644
--- a/src/reducers/pokelistReducer.js
+++ b/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;
   }
diff --git a/src/reducers/pokelisttypeReducer.js b/src/reducers/pokelisttypeReducer.js
new file mode 100644
index 0000000..af941f8
--- /dev/null
+++ b/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;
+  }
+
+}
\ No newline at end of file