Use post body to display content

package.json

@@ -2,6 +2,9 @@
   "name": "alpha-web",
   "version": "0.4.1",
   "private": false,
+  "engines": {
+    "node": "<=9 >=8"
+  },
   "dependencies": {
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.0",
@@ -54,6 +57,7 @@
     "redux": "^3.7.2",
     "redux-auth-wrapper": "^2.0.3",
     "redux-thunk": "^2.2.0",
+    "remarkable": "^1.7.1",
     "showdown": "^1.8.6",
     "sjcl": "^1.0.7",
     "steem": "^0.7.1",

src/actions/createPostActions.js

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 
-import getStore from '../utils/storeUtils';
 import haprampAPI from '../utils/haprampAPI';
 import Steem from '../utils/steem';
 
@@ -35,28 +34,30 @@ export const clearError = () => dispatch => dispatch({ type: actionTypes.CLEAR_E
 export const setHashtags = hashtags => dispatch =>
   dispatch({ type: actionTypes.SET_HASHTAGS, hashtags });
 
-export const createPost = oldData => (dispatch) => {
+export const createPost = oldData => (dispatch, getState) => {
   // Deep copy
   const data = _.cloneDeep(oldData);
   const { tags, post, community } = data;
 
   dispatch({ type: actionTypes.POST_CREATE_INIT });
 
-  const author = getStore().getState().authUser.username;
+  const author = getState().authUser.username;
+  // TODO: Generate a better permlink
   const permlink = `${new Date().toISOString().replace(/[^a-zA-Z0-9]+/g, '').toLowerCase()}-post`;
 
   const fullPermlink = `${author}/${permlink}`;
   return haprampAPI.v2.post.prepare(post, fullPermlink)
-    .then(body => Steem.sc2Operations.createPost(author, body, tags, post, permlink, community)
+    .then(body => Steem.sc2Operations
+      .createPost(author, body, tags, post, permlink, community)
       .then(() => dispatch({ type: actionTypes.POST_CREATED, fullPermlink }))
       .catch((e) => {
         console.log('Steem error', e);
         return dispatch({ type: actionTypes.CREATE_ERROR, message: e, element: 'top' });
-      })
-      .catch((e) => {
-        console.log('Hapramp API Error', e);
-        dispatch({ type: actionTypes.CREATE_ERROR, message: e, element: 'top' });
-      }));
+      }))
+    .catch((e) => {
+      console.log('Hapramp API Error', e);
+      dispatch({ type: actionTypes.CREATE_ERROR, message: e, element: 'top' });
+    });
 };
 
 export const resetPostCreate = () => dispatch => dispatch({ type: actionTypes.POST_CREATE_RESET });

src/components/browseCommunity/index.js

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 
 import Sidebar from '../sidebar';
-import Post from '../post';
+import PostCard from '../../post/PostCard';
 import { loadFeedsByCreated, loadFeedsByHot, loadFeedsByTrending } from '../../actions/userFeedActions';
 import { loadUserAccounts } from '../../actions/allUserActions';
 import feedStyles from '../feed/styles.scss';
@@ -59,7 +59,7 @@ class BrowseCommunity extends React.Component {
               <div>
                 {this.props.userFeed[this.props.match.params.filter].posts
                   && this.props.userFeed[this.props.match.params.filter].posts.map(post => (
-                    <Post
+                    <PostCard
                       key={post}
                       postPermlink={post}
                     />))}

src/components/contentSingle/index.js

@@ -3,8 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { loadPost } from '../../actions/allPostsActions';
-import PostSingle from '../postSingle';
-import ArticleSingle from '../articleSingle';
+import PostSingle from '../../post/PostSingle';
 
 class ContentSingle extends React.Component {
   constructor(props) {
@@ -19,10 +18,9 @@ class ContentSingle extends React.Component {
 
     return (
       <div className={['uk-container', 'uk-margin-top'].join(' ')}>
-        {this.props.post.json_metadata.content.type === 'post' ?
-          <PostSingle postPermlink={`${this.props.post.author}/${this.props.post.permlink}`} /> :
-          <ArticleSingle postPermlink={`${this.props.post.author}/${this.props.post.permlink}`} />}
-      </div>);
+        <PostSingle postPermlink={`${this.props.post.author}/${this.props.post.permlink}`} />
+      </div>
+    );
   }
 }
 

src/components/feed/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 
 import { loadFeedsForUser } from '../../actions/userFeedActions';
 import { loadUserAccounts } from '../../actions/allUserActions';
-import Post from '../post';
+import PostCard from '../../post/PostCard';
 import AddContentButton from '../addContentButton';
 import Sidebar from '../sidebar';
 import styles from './styles.scss';
@@ -35,7 +35,7 @@ class Feed extends React.Component {
           </div>
           <div className={['uk-margin-top', styles.feedPosts].join(' ')}>
             {this.props.userFeed.posts && this.props.userFeed.posts.map(post =>
-              <Post key={post} postPermlink={post} />)}
+              <PostCard key={post} postPermlink={post} />)}
           </div>
           <AddContentButton />
         </div>

src/components/userProfile/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import userPlaceholder from './user-placeholder.jpg';
 import styles from './styles.scss';
 import indexStyles from '../../index.scss';
-import Post from '../post';
+import PostCard from '../../post/PostCard';
 import {
   getFollowCount, getUserFeeds, loadUserProfileInfo,
   resetUserProfileInfo,
@@ -131,7 +131,7 @@ class UserProfile extends React.Component {
             {this.props.userProfile
               .blog
               .posts
-              .map(item => <Post key={item} postPermlink={item} border />)}
+              .map(item => <PostCard key={item} postPermlink={item} border />)}
           </div>
         </div>
       </div>);

src/post/PostBody/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Remarkable from 'remarkable';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import styles from './styles.scss';
+
+const remarkable = new Remarkable({
+  html: true,
+  breaks: true,
+  linkify: true,
+  typographer: false,
+  quotes: '“”‘’',
+});
+
+const PostBody = ({
+  className, body, author, permlink, minify, ...props
+}) => (
+  <div className={`${className} ${styles.container}`} {...props}>
+    <div
+      className={`${minify ? styles.minify : ''} ${styles.bodyContainer}`}
+      dangerouslySetInnerHTML={{ __html: remarkable.render(body) }}
+    />
+    {
+      minify
+      && (
+        <div className={['uk-text-center', styles.articleReadMore].join(' ')}>
+          <Link
+            to={`/@${author}/${permlink}`}
+            className={[styles.readMoreText].join(' ')}
+          >
+            READ MORE
+          </Link>
+        </div>
+      )
+    }
+  </div>
+);
+
+PostBody.propTypes = {
+  className: PropTypes.string,
+  body: PropTypes.string.isRequired,
+  author: PropTypes.string.isRequired,
+  permlink: PropTypes.string.isRequired,
+  minify: PropTypes.bool,
+};
+
+PostBody.defaultProps = {
+  className: '',
+  minify: false,
+};
+
+export default PostBody;

src/post/PostBody/styles.scss

@@ -0,0 +1,56 @@
+@import "../../index.scss";
+
+.container {
+  padding: 0 24px;
+}
+
+.bodyContainer {
+  font-size: 16px;
+  color: rgba(0,0,0,0.54);
+  line-height: 24px;
+}
+
+.bodyContainer h1 {
+  font-family: Roboto-Medium;
+  font-size: 36px;
+  color: $primary-color;
+  line-height: 54px;
+}
+
+.bodyContainer h2 {
+  font-family: Roboto;
+  font-size: 18px;
+  color: $primary-color;
+  line-height: 30px;
+}
+
+.articleReadMore {
+	margin-top: -16px;
+	padding: 8px 0;
+	background-color: rgba(255, 255, 255, 0.9);
+	color: #3F72AF;
+	letter-spacing: 2px;
+	font-weight: 500;
+  position: relative;
+  cursor: pointer;
+}
+
+.readMoreText {
+	padding: 4px 8px;
+	color: rgba(0, 0, 0, 0.54);
+	background: white;
+	border: 1px solid rgba(0, 0, 0, 0.24);
+	border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.readMoreText:hover {
+	background-color: $primary-color;
+	color: white;
+  transition: all 0.3s;
+}
+
+.minify {
+	max-height: 380px;
+	overflow: hidden;
+}