From f0b9aeddfc16adbc3a80202a3bef5f1853c6a3d9 Mon Sep 17 00:00:00 2001
From: Apprentice <apprentice@StMac0-6.local>
Date: Tue, 4 Oct 2016 07:48:29 +1300
Subject: [PATCH 1/6] Start of 10

---
 learn-redux/client/actions/actionCreators.js | 26 +++++++++++++++++
 learn-redux/client/components/Main.js        | 17 +++++++++++
 learn-redux/client/components/PhotoGrid.js   | 14 +++++++++
 learn-redux/client/components/Single.js      | 14 +++++++++
 learn-redux/client/reducers/comments.js      |  6 ++++
 learn-redux/client/reducers/index.js         |  9 ++++++
 learn-redux/client/reducers/posts.js         | 18 ++++++++++++
 learn-redux/client/reduxstagram.js           | 30 +++++++++++++++++++-
 learn-redux/client/store.js                  | 21 ++++++++++++++
 learn-redux/components/Main.js               | 17 +++++++++++
 learn-redux/components/PhotoGrid.js          | 14 +++++++++
 learn-redux/components/Single.js             | 14 +++++++++
 12 files changed, 199 insertions(+), 1 deletion(-)
 create mode 100644 learn-redux/client/actions/actionCreators.js
 create mode 100644 learn-redux/client/components/Main.js
 create mode 100644 learn-redux/client/components/PhotoGrid.js
 create mode 100644 learn-redux/client/components/Single.js
 create mode 100644 learn-redux/client/reducers/comments.js
 create mode 100644 learn-redux/client/reducers/index.js
 create mode 100644 learn-redux/client/reducers/posts.js
 create mode 100644 learn-redux/client/store.js
 create mode 100644 learn-redux/components/Main.js
 create mode 100644 learn-redux/components/PhotoGrid.js
 create mode 100644 learn-redux/components/Single.js

