Added rewards option for Steem posts

Posting main content to Steem can be done with 3 payout options: 50/50 SBD?STEEM split, 100% STEEM, or no payout at all.

client/src/actions/sendPostActions.js

@@ -36,6 +36,11 @@ const sendPostError = error => ({
   error,
 });
 
+/**
+ *  Action creator for clearing a new post after the page is loaded.
+ *
+ *  @return {object} The action data
+ */
 export const clearNewPost = () => ({
   type: CLEAR_NEW_POST,
 });

client/src/components/pages/Steem/Post/Post.js

@@ -142,11 +142,11 @@ class Post extends Component {
                 commentPayload={commentPayload}
               />
             )
-            : !isFetchingDetails && !hasLength(post)
-              ? (
+            : isFetchingDetails && !hasLength(post)
+              ? <Loading />
+              : (
                 <div>That post does not exist.</div>
               )
-              : <Loading />
           }
         </React.Fragment>
       </ErrorBoundary>
@@ -214,7 +214,13 @@ class Post extends Component {
    }
  }
 
-const mapDispatchToProps = (dispatch) => (
+ /**
+  *  Map redux dispatch functions to component props.
+  *
+  *  @param {object} dispatch - Redux dispatch
+  *  @returns {object} - Object with recent activity data
+  */
+const mapDispatchToProps = dispatch => (
   {
     getContent: (author, permlink) => (
       dispatch(getDetailsContent(author, permlink))

client/src/components/pages/Steem/Post/PostDetails.js

@@ -52,6 +52,13 @@ class PostDetails extends Component {
 
     this.images = [];
     this.imagesAlts = [];
+    this.sortOptions = [
+      {key: 0, value: 'new', text: 'New'},
+      {key: 1, value: 'old', text: 'Old'},
+      //{key: 2, value: 'votes', text: 'Votes'},
+      {key: 3, value: 'rep', text: 'Reputation'},
+      {key: 4, value: 'payout', text: 'Payout'}
+    ];
 
     this.state = {
       sortBy: 'new',
@@ -162,19 +169,6 @@ class PostDetails extends Component {
     const comments = replies;
     const pid = post.id;
 
-    const sortPicker = (
-      <Form>
-        <Form.Group>
-          <Form.Field
-            control={Select}
-            defaultValue={sortOptions[0].value}
-            options={sortOptions}
-            onChange={this.handleSortChange}
-          />
-        </Form.Group>
-      </Form>
-    );
-
     return (
       <HelmetProvider>
         <React.Fragment>
@@ -281,10 +275,23 @@ class PostDetails extends Component {
                   }
                   <div className='comments' id='comments'>
                     {
-                      comments && (
+                      !!comments.length && (
                         <React.Fragment>
-                          <div className='left'><h2>Comments</h2></div>
-                          <div className='right'>{  sortPicker }</div>
+                          <div className='left'>
+                            <h2>Comments</h2>
+                          </div>
+                          <div className='right'>
+                            <Form>
+                              <Form.Group>
+                                <Form.Field
+                                  control={Select}
+                                  defaultValue={this.sortOptions[0].value}
+                                  options={this.sortOptions}
+                                  onChange={this.handleSortChange}
+                                />
+                              </Form.Group>
+                            </Form>
+                          </div>
                           <Comments
                             comments={comments}
                             sendComment={sendComment}
@@ -312,12 +319,4 @@ class PostDetails extends Component {
   }
 }
 
-const sortOptions = [
-  {key: 0, value: 'new', text: 'New'},
-  {key: 1, value: 'old', text: 'Old'},
-  //{key: 2, value: 'votes', text: 'Votes'},
-  {key: 3, value: 'rep', text: 'Reputation'},
-  {key: 4, value: 'payout', text: 'Payout'}
-];
-
 export default PostDetails;

client/src/components/pages/Steem/Posts.js

@@ -287,7 +287,13 @@ const mapStateToProps = state => {
   }
 }
 
-const mapDispatchToProps = (dispatch) => (
+/**
+ *  Map redux dispatch functions to component props.
+ *
+ *  @param {object} dispatch - Redux dispatch
+ *  @returns {object} - Object with recent activity data
+ */
+const mapDispatchToProps = dispatch => (
   {
     getContent: (selectedFilter, query, nextPost, page) => (
       dispatch(getSummaryContent(selectedFilter, query, nextPost, page))

client/src/components/pages/Steem/Write/Write.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Form, Label } from 'semantic-ui-react'
+import { Form, Label, Select } from 'semantic-ui-react'
 import { Redirect } from 'react-router-dom';
 
 import Preview from '../Post/Preview';
@@ -30,10 +30,16 @@ class Write extends Component {
     this.state = {
       title: '',
       body: '',
-      tags: ''
+      tags: '',
+      reward: '50',
     }
 
     this.redirect = '';
+    this.rewardOptions = [
+      {key: 0, value: '50', text: '50% SBD / 50% STEEM'},
+      {key: 1, value: '100', text: '100% STEEM'},
+      {key: 2, value: '0', text: 'Decline Payout'},
+    ];
   }
 
 
@@ -57,17 +63,17 @@ class Write extends Component {
   handleSubmit = (e) => {
     e.preventDefault();
 
-    const { title, body, tags } = this.state;
+    const { title, body, tags, reward } = this.state;
     const { createPost } = this.props;
 
     if (body === '' || title === '' || tags === '') return;
 
-    const post = this.getNewPostData(title, body, tags);
+    const post = this.getNewPostData(title, body, tags, reward);
 
     createPost(post);
   }
 
-  getNewPostData = (title, body, tags) => {
+  getNewPostData = (title, body, tags, reward) => {
     tags = tags.split(' ');
     const { user } = this.props;
     const post = {
@@ -81,11 +87,23 @@ class Write extends Component {
     post.author = user;
     post.parentPermlink = tags[0];
     post.jsonMetadata = createPostMetadata(post.body, tags);
-    post.reward = 'half';
+    post.reward = reward;
 
     return post;
   }
 
+  /**
+   *  Set state values for when tag input text changes.
+   *
+   *  @param {event} e Event triggered by element to handle
+   *  @param {string} value Value of the element triggering the event
+   */
+   handleRewardChange = (e, {value}) => {
+     this.setState({
+       reward: value,
+      });
+   }
+
   render() {
     const {
       state: {
@@ -129,9 +147,14 @@ class Write extends Component {
               onChange={this.handleChange}
             />
 
-            <Form.Checkbox
-              label='Payout at 50/50'
-            />
+            <Form.Group>
+              <Form.Field
+                control={Select}
+                defaultValue={this.rewardOptions[0].value}
+                options={this.rewardOptions}
+                onChange={this.handleRewardChange}
+              />
+            </Form.Group>
 
             <Form.Button>Submit</Form.Button>
             {
@@ -177,7 +200,13 @@ class Write extends Component {
    }
  }
 
-const mapDispatchToProps = (dispatch) => (
+ /**
+  *  Map redux dispatch functions to component props.
+  *
+  *  @param {object} dispatch - Redux dispatch
+  *  @returns {object} - Object with recent activity data
+  */
+const mapDispatchToProps = dispatch => (
   {
     createPost: (post) => (
       dispatch(sendPost(post))