Use body to display for the posts

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 && 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;
+}

src/components/post/index.js → src/post/PostCard/index.js

@@ -1,33 +1,24 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import Remarkable from 'remarkable';
 
 // import PostData from '../postData';
 import styles from './styles.scss';
 import indexStyles from '../../index.scss';
 import { ratePost } from '../../actions/allPostsActions';
-import PostUserMeta from '../postUserMeta';
+import PostUserMeta from '../PostUserMeta';
 import { getCommunitiesForPost } from '../../utils/communityUtils';
 import { fixUser } from '../../utils/defaultFixUtils';
-import ActionBar from '../actionBar';
-
-const remarkable = new Remarkable({
-  html: true,
-  breaks: true,
-  linkify: true,
-  typographer: false,
-  quotes: '“”‘’',
-});
+import ActionBar from '../ActionBar';
+import PostBody from '../../post/PostBody';
 
 const Post = (props) => {
   if (!props.post) {
     return <div>Loading...</div>;
   }
 
-  const { content } = props.post.json_metadata;
-  const { body } = props.post;
+  const { body, author, permlink } = props.post;
 
   /* Author details */
   const user = props.postingUser;
@@ -46,30 +37,12 @@ const Post = (props) => {
         communities={getCommunitiesForPost(props.post)}
       />
       {/* Actual post */}
-      <div
-        className={`${styles.postSection} ${content.type === 'article' ? styles.articleView : ''}`}
-        dangerouslySetInnerHTML={{ __html: remarkable.render(body) }}
+      <PostBody
+        body={body}
+        author={author}
+        permlink={permlink}
+        minify
       />
-      {/*
-      <div
-        className={[
-          styles.postSection,
-          content.type === 'article' ? styles.articleView : ''
-        ].join(' ')}
-      >
-        {content && content.data.map((data, idx) =>
-          <PostData applyTopMargin={idx !== 0} key={`${data.type}/${data.content}`} data={data} />)}
-      </div>
-      */}
-      {content.type === 'article' &&
-        <div className={['uk-text-center', styles.articleReadMore, indexStyles.pointer].join(' ')}>
-          <Link
-            to={`/@${props.post.author}/${props.post.permlink}`}
-            className={[styles.readMoreText, indexStyles.transition].join(' ')}
-          >READ MORE
-          </Link>
-        </div>}
-      {/* Action bar */}
       <ActionBar post={props.post} withLink />
     </div>);
 };