Class on redux thunk

.gitignore

@@ -13,3 +13,4 @@ build
 .DS_Store
 .env
 npm-debug.log
+.idea

package.json

@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.8.5"
+    "chai": "^3.5.0",
+    "enzyme": "^2.7.1",
+    "react-addons-test-utils": "^15.4.2",
+    "react-scripts": "0.8.5",
+    "sinon": "^1.17.7"
   },
   "dependencies": {
     "faker": "^3.1.0",
+    "jquery": "^3.1.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.2",
-    "redux": "^3.6.0"
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,37 +1,40 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
 import { connect } from 'react-redux'
-import { addProduct } from './actions';
+import { favouritePokemon, getPokemon } from './actions';
 
+import {PokemonView} from './components/pokemon-view';
 
-import { API_BASE_URL } from './constants/api-url';
+import { GET_ALL_POKEMON_URL } from './constants/api-url';
+
+//https://img.pokemondb.net/artwork/${pokemon}.jpg <-- use for pictures
 
 const mapStateToProps = state => ({
-  products: state.products,
-})
+  pokemon: state.pokemon.list,
+});
 
 const mapDispatchToProps = {
-  addProduct,
-}
+  favouritePokemon,
+  getPokemon
+};
 
 class App extends Component {
   componentDidMount() {
-    this.props.addProduct({
-      name: 'Table',
-      department: 'Furniture',
-      price: '300.00',
-      stock: 5,
-    });
+    this.props.getPokemon();
   }
 
   render() {
-    const { products, addProduct } = this.props;
+
+    const { pokemon, favouritePokemon } = this.props; // go over destructuring again
     return (
+
       <div>
-        {products.map(product => <div>{product.name}</div>)}
-        <button onClick={ () => addProduct({ name: 'Sofa' }) }>Add Sofa</button>
+        <h1>Pokemon App!</h1>
+        <PokemonView favourite={(name) => console.log(name)} pokeData={{name: 'Della', height: '180cm'}} />
+
+        {pokemon.map(poke => <h2 key={poke.name}>{poke.name}</h2>)}
+
       </div>
+      //create PokemonList Here
     );
   }
 }

src/App.test.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
+// import React from 'react';
+// import ReactDOM from 'react-dom';
+// import App from './App';
+//
 // it('renders without crashing', () => {
 //   const div = document.createElement('div');
 //   ReactDOM.render(<App />, div);

src/actions/index.js

@@ -1,12 +1,37 @@
+import $ from 'jquery';
+
+import {GET_ALL_POKEMON_URL} from '../constants/api-url';
+
+
 export const ACTION_TYPES = {
-  addProduct: 'ADD_PRODUCT',
-}
+  favouritePokemon: 'FAVOURITE_POKEMON',
+  setPokemon: 'SET_POKEMON'
+};
 
-export function addProduct(product) {
+export function favouritePokemon(pokemon) {
   return {
-    type: ACTION_TYPES.addProduct,
+    type: ACTION_TYPES.favouritePokemon,
     payload: {
-      product,
+      pokemon,
     }
   }
 }
+
+
+export function getPokemon() {
+
+
+  return function (dispatch) {
+    $.get(GET_ALL_POKEMON_URL)
+      .then(response => {
+        dispatch({
+          type: ACTION_TYPES.setPokemon,
+          payload: {
+            pokemon: response.results
+          }
+        })
+      });
+
+  };
+
+}

src/components/pokemon-view.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const PokemonView = ({pokeData, favourite}) => <div style={{width: '80vw', marginLeft: 'auto'}}>
+
+  <h2>{pokeData.name}</h2>
+
+  <h4>Height: {pokeData.height}</h4>
+
+  <button onClick={() => favourite(pokeData.name)}>Save as favourite</button>
+
+</div>;

src/components/pokemon-view.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { expect, assert } from 'chai';
+import { shallow } from 'enzyme';
+import {PokemonView} from './pokemon-view';
+import sinon from 'sinon';
+
+
+describe('<PokemonView />', () => {
+
+  it('Should display the name in an H2', () => {
+
+    const wrapper = shallow(<PokemonView
+      pokeData={{name: 'Bob', height: '40 feet'}}
+    />);
+
+    expect(wrapper.find('h2')).to.have.length(1);
+    expect(wrapper.find('h2').text()).to.contain('Bob');
+
+  });
+
+  it('should favourite a pokemon on button click', () => {
+
+    let mySpy = sinon.spy();
+
+    const wrapper = shallow(<PokemonView
+      pokeData={{name: 'Jon', height: '40 feet'}}
+      favourite={mySpy}
+    />);
+
+
+    expect(mySpy.calledOnce).to.equal(false);
+    wrapper.find('button').simulate('click');
+    expect(mySpy.calledOnce).to.equal(true);
+
+    assert(mySpy.calledWith('Jon'), 'I expect the pokemon name that is passed in to be what is called when the button is clicked');
+
+  });
+
+});

src/constants/api-url.js

@@ -1 +1,3 @@
-export const API_BASE_URL = 'https://instgram.com';
+const POKEAPI_BASE_URL = 'https://pokeapi.co/api/v2/';
+
+export const GET_ALL_POKEMON_URL = POKEAPI_BASE_URL + 'pokemon';

src/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
 
 import App from './App';
 import './index.css';
 import reducer from './reducers';
 
-const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
+const store = createStore(reducer,
+  applyMiddleware(thunk), // this is how thunk is integrated into the redux library
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
 
 ReactDOM.render(
   <Provider store={ store }>

src/reducers/index.js

@@ -1,20 +1,7 @@
 import { combineReducers } from 'redux';
+import {pokemon} from "./pokemon";
 
-import { generateProducts } from '../utils/data';
-import { ACTION_TYPES } from '../actions';
-
-const INITIAL_STATE = {
-  products: generateProducts(10),
-};
-
-export const products = (state = INITIAL_STATE.products, { type, payload }) => {
-  if (type === ACTION_TYPES.addProduct) {
-    return [...state, payload.product];
-  }
-
-  return state;
-};
 
 export default combineReducers({
-  products,
+  pokemon,
 });

src/reducers/pokemon.js

@@ -0,0 +1,23 @@
+import {ACTION_TYPES} from "../actions/index";
+
+
+const INITIAL_STATE = {
+  list: [],
+  favouritePokemon: null
+};
+
+export const pokemon = (state = INITIAL_STATE, {type, payload}) => {
+
+  switch (type) {
+    case ACTION_TYPES.favouritePokemon:
+      return {...state, ...{favouritePokemon: payload.pokemon}};
+
+    case ACTION_TYPES.setPokemon:
+
+      return {...state, ...{list: payload.pokemon}};
+
+    default:
+      return state;
+  }
+
+};