diff --git a/learn-redux/client/actions/actionCreators.js b/learn-redux/client/actions/actionCreators.js
new file mode 100644
index 000000000..79c21749e
--- /dev/null
+++ b/learn-redux/client/actions/actionCreators.js
@@ -0,0 +1,26 @@
+// increment
+export function increment(index) {
+  return {
+    type: 'INCREMENT_LIKES',
+    index: index
+  }
+}
+
+// add commnet
+export function addComment(postId, author, comment) {
+  return {
+    type: 'ADD_COMMENT',
+    postId: postId,
+    author: author,
+    comment: comment
+  }
+}
+
+// remove comment
+export function removeComment(postId, i) {
+  return {
+    type: 'REMOVE_COMMENT',
+    i: i,
+    postId; postId
+  }
+}
diff --git a/learn-redux/client/components/Main.js b/learn-redux/client/components/Main.js
new file mode 100644
index 000000000..ac9a6af47
--- /dev/null
+++ b/learn-redux/client/components/Main.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const Main = React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>
+          <Link to="/">Reduxstagram</Link>
+        </h1>
+        {React.cloneElement(this.props.children, this.props)}
+      </div>
+    )
+  }
+});
+
+export default Main;
diff --git a/learn-redux/client/components/PhotoGrid.js b/learn-redux/client/components/PhotoGrid.js
new file mode 100644
index 000000000..be2f0b0d0
--- /dev/null
+++ b/learn-redux/client/components/PhotoGrid.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const PhotoGrid = React.createClass({
+  render() {
+    return (
+      <div className="phot-grid">
+        Im the photo-grid
+      </div>
+    )
+  }
+});
+
+export default PhotoGrid;
diff --git a/learn-redux/client/components/Single.js b/learn-redux/client/components/Single.js
new file mode 100644
index 000000000..8a954d57d
--- /dev/null
+++ b/learn-redux/client/components/Single.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const Single = React.createClass({
+  render() {
+    return (
+      <div className="single-photo">
+        Im the single
+      </div>
+    )
+  }
+});
+
+export default Single;
diff --git a/learn-redux/client/reducers/comments.js b/learn-redux/client/reducers/comments.js
new file mode 100644
index 000000000..0a9b7d016
--- /dev/null
+++ b/learn-redux/client/reducers/comments.js
@@ -0,0 +1,6 @@
+function comments(state = [], action) {
+  console.log(state, action);
+  return state;
+}
+
+export default comments;
diff --git a/learn-redux/client/reducers/index.js b/learn-redux/client/reducers/index.js
new file mode 100644
index 000000000..121bc5b5b
--- /dev/null
+++ b/learn-redux/client/reducers/index.js
@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux';
+
+import posts from './posts';
+import comments from './comments';
+
+const rootReducer = combineReducers({posts, comments, routing: routerReducer});
+
+export default rootReducer;
diff --git a/learn-redux/client/reducers/posts.js b/learn-redux/client/reducers/posts.js
new file mode 100644
index 000000000..13cc885b9
--- /dev/null
+++ b/learn-redux/client/reducers/posts.js
@@ -0,0 +1,18 @@
+// a reducer takes in two things:
+
+//1. the action (info about what happened)
+//2. copy of current state
+
+// intake action and store
+//
+// process request
+//
+// return store
+
+function posts(state = [], action) {
+  console.log("The post will change");
+  console.log(state, action);
+  return state;
+}
+
+export default posts;
diff --git a/learn-redux/client/reduxstagram.js b/learn-redux/client/reduxstagram.js
index 598ea1874..b6e1cdac9 100644
--- a/learn-redux/client/reduxstagram.js
+++ b/learn-redux/client/reduxstagram.js
@@ -1 +1,29 @@
-// let's go!
+import React from 'react';
+import { render } from 'react-dom';
+
+// Import css
+import css from './styles/style.styl';
+
+// Import Components
+import Main from './components/Main';
+import Single from './components/Single';
+import PhotoGrid from './components/PhotoGrid';
+
+// import react router deps
+import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+import { Provider } from 'react-redux';
+import store, { history } from './store';
+
+
+const router = (
+  <Provider store={store}>
+    <Router history={history}>
+      <Route path="/" component={Main}>
+        <IndexRoute component={PhotoGrid}></IndexRoute>
+        <Route path="/view/:postId" component={Single}></Route>
+      </Route>
+    </Router>
+  </Provider>
+)
+
+render(router, document.getElementById('root'));
diff --git a/learn-redux/client/store.js b/learn-redux/client/store.js
new file mode 100644
index 000000000..526b609bc
--- /dev/null
+++ b/learn-redux/client/store.js
@@ -0,0 +1,21 @@
+import { createStore, compose } from 'redux';
+import { syncHistoryWithStore } from 'react-router-redux';
+import { browserHistory } from 'react-router';
+
+//import the root reducer
+import rootReducer from './reducers/index';
+
+import comments from './data/comments';
+import posts from './data/posts';
+
+// create an object for the default data
+const defaultState = {
+  posts: posts,
+  comments: comments
+};
+
+const store = createStore(rootReducer, defaultState);
+
+export const history = syncHistoryWithStore(browserHistory, store);
+
+export default store;
diff --git a/learn-redux/components/Main.js b/learn-redux/components/Main.js
new file mode 100644
index 000000000..ac9a6af47
--- /dev/null
+++ b/learn-redux/components/Main.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const Main = React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>
+          <Link to="/">Reduxstagram</Link>
+        </h1>
+        {React.cloneElement(this.props.children, this.props)}
+      </div>
+    )
+  }
+});
+
+export default Main;
diff --git a/learn-redux/components/PhotoGrid.js b/learn-redux/components/PhotoGrid.js
new file mode 100644
index 000000000..be2f0b0d0
--- /dev/null
+++ b/learn-redux/components/PhotoGrid.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const PhotoGrid = React.createClass({
+  render() {
+    return (
+      <div className="phot-grid">
+        Im the photo-grid
+      </div>
+    )
+  }
+});
+
+export default PhotoGrid;
diff --git a/learn-redux/components/Single.js b/learn-redux/components/Single.js
new file mode 100644
index 000000000..8a954d57d
--- /dev/null
+++ b/learn-redux/components/Single.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const Single = React.createClass({
+  render() {
+    return (
+      <div className="single-photo">
+        Im the single
+      </div>
+    )
+  }
+});
+
+export default Single;

