Merge pull request #14 from Schwartz10/enhancedPosts

Enhanced posts

build/contracts/Migrations.json

@@ -823,5 +823,5 @@
     }
   },
   "schemaVersion": "1.0.1",
-  "updatedAt": "2018-01-20T19:00:49.726Z"
+  "updatedAt": "2018-01-20T19:30:59.025Z"
 }

build/contracts/SimpleStorage.json

@@ -344,5 +344,5 @@
     }
   },
   "schemaVersion": "1.0.1",
-  "updatedAt": "2018-01-20T19:00:49.725Z"
+  "updatedAt": "2018-01-20T19:30:59.025Z"
 }

contracts/CapCoin.sol

@@ -6,7 +6,7 @@ contract CapCoin is Ownable {
 
   event NewUser(string name);
   event BoughtTokens(uint coinBalance);
-  event CreatedPost(string url);
+  event CreatedPost(string url, string caption);
   event LikedPost(int lotteryAmount, string posterName,
     address poster, uint posterCoinbalance, string likerName,
     address liker, uint likerCoinbalance);
@@ -30,6 +30,7 @@ contract CapCoin is Ownable {
     string userName;
     int lotteryAmount;
     address owner;
+    string caption;
   }
 
   mapping (address => User) public addressToUser;
@@ -60,17 +61,18 @@ contract CapCoin is Ownable {
     BoughtTokens(addressToUser[msg.sender].coinBalance);
   }
 
-  function createPost(string url) public {
+  function createPost(string url, string caption) public {
     // 5 coins per post
     var post = addressToPost[msg.sender];
     post.url = url;
     post.lotteryAmount -= 5;
     post.userName = addressToUser[msg.sender].name;
     post.owner = msg.sender;
+    post.caption = caption;
 
     posts.push(msg.sender) -1;
     addressToUser[msg.sender].coinBalance -= 5;
-    CreatedPost(url);
+    CreatedPost(url, caption);
   }
 
   function likePost(address post, uint amount) public {
@@ -86,10 +88,10 @@ contract CapCoin is Ownable {
       return posts;
   }
 
-  function seed(string name, string url, uint amount) public {
+  function seed(string name, string url, uint amount, string caption) public {
       createUser(name);
       buyTokens(amount);
-      createPost(url);
+      createPost(url, caption);
   }
 
     function kill() {

src/App.css

@@ -79,6 +79,7 @@ code {
 
 #main-header {
   font-size: 3em;
+  text-align: center;
 }
 
 #post-container {
@@ -100,3 +101,25 @@ code {
 #action-options {
   margin-right: 1em;
 }
+
+.action-box {
+
+  border: 2px solid silver;
+  border-radius: 4px;
+}
+
+#create-post-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.home-button{
+  position: fixed;
+  top: 7.5%;
+  right: 7.5%;
+}
+
+.error-message {
+  color: red
+}

src/components/CreatePost.js

@@ -6,11 +6,13 @@ import Post from './Post';
 import RaisedButton from 'material-ui/RaisedButton';
 import { post } from '../store/posts';
 
+const styles={urlBox: {margin: '.5em'}}
+
 class CreatePost extends Component {
   constructor(props){
     super(props);
     this.state = { canPost: this.props.user.coinBalance >= 5,
-    postUrl: "" }
+    postUrl: "", caption: "" }
   }
 
   handleChange = (event) => {
@@ -19,34 +21,54 @@ class CreatePost extends Component {
     });
   };
 
+  handleCaption = (event) => {
+    this.setState({caption: event.target.value})
+  }
+
   render(){
     return(
       <div>
         {this.props.user ?
-        <div>
-          <h1>Create Your Post {this.props.user.name}</h1>
-          <h3>You currently have {this.props.user.coinBalance} Coins <br /></h3>
-          <TextField
-            value={this.props.postUrl}
-            hintText={!this.state.postUrl.length && "Enter Post URL"}
-            onChange={this.handleChange}
-          /><br />
-          { this.state.postUrl.length &&
+        <div id="create-post-container">
+            <h2>Create Your Post {this.props.user.name}</h2>
+            {this.props.user && this.props.user.coinBalance > 0 ?
             <div>
-              <h3>Post Preview:</h3>
-              <Post
-                username={this.props.user.name}
-                tokenPot={-5}
-                postUrl={this.state.postUrl}
-                isPreview={true}
-              />
-              <RaisedButton
-                onClick={e =>
-                this.props.post(e, this.state.postUrl, this.props.contract.createPost, this.props.accounts[0], this.props.user.name)}
-                label="Create Post" primary={true}
-              />
+              <TextField
+                disabled={this.props.user && this.props.user.coinBalance <= 0}
+                errorText={this.props.user && this.props.user.coinBalance <= 0 && "You must buy coins first!"}
+                className="action-box"
+                style={styles.urlBox}
+                value={this.props.postUrl}
+                hintText={!this.state.postUrl.length && "Enter Post URL"}
+                onChange={this.handleChange}
+              /><br />
             </div>
-          }
+            :
+            <h4 className="error-message">You have to buy InstaCoins First!</h4>
+            }
+            <h4 id="coin-count">You currently have {this.props.user.coinBalance} Coins <br /></h4>
+            { this.state.postUrl.length &&
+              <div>
+                <h3>Post Preview:</h3>
+                <TextField
+                  value={this.props.postUrl}
+                  hintText={!this.state.caption.length && "Enter Caption"}
+                  onChange={this.handleCaption}
+                /><br />
+                <Post
+                  username={this.props.user.name}
+                  tokenPot={-5}
+                  postUrl={this.state.postUrl}
+                  caption={this.state.caption}
+                  isPreview={true}
+                />
+                <RaisedButton
+                  onClick={e =>
+                  this.props.post(e, this.state.postUrl, this.props.contract.createPost, this.props.accounts[0], this.props.user.name, this.state.caption)}
+                  label="Create Post" primary={true}
+                />
+              </div>
+            }
         </div>
         :
         <div>
@@ -71,9 +93,10 @@ const mapState = (state) => {
 
 const mapDispatch = (dispatch) => {
   return {
-    post: function(e, postUrl, contractFunc, account, username){
+    post: function(e, postUrl, contractFunc, account, username, caption){
       e.preventDefault();
-      return dispatch(post(postUrl, contractFunc, account, username));
+      console.log(postUrl, contractFunc, account, username, caption)
+      return dispatch(post(postUrl, contractFunc, account, username, caption));
     }
   }
 }

src/components/Drawer.js

@@ -8,6 +8,9 @@ const styles = {
   button: {
     width: "7em",
     height: "3em",
+    position: 'fixed',
+    top: "7.5%",
+    left: "7.5%"
   },
 };
 

src/components/Explore.js

@@ -28,6 +28,7 @@ class Explore extends Component {
                     tokenPot={post.tokenPot}
                     postUrl={post.postUrl}
                     address={post.address}
+                    caption={post.caption}
                     isPreview={false}
                   />
                 </div>

src/components/Post.js

@@ -17,9 +17,9 @@ const Post = props => (
       >
         <img src={props.postUrl} alt="" />
       </CardMedia>
+      <CardTitle subtitle={props.caption}/>
       {!props.isPreview &&
         <div>
-          <CardTitle title="Like this pic?"/>
           <CardActions>
             <LikePhoto
               postUrl={props.postUrl}

src/components/Routes.js

@@ -16,45 +16,25 @@ const styles = {
   },
 };
 
-export default class Routes extends Component {
-  componentDidMount () {}
+const Routes = () =>
+  <Router history={history}>
+      <div>
+        <span>
+          <Drawer />
+          <h1 id="main-header">InstaCoin</h1>
+          <Link to="/" >
+            <RaisedButton className='home-button' buttonStyle={styles.button}
+            primary={true} label="home" />
+          </Link>
+        </span>
+        <Switch>
+          <Route exact path='/profile' component={Account} />
+          <Route exact path='/exchange' component={Exchange} />
+          <Route exact path='/explore' component={Explore} />
+          <Route exact path='/create-post' component={CreatePost} />
+          <Route exact path='/' component={Explore} />
+        </Switch>
+      </div>
+  </Router>
 
-  render () {
-    return (
-      <Router history={history}>
-          <div>
-            <span>
-            <div id="navigation">
-              <Drawer />
-              <h1 id="main-header">InstaCoin</h1>
-              <Link to="/" >
-                <RaisedButton buttonStyle={styles.button}
-                primary={true} label="home" />
-              </Link>
-            </div>
-            </span>
-            <Switch>
-              <Route exact path='/profile' component={Account} />
-              <Route exact path='/exchange' component={Exchange} />
-              <Route exact path='/explore' component={Explore} />
-              <Route exact path='/create-post' component={CreatePost} />
-              <Route exact path='/' component={Explore} />
-            </Switch>
-          </div>
-      </Router>
-    )
-  }
-}
-
-/**
- * CONTAINER
- */
-// const mapState = (state) => {
-//   return {}
-// }
-
-// const mapDispatch = (dispatch) => {
-//   return {}
-// }
-
-// export default connect(mapState, mapDispatch)(Routes)
+export default Routes;

src/store/posts.js

@@ -23,15 +23,16 @@ const likedPost = post => ({type: LIKED_POST, post});
  * THUNK CREATORS
  */
 
-export const post = (url, contractFunc, account, username) =>
+export const post = (url, contractFunc, account, username, caption) =>
   dispatch =>
-    contractFunc(url, {from: account})
+    contractFunc(url, caption, {from: account})
     .then(res => {
       let newPost = {}
       newPost.postUrl = res.logs[0].args.url;
       newPost.address = account;
       newPost.tokenPot = -5;
       newPost.username = username;
+      newPost.caption = caption;
       return dispatch(createPost(newPost));
     })
     .catch(err => console.log(err));
@@ -50,6 +51,7 @@ export const fetchPosts = (fetchAddressArray, addressToPostFunc) =>
         completedPost.username = post[1];
         completedPost.tokenPot = post[2].toString(10);
         completedPost.address = post[3];
+        completedPost.caption = post[4];
         return completedPost;
       })
       dispatch(gotPosts(finalArr))