Merge pull request #12 from Schwartz10/reward

Reward
reard96 · Jan 20, 2018 · 2ecb3b0 · 2ecb3b0
2 parents 0a1c041 + e1a4309
commit 2ecb3b0
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -3,6 +3,7 @@
 body,
 .pure-g [class*=pure-u] {
   font-family: 'Open Sans', sans-serif;
+  background-color: #DDDDDD
 }
 
 h1, h2, h3 {
@@ -88,3 +89,14 @@ code {
 .single-view-header {
   text-align: center;
 }
+
+#action-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 1em;
+}
+
+#action-options {
+  margin-right: 1em;
+}
diff --git a/src/components/LikePhoto.js b/src/components/LikePhoto.js
@@ -2,16 +2,68 @@ import React, { Component } from 'react'
 import {connect} from 'react-redux'
 import RaisedButton from 'material-ui/RaisedButton';
 import { likePost } from '../store/posts';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import ContentRemove from 'material-ui/svg-icons/content/remove';
+import TextField from 'material-ui/TextField';
+
+const styles = {
+  button: {
+    margin: '.25em',
+  },
+  textField: {
+    width: '2em',
+    height: '2em',
+    margin: '0, 0, 0, .25em'
+  }
+};
 
 class LikePhoto extends Component {
   constructor(props){
     super(props);
+    this.state = {reward: 0}
+  }
+
+  incrementReward = (e) => {
+    e.preventDefault();
+    let reward = Number(this.state.reward + 1)
+    this.setState({ reward })
+  }
+
+  decrementReward = (e) => {
+    e.preventDefault();
+    let reward = Number(this.state.reward - 1)
+    this.setState({ reward })
+  }
+
+  handleChange = (e) => {
+    e.preventDefault();
+    this.setState({reward: event.target.value})
   }
 
   render(){
     return(
-      <div>
-      <RaisedButton primary={true} label="like" onClick={e => this.props.like(e, this.props.postUrl, this.props.postAddress, this.props.contract.likePost, this.props.accounts[0])}/>
+      <div id="action-bar">
+        <div id="action-options">
+          <TextField
+            style={styles.textField}
+            hintText="0"
+            value={this.state.reward}
+            onChange={this.handleChange}
+          />
+          <FloatingActionButton
+            onClick={this.incrementReward} mini={true}
+            style={styles.button} >
+             <ContentAdd />
+          </FloatingActionButton>
+          <FloatingActionButton
+            onClick={this.decrementReward} mini={true}
+            disabled={this.state.reward <= 0}
+            style={styles.button}>
+              <ContentRemove />
+          </FloatingActionButton>
+        </div>
+        <RaisedButton primary={true} label="Reward" onClick={e => this.props.like(e, this.props.postUrl, this.props.postAddress, this.props.contract.likePost, this.props.accounts[0], this.state.reward)}/>
       </div>
     )
   }
@@ -31,9 +83,9 @@ const mapState = (state) => {
 
 const mapDispatch = (dispatch) => {
   return {
-    like: function(e, postUrl, postAddress, contractFunc, account){
+    like: function(e, postUrl, postAddress, contractFunc, account, reward){
       e.preventDefault();
-      return dispatch(likePost(postUrl, postAddress, contractFunc, account));
+      return dispatch(likePost(postUrl, postAddress, contractFunc, account, reward));
     }
   }
 }

diff --git a/src/store/posts.js b/src/store/posts.js
@@ -57,9 +57,9 @@ export const fetchPosts = (fetchAddressArray, addressToPostFunc) =>
     .catch(err => console.log(err))
 
   // in process
-export const likePost = (postUrl, postAddress, contractFunc, account) =>
+export const likePost = (postUrl, postAddress, contractFunc, account, reward) =>
   dispatch =>
-    contractFunc(postAddress, 10, {from: account})
+    contractFunc(postAddress, reward, {from: account})
     .then(res => {
       let postInfo = Object.assign({}, res.logs[0].args);
       postInfo.likerCoinbalance = Number(postInfo.likerCoinbalance.toString(10));