From ef69a1aad9d58b141d01f6ee73554390553b848a Mon Sep 17 00:00:00 2001
From: Apprentice <apprentice@StMac0-6.local>
Date: Tue, 4 Oct 2016 08:45:23 +1300
Subject: [PATCH 2/6] Start of 14

---
 learn-redux/client/actions/actionCreators.js |  2 +-
 learn-redux/client/components/Comments.js    | 13 +++++++
 learn-redux/client/components/Photo.js       | 37 ++++++++++++++++++++
 learn-redux/client/components/PhotoGrid.js   |  6 ++--
 learn-redux/client/components/Single.js      | 10 +++++-
 learn-redux/client/components/app.js         | 19 ++++++++++
 learn-redux/client/reducers/comments.js      |  1 -
 learn-redux/client/reducers/posts.js         | 16 +++++++--
 learn-redux/client/reduxstagram.js           |  4 +--
 9 files changed, 97 insertions(+), 11 deletions(-)
 create mode 100644 learn-redux/client/components/Comments.js
 create mode 100644 learn-redux/client/components/Photo.js
 create mode 100644 learn-redux/client/components/app.js

diff --git a/learn-redux/client/actions/actionCreators.js b/learn-redux/client/actions/actionCreators.js
index 79c21749e..8e53df83a 100644
--- a/learn-redux/client/actions/actionCreators.js
+++ b/learn-redux/client/actions/actionCreators.js
@@ -21,6 +21,6 @@ export function removeComment(postId, i) {
   return {
     type: 'REMOVE_COMMENT',
     i: i,
-    postId; postId
+    postId: postId
   }
 }
