diff --git a/client/src/actions/followActions.js b/client/src/actions/followActions.js index 38ebb54..6453e07 100644 --- a/client/src/actions/followActions.js +++ b/client/src/actions/followActions.js @@ -146,16 +146,13 @@ export const searchStart = page => ({ * @param {string} user User to get data for * @returns {function} Dispatches returned action object */ -export const getFollowCount = user => (dispatch, getState) => { - let { user: userLogged } = getState().auth; - if (!userLogged) userLogged = cookieUser(); - - return client.call('follow_api', 'get_follow_count', [user]) +export const getFollowCount = user => (dispatch, getState) => ( + client.call('follow_api', 'get_follow_count', [user]) .then(followCount => { dispatch(followCountSuccess(followCount.follower_count, followCount.following_count)); - dispatch(getAllFollowing(userLogged)); + dispatch(getAllFollowing()); }) -} +) /** * Get the user's followers list. @@ -229,7 +226,10 @@ export const getFollowing = (user, startFrom = '', limit = 100, more = false, ty * @param {string} user User to get data for * @returns {function} Dispatches returned action object */ -export const getAllFollowing = user => async (dispatch, getState) => { +export const getAllFollowing = () => async (dispatch, getState) => { + let { user } = getState().auth; + if (!user) user = cookieUser(); + const count = await client.call('follow_api', 'get_follow_count', [user]) .then(followCount => { return followCount.following_count; @@ -248,9 +248,15 @@ export const getAllFollowing = user => async (dispatch, getState) => { } /** + * Get the search results for a specified user or letter follow search. * + * @param {string} user User to get data for + * @param {string} startFrom Previous user to start from + * @param {string} page Follow page type + * @param {number} limit Number of users to get + * @returns {function} Dispatches returned action object */ -export const searchFollowers = (user, startFrom = '', page = 'followers', limit = 100, more = false) => (dispatch, getState) => { +export const searchFollowers = (user, startFrom = '', page = 'followers', limit = 100) => (dispatch, getState) => { if (page === 'followers') { dispatch(searchStart(page)); diff --git a/client/src/components/pages/Steem/Post/Post.js b/client/src/components/pages/Steem/Post/Post.js index e75a588..9b2ddf4 100644 --- a/client/src/components/pages/Steem/Post/Post.js +++ b/client/src/components/pages/Steem/Post/Post.js @@ -7,10 +7,14 @@ import PostDetails from './PostDetails'; import ErrorBoundary from '../../../ErrorBoundary/ErrorBoundary'; import ModalGroup from '../../../Modal/ModalGroup'; import ErrorLabel from '../../../ErrorLabel/ErrorLabel'; -import { getDetailsContent, clearPost } from '../../../../actions/detailsPostActions'; +import { getDetailsContent, clearPost, deletePost } from '../../../../actions/detailsPostActions'; import * as addPostActions from '../../../../actions/addPostActions'; +import { commentsClear } from '../../../../actions/commentsActions'; +import { sendComment, sendCommentClear } from '../../../../actions/sendCommentActions'; +import { editPost } from '../../../../actions/sendPostActions'; +import { resteem } from '../../../../actions/resteemActions'; import { upvotePost } from '../../../../actions/upvoteActions'; -import { sendComment } from '../../../../actions/sendCommentActions'; +import { getAllFollowing } from '../../../../actions/followActions'; import { hasLength } from '../../../../utils/helpers'; import Loading from '../../../Loading/Loading'; @@ -28,7 +32,6 @@ class Post extends Component { post: PropTypes.shape(PropTypes.object.isRequired), handleUpvote: PropTypes.func.isRequired, upvotePayload: PropTypes.shape(PropTypes.object.isRequired), - sendComment: PropTypes.func.isRequired, isCommenting: PropTypes.bool.isRequired, commentedId: PropTypes.number, commentPayload: PropTypes.shape(PropTypes.object.isRequired), @@ -48,8 +51,16 @@ class Post extends Component { draft: PropTypes.shape(PropTypes.object.isRequired), isDeleting: PropTypes.bool, redirect: PropTypes.string, - clearPostData: PropTypes.func, resteemedPayload: PropTypes.shape(PropTypes.object.isRequired), + clearPostDetails: PropTypes.func, + clearComments: PropTypes.func, + clearNewComments: PropTypes.func, + showEditPost: PropTypes.func, + sendDeletePost: PropTypes.func, + handleResteem: PropTypes.func, + sendComment: PropTypes.func.isRequired, + allFollowing: PropTypes.func, + followingList: PropTypes.arrayOf(PropTypes.string), }; static defaultProps = { @@ -65,8 +76,15 @@ class Post extends Component { draft: {}, isDeleting: false, redirect: '', - clearPostData: () => {}, resteemedPayload: {}, + followingList: [], + clearPostDetails: () => {}, + clearComments: () => {}, + clearNewComments: () => {}, + showEditPost: () => {}, + handleResteem: () => {}, + sendDeletePost: () => {}, + allFollowing: () => {}, } constructor(props) { @@ -83,6 +101,7 @@ class Post extends Component { componentDidMount() { const { getContent, + allFollowing, match: { params: { author, @@ -92,6 +111,7 @@ class Post extends Component { } = this.props; getContent(author, permlink); + allFollowing(); } /** @@ -105,7 +125,7 @@ class Post extends Component { getContent, draft, redirect, - clearPostData, + clearPostDetails, match: { params: { author, @@ -124,10 +144,17 @@ class Post extends Component { //if redirect requested, clear previous post data in Redux if (redirect && redirect !== prevProps.redirect) { this.redirect = redirect; - clearPostData(); + clearPostDetails(); } } + componentWillUnmount() { + const { clearPostDetails, clearComments, clearNewComments } = this.props; + clearPostDetails(); + clearComments(); + clearNewComments(); + } + render() { const { user, @@ -148,13 +175,17 @@ class Post extends Component { handleUpvote, upvotePayload, replies, - sendComment, isCommenting, commentedId, commentPayload, isUpdating, isDeleting, resteemedPayload, + showEditPost, + sendDeletePost, + handleResteem, + sendComment, + followingList, } = this.props; let addErrorPost = ''; @@ -191,7 +222,6 @@ class Post extends Component { handleUpvote={handleUpvote} upvotePayload={upvotePayload} replies={replies} - sendComment={sendComment} isCommenting={isCommenting} commentedId={commentedId} isFetching={isFetchingDetails} @@ -199,6 +229,11 @@ class Post extends Component { isUpdating={isUpdating} isDeleting={isDeleting} resteemedPayload={resteemedPayload} + showEditPost={showEditPost} + sendDeletePost={sendDeletePost} + handleResteem={handleResteem} + sendComment={sendComment} + followingList={followingList} /> ) : @@ -259,6 +294,9 @@ class Post extends Component { resteem: { resteemedPayload, }, + follow: { + followingList, + }, } = state; return { @@ -284,6 +322,7 @@ class Post extends Component { isDeleting, redirect, resteemedPayload, + followingList, } } @@ -310,15 +349,33 @@ const mapDispatchToProps = dispatch => ( handleGroupSelect: (value) => ( dispatch(addPostActions.handleGroupSelect(value)) ), + clearPostDetails: () => ( + dispatch(clearPost()) + ), + clearComments: () => ( + dispatch(commentsClear()) + ), + clearNewComments: () => ( + dispatch(sendCommentClear()) + ), + showEditPost: (post) => ( + dispatch(editPost(post)) + ), + sendDeletePost: (author, permlink) => ( + dispatch(deletePost(author, permlink)) + ), + handleResteem: (pid, author, permlink) => ( + dispatch(resteem(pid, author, permlink)) + ), handleUpvote: (voter, author, permlink, weight) => ( dispatch(upvotePost(voter, author, permlink, weight)) ), sendComment: (body, parentPost) => ( dispatch(sendComment(body, parentPost)) ), - clearPostData: () => ( - dispatch(clearPost()) - ), + allFollowing: () => ( + dispatch(getAllFollowing()) + ) } ); diff --git a/client/src/components/pages/Steem/Post/PostDetails.js b/client/src/components/pages/Steem/Post/PostDetails.js index acb9e46..562f560 100644 --- a/client/src/components/pages/Steem/Post/PostDetails.js +++ b/client/src/components/pages/Steem/Post/PostDetails.js @@ -2,8 +2,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import { Grid, Form, Select, Dimmer, Loader } from "semantic-ui-react"; import { attempt, isError, has, get } from 'lodash'; -import { Helmet, HelmetProvider } from 'react-helmet-async'; -import { connect } from 'react-redux'; +import { Helmet } from 'react-helmet-async'; import Editor from '../Write/Editor'; import PostBody from './PostBody'; @@ -18,12 +17,8 @@ import AuthorCatgoryTime from '../AuthorCatgoryTime'; import PostActions from '../PostActions'; import Loading from '../../../Loading/Loading'; import { sumPayout } from '../../../../utils/helpers'; -import { editPost } from '../../../../actions/sendPostActions'; -import { clearPost, deletePost } from '../../../../actions/detailsPostActions'; -import { commentsClear } from '../../../../actions/commentsActions'; -import { sendCommentClear } from '../../../../actions/sendCommentActions'; -import { resteem } from '../../../../actions/resteemActions'; import FollowButton from '../FollowButton'; +import { getDescription } from '../helpers/extractContent'; import './PostDetails.css' @@ -38,22 +33,20 @@ class PostDetails extends Component { isAuth: PropTypes.bool, post: PropTypes.shape(PropTypes.object.isRequired), isFetching: PropTypes.bool.isRequired, - handleUpvote: PropTypes.func.isRequired, upvotePayload: PropTypes.shape(PropTypes.object.isRequired), replies: PropTypes.arrayOf(PropTypes.object.isRequired), - sendComment: PropTypes.func.isRequired, isCommenting: PropTypes.bool.isRequired, commentedId: PropTypes.number, commentPayload: PropTypes.shape(PropTypes.object.isRequired), isUpdating: PropTypes.bool, + isDeleting: PropTypes.bool, + resteemedPayload: PropTypes.shape(PropTypes.object.isRequired), showEditPost: PropTypes.func, - clearPostDetails: PropTypes.func, sendDeletePost: PropTypes.func, - clearComments: PropTypes.func, - isDeleting: PropTypes.bool, - clearNewComments: PropTypes.func, handleResteem: PropTypes.func, - resteemedPayload: PropTypes.shape(PropTypes.object.isRequired), + sendComment: PropTypes.func.isRequired, + handleUpvote: PropTypes.func.isRequired, + followingList: PropTypes.arrayOf(PropTypes.string), }; static defaultProps = { @@ -64,14 +57,12 @@ class PostDetails extends Component { isAuth: false, replies: [], isUpdating: false, - showEditPost: () => {}, - clearPostDetails: () => {}, - sendDeletePost: () => {}, - clearComments: () => {}, isDeleting: false, - clearNewComments: () => {}, - handleResteem: () => {}, resteemedPayload: {}, + followingList: [], + showEditPost: () => {}, + handleResteem: () => {}, + sendDeletePost: () => {}, } constructor(props) { @@ -90,13 +81,6 @@ class PostDetails extends Component { } } - componentWillUnmount() { - const { clearPostDetails, clearComments, clearNewComments } = this.props; - clearPostDetails(); - clearComments(); - clearNewComments(); - } - /** * Set state values for when tag input text changes. * @@ -181,6 +165,7 @@ class PostDetails extends Component { isDeleting, handleResteem, resteemedPayload, + followingList, } = this.props; const { @@ -192,6 +177,8 @@ class PostDetails extends Component { post = upvotePayload.post } + const { desc } = getDescription(post.body, post.depth); + const title = post.title; const author = post.author; const authorReputation = post.author_reputation; @@ -209,7 +196,6 @@ class PostDetails extends Component { const url = `https://thekure.net${post.url}`; const ampUrl = `${url}/amp`; const metaTitle = `${title} - KURE`; - const desc = post.desc; const postMetaData = jsonParse(post.json_metadata); const postMetaImage = postMetaData && postMetaData.image && postMetaData.image[0]; const image = postMetaImage || `https://steemitimages.com/u/${author}/avatar` || '/images/logo.png'; @@ -228,212 +214,185 @@ class PostDetails extends Component { const columns = isUpdating ? 13 : 11; return ( - - - - {title} - - - - - - - - - - - - - - { - isDeleting && - } - - - - { - isFetching ? - : ( - -
- { - isUpdating - ? - : ( - -

- {title} -

-
- -
-
- { - user && user !== author && ( - - ) - } -
-
-
- {this.renderDtubeEmbedPlayer(post)} - - - ) - } -
-
-
+ + + {title} + + + + + + + + + + + + + + { + isDeleting && + } + + + + { + isFetching ? + : ( + +
+ { + isUpdating + ? + : ( + +

+ {title} +

- +
-
- {`View on `} - - {'Steemit'} - - {' | '} - - {'Busy'} - +
+ { + user && user !== author && ( + + ) + }
-
- -
- + {this.renderDtubeEmbedPlayer(post)} + + + ) + } +
+
+
+
+
-
- { - isAuth && - ( - - ) - } +
+ {`View on `} + + {'Steemit'} + + {' | '} + + {'Busy'} + +
+
+ +
+ +
+
+ { + isAuth && + ( + + ) + }
+
+ + ) + } +
+ { + !!comments.length && ( + +
+

Comments

+
+
+
+ + + +
+
+ ) } -
- { - !!comments.length && ( - -
-

Comments

-
-
-
- - - -
-
- - - ) - } -
- - - - - - +
+ + + + + ) } } -/** - * Map redux dispatch functions to component props. - * - * @param {object} dispatch - Redux dispatch - * @returns {object} - Object with recent activity data - */ -const mapDispatchToProps = dispatch => ( - { - showEditPost: (post) => ( - dispatch(editPost(post)) - ), - clearPostDetails: () => ( - dispatch(clearPost()) - ), - sendDeletePost: (author, permlink) => ( - dispatch(deletePost(author, permlink)) - ), - clearComments: () => ( - dispatch(commentsClear()) - ), - clearNewComments: () => ( - dispatch(sendCommentClear()) - ), - handleResteem: (pid, author, permlink) => ( - dispatch(resteem(pid, author, permlink)) - ), - } -); - -export default connect(null, mapDispatchToProps)(PostDetails); +export default PostDetails; diff --git a/client/src/components/pages/Steem/Post.css b/client/src/components/pages/Steem/Posts.css similarity index 100% rename from client/src/components/pages/Steem/Post.css rename to client/src/components/pages/Steem/Posts.css diff --git a/client/src/components/pages/Steem/Posts.js b/client/src/components/pages/Steem/Posts.js index b7d77dd..629a3c8 100644 --- a/client/src/components/pages/Steem/Posts.js +++ b/client/src/components/pages/Steem/Posts.js @@ -22,7 +22,7 @@ import ModalVotesList from '../../Modal/ModalVotesList'; import FollowButton from './FollowButton'; import Follows from './Follows'; -import './Post.css'; +import './Posts.css'; /** * Gets the Steem blockchain content and displays a list of post diff --git a/client/src/components/pages/Steem/helpers/extractContent.js b/client/src/components/pages/Steem/helpers/extractContent.js index 454bdf0..b15dfbc 100644 --- a/client/src/components/pages/Steem/helpers/extractContent.js +++ b/client/src/components/pages/Steem/helpers/extractContent.js @@ -63,6 +63,29 @@ export function extractContent(post) { const {image_link, jsonMetadata} = extractImage(json_metadata, body, author, permlink) + const {desc, desc_complete} = getDescription(body, depth); + + return { + author, + permlink, + parent_author, + parent_permlink, + json_metadata: jsonMetadata, + category, + title, + created, + net_rshares, + children, + url, + pending_payout_value, + image_link, + desc, + desc_complete, + body + }; +} + +export const getDescription = (body, depth) => { let desc; let desc_complete = false; @@ -92,27 +115,9 @@ export function extractContent(post) { } desc_complete = body2 === desc; // is the entire body in desc? - return { - author, - permlink, - parent_author, - parent_permlink, - json_metadata: jsonMetadata, - category, - title, - created, - net_rshares, - children, - url, - pending_payout_value, - image_link, - desc, - desc_complete, - body - }; - - + return {desc, desc_complete} } + export const slugify = (string) => { const a = 'àáäâãåèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;' const b = 'aaaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------' diff --git a/client/src/index.js b/client/src/index.js index 7651d68..7f40ad9 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from "react-router-dom"; import { Provider } from 'react-redux'; +import { HelmetProvider } from 'react-helmet-async'; import store from './redux' import "./index.css"; @@ -17,9 +18,11 @@ import AppRoutes from './routes/Routes'; const renderApp = Component => { ReactDOM.render( - - - + + + + + , document.getElementById("root") )