From 754bcca5e634b0ebaea759d411bdc63b29e55577 Mon Sep 17 00:00:00 2001 From: Pratyush Singh Date: Tue, 31 Jul 2018 15:53:20 +0530 Subject: [PATCH] Use body to display for the posts --- src/components/browseCommunity/index.js | 4 +- src/components/contentSingle/index.js | 10 +- src/components/feed/index.js | 4 +- src/components/postSingle/index.js | 100 ------------------ src/components/postSingle/styles.scss | 7 -- src/components/userProfile/index.js | 4 +- .../actionBar => post/ActionBar}/index.js | 0 .../actionBar => post/ActionBar}/styles.scss | 0 .../customTags => post/CustomTags}/index.js | 0 .../CustomTags}/styles.scss | 0 src/post/PostBody/index.js | 53 ++++++++++ src/post/PostBody/styles.scss | 56 ++++++++++ .../post => post/PostCard}/index.js | 47 ++------ .../post => post/PostCard}/styles.scss | 0 src/post/PostSingle/index.js | 96 +++++++++++++++++ .../PostUserMeta}/index.js | 0 .../PostUserMeta}/styles.scss | 0 .../Replies/CreateReply}/index.js | 4 +- .../Replies/CreateReply}/styles.scss | 0 .../Replies/PendingReply}/index.js | 2 +- .../Replies/PendingReply}/styles.scss | 0 .../reply => post/Replies/Reply}/index.js | 2 +- .../reply => post/Replies/Reply}/styles.scss | 0 .../replies => post/Replies}/index.js | 6 +- .../replies => post/Replies}/styles.scss | 0 25 files changed, 232 insertions(+), 163 deletions(-) delete mode 100644 src/components/postSingle/index.js delete mode 100644 src/components/postSingle/styles.scss rename src/{components/actionBar => post/ActionBar}/index.js (100%) rename src/{components/actionBar => post/ActionBar}/styles.scss (100%) rename src/{components/customTags => post/CustomTags}/index.js (100%) rename src/{components/customTags => post/CustomTags}/styles.scss (100%) create mode 100644 src/post/PostBody/index.js create mode 100644 src/post/PostBody/styles.scss rename src/{components/post => post/PostCard}/index.js (55%) rename src/{components/post => post/PostCard}/styles.scss (100%) create mode 100644 src/post/PostSingle/index.js rename src/{components/postUserMeta => post/PostUserMeta}/index.js (100%) rename src/{components/postUserMeta => post/PostUserMeta}/styles.scss (100%) rename src/{components/createReply => post/Replies/CreateReply}/index.js (94%) rename src/{components/createReply => post/Replies/CreateReply}/styles.scss (100%) rename src/{components/pendingReply => post/Replies/PendingReply}/index.js (95%) rename src/{components/pendingReply => post/Replies/PendingReply}/styles.scss (100%) rename src/{components/reply => post/Replies/Reply}/index.js (95%) rename src/{components/reply => post/Replies/Reply}/styles.scss (100%) rename src/{components/replies => post/Replies}/index.js (94%) rename src/{components/replies => post/Replies}/styles.scss (100%) diff --git a/src/components/browseCommunity/index.js b/src/components/browseCommunity/index.js index 6ed6e67..2a4ac65 100644 --- a/src/components/browseCommunity/index.js +++ b/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 {
{this.props.userFeed[this.props.match.params.filter].posts && this.props.userFeed[this.props.match.params.filter].posts.map(post => ( - ))} diff --git a/src/components/contentSingle/index.js b/src/components/contentSingle/index.js index 491bf07..fd8d797 100644 --- a/src/components/contentSingle/index.js +++ b/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 (
- {(this.props.post.json_metadata.content && this.props.post.json_metadata.content.type === 'post') ? - : - } -
); + +
+ ); } } diff --git a/src/components/feed/index.js b/src/components/feed/index.js index fa852fe..af8db24 100644 --- a/src/components/feed/index.js +++ b/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 {
{this.props.userFeed.posts && this.props.userFeed.posts.map(post => - )} + )}
diff --git a/src/components/postSingle/index.js b/src/components/postSingle/index.js deleted file mode 100644 index 6942f12..0000000 --- a/src/components/postSingle/index.js +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; - -import indexStyles from '../../index.scss'; -import PostUserMeta from '../postUserMeta'; -import { getCommunitiesForPost } from '../../utils/communityUtils'; -import { fixUser } from '../../utils/defaultFixUtils'; -import styles from './styles.scss'; -import PostData from '../postData'; -import ActionBar from '../actionBar'; -import CustomTags from '../customTags'; -import Replies from '../replies'; - -class PostSingle extends React.Component { - static isMedia(content) { - return content.data[0].type.toLowerCase() === 'image' || content.data[0].type.toLowerCase() === 'youtube'; - } - - componentDidMount() { - window.scrollTo(0, 0); - } - - getLeftSection() { - if (PostSingle.isMedia(this.props.post.json_metadata.content)) { - return ( -
- -
); - } - return
; - } - - getRightSection() { - const containsImage = PostSingle.isMedia(this.props.post.json_metadata.content); - const classes = containsImage ? - ['uk-width-1-1@s', 'uk-width-1-2@m', 'uk-width-1-2@l'] : - ['uk-width-1-1@s', 'uk-width-2-3@m', 'uk-width-1-2@l']; - const data = containsImage ? - this.props.post.json_metadata.content.data[1] : - this.props.post.json_metadata.content.data[0]; - return ( -
- -
- {data.content} -
- - - -
); - } - - render() { - return ( -
- {this.getLeftSection()} - {this.getRightSection()} -
); - } -} - -PostSingle.propTypes = { - post: PropTypes.shape().isRequired, - postingUser: PropTypes.shape({ - json_metadata: PropTypes.shape({ - profile: PropTypes.shape({ - name: PropTypes.string, - profile_image: PropTypes.string, - }), - }), - }), -}; - -PostSingle.defaultProps = { - postingUser: {}, -}; - -const mapStateToProps = (state, ownProps) => { - const post = state.allPosts.posts[ownProps.postPermlink]; - const postingUsername = post.author; - const postingUser = fixUser(state.allUsers.users[postingUsername], postingUsername); - return { - post: state.allPosts.posts[ownProps.postPermlink], - postingUser, - }; -}; - -export default connect(mapStateToProps)(PostSingle); diff --git a/src/components/postSingle/styles.scss b/src/components/postSingle/styles.scss deleted file mode 100644 index 7d330d3..0000000 --- a/src/components/postSingle/styles.scss +++ /dev/null @@ -1,7 +0,0 @@ -.sideImage { - width: 100%; -} - -.rightContent { - margin-top: 32px; -} diff --git a/src/components/userProfile/index.js b/src/components/userProfile/index.js index 27da0be..d52dd3a 100644 --- a/src/components/userProfile/index.js +++ b/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 => )} + .map(item => )}
); diff --git a/src/components/actionBar/index.js b/src/post/ActionBar/index.js similarity index 100% rename from src/components/actionBar/index.js rename to src/post/ActionBar/index.js diff --git a/src/components/actionBar/styles.scss b/src/post/ActionBar/styles.scss similarity index 100% rename from src/components/actionBar/styles.scss rename to src/post/ActionBar/styles.scss diff --git a/src/components/customTags/index.js b/src/post/CustomTags/index.js similarity index 100% rename from src/components/customTags/index.js rename to src/post/CustomTags/index.js diff --git a/src/components/customTags/styles.scss b/src/post/CustomTags/styles.scss similarity index 100% rename from src/components/customTags/styles.scss rename to src/post/CustomTags/styles.scss diff --git a/src/post/PostBody/index.js b/src/post/PostBody/index.js new file mode 100644 index 0000000..b192990 --- /dev/null +++ b/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 +}) => ( +
+
+ { + minify + && ( +
+ + READ MORE + +
+ ) + } +
+); + +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; diff --git a/src/post/PostBody/styles.scss b/src/post/PostBody/styles.scss new file mode 100644 index 0000000..c91ad20 --- /dev/null +++ b/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; +} diff --git a/src/components/post/index.js b/src/post/PostCard/index.js similarity index 55% rename from src/components/post/index.js rename to src/post/PostCard/index.js index e864d05..df26bd4 100644 --- a/src/components/post/index.js +++ b/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
Loading...
; } - 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 */} -
- {/* -
- {content && content.data.map((data, idx) => - )} -
- */} - {content.type === 'article' && -
- READ MORE - -
} - {/* Action bar */}
); }; diff --git a/src/components/post/styles.scss b/src/post/PostCard/styles.scss similarity index 100% rename from src/components/post/styles.scss rename to src/post/PostCard/styles.scss diff --git a/src/post/PostSingle/index.js b/src/post/PostSingle/index.js new file mode 100644 index 0000000..3729a32 --- /dev/null +++ b/src/post/PostSingle/index.js @@ -0,0 +1,96 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; + +import { fixUser } from '../../utils/defaultFixUtils'; +import indexStyles from '../../index.scss'; +import CustomTags from '../CustomTags'; +import ActionBar from '../ActionBar'; +import Replies from '../Replies'; +import PostUserMeta from '../PostUserMeta'; +import { getCommunitiesForPost } from '../../utils/communityUtils'; +import PostBody from '../PostBody'; + +class ArticleSingle extends React.Component { + componentDidMount() { + window.scrollTo(0, 0); + } + + render() { + const { body, author, permlink } = this.props.post; + return ( +
+
+
+ + + + + +
+
); + } +} + +ArticleSingle.propTypes = { + postingUser: PropTypes.shape({ + json_metadata: PropTypes.shape({ + profile: PropTypes.shape({ + name: PropTypes.string, + profile_image: PropTypes.string, + }), + }), + }), + post: PropTypes.shape({ + author: PropTypes.string, + created: PropTypes.string, + json_metadata: PropTypes.shape({ + content: PropTypes.shape({ + data: PropTypes.arrayOf(PropTypes.shape()), + }), + tags: PropTypes.arrayOf(PropTypes.string), + }), + permlink: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + }), +}; + +ArticleSingle.defaultProps = { + postingUser: {}, + post: {}, +}; + +const mapStateToProps = (state, ownProps) => { + const post = state.allPosts.posts[ownProps.postPermlink]; + const postingUsername = post.author; + const postingUser = fixUser(state.allUsers.users[postingUsername], postingUsername); + return { + post: state.allPosts.posts[ownProps.postPermlink], + postingUser, + }; +}; + +export default connect(mapStateToProps)(ArticleSingle); diff --git a/src/components/postUserMeta/index.js b/src/post/PostUserMeta/index.js similarity index 100% rename from src/components/postUserMeta/index.js rename to src/post/PostUserMeta/index.js diff --git a/src/components/postUserMeta/styles.scss b/src/post/PostUserMeta/styles.scss similarity index 100% rename from src/components/postUserMeta/styles.scss rename to src/post/PostUserMeta/styles.scss diff --git a/src/components/createReply/index.js b/src/post/Replies/CreateReply/index.js similarity index 94% rename from src/components/createReply/index.js rename to src/post/Replies/CreateReply/index.js index a865f5d..2b66e51 100644 --- a/src/components/createReply/index.js +++ b/src/post/Replies/CreateReply/index.js @@ -3,8 +3,8 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import styles from './styles.scss'; -import indexStyles from '../../index.scss'; -import { addReply } from '../../actions/repliesActions'; +import indexStyles from '../../../index.scss'; +import { addReply } from '../../../actions/repliesActions'; class CreateReply extends React.Component { constructor(props) { diff --git a/src/components/createReply/styles.scss b/src/post/Replies/CreateReply/styles.scss similarity index 100% rename from src/components/createReply/styles.scss rename to src/post/Replies/CreateReply/styles.scss diff --git a/src/components/pendingReply/index.js b/src/post/Replies/PendingReply/index.js similarity index 95% rename from src/components/pendingReply/index.js rename to src/post/Replies/PendingReply/index.js index 594d14b..735ee4c 100644 --- a/src/components/pendingReply/index.js +++ b/src/post/Replies/PendingReply/index.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import Proptypes from 'prop-types'; import styles from './styles.scss'; -import { fixUser } from '../../utils/defaultFixUtils'; +import { fixUser } from '../../../utils/defaultFixUtils'; const PendingReply = props => (
diff --git a/src/components/pendingReply/styles.scss b/src/post/Replies/PendingReply/styles.scss similarity index 100% rename from src/components/pendingReply/styles.scss rename to src/post/Replies/PendingReply/styles.scss diff --git a/src/components/reply/index.js b/src/post/Replies/Reply/index.js similarity index 95% rename from src/components/reply/index.js rename to src/post/Replies/Reply/index.js index c6cf235..cdd2da0 100644 --- a/src/components/reply/index.js +++ b/src/post/Replies/Reply/index.js @@ -2,7 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import { fixUser } from '../../utils/defaultFixUtils'; +import { fixUser } from '../../../utils/defaultFixUtils'; import styles from './styles.scss'; const Reply = props => ( diff --git a/src/components/reply/styles.scss b/src/post/Replies/Reply/styles.scss similarity index 100% rename from src/components/reply/styles.scss rename to src/post/Replies/Reply/styles.scss diff --git a/src/components/replies/index.js b/src/post/Replies/index.js similarity index 94% rename from src/components/replies/index.js rename to src/post/Replies/index.js index 57b5fd0..9608179 100644 --- a/src/components/replies/index.js +++ b/src/post/Replies/index.js @@ -3,10 +3,10 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { loadReplies } from '../../actions/repliesActions'; -import Reply from '../reply'; +import Reply from './Reply'; import styles from './styles.scss'; -import CreateReply from '../createReply'; -import PendingReply from '../pendingReply'; +import CreateReply from './CreateReply'; +import PendingReply from './PendingReply'; class Replies extends React.Component { constructor(props) { diff --git a/src/components/replies/styles.scss b/src/post/Replies/styles.scss similarity index 100% rename from src/components/replies/styles.scss rename to src/post/Replies/styles.scss