intelliware-coe-web#7 wire up first cut of action for avatar

src/UserProfile.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import avatar from './avatars/cat-avatars.jpg';
 
 class UserProfile extends Component {
   render() {
@@ -10,10 +11,16 @@ class UserProfile extends Component {
     }
     return (
       <div className="UserProfile">
-        <p>Username: {this.props.userProfile.username}</p>
-        <p>Created Date: {this.props.userProfile.createdDate}</p>
-        <p>Description: {this.props.userProfile.description}</p>
-        <p>{storiesMessage}</p>
+        <div className="avatar">
+          <img src={avatar} width="100px"/>
+          <button onClick={this.props.makeCat}>Make Cat</button>
+        </div>
+        <div>
+          <p>Username: {this.props.userProfile.username}</p>
+          <p>Created Date: {this.props.userProfile.createdDate}</p>
+          <p>Description: {this.props.userProfile.description}</p>
+          <p>{storiesMessage}</p>
+        </div>
       </div>
     );
   }

src/UserProfileContainer.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux'
 import UserProfile from './UserProfile'
+import { makeCat } from './actions'
 
 const getUserProfile = (userProfile) => {
     return userProfile;
@@ -11,7 +12,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => {
     return {
-        //no actions right now
+        makeCat: username => dispatch(makeCat(username))
     }
 }
 

src/actions/index.js

@@ -0,0 +1,4 @@
+export const makeCat = username => ({
+    type:'MAKE_CAT',
+    username
+})

src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
-import UserProfileReducer from './reducers/UserProfileReducer'
+import UserProfileReducer from './reducers/UserProfileReducer';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';

src/reducers/UserProfileReducer.js

@@ -1,6 +1,7 @@
 const initialState = {
     //Mock initial state
     userProfile: {
+        avatar:1,
         username:'Jane Doe II',
         createdDate:'2015-06-31',
         description:'Amazing user',
@@ -11,8 +12,14 @@ const initialState = {
 const UserProfileReducer = (state = [], action)  => {
     //Mock state until we start adding user profile data
     if (typeof state === 'undefined' || state.length === 0) {
-        return initialState
+        state = initialState;
     }
+
+    if (action.type === 'MAKE_CAT') {
+        state.userProfile.avatar++;
+        console.log("make cat clicked", state.userProfile, action);
+    }
+
     return state    
 }
 export default UserProfileReducer