diff --git a/src/UserProfile.js b/src/UserProfile.js index 2d768a3..6977aab 100644 --- a/src/UserProfile.js +++ b/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 (
-

Username: {this.props.userProfile.username}

-

Created Date: {this.props.userProfile.createdDate}

-

Description: {this.props.userProfile.description}

-

{storiesMessage}

+
+ + +
+
+

Username: {this.props.userProfile.username}

+

Created Date: {this.props.userProfile.createdDate}

+

Description: {this.props.userProfile.description}

+

{storiesMessage}

+
); } diff --git a/src/UserProfileContainer.js b/src/UserProfileContainer.js index 1ed0f00..d6bf6cd 100644 --- a/src/UserProfileContainer.js +++ b/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)) } } diff --git a/src/actions/index.js b/src/actions/index.js new file mode 100644 index 0000000..a2d8bc7 --- /dev/null +++ b/src/actions/index.js @@ -0,0 +1,4 @@ +export const makeCat = username => ({ + type:'MAKE_CAT', + username +}) \ No newline at end of file diff --git a/src/avatars/cat-avatars.jpg b/src/avatars/cat-avatars.jpg new file mode 100644 index 0000000..1c7b503 Binary files /dev/null and b/src/avatars/cat-avatars.jpg differ diff --git a/src/index.js b/src/index.js index e54bf38..657722d 100644 --- a/src/index.js +++ b/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'; diff --git a/src/reducers/UserProfileReducer.js b/src/reducers/UserProfileReducer.js index ea5ecc7..b904af9 100644 --- a/src/reducers/UserProfileReducer.js +++ b/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 \ No newline at end of file