From 1c2ef760eff744f93121ac5708bfbdabff006730 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 9 Dec 2016 11:46:04 -1000 Subject: [PATCH 1/7] remove cruft by pulling out some immutable.js stuff --- client/coral-admin/src/components/Comment.js | 27 +++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index 380a001c8..be656c22d 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/client/coral-admin/src/components/Comment.js @@ -14,18 +14,19 @@ const linkify = new Linkify(); // Render a single comment for the list export default props => { - const authorStatus = props.author.get('status'); - const {comment, author} = props; - const links = linkify.getMatches(comment.get('body')); + const comment = props.comment.toJS(); + const author = props.author.toJS(); + let authorStatus = author.status; + const links = linkify.getMatches(comment.body); return (
  • person - {author.get('displayName') || lang.t('comment.anon')} - {timeago().format(comment.get('createdAt') || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} - {comment.get('flagged') ?

    {lang.t('comment.flagged')}

    : null} + {author.displayName || lang.t('comment.anon')} + {timeago().format(comment.createdAt || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} + {comment.flagged ?

    {lang.t('comment.flagged')}

    : null}
    {links ? @@ -42,7 +43,7 @@ export default props => {
    - {comment.get('body')} + {comment.body}
    @@ -52,9 +53,11 @@ export default props => { // Get the button of the action performed over a comment if any const getActionButton = (action, i, props) => { - const status = props.comment.get('status'); - const flagged = props.comment.get('flagged'); - const banned = (props.author.get('status') === 'banned'); + const comment = props.comment.toJS(); + const author = props.author.toJS(); + const status = comment.status; + const flagged = comment.flagged; + const banned = (author.status === 'banned'); if (action === 'flag' && (status || flagged === true)) { return null; @@ -64,7 +67,7 @@ const getActionButton = (action, i, props) => { @@ -74,7 +77,7 @@ const getActionButton = (action, i, props) => { props.onClickAction(props.actionsMap[action].status, props.comment.get('id'))} + onClick={() => props.onClickAction(props.actionsMap[action].status, comment.id)} /> ); }; From a80dd953c82c73095e5661351a048de2f4d92fd3 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 9 Dec 2016 14:13:48 -1000 Subject: [PATCH 2/7] update ModerationQueue and CommentStream to not use immutable.js deep in the stack --- client/coral-admin/src/components/Comment.js | 10 ++--- .../coral-admin/src/components/CommentList.js | 38 +++++++++++-------- .../containers/CommentStream/CommentStream.js | 13 +++++-- .../ModerationQueue/ModerationQueue.js | 29 ++++---------- 4 files changed, 44 insertions(+), 46 deletions(-) diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index be656c22d..4a21b0846 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/client/coral-admin/src/components/Comment.js @@ -14,8 +14,7 @@ const linkify = new Linkify(); // Render a single comment for the list export default props => { - const comment = props.comment.toJS(); - const author = props.author.toJS(); + const {comment, author} = props; let authorStatus = author.status; const links = linkify.getMatches(comment.body); @@ -53,8 +52,7 @@ export default props => { // Get the button of the action performed over a comment if any const getActionButton = (action, i, props) => { - const comment = props.comment.toJS(); - const author = props.author.toJS(); + const {comment, author} = props; const status = comment.status; const flagged = comment.flagged; const banned = (author.status === 'banned'); @@ -74,7 +72,9 @@ const getActionButton = (action, i, props) => { ); } return ( - props.onClickAction(props.actionsMap[action].status, comment.id)} diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index b4547335e..eab2e637c 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -4,6 +4,8 @@ import styles from './CommentList.css'; import key from 'keymaster'; import Hammer from 'hammerjs'; import Comment from 'components/Comment'; +import head from 'lodash/head'; +import last from 'lodash/last'; // Each action has different meaning and configuration const actions = { @@ -37,7 +39,7 @@ export default class CommentList extends React.Component { // If entering to singleview and no active, active is the first eleement componentWillReceiveProps (nextProps) { if (nextProps.singleView && !this.state.active) { - this.setState({active: nextProps.commentIds.get(0)}); + this.setState({active: nextProps.commentIds[0]}); } } @@ -81,12 +83,12 @@ export default class CommentList extends React.Component { const {commentIds} = this.props; const {active} = this.state; // check boundaries - if (active === null || !commentIds.size) { - this.setState({active: commentIds.get(0)}); - } else if (direction === 'up' && active !== commentIds.first()) { - this.setState({active: commentIds.get(commentIds.indexOf(active) - 1)}); - } else if (direction === 'down' && active !== commentIds.last()) { - this.setState({active: commentIds.get(commentIds.indexOf(active) + 1)}); + if (active === null || !commentIds.length) { + this.setState({active: head(commentIds)}); + } else if (direction === 'up' && active !== head(commentIds)) { + this.setState({active: commentIds[commentIds.indexOf(active) - 1]}); + } else if (direction === 'down' && active !== last(commentIds)) { + this.setState({active: commentIds[commentIds.indexOf(active) + 1]}); } // scroll to the position @@ -105,10 +107,10 @@ export default class CommentList extends React.Component { // activate the next comment if (id === this.state.active) { const {commentIds} = this.props; - if (commentIds.last() === this.state.active) { - this.setState({active: commentIds.get(commentIds.size - 2)}); + if (last(commentIds) === this.state.active) { + this.setState({active: commentIds[commentIds.length - 2]}); } else { - this.setState({active: commentIds.get(Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.size - 1))}); + this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.l - 1)]}); } } this.props.onClickAction(action, id, author_id); @@ -119,16 +121,20 @@ export default class CommentList extends React.Component { } render () { - const {singleView, commentIds, comments, users, hideActive, key} = this.props; - const {active} = this.state; + const {singleView, commentIds, hideActive, key} = this.props; + let {active} = this.state; + + const users = this.props.users.toJS(); + const comments = this.props.comments.toJS(); return (
      {commentIds.map((commentId, index) => { - const comment = comments.get(commentId); + console.log('inside the map', typeof commentId, commentId, typeof active, active); + const comment = comments[commentId]; + const author = users[comment.author_id]; return { if (el && commentId === active) { this._active = el; } }} + author={author} key={index} index={index} onClickAction={this.onClickAction} @@ -137,7 +143,7 @@ export default class CommentList extends React.Component { actionsMap={actions} isActive={commentId === active} hideActive={hideActive} />; - }).toArray()} + })}
    ); } diff --git a/client/coral-admin/src/containers/CommentStream/CommentStream.js b/client/coral-admin/src/containers/CommentStream/CommentStream.js index 113a7bc86..556e50463 100644 --- a/client/coral-admin/src/containers/CommentStream/CommentStream.js +++ b/client/coral-admin/src/containers/CommentStream/CommentStream.js @@ -46,9 +46,9 @@ class CommentStream extends React.Component { @@ -58,4 +58,9 @@ class CommentStream extends React.Component { } } -export default connect(({comments, users}) => ({comments, users}))(CommentStream); +const mapStateToProps = state => ({ + comments: state.comments.toJS(), + users: state.users.toJS() +}); + +export default connect(mapStateToProps)(CommentStream); diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index 34b418a57..ca3465903 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -79,6 +79,11 @@ class ModerationQueue extends React.Component { const {comments, users} = this.props; const {activeTab, singleView, modalOpen} = this.state; + const c = comments.toJS(); + const premodIds = c.ids.filter(id => c.byId[id].status === 'premod'); + const rejectedIds = c.ids.filter(id => c.byId[id].status === 'rejected'); + const flaggedIds = c.ids.filter(id => c.byId[id].flagged === true); + return (
    @@ -94,14 +99,7 @@ class ModerationQueue extends React.Component { - comments - .get('byId') - .get(id) - .get('status') === 'premod') - } + commentIds={premodIds} comments={comments.get('byId')} users={users.get('byId')} onClickAction={(action, commentId) => this.onCommentAction(action, commentId)} @@ -118,15 +116,7 @@ class ModerationQueue extends React.Component { - comments - .get('byId') - .get(id) - .get('status') === 'rejected') - } + commentIds={rejectedIds} comments={comments.get('byId')} users={users.get('byId')} onClickAction={(action, id) => this.onCommentAction(action, id)} @@ -137,10 +127,7 @@ class ModerationQueue extends React.Component { { - const data = comments.get('byId').get(id); - return !data.get('status') && data.get('flagged') === true; - })} + commentIds={flaggedIds} comments={comments.get('byId')} users={users.get('byId')} onClickAction={(action, id) => this.onCommentAction(action, id)} From 7732aa4abe251ce305052c1055e21e7bbaee9e91 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 9 Dec 2016 14:20:46 -1000 Subject: [PATCH 3/7] typo --- client/coral-admin/src/components/CommentList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index eab2e637c..be97a6ead 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -110,7 +110,7 @@ export default class CommentList extends React.Component { if (last(commentIds) === this.state.active) { this.setState({active: commentIds[commentIds.length - 2]}); } else { - this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.l - 1)]}); + this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.length - 1)]}); } } this.props.onClickAction(action, id, author_id); From b05f4cfb16382fd09ee83c781992573dd83b9946 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 9 Dec 2016 14:25:24 -1000 Subject: [PATCH 4/7] remove logs --- client/coral-admin/src/components/CommentList.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index be97a6ead..638a45adb 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -130,7 +130,6 @@ export default class CommentList extends React.Component { return (
      {commentIds.map((commentId, index) => { - console.log('inside the map', typeof commentId, commentId, typeof active, active); const comment = comments[commentId]; const author = users[comment.author_id]; return Date: Fri, 9 Dec 2016 14:38:29 -1000 Subject: [PATCH 5/7] have moderation queue use proper mapStateToProps --- .../coral-admin/src/components/CommentList.js | 5 +--- .../ModerationQueue/ModerationQueue.js | 30 +++++++++++-------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index 638a45adb..55d6669d0 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -121,12 +121,9 @@ export default class CommentList extends React.Component { } render () { - const {singleView, commentIds, hideActive, key} = this.props; + const {singleView, commentIds, comments, users, hideActive, key} = this.props; let {active} = this.state; - const users = this.props.users.toJS(); - const comments = this.props.comments.toJS(); - return (
        {commentIds.map((commentId, index) => { diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index ca3465903..e0e3c636f 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -79,10 +79,9 @@ class ModerationQueue extends React.Component { const {comments, users} = this.props; const {activeTab, singleView, modalOpen} = this.state; - const c = comments.toJS(); - const premodIds = c.ids.filter(id => c.byId[id].status === 'premod'); - const rejectedIds = c.ids.filter(id => c.byId[id].status === 'rejected'); - const flaggedIds = c.ids.filter(id => c.byId[id].flagged === true); + const premodIds = comments.ids.filter(id => comments.byId[id].status === 'premod'); + const rejectedIds = comments.ids.filter(id => comments.byId[id].status === 'rejected'); + const flaggedIds = comments.ids.filter(id => comments.byId[id].flagged === true); return (
        @@ -100,25 +99,25 @@ class ModerationQueue extends React.Component { isActive={activeTab === 'pending'} singleView={singleView} commentIds={premodIds} - comments={comments.get('byId')} - users={users.get('byId')} + comments={comments.byId} + users={users.byId} onClickAction={(action, commentId) => this.onCommentAction(action, commentId)} onClickShowBanDialog={(userId, userName, commentId) => this.showBanUserDialog(userId, userName, commentId)} actions={['reject', 'approve', 'ban']} loading={comments.loading} /> this.hideBanUserDialog()} onClickBanUser={(userId, commentId) => this.banUser(userId, commentId)} - user={comments.get('banUser')}/> + user={comments.banUser}/>
        this.onCommentAction(action, id)} actions={['approve']} loading={comments.loading} /> @@ -128,8 +127,8 @@ class ModerationQueue extends React.Component { isActive={activeTab === 'rejected'} singleView={singleView} commentIds={flaggedIds} - comments={comments.get('byId')} - users={users.get('byId')} + comments={comments.byId} + users={users.byId} onClickAction={(action, id) => this.onCommentAction(action, id)} actions={['reject', 'approve']} loading={comments.loading} /> @@ -142,6 +141,11 @@ class ModerationQueue extends React.Component { } } -export default connect(({comments, users}) => ({comments, users}))(ModerationQueue); +const mapStateToProps = state => ({ + comments: state.comments.toJS(), + users: state.users.toJS() +}); + +export default connect(mapStateToProps)(ModerationQueue); const lang = new I18n(translations); From 74c4d812cddfa54614504bd183f5ac3983e6d95e Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 9 Dec 2016 14:39:16 -1000 Subject: [PATCH 6/7] less changes --- client/coral-admin/src/components/CommentList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index 55d6669d0..8f5754182 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -122,7 +122,7 @@ export default class CommentList extends React.Component { render () { const {singleView, commentIds, comments, users, hideActive, key} = this.props; - let {active} = this.state; + const {active} = this.state; return (
          From 7bfd9e2e714db5ee2cfb59fd9e6734d5f3600988 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 9 Dec 2016 14:48:29 -1000 Subject: [PATCH 7/7] remove lodash implementation --- client/coral-admin/src/components/CommentList.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index 8f5754182..8c6655bb5 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -4,8 +4,6 @@ import styles from './CommentList.css'; import key from 'keymaster'; import Hammer from 'hammerjs'; import Comment from 'components/Comment'; -import head from 'lodash/head'; -import last from 'lodash/last'; // Each action has different meaning and configuration const actions = { @@ -84,10 +82,10 @@ export default class CommentList extends React.Component { const {active} = this.state; // check boundaries if (active === null || !commentIds.length) { - this.setState({active: head(commentIds)}); - } else if (direction === 'up' && active !== head(commentIds)) { + this.setState({active: commentIds[0]}); + } else if (direction === 'up' && active !== commentIds[0]) { this.setState({active: commentIds[commentIds.indexOf(active) - 1]}); - } else if (direction === 'down' && active !== last(commentIds)) { + } else if (direction === 'down' && active !== commentIds[commentIds.length - 1]) { this.setState({active: commentIds[commentIds.indexOf(active) + 1]}); } @@ -107,7 +105,7 @@ export default class CommentList extends React.Component { // activate the next comment if (id === this.state.active) { const {commentIds} = this.props; - if (last(commentIds) === this.state.active) { + if (commentIds[commentIds.length - 1] === this.state.active) { this.setState({active: commentIds[commentIds.length - 2]}); } else { this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.length - 1)]});