diff --git a/learn-redux/client/components/Comments.js b/learn-redux/client/components/Comments.js
new file mode 100644
index 000000000..9442a5fc0
--- /dev/null
+++ b/learn-redux/client/components/Comments.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Comments = React.createClass({
+  render() {
+    return (
+    <div className="comment">
+      Im the comments
+    </div>
+  )
+  }
+})
+
+export default Comments;
diff --git a/learn-redux/client/components/Photo.js b/learn-redux/client/components/Photo.js
new file mode 100644
index 000000000..2cad89039
--- /dev/null
+++ b/learn-redux/client/components/Photo.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link } from 'react-router';
+import CSSTransitionGroup from 'react-addons-css-transition-group';
+
+const Photo = React.createClass({
+  render() {
+    const { post, i, comments } = this.props;
+    return (
+      <figure className="grid-figure">
+        <div className="grid-photo-wrap">
+          <Link to={`/view/${post.code}`}>
+            <img src={post.display_src} alt={post.caption} className="grid-photo" />
+          </Link>
+          <CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
+            <span key={post.likes} className="likes-heart">{post.likes}</span>
+          </CSSTransitionGroup>
+
+        </div>
+
+        <figcaption>
+          <p>{post.caption}</p>
+          <div className="control-buttons">
+            <button onClick={this.props.increment.bind(null, i)} className="likes">&hearts; {post.likes}</button>
+            <Link className = "button" to={`/view/${post.code}`}>
+              <span className="comment-count">
+                <span className="speech-bubble"></span>
+                {comments[post.code] ? comments[post.code].length : 0}
+              </span>
+            </Link>
+          </div>
+        </figcaption>
+      </figure>
+    )
+  }
+})
+
+export default Photo
diff --git a/learn-redux/client/components/PhotoGrid.js b/learn-redux/client/components/PhotoGrid.js
index be2f0b0d0..9d294a856 100644
--- a/learn-redux/client/components/PhotoGrid.js
+++ b/learn-redux/client/components/PhotoGrid.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Link } from 'react-router';
+import Photo from './Photo';
 
 const PhotoGrid = React.createClass({
   render() {
     return (
-      <div className="phot-grid">
-        Im the photo-grid
+      <div className="photo-grid">
+        {this.props.posts.map((post, i) => <Photo { ...this.props} key={i} i={i} post={post}/>)}
       </div>
     )
   }
diff --git a/learn-redux/client/components/Single.js b/learn-redux/client/components/Single.js
index 8a954d57d..db566069f 100644
--- a/learn-redux/client/components/Single.js
+++ b/learn-redux/client/components/Single.js
@@ -1,11 +1,19 @@
 import React from 'react';
 import { Link } from 'react-router';
+import Photo from './Photo';
+import Comments from './Comments';
 
 const Single = React.createClass({
   render() {
+    //index of the post
+    const i = this.props.posts.findIndex((post) => post.code === this.props.params.postId);
+    // get us the post
+    const post = this.props.posts[i];
+
     return (
       <div className="single-photo">
-        Im the single
+        <Photo i={i} post={post} {...this.props} />
+        <Comments />
       </div>
     )
   }
diff --git a/learn-redux/client/components/app.js b/learn-redux/client/components/app.js
new file mode 100644
index 000000000..4b7cbe72c
--- /dev/null
+++ b/learn-redux/client/components/app.js
@@ -0,0 +1,19 @@
+import { bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+import * as actionCreators from '../actions/actionCreators';
+import Main from './Main'
+
+function mapStateToProps(state) {
+  return {
+    posts: state.posts,
+    comments: state.comments
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(actionCreators, dispatch);
+}
+
+const App = connect(mapStateToProps, mapDispatchToProps)(Main);
+
+export default App;
diff --git a/learn-redux/client/reducers/comments.js b/learn-redux/client/reducers/comments.js
index 0a9b7d016..390249d88 100644
--- a/learn-redux/client/reducers/comments.js
+++ b/learn-redux/client/reducers/comments.js
@@ -1,5 +1,4 @@
 function comments(state = [], action) {
-  console.log(state, action);
   return state;
 }
 
diff --git a/learn-redux/client/reducers/posts.js b/learn-redux/client/reducers/posts.js
index 13cc885b9..8658f59b1 100644
--- a/learn-redux/client/reducers/posts.js
+++ b/learn-redux/client/reducers/posts.js
@@ -10,9 +10,19 @@
 // return store
 
 function posts(state = [], action) {
-  console.log("The post will change");
-  console.log(state, action);
-  return state;
+  switch(action.type) {
+    case 'INCREMENT_LIKES' :
+      console.log("incrementing likes")
+      const i = action.index;
+      return [
+        ...state.slice(0,i), // before the one we are updating
+        {...state[i], likes: state[i].likes + 1},
+        ...state.slice(i + 1) // after the one we are updating
+      ]
+    //return the updated state
+    default:
+      return state;
+  }
 }
 
 export default posts;
diff --git a/learn-redux/client/reduxstagram.js b/learn-redux/client/reduxstagram.js
index b6e1cdac9..8def7ee11 100644
--- a/learn-redux/client/reduxstagram.js
+++ b/learn-redux/client/reduxstagram.js
@@ -5,7 +5,7 @@ import { render } from 'react-dom';
 import css from './styles/style.styl';
 
 // Import Components
-import Main from './components/Main';
+import App from './components/App';
 import Single from './components/Single';
 import PhotoGrid from './components/PhotoGrid';
 
@@ -18,7 +18,7 @@ import store, { history } from './store';
 const router = (
   <Provider store={store}>
     <Router history={history}>
-      <Route path="/" component={Main}>
+      <Route path="/" component={App}>
         <IndexRoute component={PhotoGrid}></IndexRoute>
         <Route path="/view/:postId" component={Single}></Route>
       </Route>

From 40d04430044db48bae8fa5af9f0ebf05d7e6d5f8 Mon Sep 17 00:00:00 2001
From: Apprentice <apprentice@StMac0-6.local>
Date: Tue, 4 Oct 2016 11:00:25 +1300
Subject: [PATCH 3/6] complete tutorial no.16

---
 learn-redux/client/components/Comments.js | 28 +++++++++++++++++++++--
 learn-redux/client/components/Single.js   |  6 +++--
 learn-redux/client/reducers/comments.js   | 27 ++++++++++++++++++++++
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/learn-redux/client/components/Comments.js b/learn-redux/client/components/Comments.js
index 9442a5fc0..71f919044 100644
--- a/learn-redux/client/components/Comments.js
+++ b/learn-redux/client/components/Comments.js
@@ -1,10 +1,34 @@
 import React from 'react';
 
 const Comments = React.createClass({
+  renderComment(comment, i) {
+    return (
+      <div className="comment" key={i}>
+        <p>
+          <strong>{comment.user}</strong>
+          {comment.text}
+          <button className="remove-comment" onClick={this.props.removeComment.bind(null, this.props.params.postId, i)}>&times;</button>
+        </p>
+      </div>
+    )
+  },
+  handleSubmit(e) {
+    e.preventDefault();
+    const { postId } = this.props.params;
+    const author = this.refs.author.value;
+    const comment = this.refs.comment.value;
+    this.props.addComment(postId, author, comment);
+    this.refs.commentForm.reset();
+  },
   render() {
     return (
-    <div className="comment">
-      Im the comments
+    <div className="comments">
+      {this.props.postComments.map(this.renderComment)}
+      <form ref="commentForm" className="comment-form" onSubmit={this.handleSubmit}>
+        <input type="text" ref="author" placeholder="author"/>
+        <input type="text" ref="comment" placeholder="comment"/>
+        <input type="submit" hidden/>
+      </form>
     </div>
   )
   }
diff --git a/learn-redux/client/components/Single.js b/learn-redux/client/components/Single.js
index db566069f..d5d98808d 100644
--- a/learn-redux/client/components/Single.js
+++ b/learn-redux/client/components/Single.js
@@ -6,14 +6,16 @@ import Comments from './Comments';
 const Single = React.createClass({
   render() {
     //index of the post
-    const i = this.props.posts.findIndex((post) => post.code === this.props.params.postId);
+    const { postId } = this.props.params;
+    const i = this.props.posts.findIndex((post) => post.code === postId);
     // get us the post
     const post = this.props.posts[i];
+    const postComments = this.props.comments[postId] || [];
 
     return (
       <div className="single-photo">
         <Photo i={i} post={post} {...this.props} />
-        <Comments />
+        <Comments postComments={postComments} {...this.props}/>
       </div>
     )
   }
diff --git a/learn-redux/client/reducers/comments.js b/learn-redux/client/reducers/comments.js
index 390249d88..64d38ce19 100644
--- a/learn-redux/client/reducers/comments.js
+++ b/learn-redux/client/reducers/comments.js
@@ -1,5 +1,32 @@
+function postComments(state = [], action) {
+  switch(action.type){
+    case 'ADD_COMMENT':
+    // return the new state with the new comment
+      return [...state, {
+        user: action.author,
+        text: action.comment
+      }]
+    case 'REMOVE_COMMENT':
+      return [
+        ...state.slice(0, action.i),
+        ...state.slice(action.i + 1)
+      ]
+    default:
+      return state;
+  }
+}
+
 function comments(state = [], action) {
+  if(typeof action.postId !== 'undefined') {
+    return {
+      // take the current state
+      ...state,
+      // overwrite this post with new one
+      [action.postId]: postComments(state[action.postId], action)
+    }
+  }
   return state;
 }
 
+
 export default comments;

From 6a14800dc5b6a3f9ea660960ed1a4de89273b8a1 Mon Sep 17 00:00:00 2001
From: Apprentice <apprentice@StMac0-6.local>
Date: Tue, 4 Oct 2016 11:51:49 +1300
Subject: [PATCH 4/6] Begin breakdown

---
 learn-redux/client/components/Main.js      |  1 +
 learn-redux/client/components/PhotoGrid.js |  2 +-
 learn-redux/client/reduxstagram.js         |  3 ++-
 learn-redux/client/store.js                | 10 ++++++----
 learn-redux/components/Main.js             | 17 -----------------
 learn-redux/components/PhotoGrid.js        | 14 --------------
 learn-redux/components/Single.js           | 14 --------------
 7 files changed, 10 insertions(+), 51 deletions(-)
 delete mode 100644 learn-redux/components/Main.js
 delete mode 100644 learn-redux/components/PhotoGrid.js
 delete mode 100644 learn-redux/components/Single.js

diff --git a/learn-redux/client/components/Main.js b/learn-redux/client/components/Main.js
index ac9a6af47..7d27f1516 100644
--- a/learn-redux/client/components/Main.js
+++ b/learn-redux/client/components/Main.js
@@ -9,6 +9,7 @@ const Main = React.createClass({
           <Link to="/">Reduxstagram</Link>
         </h1>
         {React.cloneElement(this.props.children, this.props)}
+        // Takes the props of the parent componenet, clones them and then passes them down to the child components.
       </div>
     )
   }
diff --git a/learn-redux/client/components/PhotoGrid.js b/learn-redux/client/components/PhotoGrid.js
index 9d294a856..29dd20dad 100644
--- a/learn-redux/client/components/PhotoGrid.js
+++ b/learn-redux/client/components/PhotoGrid.js
@@ -5,7 +5,7 @@ const PhotoGrid = React.createClass({
   render() {
     return (
       <div className="photo-grid">
-        {this.props.posts.map((post, i) => <Photo { ...this.props} key={i} i={i} post={post}/>)}
+        {this.props.posts.map((post, i) => <Photo {...this.props} key={i} i={i} post={post} />)}
       </div>
     )
   }
diff --git a/learn-redux/client/reduxstagram.js b/learn-redux/client/reduxstagram.js
index 8def7ee11..5df183ac2 100644
--- a/learn-redux/client/reduxstagram.js
+++ b/learn-redux/client/reduxstagram.js
@@ -18,7 +18,8 @@ import store, { history } from './store';
 const router = (
   <Provider store={store}>
     <Router history={history}>
-      <Route path="/" component={App}>
+      <Route path="/" component={App}> // If the url matches "/" or a further extension of, grab the Main component.
+        // Then depending on the URL structure, either pass 'Main', 'PhotoGrid' or 'Single'.
         <IndexRoute component={PhotoGrid}></IndexRoute>
         <Route path="/view/:postId" component={Single}></Route>
       </Route>
diff --git a/learn-redux/client/store.js b/learn-redux/client/store.js
index 526b609bc..d8c13b1e7 100644
--- a/learn-redux/client/store.js
+++ b/learn-redux/client/store.js
@@ -3,19 +3,21 @@ import { syncHistoryWithStore } from 'react-router-redux';
 import { browserHistory } from 'react-router';
 
 //import the root reducer
-import rootReducer from './reducers/index';
+import rootReducer from './reducers/index'; // rootReducer is just a hub for importing all the individual reducers and exporting them as a whole. Syntax => const rootReducer = combineReducers({posts, comments, routing: routerReducer});
 
-import comments from './data/comments';
-import posts from './data/posts';
+import comments from './data/comments'; // importing the initial data
+import posts from './data/posts'; // importing the initial data
 
-// create an object for the default data
+// Passing initial data to defaultState
 const defaultState = {
   posts: posts,
   comments: comments
 };
 
+// Creating the store using our collection of reducers and collection of data
 const store = createStore(rootReducer, defaultState);
 
 export const history = syncHistoryWithStore(browserHistory, store);
 
+// Export the newly created store
 export default store;
diff --git a/learn-redux/components/Main.js b/learn-redux/components/Main.js
deleted file mode 100644
index ac9a6af47..000000000
--- a/learn-redux/components/Main.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-
-const Main = React.createClass({
-  render() {
-    return (
-      <div>
-        <h1>
-          <Link to="/">Reduxstagram</Link>
-        </h1>
-        {React.cloneElement(this.props.children, this.props)}
-      </div>
-    )
-  }
-});
-
-export default Main;
diff --git a/learn-redux/components/PhotoGrid.js b/learn-redux/components/PhotoGrid.js
deleted file mode 100644
index be2f0b0d0..000000000
--- a/learn-redux/components/PhotoGrid.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-
-const PhotoGrid = React.createClass({
-  render() {
-    return (
-      <div className="phot-grid">
-        Im the photo-grid
-      </div>
-    )
-  }
-});
-
-export default PhotoGrid;
diff --git a/learn-redux/components/Single.js b/learn-redux/components/Single.js
deleted file mode 100644
index 8a954d57d..000000000
--- a/learn-redux/components/Single.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-
-const Single = React.createClass({
-  render() {
-    return (
-      <div className="single-photo">
-        Im the single
-      </div>
-    )
-  }
-});
-
-export default Single;

From 602f6b9ec02fcdbe5d3839c4e85f3a3dcac1b5af Mon Sep 17 00:00:00 2001
From: Apprentice <apprentice@StMac0-6.local>
Date: Tue, 4 Oct 2016 13:53:07 +1300
Subject: [PATCH 5/6] Begin breakdown

---
 learn-redux/client/actions/actionCreators.js |  2 ++
 learn-redux/client/components/Photo.js       |  2 ++
 learn-redux/client/reducers/posts.js         | 13 +++------
 learn-redux/client/store.js                  | 29 +++++++++++++++++++-
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/learn-redux/client/actions/actionCreators.js b/learn-redux/client/actions/actionCreators.js
index 8e53df83a..b050c69fa 100644
--- a/learn-redux/client/actions/actionCreators.js
+++ b/learn-redux/client/actions/actionCreators.js
@@ -1,3 +1,5 @@
+// Creates actions including what happened and the payload of information that is needed to execute. When the actions get dispatched they are handled by a reducer and then the reducer is responsible for updating the state.
+
 // increment
 export function increment(index) {
   return {
diff --git a/learn-redux/client/components/Photo.js b/learn-redux/client/components/Photo.js
index 2cad89039..f44903734 100644
--- a/learn-redux/client/components/Photo.js
+++ b/learn-redux/client/components/Photo.js
@@ -11,6 +11,8 @@ const Photo = React.createClass({
           <Link to={`/view/${post.code}`}>
             <img src={post.display_src} alt={post.caption} className="grid-photo" />
           </Link>
+
+
           <CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
             <span key={post.likes} className="likes-heart">{post.likes}</span>
           </CSSTransitionGroup>
diff --git a/learn-redux/client/reducers/posts.js b/learn-redux/client/reducers/posts.js
index 8658f59b1..74c683b72 100644
--- a/learn-redux/client/reducers/posts.js
+++ b/learn-redux/client/reducers/posts.js
@@ -1,13 +1,8 @@
-// a reducer takes in two things:
+// A reducer's job is to take in action and store, process the action and then return the store.
 
-//1. the action (info about what happened)
-//2. copy of current state
-
-// intake action and store
-//
-// process request
-//
-// return store
+// A reducer takes in two things:
+// 1) the action (info about what happened)
+// 2) copy of current state
 
 function posts(state = [], action) {
   switch(action.type) {
diff --git a/learn-redux/client/store.js b/learn-redux/client/store.js
index d8c13b1e7..94d8ce43e 100644
--- a/learn-redux/client/store.js
+++ b/learn-redux/client/store.js
@@ -14,10 +14,37 @@ const defaultState = {
   comments: comments
 };
 
+// ________________________________________________
+// SUGAR ------> INSTALL REDUX DEV TOOLS.
+// Install Redux dev tools into our store by using a store enhancer. This     enables Redux Dev Tools in chrome to recognise your store.
+  const enhancers = compose(
+  // compose infuses our store with any of the enhancers we want.
+  window.devToolsExtension ? window.devToolsExtension() : f => f
+  // If dev tools is in the window, install it. If not just return the store.
+);
+// Then pass createStore the enhancers when creating the store below.
+// ________________________________________________
+
+
 // Creating the store using our collection of reducers and collection of data
-const store = createStore(rootReducer, defaultState);
+const store = createStore(rootReducer, defaultState, enhancers);
 
 export const history = syncHistoryWithStore(browserHistory, store);
 
+
+// ________________________________________________
+// SUGAR ------> HOT RELOAD REDUCERS. Done by accepting the hot reload & then re-requiring the reducer.
+if(module.hot) {
+  // First we check if the module is hot
+  module.hot.accept('./reducers/', () => {
+    // If it is hot, we accept it and run a function that is going to re-require and swap out the module for us.
+    const nextRootReducer = require('./reducers/index').default;
+    // Grab the main reducer (which is the top level index one). Use require because you cannot use an ES6 import statement inside of a function, must be done at top level.
+    store.replaceReducer(nextRootReducer)
+    // Finally we just replace the entire reducer with store.replaceReducer() and pass it the nextRootReducer.
+  });
+}
+// ________________________________________________
+
 // Export the newly created store
 export default store;

From 43f0940e5ef79f56bcaba636acaa210877d0bd74 Mon Sep 17 00:00:00 2001
From: Apprentice <apprentice@StMac0-6.local>
Date: Tue, 4 Oct 2016 15:42:39 +1300
Subject: [PATCH 6/6] pseudocode complete

---
 learn-redux/client/reducers/index.js | 2 +-
 learn-redux/client/reducers/posts.js | 3 +--
 learn-redux/client/reduxstagram.js   | 9 +++++----
 learn-redux/client/store.js          | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/learn-redux/client/reducers/index.js b/learn-redux/client/reducers/index.js
index 121bc5b5b..b6e2bb510 100644
--- a/learn-redux/client/reducers/index.js
+++ b/learn-redux/client/reducers/index.js
@@ -3,7 +3,7 @@ import { routerReducer } from 'react-router-redux';
 
 import posts from './posts';
 import comments from './comments';
-
+// combines all reducers from reducers folder and prepare for export
 const rootReducer = combineReducers({posts, comments, routing: routerReducer});
 
 export default rootReducer;
diff --git a/learn-redux/client/reducers/posts.js b/learn-redux/client/reducers/posts.js
index 74c683b72..298fbb253 100644
--- a/learn-redux/client/reducers/posts.js
+++ b/learn-redux/client/reducers/posts.js
@@ -7,14 +7,13 @@
 function posts(state = [], action) {
   switch(action.type) {
     case 'INCREMENT_LIKES' :
-      console.log("incrementing likes")
       const i = action.index;
       return [
         ...state.slice(0,i), // before the one we are updating
         {...state[i], likes: state[i].likes + 1},
         ...state.slice(i + 1) // after the one we are updating
       ]
-    //return the updated state
+    // always have default returning the updated state
     default:
       return state;
   }
diff --git a/learn-redux/client/reduxstagram.js b/learn-redux/client/reduxstagram.js
index 5df183ac2..e754338d7 100644
--- a/learn-redux/client/reduxstagram.js
+++ b/learn-redux/client/reduxstagram.js
@@ -9,19 +9,20 @@ import App from './components/App';
 import Single from './components/Single';
 import PhotoGrid from './components/PhotoGrid';
 
-// import react router deps
+// import react router dependecies
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 import { Provider } from 'react-redux';
 import store, { history } from './store';
 
-
 const router = (
   <Provider store={store}>
     <Router history={history}>
-      <Route path="/" component={App}> // If the url matches "/" or a further extension of, grab the Main component.
-        // Then depending on the URL structure, either pass 'Main', 'PhotoGrid' or 'Single'.
+      // Router componenent needs a history object, which here is browserHistory which allows you to do push state without having to reload the page.
+      <Route path="/" component={App}>
+        // If the url matches "/" or a further extension of, grab the Main component.
         <IndexRoute component={PhotoGrid}></IndexRoute>
         <Route path="/view/:postId" component={Single}></Route>
+        // Then depending on the URL structure, either pass 'Main', 'PhotoGrid' or 'Single'.
       </Route>
     </Router>
   </Provider>
diff --git a/learn-redux/client/store.js b/learn-redux/client/store.js
index 94d8ce43e..b225d60a6 100644
--- a/learn-redux/client/store.js
+++ b/learn-redux/client/store.js
@@ -26,7 +26,7 @@ const defaultState = {
 // ________________________________________________
 
 
-// Creating the store using our collection of reducers and collection of data
+// Create the store using collection of reducers and collection of data
 const store = createStore(rootReducer, defaultState, enhancers);
 
 export const history = syncHistoryWithStore(browserHistory, store);