From 1ef9e26a621b1a2337a5e62bcd0bec308b485c2a Mon Sep 17 00:00:00 2001
From: Gediminas <gediminasgn@gmail.com>
Date: Wed, 7 Jun 2017 16:11:16 +0100
Subject: [PATCH] Redux: dummy LIKE action and pictures list from Redux Store.

---
 package.json               |  4 +-
 src/actions/appActions.js  | 11 ++++++
 src/index.js               |  9 ++++-
 src/pages/Pictures.css     |  9 +++++
 src/pages/Pictures.js      | 81 ++++++++++++++++++++++++++------------
 src/reducers/appReducer.js | 20 ++++++++++
 src/reducers/index.js      |  8 ++++
 7 files changed, 115 insertions(+), 27 deletions(-)
 create mode 100644 src/actions/appActions.js
 create mode 100644 src/reducers/appReducer.js
 create mode 100644 src/reducers/index.js

diff --git a/package.json b/package.json
index 693a5c4..dcf2dc5 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
   "dependencies": {
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "react-router-dom": "^4.1.1"
+    "react-redux": "^5.0.5",
+    "react-router-dom": "^4.1.1",
+    "redux": "^3.6.0"
   },
   "devDependencies": {
     "enzyme": "^2.8.2",
diff --git a/src/actions/appActions.js b/src/actions/appActions.js
new file mode 100644
index 0000000..eae0f55
--- /dev/null
+++ b/src/actions/appActions.js
@@ -0,0 +1,11 @@
+const likePicture = (pictureIndex) => {
+  console.log(`LIKE ${pictureIndex}!`)
+  return {
+    type: 'LIKE_PICTURE',
+    pictureIndex
+  }
+}
+
+export {
+  likePicture
+}
diff --git a/src/index.js b/src/index.js
index 8f1a9bc..dda6251 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,16 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import {createStore} from 'redux'
+import {Provider} from 'react-redux'
 import App from './App'
+import reducers from './reducers'
 import './index.css'
 
+const store = createStore(reducers)
+
 ReactDOM.render(
-  <App />,
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('mountMyApp')
 )
diff --git a/src/pages/Pictures.css b/src/pages/Pictures.css
index 31bc0ed..c595d2a 100644
--- a/src/pages/Pictures.css
+++ b/src/pages/Pictures.css
@@ -19,6 +19,15 @@
   font-weight: 400;
 }
 
+.Picture-like {
+  padding: 5px;
+}
+
+.Picture-like > span {
+  display: block;
+  padding: 6px 10px;
+}
+
 .Picture > a {
   display: block;
 }
diff --git a/src/pages/Pictures.js b/src/pages/Pictures.js
index 605253e..288c3f7 100644
--- a/src/pages/Pictures.js
+++ b/src/pages/Pictures.js
@@ -1,35 +1,66 @@
-import React from 'react'
+import React, {Component} from 'react'
 import {Link} from 'react-router-dom'
-import pictures from '../sampleData/pictures'
+import {connect} from 'react-redux'
+import {likePicture} from '../actions/appActions'
 import './Pictures.css'
 
-const RenderPictures = (picturesList) => {
-  return picturesList.map((picture, index) => {
-    return (
-      <div className="Picture" key={`MyPicture_${index}`}>
-        <Link to={`/picture/${index}`}>
-          <img src={picture.url} alt={picture.name}/>
-        </Link>
-        <div className="Picture-name">{picture.name}</div>
-      </div>
-    )
-  })
-}
+export class Pictures extends Component {
 
-const Pictures = () => {
-  return {
-    render: () => {
+  onLike = (index, event) => {
+    event.preventDefault()
+    this.props.onLikePicture(index)
+  }
+
+  renderPictures(picturesList) {
+
+    return picturesList.map((picture, index) => {
       return (
-        <div className="app-content-width">
-          <article>
-            <h2>Pictures</h2>
-            <p>Simple picture gallery.</p>
-            <div className="Pictures-gallery">{RenderPictures(pictures)}</div>
-          </article>
+        <div className="Picture" key={`MyPicture_${index}`}>
+          <Link to={`/picture/${index}`}>
+            <img src={picture.url} alt={picture.name}/>
+          </Link>
+          <div className="Picture-name">{picture.name}</div>
+          <div className="Picture-like">
+            {index !== this.props.liked
+              ? <button onClick={this.onLike.bind(this, index)}>Like</button>
+              : <span>Liked! This is my favourite now.</span>
+            }
+          </div>
         </div>
       )
-    }
+    })
+  }
+
+  render() {
+    const { pictures } = this.props
+    return (
+      <div className="app-content-width">
+        <article>
+          <h2>Pictures</h2>
+          <p>Simple picture gallery. Last like index: {this.props.liked}</p>
+          <div className="Pictures-gallery">
+            {this.renderPictures(pictures)}
+          </div>
+        </article>
+      </div>
+    )
   }
 }
 
-export default Pictures
+const mapStateToProps = (state) => ({
+  liked: state.appReducer.liked,
+  pictures: state.appReducer.pictures
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onLikePicture: (pictureIndex) => {
+    dispatch(likePicture(pictureIndex))
+  }
+})
+
+const ConnectedPictures = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Pictures)
+
+export default ConnectedPictures
diff --git a/src/reducers/appReducer.js b/src/reducers/appReducer.js
new file mode 100644
index 0000000..ccc7559
--- /dev/null
+++ b/src/reducers/appReducer.js
@@ -0,0 +1,20 @@
+import pictures from '../sampleData/pictures'
+
+const defaultState = {
+  pictures: pictures,
+  liked: -1
+}
+
+const appReducer = (state = defaultState, action) => {
+  switch (action.type) {
+    case "LIKE_PICTURE":
+      return {
+        ...state,
+        liked: action.pictureIndex
+      }
+    default:
+      return state
+  }
+}
+
+export default appReducer
diff --git a/src/reducers/index.js b/src/reducers/index.js
new file mode 100644
index 0000000..4b21527
--- /dev/null
+++ b/src/reducers/index.js
@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import appReducer from './appReducer'
+
+const reducers = combineReducers({
+  appReducer // ..., anotherReducer, moreReducers
+})
+
+export default reducers