From 5faa92e8b394edc13c795e8573150f7776d1e959 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 08:09:34 -0300 Subject: [PATCH 01/29] Label style, top level comments, no offtopic replies --- client/coral-embed-stream/src/components/Comment.js | 6 ++++-- client/coral-framework/components/Slot.css | 4 ++++ client/coral-framework/components/Slot.js | 4 ++-- .../client/components/OffTopicCheckbox.js | 12 ++++++++---- .../client/components/OffTopicFilter.js | 7 +++++++ .../client/components/OffTopicTag.js | 2 +- .../client/components/styles.css | 5 ++++- 7 files changed, 30 insertions(+), 10 deletions(-) create mode 100644 plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 48392cc51..d8410becd 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -252,11 +252,13 @@ class Comment extends React.Component { { (currentUser && diff --git a/client/coral-framework/components/Slot.css b/client/coral-framework/components/Slot.css index 6a95d79ad..91569b717 100644 --- a/client/coral-framework/components/Slot.css +++ b/client/coral-framework/components/Slot.css @@ -2,6 +2,10 @@ display: inline-block; } +.right { + float: right; +} + .debug { background-color: coral; } \ No newline at end of file diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 939068e83..342532bdb 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -4,9 +4,9 @@ import styles from './Slot.css'; import {connect} from 'react-redux'; import {getSlotElements} from 'coral-framework/helpers/plugins'; -function Slot ({fill, inline = false, plugin_config: config, ...rest}) { +function Slot ({fill, inline = false, right = false, plugin_config: config, ...rest}) { return ( -
+
{getSlotElements(fill, {...rest, config})}
); diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js index 0383507d1..c05b1d8b1 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js @@ -22,10 +22,14 @@ class OffTopicCheckbox extends React.Component { render() { return (
- + { + !this.props.isReply ? ( + + ) : null + }
); } diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js new file mode 100644 index 000000000..24718d1cb --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -0,0 +1,7 @@ +import React from 'react'; + +export default (props) => ( + + Filter + +); diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js index 89a4d03aa..62d8e1a0f 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js @@ -10,7 +10,7 @@ const isOffTopic = (tags) => { export default (props) => ( { - isOffTopic(props.comment.tags) ? ( + isOffTopic(props.comment.tags) && props.depth === 0 ? ( {t('off_topic')} diff --git a/plugins/coral-plugin-offtopic/client/components/styles.css b/plugins/coral-plugin-offtopic/client/components/styles.css index f3e290b09..52c36e6c2 100644 --- a/plugins/coral-plugin-offtopic/client/components/styles.css +++ b/plugins/coral-plugin-offtopic/client/components/styles.css @@ -8,7 +8,10 @@ } .tag { - background: rgba(245, 188, 168, 0.6); + background: #3D73D5; + font-size: 12px; + font-weight: bold; + color: white; display: inline-block; margin: 0px 5px; padding: 5px 5px; From 3ad3b3af1cac1ebb6faa27a4c97e1cbcc1dbd662 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 09:43:34 -0300 Subject: [PATCH 02/29] Adding filters --- .../src/components/Stream.js | 19 +++++--- .../src/components/ViewingOptions.css | 23 ++++++++++ .../src/components/ViewingOptions.js | 44 +++++++++++++++++++ client/coral-embed-stream/style/default.css | 9 ++++ client/coral-plugin-moderation/styles.css | 2 + .../client/components/OffTopicFilter.js | 6 +-- plugins/coral-plugin-offtopic/client/index.js | 2 + 7 files changed, 95 insertions(+), 10 deletions(-) create mode 100644 client/coral-embed-stream/src/components/ViewingOptions.css create mode 100644 client/coral-embed-stream/src/components/ViewingOptions.js diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 11f2b7819..131b56255 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -6,6 +6,7 @@ import Comment from '../containers/Comment'; import SuspendedAccount from './SuspendedAccount'; import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox'; +import ViewingOptions from './ViewingOptions'; import Slot from 'coral-framework/components/Slot'; import InfoBox from 'coral-plugin-infobox/InfoBox'; import {can} from 'coral-framework/services/perms'; @@ -13,6 +14,7 @@ import {ModerationLink} from 'coral-plugin-moderation'; import CommentBox from 'coral-plugin-commentbox/CommentBox'; import QuestionBox from 'coral-plugin-questionbox/QuestionBox'; import IgnoredCommentTombstone from './IgnoredCommentTombstone'; + import t, {timeago} from 'coral-framework/services/i18n'; class Stream extends React.Component { @@ -108,11 +110,16 @@ class Stream extends React.Component { />}
:

{asset.settings.closedMessage}

} - {loggedIn && - } + +
+ {loggedIn && + } + + +
{/* the highlightedComment is isolated after the user followed a permalink */} {highlightedComment @@ -140,7 +147,7 @@ class Stream extends React.Component { maxCharCount={asset.settings.charCount} editComment={this.props.editComment} /> - :
+ :
{ + this.setState((state) => ({ + open: !state.open + })); + } + + render() { + return ( +
+ + { + this.state.open ? ( +
+
    + { + React.Children.map(, (component) => { + return React.createElement('li', { + className: 'viewingOption' + }, component); + }) + } +
+
+ ) : null + } +
+ ); + } +} diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 04b2536a3..b24619c57 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -178,6 +178,15 @@ hr { display: none; } +.streamBox { + padding: 10px 0; +} + +.commentStreamContainer { + position: relative; + z-index: -1; +} + .commentStream { /* prevent absolutely positioned final permalink popover from being clipped */ padding-bottom: 50px; diff --git a/client/coral-plugin-moderation/styles.css b/client/coral-plugin-moderation/styles.css index 2e928d3df..734cc1e6f 100644 --- a/client/coral-plugin-moderation/styles.css +++ b/client/coral-plugin-moderation/styles.css @@ -1,4 +1,6 @@ .moderationLink { + display: inline; + a { color: #679af3; text-decoration: none; diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index 24718d1cb..fb9e6eb7a 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -1,7 +1,5 @@ import React from 'react'; -export default (props) => ( - - Filter - +export default () => ( + Hide Off-Topic Comments ); diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js index f3459441d..cd591de28 100644 --- a/plugins/coral-plugin-offtopic/client/index.js +++ b/plugins/coral-plugin-offtopic/client/index.js @@ -1,11 +1,13 @@ import OffTopicCheckbox from './components/OffTopicCheckbox'; import OffTopicTag from './components/OffTopicTag'; +import OffTopicFilter from './components/OffTopicFilter'; import translations from './translations.json'; export default { translations, slots: { commentInputDetailArea: [OffTopicCheckbox], + streamViewingOptions: [OffTopicFilter], commentInfoBar: [OffTopicTag] } }; From 9e001f5ce9c107277eaa86abecff5e80e5231452 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 11:15:35 -0300 Subject: [PATCH 03/29] addClassNames, removeClassNames, reducers and actions for Comment Component --- .../coral-embed-stream/src/actions/comment.js | 11 +++++ .../src/components/Comment.js | 46 ++++++++++--------- .../src/components/ViewingOptions.css | 2 + .../src/components/ViewingOptions.js | 2 +- .../src/constants/comment.js | 2 + .../src/reducers/comment.js | 25 ++++++++++ .../coral-embed-stream/src/reducers/index.js | 4 +- .../client/components/OffTopicFilter.js | 38 +++++++++++++-- .../client/components/styles.css | 4 ++ 9 files changed, 108 insertions(+), 26 deletions(-) create mode 100644 client/coral-embed-stream/src/actions/comment.js create mode 100644 client/coral-embed-stream/src/constants/comment.js create mode 100644 client/coral-embed-stream/src/reducers/comment.js diff --git a/client/coral-embed-stream/src/actions/comment.js b/client/coral-embed-stream/src/actions/comment.js new file mode 100644 index 000000000..574d66267 --- /dev/null +++ b/client/coral-embed-stream/src/actions/comment.js @@ -0,0 +1,11 @@ +import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment'; + +export const addClassName = (className) => ({ + type: ADD_CLASSNAME, + className +}); + +export const removeClassName = (idx) => ({ + type: REMOVE_CLASSNAME, + idx +}); diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index d8410becd..3b8b8b08d 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -1,4 +1,6 @@ import React, {PropTypes} from 'react'; +import {connect} from 'react-redux'; +import cn from 'classnames'; import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton'; import AuthorName from 'coral-plugin-author-name/AuthorName'; @@ -19,7 +21,6 @@ import Slot from 'coral-framework/components/Slot'; import LoadMore from './LoadMore'; import IgnoredCommentTombstone from './IgnoredCommentTombstone'; import {TopRightMenu} from './TopRightMenu'; -import classnames from 'classnames'; import {EditableCommentContent} from './EditableCommentContent'; import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils'; import {getEditableUntilDate} from './util'; @@ -151,28 +152,29 @@ class Comment extends React.Component { } render () { const { - comment, - parentId, - currentUser, asset, depth, - postComment, - addNotification, - showSignInDialog, - highlighted, + comment, postFlag, - postDontAgree, + parentId, loadMore, - setActiveReplyBox, - activeReplyBox, - deleteAction, - addCommentTag, - removeCommentTag, ignoreUser, + highlighted, + postComment, + currentUser, + deleteAction, disableReply, - commentIsIgnored, maxCharCount, - charCountEnable + postDontAgree, + addCommentTag, + activeReplyBox, + addNotification, + charCountEnable, + classNames = [], + showSignInDialog, + removeCommentTag, + commentIsIgnored, + setActiveReplyBox, } = this.props; const flagSummary = getActionSummary('FlagActionSummary', comment); @@ -226,7 +228,7 @@ class Comment extends React.Component { return (
@@ -265,17 +267,17 @@ class Comment extends React.Component { (comment.user.id === currentUser.id)) /* User can edit/delete their own comment for a short window after posting */ - ? + ? { commentIsStillEditable(comment) && Edit } /* TopRightMenu allows currentUser to ignore other users' comments */ - : + : ({classNames: comment.classNames}); + +export default connect(mapStateToProps, null)(Comment); // return whether the comment is editable function commentIsStillEditable (comment) { diff --git a/client/coral-embed-stream/src/components/ViewingOptions.css b/client/coral-embed-stream/src/components/ViewingOptions.css index 45c45c00c..ba9de723b 100644 --- a/client/coral-embed-stream/src/components/ViewingOptions.css +++ b/client/coral-embed-stream/src/components/ViewingOptions.css @@ -10,6 +10,8 @@ background: white; position: absolute; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15); + right: 3px; + top: 20px; } .streamViewingOptionsList ul, .streamViewingOptionsList li { diff --git a/client/coral-embed-stream/src/components/ViewingOptions.js b/client/coral-embed-stream/src/components/ViewingOptions.js index 70b637759..d0fdeaf5b 100644 --- a/client/coral-embed-stream/src/components/ViewingOptions.js +++ b/client/coral-embed-stream/src/components/ViewingOptions.js @@ -24,7 +24,7 @@ export default class ViewingOptions extends React.Component { Viewing Options
{ - this.state.open ? ( + true ? (
    { diff --git a/client/coral-embed-stream/src/constants/comment.js b/client/coral-embed-stream/src/constants/comment.js new file mode 100644 index 000000000..dd0245611 --- /dev/null +++ b/client/coral-embed-stream/src/constants/comment.js @@ -0,0 +1,2 @@ +export const ADD_CLASSNAME = 'ADD_CLASSNAME'; +export const REMOVE_CLASSNAME = 'REMOVE_CLASSNAME'; diff --git a/client/coral-embed-stream/src/reducers/comment.js b/client/coral-embed-stream/src/reducers/comment.js new file mode 100644 index 000000000..e2cd43ee4 --- /dev/null +++ b/client/coral-embed-stream/src/reducers/comment.js @@ -0,0 +1,25 @@ +import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment'; + +const initialState = { + classNames: [] +}; + +export default function comment (state = initialState, action) { + switch (action.type) { + case ADD_CLASSNAME : + return { + ...state, + classNames: [...state.classNames, action.className] + }; + case REMOVE_CLASSNAME : + return { + ...state, + classNames: [ + ...state.classNames.slice(0, action.idx), + ...state.classNames.slice(action.idx + 1) + ] + }; + default : + return state; + } +} diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js index 590b87eea..8366a64f5 100644 --- a/client/coral-embed-stream/src/reducers/index.js +++ b/client/coral-embed-stream/src/reducers/index.js @@ -1,9 +1,11 @@ import embed from './embed'; +import comment from './comment'; import config from './config'; import stream from './stream'; export default { embed, + config, stream, - config + comment }; diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index fb9e6eb7a..226f43d45 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -1,5 +1,37 @@ import React from 'react'; +import styles from './styles.css'; +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment'; -export default () => ( - Hide Off-Topic Comments -); +class OffTopicFilter extends React.Component { + + className = 'OFF_TOPIC'; + + handleChange = (e) => { + if (e.target.checked) { + this.props.addClassName(this.className); + } else { + const idx = this.props.comment.classNames.indexOf(this.className); + this.props.removeClassName(idx); + } + } + + render() { + return ( +
    + +
    + ); + } +} + +const mapStateToProps = ({comment}) => ({comment}); + +const mapDispatchToProps = (dispatch) => + bindActionCreators({addClassName, removeClassName}, dispatch); + +export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter); diff --git a/plugins/coral-plugin-offtopic/client/components/styles.css b/plugins/coral-plugin-offtopic/client/components/styles.css index 52c36e6c2..cf26c9199 100644 --- a/plugins/coral-plugin-offtopic/client/components/styles.css +++ b/plugins/coral-plugin-offtopic/client/components/styles.css @@ -18,4 +18,8 @@ border-radius: 2px; } +.viewingOption { + padding: 5px 0; +} + From 9364272ffc7b63e6e8641e4a03f2f2f2a0f73eee Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 11:53:19 -0300 Subject: [PATCH 04/29] =?UTF-8?q?=C3=81dd=20classnames=20based=20on=20tags?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Comment.js | 33 ++++++++++++++++++- .../src/components/ViewingOptions.js | 2 +- .../src/reducers/comment.js | 6 +++- .../client/components/OffTopicFilter.js | 7 ++-- 4 files changed, 43 insertions(+), 5 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 3b8b8b08d..1364e7748 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -27,6 +27,7 @@ import {getEditableUntilDate} from './util'; import styles from './Comment.css'; const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF'); +const hasTag = (tags, lookupTag) => !!tags.filter((tag) => tag.name === lookupTag).length; // hold actions links (e.g. Reply) along the comment footer const ActionButton = ({children}) => { @@ -226,11 +227,41 @@ class Comment extends React.Component { () => 'Failed to remove best comment tag' ); + /** + * classNamesToAdd + * adds classNames based on condition + * classnames is an array of objects with key as classnames and value as conditions + * i.e: + * { + * 'myClassName': { tags: ['STAFF']} + * } + * + * This will add myClassName to comments tagged with STAFF TAG. + * **/ + + const classNamesToAdd = classNames.reduce((acc, className) => { + let res = []; + + // Adding classNames based on tags + Object.keys(className).map(cn => { + const condition = className[cn]; + condition.tags.forEach(tag => { + if (hasTag(comment.tags, tag)) { + res = [...res, cn]; + } + }); + }); + + // TODO: Compare rest of the comment obj to the condition if needed + + return [...acc, ...res]; + }, []); + return (
    { if (e.target.checked) { - this.props.addClassName(this.className); + this.props.addClassName({ + [this.className] : {tags: [this.tag]} + }); } else { const idx = this.props.comment.classNames.indexOf(this.className); this.props.removeClassName(idx); From a6db60096c8abe618ca6f313d6818979a669280a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 11:58:51 -0300 Subject: [PATCH 05/29] Fully working, needs docs --- .../coral-embed-stream/src/components/ViewingOptions.js | 2 +- client/coral-embed-stream/src/reducers/comment.js | 6 +----- client/coral-embed-stream/style/default.css | 4 ++++ .../client/components/OffTopicFilter.js | 9 ++++----- 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/client/coral-embed-stream/src/components/ViewingOptions.js b/client/coral-embed-stream/src/components/ViewingOptions.js index 05f8afd2e..8477a78ea 100644 --- a/client/coral-embed-stream/src/components/ViewingOptions.js +++ b/client/coral-embed-stream/src/components/ViewingOptions.js @@ -24,7 +24,7 @@ export default class ViewingOptions extends React.Component { Viewing Options
    { - true ? ( + this.state.open ? (
      { diff --git a/client/coral-embed-stream/src/reducers/comment.js b/client/coral-embed-stream/src/reducers/comment.js index 2f38cfce2..e2cd43ee4 100644 --- a/client/coral-embed-stream/src/reducers/comment.js +++ b/client/coral-embed-stream/src/reducers/comment.js @@ -1,11 +1,7 @@ import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment'; const initialState = { - classNames: [{ - 'wapoOff' : { - tags: ['OFF_TOPIC'] - } - }] + classNames: [] }; export default function comment (state = initialState, action) { diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index b24619c57..a8b7f9c61 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -494,3 +494,7 @@ button.comment__action-button[disabled], visibility: visible; } } + +.offTopicComment { + display: none; +} diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index 856bfef3c..a73bcc183 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -7,15 +7,14 @@ import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comm class OffTopicFilter extends React.Component { tag = 'OFF_TOPIC'; - className = 'wapoOfftopic'; + className = 'offTopicComment'; + cn = {[this.className] : {tags: [this.tag]}}; handleChange = (e) => { if (e.target.checked) { - this.props.addClassName({ - [this.className] : {tags: [this.tag]} - }); + this.props.addClassName(this.cn); } else { - const idx = this.props.comment.classNames.indexOf(this.className); + const idx = this.props.comment.classNames.indexOf(this.cn); this.props.removeClassName(idx); } } From e9cb61a534912c57a20c66d7966764560e194c2e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 12:13:26 -0300 Subject: [PATCH 06/29] Arrow for filtering --- client/coral-embed-stream/src/components/Comment.js | 4 ++-- client/coral-embed-stream/src/components/ViewingOptions.js | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 1364e7748..76a648ca4 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -243,9 +243,9 @@ class Comment extends React.Component { let res = []; // Adding classNames based on tags - Object.keys(className).map(cn => { + Object.keys(className).map((cn) => { const condition = className[cn]; - condition.tags.forEach(tag => { + condition.tags.forEach((tag) => { if (hasTag(comment.tags, tag)) { res = [...res, cn]; } diff --git a/client/coral-embed-stream/src/components/ViewingOptions.js b/client/coral-embed-stream/src/components/ViewingOptions.js index 8477a78ea..c40b23d39 100644 --- a/client/coral-embed-stream/src/components/ViewingOptions.js +++ b/client/coral-embed-stream/src/components/ViewingOptions.js @@ -2,6 +2,7 @@ import React from 'react'; import cn from 'classnames'; import styles from './ViewingOptions.css'; import Slot from 'coral-framework/components/Slot'; +import {Icon} from 'coral-ui'; export default class ViewingOptions extends React.Component { constructor() { @@ -21,7 +22,9 @@ export default class ViewingOptions extends React.Component { return (
      { this.state.open ? ( From b5a64bd2f960e837a0d6a0b30fb03ff99e8c1163 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 15:45:56 -0300 Subject: [PATCH 07/29] Filter State --- .../coral-embed-stream/src/actions/stream.js | 8 ++ .../src/components/ViewingOptions.css | 4 + .../src/components/ViewingOptions.js | 83 ++++++++++--------- .../src/constants/stream.js | 2 + .../coral-embed-stream/src/reducers/stream.js | 17 ++++ .../client/components/OffTopicFilter.js | 4 +- .../client/components/StaffFilter.js | 39 +++++++++ 7 files changed, 116 insertions(+), 41 deletions(-) create mode 100644 plugins/coral-plugin-offtopic/client/components/StaffFilter.js diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js index 81b57a0fe..29e6948a0 100644 --- a/client/coral-embed-stream/src/actions/stream.js +++ b/client/coral-embed-stream/src/actions/stream.js @@ -38,3 +38,11 @@ export const viewAllComments = () => { return {type: actions.VIEW_ALL_COMMENTS}; }; + +export const openViewingOptions = () => ({ + type: actions.OPEN_VIEWING_OPTIONS +}); + +export const closeViewingOptions = () => ({ + type: actions.CLOSE_VIEWING_OPTIONS +}); \ No newline at end of file diff --git a/client/coral-embed-stream/src/components/ViewingOptions.css b/client/coral-embed-stream/src/components/ViewingOptions.css index ba9de723b..3759295c8 100644 --- a/client/coral-embed-stream/src/components/ViewingOptions.css +++ b/client/coral-embed-stream/src/components/ViewingOptions.css @@ -6,6 +6,10 @@ min-width: 220px; } +.viewingOptions { + cursor: pointer; +} + .streamViewingOptionsList { background: white; position: absolute; diff --git a/client/coral-embed-stream/src/components/ViewingOptions.js b/client/coral-embed-stream/src/components/ViewingOptions.js index c40b23d39..48cc10c5d 100644 --- a/client/coral-embed-stream/src/components/ViewingOptions.js +++ b/client/coral-embed-stream/src/components/ViewingOptions.js @@ -1,47 +1,50 @@ import React from 'react'; import cn from 'classnames'; +import {Icon} from 'coral-ui'; +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; import styles from './ViewingOptions.css'; import Slot from 'coral-framework/components/Slot'; -import {Icon} from 'coral-ui'; +import {openViewingOptions, closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; -export default class ViewingOptions extends React.Component { - constructor() { - super(); - this.state = { - open: false - }; - } +const ViewingOptions = (props) => { + const toggleOpen = () => { + if (!props.open) { + props.openViewingOptions(); + } else { + props.closeViewingOptions(); + } + }; - toggleOpen = () => { - this.setState((state) => ({ - open: !state.open - })); - } - - render() { - return ( -
      - - { - this.state.open ? ( -
      -
        - { - React.Children.map(, (component) => { - return React.createElement('li', { - className: 'viewingOption' - }, component); - }) - } -
      -
      - ) : null - } + return ( +
      + - ); - } -} + { + props.open ? ( +
      +
        + { + React.Children.map(, (component) => { + return React.createElement('li', { + className: 'viewingOption' + }, component); + }) + } +
      +
      + ) : null + } +
      + ); +}; + +const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open}); + +const mapDispatchToProps = (dispatch) => + bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch); + +export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions); diff --git a/client/coral-embed-stream/src/constants/stream.js b/client/coral-embed-stream/src/constants/stream.js index cb17edb2f..558e0ddd3 100644 --- a/client/coral-embed-stream/src/constants/stream.js +++ b/client/coral-embed-stream/src/constants/stream.js @@ -3,3 +3,5 @@ export const SET_COMMENT_COUNT_CACHE = 'SET_COMMENT_COUNT_CACHE'; export const ADDTL_COMMENTS_ON_LOAD_MORE = 10; export const NEW_COMMENT_COUNT_POLL_INTERVAL = 20000; export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS'; +export const OPEN_VIEWING_OPTIONS = 'OPEN_VIEWING_OPTIONS'; +export const CLOSE_VIEWING_OPTIONS = 'CLOSE_VIEWING_OPTIONS'; diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js index 59f068530..6756ad4a8 100644 --- a/client/coral-embed-stream/src/reducers/stream.js +++ b/client/coral-embed-stream/src/reducers/stream.js @@ -20,10 +20,27 @@ const initialState = { assetId: getQueryVariable('asset_id'), assetUrl: getQueryVariable('asset_url'), commentId: getQueryVariable('comment_id'), + viewingOption: { + open: false + } }; export default function stream(state = initialState, action) { switch (action.type) { + case actions.OPEN_VIEWING_OPTIONS: + return { + ...state, + viewingOption: { + open: true + } + }; + case actions.CLOSE_VIEWING_OPTIONS: + return { + ...state, + viewingOption: { + open: false + } + }; case actions.SET_ACTIVE_REPLY_BOX: return { ...state, diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index a73bcc183..e91320b4b 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -3,6 +3,7 @@ import styles from './styles.css'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment'; +import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; class OffTopicFilter extends React.Component { @@ -17,6 +18,7 @@ class OffTopicFilter extends React.Component { const idx = this.props.comment.classNames.indexOf(this.cn); this.props.removeClassName(idx); } + props.closeViewingOptions(); } render() { @@ -34,6 +36,6 @@ class OffTopicFilter extends React.Component { const mapStateToProps = ({comment}) => ({comment}); const mapDispatchToProps = (dispatch) => - bindActionCreators({addClassName, removeClassName}, dispatch); + bindActionCreators({addClassName, removeClassName, closeViewingOptions}, dispatch); export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter); diff --git a/plugins/coral-plugin-offtopic/client/components/StaffFilter.js b/plugins/coral-plugin-offtopic/client/components/StaffFilter.js new file mode 100644 index 000000000..9e9a2a62a --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/components/StaffFilter.js @@ -0,0 +1,39 @@ +import React from 'react'; +import styles from './styles.css'; +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment'; + +class StaffFilter extends React.Component { + + tag = 'STAFF'; + className = 'offTopicComment'; + cn = {[this.className] : {tags: [this.tag]}}; + + handleChange = (e) => { + if (e.target.checked) { + this.props.addClassName(this.cn); + } else { + const idx = this.props.comment.classNames.indexOf(this.cn); + this.props.removeClassName(idx); + } + } + + render() { + return ( +
      + +
      + ); + } +} + +const mapStateToProps = ({comment}) => ({comment}); + +const mapDispatchToProps = (dispatch) => + bindActionCreators({addClassName, removeClassName}, dispatch); + +export default connect(mapStateToProps, mapDispatchToProps)(StaffFilter); From 4aa790076920e501d2a621dcc279a11590dc658a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 17:09:13 -0300 Subject: [PATCH 08/29] Not connecting comment Component to the Store --- .../coral-embed-stream/src/components/Comment.js | 12 +++--------- .../coral-embed-stream/src/components/Stream.js | 16 ++++++++-------- .../coral-embed-stream/src/containers/Stream.js | 1 + client/coral-framework/helpers/plugins.js | 1 + client/coral-framework/reducers/index.js | 2 +- .../client/components/OffTopicFilter.js | 6 +++--- plugins/coral-plugin-offtopic/client/index.js | 2 ++ plugins/coral-plugin-offtopic/client/reducer.js | 10 ++++++++++ 8 files changed, 29 insertions(+), 21 deletions(-) create mode 100644 plugins/coral-plugin-offtopic/client/reducer.js diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 76a648ca4..84158e755 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -1,10 +1,8 @@ import React, {PropTypes} from 'react'; -import {connect} from 'react-redux'; import cn from 'classnames'; + import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton'; - import AuthorName from 'coral-plugin-author-name/AuthorName'; - import TagLabel from 'coral-plugin-tag-label/TagLabel'; import Content from 'coral-plugin-commentcontent/CommentContent'; import PubDate from 'coral-plugin-pubdate/PubDate'; @@ -19,8 +17,8 @@ import { } from 'coral-plugin-best/BestButton'; import Slot from 'coral-framework/components/Slot'; import LoadMore from './LoadMore'; -import IgnoredCommentTombstone from './IgnoredCommentTombstone'; import {TopRightMenu} from './TopRightMenu'; +import IgnoredCommentTombstone from './IgnoredCommentTombstone'; import {EditableCommentContent} from './EditableCommentContent'; import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils'; import {getEditableUntilDate} from './util'; @@ -38,7 +36,7 @@ const ActionButton = ({children}) => { ); }; -class Comment extends React.Component { +export default class Comment extends React.Component { constructor(props) { super(props); @@ -449,10 +447,6 @@ class Comment extends React.Component { } } -const mapStateToProps = ({comment}) => ({classNames: comment.classNames}); - -export default connect(mapStateToProps, null)(Comment); - // return whether the comment is editable function commentIsStillEditable (comment) { const editing = comment && comment.editing; diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 131b56255..ae210013d 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -1,22 +1,20 @@ import React, {PropTypes} from 'react'; import LoadMore from './LoadMore'; import NewCount from './NewCount'; - import Comment from '../containers/Comment'; -import SuspendedAccount from './SuspendedAccount'; -import RestrictedMessageBox - from 'coral-framework/components/RestrictedMessageBox'; import ViewingOptions from './ViewingOptions'; +import SuspendedAccount from './SuspendedAccount'; import Slot from 'coral-framework/components/Slot'; import InfoBox from 'coral-plugin-infobox/InfoBox'; import {can} from 'coral-framework/services/perms'; import {ModerationLink} from 'coral-plugin-moderation'; +import RestrictedMessageBox + from 'coral-framework/components/RestrictedMessageBox'; +import t, {timeago} from 'coral-framework/services/i18n'; import CommentBox from 'coral-plugin-commentbox/CommentBox'; import QuestionBox from 'coral-plugin-questionbox/QuestionBox'; import IgnoredCommentTombstone from './IgnoredCommentTombstone'; -import t, {timeago} from 'coral-framework/services/i18n'; - class Stream extends React.Component { setActiveReplyBox = (reactKey) => { if (!this.props.auth.user) { @@ -28,6 +26,7 @@ class Stream extends React.Component { render() { const { + classNames, root: {asset, asset: {comments}, comment, me}, postComment, addNotification, @@ -36,10 +35,10 @@ class Stream extends React.Component { deleteAction, showSignInDialog, addCommentTag, - removeCommentTag, - pluginProps, ignoreUser, auth: {loggedIn, user}, + removeCommentTag, + pluginProps, commentCountCache, editName } = this.props; @@ -159,6 +158,7 @@ class Stream extends React.Component { return commentIsIgnored(comment) ? : ({ assetUrl: state.stream.assetUrl, activeTab: state.embed.activeTab, previousTab: state.embed.previousTab, + classNames: state.comment.classNames }); const mapDispatchToProps = (dispatch) => diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js index 02ee8c3a7..3e54ee5fa 100644 --- a/client/coral-framework/helpers/plugins.js +++ b/client/coral-framework/helpers/plugins.js @@ -8,6 +8,7 @@ import plugins from 'pluginsConfig'; import {getDefinitionName, mergeDocuments} from 'coral-framework/utils'; import {loadTranslations} from 'coral-framework/services/i18n'; +console.log(plugins) export const pluginReducers = merge( ...plugins .filter((o) => o.module.reducer) diff --git a/client/coral-framework/reducers/index.js b/client/coral-framework/reducers/index.js index d5b66bbae..a25daee5c 100644 --- a/client/coral-framework/reducers/index.js +++ b/client/coral-framework/reducers/index.js @@ -3,7 +3,7 @@ import user from './user'; import asset from './asset'; import {reducer as commentBox} from '../../coral-plugin-commentbox'; import {pluginReducers} from '../helpers/plugins'; - +console.log(pluginReducers) export default { auth, user, diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index e91320b4b..f8c588316 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -18,14 +18,14 @@ class OffTopicFilter extends React.Component { const idx = this.props.comment.classNames.indexOf(this.cn); this.props.removeClassName(idx); } - props.closeViewingOptions(); + this.props.closeViewingOptions(); } render() { return (
      @@ -33,7 +33,7 @@ class OffTopicFilter extends React.Component { } } -const mapStateToProps = ({comment}) => ({comment}); +const mapStateToProps = ({comment, offTopicFilter}) => ({comment, offTopicFilter}); const mapDispatchToProps = (dispatch) => bindActionCreators({addClassName, removeClassName, closeViewingOptions}, dispatch); diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js index cd591de28..b6f9a7f5b 100644 --- a/plugins/coral-plugin-offtopic/client/index.js +++ b/plugins/coral-plugin-offtopic/client/index.js @@ -2,9 +2,11 @@ import OffTopicCheckbox from './components/OffTopicCheckbox'; import OffTopicTag from './components/OffTopicTag'; import OffTopicFilter from './components/OffTopicFilter'; import translations from './translations.json'; +import reducer from './reducer'; export default { translations, + reducer, slots: { commentInputDetailArea: [OffTopicCheckbox], streamViewingOptions: [OffTopicFilter], diff --git a/plugins/coral-plugin-offtopic/client/reducer.js b/plugins/coral-plugin-offtopic/client/reducer.js new file mode 100644 index 000000000..f5673b1a9 --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/reducer.js @@ -0,0 +1,10 @@ +const initialState = { + filter: true +}; + +export default function offTopic (state = initialState, action) { + switch (action.type) { + default : + return state; + } +} From c3360aa020264875027cbf6663bc633a5596589d Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 17:23:35 -0300 Subject: [PATCH 09/29] Plugin reducers working again --- client/coral-framework/helpers/plugins.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js index 3e54ee5fa..997c5c29d 100644 --- a/client/coral-framework/helpers/plugins.js +++ b/client/coral-framework/helpers/plugins.js @@ -8,11 +8,12 @@ import plugins from 'pluginsConfig'; import {getDefinitionName, mergeDocuments} from 'coral-framework/utils'; import {loadTranslations} from 'coral-framework/services/i18n'; -console.log(plugins) export const pluginReducers = merge( ...plugins .filter((o) => o.module.reducer) - .map((o) => ({...o.module.reducer})) + .map(o => ({ + [o.plugin] : o.module.reducer + })) ); /** From 1c7ad9a8aca7d59e62056925f5af9d195de637d7 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 17:29:56 -0300 Subject: [PATCH 10/29] Plugin reducers working again with reducer name --- client/coral-embed-stream/src/actions/stream.js | 2 +- client/coral-framework/helpers/plugins.js | 4 +--- client/coral-framework/reducers/index.js | 2 +- plugins/coral-plugin-offtopic/client/reducer.js | 4 ++-- 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js index 29e6948a0..68ccdda58 100644 --- a/client/coral-embed-stream/src/actions/stream.js +++ b/client/coral-embed-stream/src/actions/stream.js @@ -45,4 +45,4 @@ export const openViewingOptions = () => ({ export const closeViewingOptions = () => ({ type: actions.CLOSE_VIEWING_OPTIONS -}); \ No newline at end of file +}); diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js index 997c5c29d..a9e5f6408 100644 --- a/client/coral-framework/helpers/plugins.js +++ b/client/coral-framework/helpers/plugins.js @@ -11,9 +11,7 @@ import {loadTranslations} from 'coral-framework/services/i18n'; export const pluginReducers = merge( ...plugins .filter((o) => o.module.reducer) - .map(o => ({ - [o.plugin] : o.module.reducer - })) + .map((o) => ({[o.module.reducer.name] : o.module.reducer})) ); /** diff --git a/client/coral-framework/reducers/index.js b/client/coral-framework/reducers/index.js index a25daee5c..8c7a3277b 100644 --- a/client/coral-framework/reducers/index.js +++ b/client/coral-framework/reducers/index.js @@ -3,7 +3,7 @@ import user from './user'; import asset from './asset'; import {reducer as commentBox} from '../../coral-plugin-commentbox'; import {pluginReducers} from '../helpers/plugins'; -console.log(pluginReducers) +console.log(pluginReducers); export default { auth, user, diff --git a/plugins/coral-plugin-offtopic/client/reducer.js b/plugins/coral-plugin-offtopic/client/reducer.js index f5673b1a9..df5612a25 100644 --- a/plugins/coral-plugin-offtopic/client/reducer.js +++ b/plugins/coral-plugin-offtopic/client/reducer.js @@ -4,7 +4,7 @@ const initialState = { export default function offTopic (state = initialState, action) { switch (action.type) { - default : - return state; + default : + return state; } } From 2202c8ae5bc3ecbe4ac8831026b8746917dae559 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 18:08:13 -0300 Subject: [PATCH 11/29] Fully working filter --- plugins/coral-plugin-offtopic/client/actions.js | 5 +++++ .../client/components/OffTopicFilter.js | 14 ++++++++++---- plugins/coral-plugin-offtopic/client/constants.js | 1 + plugins/coral-plugin-offtopic/client/reducer.js | 10 +++++++++- 4 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 plugins/coral-plugin-offtopic/client/actions.js create mode 100644 plugins/coral-plugin-offtopic/client/constants.js diff --git a/plugins/coral-plugin-offtopic/client/actions.js b/plugins/coral-plugin-offtopic/client/actions.js new file mode 100644 index 000000000..6a4ef98d5 --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/actions.js @@ -0,0 +1,5 @@ +import {TOGGLE_CHECKBOX} from './constants'; + +export const toggleCheckbox = () => ({ + type: TOGGLE_CHECKBOX +}); \ No newline at end of file diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index f8c588316..7122bc20f 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -2,6 +2,7 @@ import React from 'react'; import styles from './styles.css'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; +import {toggleCheckbox} from '../actions'; import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment'; import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; @@ -14,9 +15,11 @@ class OffTopicFilter extends React.Component { handleChange = (e) => { if (e.target.checked) { this.props.addClassName(this.cn); + this.props.toggleCheckbox(); } else { - const idx = this.props.comment.classNames.indexOf(this.cn); + const idx = this.props.classNames.findIndex((i) => i[this.className]); this.props.removeClassName(idx); + this.props.toggleCheckbox(); } this.props.closeViewingOptions(); } @@ -25,7 +28,7 @@ class OffTopicFilter extends React.Component { return (
      @@ -33,9 +36,12 @@ class OffTopicFilter extends React.Component { } } -const mapStateToProps = ({comment, offTopicFilter}) => ({comment, offTopicFilter}); +const mapStateToProps = ({comment, offTopic}) => ({ + classNames: comment.classNames, + checked: offTopic.checked +}); const mapDispatchToProps = (dispatch) => - bindActionCreators({addClassName, removeClassName, closeViewingOptions}, dispatch); + bindActionCreators({addClassName, removeClassName, toggleCheckbox, closeViewingOptions}, dispatch); export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter); diff --git a/plugins/coral-plugin-offtopic/client/constants.js b/plugins/coral-plugin-offtopic/client/constants.js new file mode 100644 index 000000000..bbb4a5899 --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/constants.js @@ -0,0 +1 @@ +export const TOGGLE_CHECKBOX = "TOGGLE_CHECKBOX"; \ No newline at end of file diff --git a/plugins/coral-plugin-offtopic/client/reducer.js b/plugins/coral-plugin-offtopic/client/reducer.js index df5612a25..55639f601 100644 --- a/plugins/coral-plugin-offtopic/client/reducer.js +++ b/plugins/coral-plugin-offtopic/client/reducer.js @@ -1,9 +1,17 @@ +import {TOGGLE_CHECKBOX} from './constants'; + const initialState = { - filter: true + checked: false }; export default function offTopic (state = initialState, action) { switch (action.type) { + case TOGGLE_CHECKBOX: { + return { + ...state, + checked: !state.checked + } + } default : return state; } From 6f909c34514a2ee13bc5da8c6e42fac01d3884d6 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 18:21:03 -0300 Subject: [PATCH 12/29] Containers and Components structure --- client/coral-framework/reducers/index.js | 2 +- .../coral-plugin-offtopic/client/actions.js | 2 +- .../client/components/OffTopicCheckbox.js | 12 +----- .../client/components/OffTopicFilter.js | 17 +------- .../client/components/StaffFilter.js | 39 ------------------- .../coral-plugin-offtopic/client/constants.js | 2 +- .../client/containers/OffTopicCheckbox.js | 11 ++++++ .../client/containers/OffTopicFilter.js | 27 +++++++++++++ plugins/coral-plugin-offtopic/client/index.js | 6 +-- .../coral-plugin-offtopic/client/reducer.js | 12 +++--- 10 files changed, 52 insertions(+), 78 deletions(-) delete mode 100644 plugins/coral-plugin-offtopic/client/components/StaffFilter.js create mode 100644 plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js create mode 100644 plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js diff --git a/client/coral-framework/reducers/index.js b/client/coral-framework/reducers/index.js index 8c7a3277b..d5b66bbae 100644 --- a/client/coral-framework/reducers/index.js +++ b/client/coral-framework/reducers/index.js @@ -3,7 +3,7 @@ import user from './user'; import asset from './asset'; import {reducer as commentBox} from '../../coral-plugin-commentbox'; import {pluginReducers} from '../helpers/plugins'; -console.log(pluginReducers); + export default { auth, user, diff --git a/plugins/coral-plugin-offtopic/client/actions.js b/plugins/coral-plugin-offtopic/client/actions.js index 6a4ef98d5..fa5423448 100644 --- a/plugins/coral-plugin-offtopic/client/actions.js +++ b/plugins/coral-plugin-offtopic/client/actions.js @@ -2,4 +2,4 @@ import {TOGGLE_CHECKBOX} from './constants'; export const toggleCheckbox = () => ({ type: TOGGLE_CHECKBOX -}); \ No newline at end of file +}); diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js index c05b1d8b1..67e4b5e4e 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js @@ -1,12 +1,9 @@ import React from 'react'; -import {connect} from 'react-redux'; -import {bindActionCreators} from 'redux'; -import {addTag, removeTag} from 'coral-plugin-commentbox/actions'; import styles from './styles.css'; import t from 'coral-framework/services/i18n'; -class OffTopicCheckbox extends React.Component { +export default class OffTopicCheckbox extends React.Component { label = 'OFF_TOPIC'; @@ -34,10 +31,3 @@ class OffTopicCheckbox extends React.Component { ); } } - -const mapStateToProps = ({commentBox}) => ({commentBox}); - -const mapDispatchToProps = (dispatch) => - bindActionCreators({addTag, removeTag}, dispatch); - -export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox); diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index 7122bc20f..77e4362e2 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -1,12 +1,7 @@ import React from 'react'; import styles from './styles.css'; -import {connect} from 'react-redux'; -import {bindActionCreators} from 'redux'; -import {toggleCheckbox} from '../actions'; -import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment'; -import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; -class OffTopicFilter extends React.Component { +export default class OffTopicFilter extends React.Component { tag = 'OFF_TOPIC'; className = 'offTopicComment'; @@ -35,13 +30,3 @@ class OffTopicFilter extends React.Component { ); } } - -const mapStateToProps = ({comment, offTopic}) => ({ - classNames: comment.classNames, - checked: offTopic.checked -}); - -const mapDispatchToProps = (dispatch) => - bindActionCreators({addClassName, removeClassName, toggleCheckbox, closeViewingOptions}, dispatch); - -export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter); diff --git a/plugins/coral-plugin-offtopic/client/components/StaffFilter.js b/plugins/coral-plugin-offtopic/client/components/StaffFilter.js deleted file mode 100644 index 9e9a2a62a..000000000 --- a/plugins/coral-plugin-offtopic/client/components/StaffFilter.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import styles from './styles.css'; -import {connect} from 'react-redux'; -import {bindActionCreators} from 'redux'; -import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment'; - -class StaffFilter extends React.Component { - - tag = 'STAFF'; - className = 'offTopicComment'; - cn = {[this.className] : {tags: [this.tag]}}; - - handleChange = (e) => { - if (e.target.checked) { - this.props.addClassName(this.cn); - } else { - const idx = this.props.comment.classNames.indexOf(this.cn); - this.props.removeClassName(idx); - } - } - - render() { - return ( -
      - -
      - ); - } -} - -const mapStateToProps = ({comment}) => ({comment}); - -const mapDispatchToProps = (dispatch) => - bindActionCreators({addClassName, removeClassName}, dispatch); - -export default connect(mapStateToProps, mapDispatchToProps)(StaffFilter); diff --git a/plugins/coral-plugin-offtopic/client/constants.js b/plugins/coral-plugin-offtopic/client/constants.js index bbb4a5899..22418614c 100644 --- a/plugins/coral-plugin-offtopic/client/constants.js +++ b/plugins/coral-plugin-offtopic/client/constants.js @@ -1 +1 @@ -export const TOGGLE_CHECKBOX = "TOGGLE_CHECKBOX"; \ No newline at end of file +export const TOGGLE_CHECKBOX = 'TOGGLE_CHECKBOX'; diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js new file mode 100644 index 000000000..8566b10e4 --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js @@ -0,0 +1,11 @@ +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {addTag, removeTag} from 'coral-plugin-commentbox/actions'; +import OffTopicCheckbox from '../components/OffTopicCheckbox'; + +const mapStateToProps = ({commentBox}) => ({commentBox}); + +const mapDispatchToProps = (dispatch) => + bindActionCreators({addTag, removeTag}, dispatch); + +export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox); diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js new file mode 100644 index 000000000..a14c0f80c --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js @@ -0,0 +1,27 @@ +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {toggleCheckbox} from '../actions'; +import { + addClassName, + removeClassName +} from 'coral-embed-stream/src/actions/comment'; +import OffTopicFilter from '../components/OffTopicFilter'; +import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; + +const mapStateToProps = ({comment, offTopic}) => ({ + classNames: comment.classNames, + checked: offTopic.checked +}); + +const mapDispatchToProps = (dispatch) => + bindActionCreators( + { + addClassName, + removeClassName, + toggleCheckbox, + closeViewingOptions + }, + dispatch + ); + +export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter); diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js index b6f9a7f5b..5838619cd 100644 --- a/plugins/coral-plugin-offtopic/client/index.js +++ b/plugins/coral-plugin-offtopic/client/index.js @@ -1,7 +1,7 @@ -import OffTopicCheckbox from './components/OffTopicCheckbox'; -import OffTopicTag from './components/OffTopicTag'; -import OffTopicFilter from './components/OffTopicFilter'; import translations from './translations.json'; +import OffTopicTag from './components/OffTopicTag'; +import OffTopicFilter from './containers/OffTopicFilter'; +import OffTopicCheckbox from './containers/OffTopicCheckbox'; import reducer from './reducer'; export default { diff --git a/plugins/coral-plugin-offtopic/client/reducer.js b/plugins/coral-plugin-offtopic/client/reducer.js index 55639f601..02c4a3c18 100644 --- a/plugins/coral-plugin-offtopic/client/reducer.js +++ b/plugins/coral-plugin-offtopic/client/reducer.js @@ -6,12 +6,12 @@ const initialState = { export default function offTopic (state = initialState, action) { switch (action.type) { - case TOGGLE_CHECKBOX: { - return { - ...state, - checked: !state.checked - } - } + case TOGGLE_CHECKBOX: { + return { + ...state, + checked: !state.checked + }; + } default : return state; } From b5c9e92cc6a60e4e6baee7744a6bce7fcc576661 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 6 Jun 2017 20:42:42 -0300 Subject: [PATCH 13/29] Adding streamBox slot and coral-plugin-viewing-options :tada: --- .gitignore | 1 + .../src/components/Stream.js | 16 ++++++------- plugins/coral-plugin-offtopic/client/index.js | 5 ++++ .../client/.babelrc | 14 +++++++++++ .../client/.eslintrc.json | 23 +++++++++++++++++++ .../client}/components/ViewingOptions.css | 0 .../client}/components/ViewingOptions.js | 10 +------- .../client/containers/ViewingOptions.js | 12 ++++++++++ .../client/index.js | 7 ++++++ plugins/coral-plugin-viewing-options/index.js | 1 + 10 files changed, 72 insertions(+), 17 deletions(-) create mode 100644 plugins/coral-plugin-viewing-options/client/.babelrc create mode 100644 plugins/coral-plugin-viewing-options/client/.eslintrc.json rename {client/coral-embed-stream/src => plugins/coral-plugin-viewing-options/client}/components/ViewingOptions.css (100%) rename {client/coral-embed-stream/src => plugins/coral-plugin-viewing-options/client}/components/ViewingOptions.js (71%) create mode 100644 plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js create mode 100644 plugins/coral-plugin-viewing-options/client/index.js create mode 100644 plugins/coral-plugin-viewing-options/index.js diff --git a/.gitignore b/.gitignore index 11e738d57..abd490356 100644 --- a/.gitignore +++ b/.gitignore @@ -23,5 +23,6 @@ plugins/* !plugins/coral-plugin-like !plugins/coral-plugin-mod !plugins/coral-plugin-love +!plugins/coral-plugin-viewing-options **/node_modules/* diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index ae210013d..d1b74b629 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -2,7 +2,6 @@ import React, {PropTypes} from 'react'; import LoadMore from './LoadMore'; import NewCount from './NewCount'; import Comment from '../containers/Comment'; -import ViewingOptions from './ViewingOptions'; import SuspendedAccount from './SuspendedAccount'; import Slot from 'coral-framework/components/Slot'; import InfoBox from 'coral-plugin-infobox/InfoBox'; @@ -110,14 +109,15 @@ class Stream extends React.Component {
      :

      {asset.settings.closedMessage}

      } -
      - {loggedIn && - } + {loggedIn && ( + + )} - +
      +
      {/* the highlightedComment is isolated after the user followed a permalink */} diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js index 5838619cd..ff65f3351 100644 --- a/plugins/coral-plugin-offtopic/client/index.js +++ b/plugins/coral-plugin-offtopic/client/index.js @@ -4,6 +4,11 @@ import OffTopicFilter from './containers/OffTopicFilter'; import OffTopicCheckbox from './containers/OffTopicCheckbox'; import reducer from './reducer'; +/** + * coral-plugin-offtopic depends on coral-plugin-viewing-options + * in other to display filter and use the streamViewingOptions slot + */ + export default { translations, reducer, diff --git a/plugins/coral-plugin-viewing-options/client/.babelrc b/plugins/coral-plugin-viewing-options/client/.babelrc new file mode 100644 index 000000000..60be246eb --- /dev/null +++ b/plugins/coral-plugin-viewing-options/client/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + "es2015" + ], + "plugins": [ + "add-module-exports", + "transform-class-properties", + "transform-decorators-legacy", + "transform-object-assign", + "transform-object-rest-spread", + "transform-async-to-generator", + "transform-react-jsx" + ] +} \ No newline at end of file diff --git a/plugins/coral-plugin-viewing-options/client/.eslintrc.json b/plugins/coral-plugin-viewing-options/client/.eslintrc.json new file mode 100644 index 000000000..9fe56bd14 --- /dev/null +++ b/plugins/coral-plugin-viewing-options/client/.eslintrc.json @@ -0,0 +1,23 @@ +{ + "env": { + "browser": true, + "es6": true, + "mocha": true + }, + "parserOptions": { + "sourceType": "module", + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "jsx": true + } + }, + "parser": "babel-eslint", + "plugins": [ + "react" + ], + "rules": { + "react/jsx-uses-react": "error", + "react/jsx-uses-vars": "error", + "no-console": ["warn", { "allow": ["warn", "error"] }] + } +} diff --git a/client/coral-embed-stream/src/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css similarity index 100% rename from client/coral-embed-stream/src/components/ViewingOptions.css rename to plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css diff --git a/client/coral-embed-stream/src/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js similarity index 71% rename from client/coral-embed-stream/src/components/ViewingOptions.js rename to plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js index 48cc10c5d..0a251fd13 100644 --- a/client/coral-embed-stream/src/components/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js @@ -1,11 +1,8 @@ import React from 'react'; import cn from 'classnames'; import {Icon} from 'coral-ui'; -import {connect} from 'react-redux'; -import {bindActionCreators} from 'redux'; import styles from './ViewingOptions.css'; import Slot from 'coral-framework/components/Slot'; -import {openViewingOptions, closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; const ViewingOptions = (props) => { const toggleOpen = () => { @@ -42,9 +39,4 @@ const ViewingOptions = (props) => { ); }; -const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open}); - -const mapDispatchToProps = (dispatch) => - bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch); - -export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions); +export default ViewingOptions; \ No newline at end of file diff --git a/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js new file mode 100644 index 000000000..444fc1166 --- /dev/null +++ b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js @@ -0,0 +1,12 @@ +import React from 'react'; +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import ViewingOptions from '../components/ViewingOptions'; +import {openViewingOptions, closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; + +const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open}); + +const mapDispatchToProps = (dispatch) => + bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch); + +export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions); diff --git a/plugins/coral-plugin-viewing-options/client/index.js b/plugins/coral-plugin-viewing-options/client/index.js new file mode 100644 index 000000000..ad2574558 --- /dev/null +++ b/plugins/coral-plugin-viewing-options/client/index.js @@ -0,0 +1,7 @@ +import ViewingOptions from './containers/ViewingOptions'; + +export default { + slots: { + streamBox: [ViewingOptions] + } +}; diff --git a/plugins/coral-plugin-viewing-options/index.js b/plugins/coral-plugin-viewing-options/index.js new file mode 100644 index 000000000..a09954537 --- /dev/null +++ b/plugins/coral-plugin-viewing-options/index.js @@ -0,0 +1 @@ +module.exports = {}; \ No newline at end of file From e24f6ca9f18a2dc6d1b97727b1d0b4b3d40e2d8c Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 09:28:12 -0300 Subject: [PATCH 14/29] Renaming to commentClassNames --- client/coral-embed-stream/src/actions/comment.js | 10 +++++----- .../coral-embed-stream/src/components/Comment.js | 4 ++-- .../coral-embed-stream/src/components/Stream.js | 4 ++-- .../coral-embed-stream/src/constants/comment.js | 4 ++-- .../coral-embed-stream/src/containers/Stream.js | 2 +- .../coral-embed-stream/src/reducers/comment.js | 16 ++++++++-------- .../client/components/OffTopicFilter.js | 6 +++--- .../client/containers/OffTopicFilter.js | 12 ++++++------ 8 files changed, 29 insertions(+), 29 deletions(-) diff --git a/client/coral-embed-stream/src/actions/comment.js b/client/coral-embed-stream/src/actions/comment.js index 574d66267..b48e29798 100644 --- a/client/coral-embed-stream/src/actions/comment.js +++ b/client/coral-embed-stream/src/actions/comment.js @@ -1,11 +1,11 @@ -import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment'; +import {ADD_COMMENT_CLASSNAME, REMOVE_COMMENT_CLASSNAME} from '../constants/comment'; -export const addClassName = (className) => ({ - type: ADD_CLASSNAME, +export const addCommentClassName = (className) => ({ + type: ADD_COMMENT_CLASSNAME, className }); -export const removeClassName = (idx) => ({ - type: REMOVE_CLASSNAME, +export const removeCommentClassName = (idx) => ({ + type: REMOVE_COMMENT_CLASSNAME, idx }); diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 84158e755..2a434c3d7 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -169,11 +169,11 @@ export default class Comment extends React.Component { activeReplyBox, addNotification, charCountEnable, - classNames = [], showSignInDialog, removeCommentTag, commentIsIgnored, setActiveReplyBox, + commentClassNames = [] } = this.props; const flagSummary = getActionSummary('FlagActionSummary', comment); @@ -237,7 +237,7 @@ export default class Comment extends React.Component { * This will add myClassName to comments tagged with STAFF TAG. * **/ - const classNamesToAdd = classNames.reduce((acc, className) => { + const classNamesToAdd = commentClassNames.reduce((acc, className) => { let res = []; // Adding classNames based on tags diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index d1b74b629..b99b23b70 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -25,7 +25,7 @@ class Stream extends React.Component { render() { const { - classNames, + commentClassNames, root: {asset, asset: {comments}, comment, me}, postComment, addNotification, @@ -158,7 +158,7 @@ class Stream extends React.Component { return commentIsIgnored(comment) ? : ({ assetUrl: state.stream.assetUrl, activeTab: state.embed.activeTab, previousTab: state.embed.previousTab, - classNames: state.comment.classNames + commentClassNames: state.comment.commentClassNames }); const mapDispatchToProps = (dispatch) => diff --git a/client/coral-embed-stream/src/reducers/comment.js b/client/coral-embed-stream/src/reducers/comment.js index e2cd43ee4..7cee8d3c8 100644 --- a/client/coral-embed-stream/src/reducers/comment.js +++ b/client/coral-embed-stream/src/reducers/comment.js @@ -1,22 +1,22 @@ -import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment'; +import {ADD_COMMENT_CLASSNAME, REMOVE_COMMENT_CLASSNAME} from '../constants/comment'; const initialState = { - classNames: [] + commentClassNames: [] }; export default function comment (state = initialState, action) { switch (action.type) { - case ADD_CLASSNAME : + case ADD_COMMENT_CLASSNAME : return { ...state, - classNames: [...state.classNames, action.className] + commentClassNames: [...state.commentClassNames, action.className] }; - case REMOVE_CLASSNAME : + case REMOVE_COMMENT_CLASSNAME : return { ...state, - classNames: [ - ...state.classNames.slice(0, action.idx), - ...state.classNames.slice(action.idx + 1) + commentClassNames: [ + ...state.commentClassNames.slice(0, action.idx), + ...state.commentClassNames.slice(action.idx + 1) ] }; default : diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index 77e4362e2..ff451f9cb 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -9,11 +9,11 @@ export default class OffTopicFilter extends React.Component { handleChange = (e) => { if (e.target.checked) { - this.props.addClassName(this.cn); + this.props.addCommentClassName(this.cn); this.props.toggleCheckbox(); } else { - const idx = this.props.classNames.findIndex((i) => i[this.className]); - this.props.removeClassName(idx); + const idx = this.props.commentClassNames.findIndex((i) => i[this.className]); + this.props.removeCommentClassName(idx); this.props.toggleCheckbox(); } this.props.closeViewingOptions(); diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js index a14c0f80c..f7fe114f3 100644 --- a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js @@ -2,24 +2,24 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {toggleCheckbox} from '../actions'; import { - addClassName, - removeClassName + addCommentClassName, + removeCommentClassName } from 'coral-embed-stream/src/actions/comment'; import OffTopicFilter from '../components/OffTopicFilter'; import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; const mapStateToProps = ({comment, offTopic}) => ({ - classNames: comment.classNames, + commentClassNames: comment.commentClassNames, checked: offTopic.checked }); const mapDispatchToProps = (dispatch) => bindActionCreators( { - addClassName, - removeClassName, toggleCheckbox, - closeViewingOptions + closeViewingOptions, + addCommentClassName, + removeCommentClassName }, dispatch ); From 4725f07757bdb1992374629a1c94483e73ee1dfd Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 09:53:53 -0300 Subject: [PATCH 15/29] Viewing Options state and name conventions --- .../coral-embed-stream/src/actions/stream.js | 8 ------- .../src/constants/stream.js | 2 -- .../coral-embed-stream/src/reducers/stream.js | 17 -------------- client/coral-framework/helpers/plugins.js | 10 ++++----- .../client/containers/OffTopicFilter.js | 4 ++-- .../client/actions.js | 9 ++++++++ .../client/constants.js | 2 ++ .../client/containers/ViewingOptions.js | 4 ++-- .../client/index.js | 2 ++ .../client/reducer.js | 22 +++++++++++++++++++ 10 files changed, 44 insertions(+), 36 deletions(-) create mode 100644 plugins/coral-plugin-viewing-options/client/actions.js create mode 100644 plugins/coral-plugin-viewing-options/client/constants.js create mode 100644 plugins/coral-plugin-viewing-options/client/reducer.js diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js index 68ccdda58..81b57a0fe 100644 --- a/client/coral-embed-stream/src/actions/stream.js +++ b/client/coral-embed-stream/src/actions/stream.js @@ -38,11 +38,3 @@ export const viewAllComments = () => { return {type: actions.VIEW_ALL_COMMENTS}; }; - -export const openViewingOptions = () => ({ - type: actions.OPEN_VIEWING_OPTIONS -}); - -export const closeViewingOptions = () => ({ - type: actions.CLOSE_VIEWING_OPTIONS -}); diff --git a/client/coral-embed-stream/src/constants/stream.js b/client/coral-embed-stream/src/constants/stream.js index 558e0ddd3..cb17edb2f 100644 --- a/client/coral-embed-stream/src/constants/stream.js +++ b/client/coral-embed-stream/src/constants/stream.js @@ -3,5 +3,3 @@ export const SET_COMMENT_COUNT_CACHE = 'SET_COMMENT_COUNT_CACHE'; export const ADDTL_COMMENTS_ON_LOAD_MORE = 10; export const NEW_COMMENT_COUNT_POLL_INTERVAL = 20000; export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS'; -export const OPEN_VIEWING_OPTIONS = 'OPEN_VIEWING_OPTIONS'; -export const CLOSE_VIEWING_OPTIONS = 'CLOSE_VIEWING_OPTIONS'; diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js index 6756ad4a8..59f068530 100644 --- a/client/coral-embed-stream/src/reducers/stream.js +++ b/client/coral-embed-stream/src/reducers/stream.js @@ -20,27 +20,10 @@ const initialState = { assetId: getQueryVariable('asset_id'), assetUrl: getQueryVariable('asset_url'), commentId: getQueryVariable('comment_id'), - viewingOption: { - open: false - } }; export default function stream(state = initialState, action) { switch (action.type) { - case actions.OPEN_VIEWING_OPTIONS: - return { - ...state, - viewingOption: { - open: true - } - }; - case actions.CLOSE_VIEWING_OPTIONS: - return { - ...state, - viewingOption: { - open: false - } - }; case actions.SET_ACTIVE_REPLY_BOX: return { ...state, diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js index a9e5f6408..5568b7517 100644 --- a/client/coral-framework/helpers/plugins.js +++ b/client/coral-framework/helpers/plugins.js @@ -1,17 +1,17 @@ import React from 'react'; -import merge from 'lodash/merge'; -import flatten from 'lodash/flatten'; -import flattenDeep from 'lodash/flattenDeep'; import uniq from 'lodash/uniq'; import pick from 'lodash/pick'; +import merge from 'lodash/merge'; import plugins from 'pluginsConfig'; -import {getDefinitionName, mergeDocuments} from 'coral-framework/utils'; +import flatten from 'lodash/flatten'; +import flattenDeep from 'lodash/flattenDeep'; import {loadTranslations} from 'coral-framework/services/i18n'; +import {getDefinitionName, mergeDocuments} from 'coral-framework/utils'; export const pluginReducers = merge( ...plugins .filter((o) => o.module.reducer) - .map((o) => ({[o.module.reducer.name] : o.module.reducer})) + .map((o) => ({[o.plugin] : o.module.reducer})) ); /** diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js index f7fe114f3..7870dab00 100644 --- a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js @@ -6,9 +6,9 @@ import { removeCommentClassName } from 'coral-embed-stream/src/actions/comment'; import OffTopicFilter from '../components/OffTopicFilter'; -import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; +import {closeViewingOptions} from 'plugins/coral-plugin-viewing-options/client/actions'; -const mapStateToProps = ({comment, offTopic}) => ({ +const mapStateToProps = ({comment, ['coral-plugin-offtopic'] : offTopic}) => ({ commentClassNames: comment.commentClassNames, checked: offTopic.checked }); diff --git a/plugins/coral-plugin-viewing-options/client/actions.js b/plugins/coral-plugin-viewing-options/client/actions.js new file mode 100644 index 000000000..24fcbb4ec --- /dev/null +++ b/plugins/coral-plugin-viewing-options/client/actions.js @@ -0,0 +1,9 @@ +import {OPEN_VIEWING_OPTIONS, CLOSE_VIEWING_OPTIONS} from './constants'; + +export const openViewingOptions = () => ({ + type: OPEN_VIEWING_OPTIONS +}); + +export const closeViewingOptions = () => ({ + type: CLOSE_VIEWING_OPTIONS +}); diff --git a/plugins/coral-plugin-viewing-options/client/constants.js b/plugins/coral-plugin-viewing-options/client/constants.js new file mode 100644 index 000000000..50fe4023d --- /dev/null +++ b/plugins/coral-plugin-viewing-options/client/constants.js @@ -0,0 +1,2 @@ +export const OPEN_VIEWING_OPTIONS = 'OPEN_VIEWING_OPTIONS'; +export const CLOSE_VIEWING_OPTIONS = 'CLOSE_VIEWING_OPTIONS'; \ No newline at end of file diff --git a/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js index 444fc1166..0e0358b86 100644 --- a/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js @@ -2,9 +2,9 @@ import React from 'react'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import ViewingOptions from '../components/ViewingOptions'; -import {openViewingOptions, closeViewingOptions} from 'coral-embed-stream/src/actions/stream'; +import {openViewingOptions, closeViewingOptions} from '../actions'; -const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open}); +const mapStateToProps = ({['coral-plugin-viewing-options']: state}) => ({open: state.open}); const mapDispatchToProps = (dispatch) => bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch); diff --git a/plugins/coral-plugin-viewing-options/client/index.js b/plugins/coral-plugin-viewing-options/client/index.js index ad2574558..519ce42aa 100644 --- a/plugins/coral-plugin-viewing-options/client/index.js +++ b/plugins/coral-plugin-viewing-options/client/index.js @@ -1,6 +1,8 @@ import ViewingOptions from './containers/ViewingOptions'; +import reducer from './reducer'; export default { + reducer, slots: { streamBox: [ViewingOptions] } diff --git a/plugins/coral-plugin-viewing-options/client/reducer.js b/plugins/coral-plugin-viewing-options/client/reducer.js new file mode 100644 index 000000000..8c81e3109 --- /dev/null +++ b/plugins/coral-plugin-viewing-options/client/reducer.js @@ -0,0 +1,22 @@ +import {OPEN_VIEWING_OPTIONS, CLOSE_VIEWING_OPTIONS} from './constants'; + +const initialState = { + open: false +}; + +export default function offTopic (state = initialState, action) { + switch (action.type) { + case OPEN_VIEWING_OPTIONS: + return { + ...state, + open: true + }; + case CLOSE_VIEWING_OPTIONS: + return { + ...state, + open: false + }; + default : + return state; + } +} From 456eedfd311cd0a4737d0f4b4e5824209bd25b13 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 10:04:52 -0300 Subject: [PATCH 16/29] Clearing tags and naming convention --- .../coral-plugin-offtopic/client/actions.js | 4 ++-- .../client/components/OffTopicCheckbox.js | 20 +++++++++++++++---- .../coral-plugin-offtopic/client/constants.js | 2 +- .../coral-plugin-offtopic/client/reducer.js | 4 ++-- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/plugins/coral-plugin-offtopic/client/actions.js b/plugins/coral-plugin-offtopic/client/actions.js index fa5423448..9cb3947f8 100644 --- a/plugins/coral-plugin-offtopic/client/actions.js +++ b/plugins/coral-plugin-offtopic/client/actions.js @@ -1,5 +1,5 @@ -import {TOGGLE_CHECKBOX} from './constants'; +import {OFFTOPIC_TOGGLE_CHECKBOX} from './constants'; export const toggleCheckbox = () => ({ - type: TOGGLE_CHECKBOX + type: OFFTOPIC_TOGGLE_CHECKBOX }); diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js index 67e4b5e4e..4968dc8de 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js @@ -7,12 +7,24 @@ export default class OffTopicCheckbox extends React.Component { label = 'OFF_TOPIC'; - handleChange = (e) => { - if (e.target.checked) { - this.props.addTag(this.label); - } else { + componentDidMount() { + this.clearTagsHook = this.props.registerHook('postSubmit', () => { const idx = this.props.commentBox.tags.indexOf(this.label); this.props.removeTag(idx); + }); + } + + componentWillUnmount() { + this.props.unregisterHook(this.clearTagsHook); + } + + handleChange = (e) => { + const {addTag, removeTag} = this.props; + if (e.target.checked) { + addTag(this.label); + } else { + const idx = this.props.commentBox.tags.indexOf(this.label); + removeTag(idx); } } diff --git a/plugins/coral-plugin-offtopic/client/constants.js b/plugins/coral-plugin-offtopic/client/constants.js index 22418614c..122d7de17 100644 --- a/plugins/coral-plugin-offtopic/client/constants.js +++ b/plugins/coral-plugin-offtopic/client/constants.js @@ -1 +1 @@ -export const TOGGLE_CHECKBOX = 'TOGGLE_CHECKBOX'; +export const OFFTOPIC_TOGGLE_CHECKBOX = 'OFFTOPIC_TOGGLE_CHECKBOX'; diff --git a/plugins/coral-plugin-offtopic/client/reducer.js b/plugins/coral-plugin-offtopic/client/reducer.js index 02c4a3c18..adab987a0 100644 --- a/plugins/coral-plugin-offtopic/client/reducer.js +++ b/plugins/coral-plugin-offtopic/client/reducer.js @@ -1,4 +1,4 @@ -import {TOGGLE_CHECKBOX} from './constants'; +import {OFFTOPIC_TOGGLE_CHECKBOX} from './constants'; const initialState = { checked: false @@ -6,7 +6,7 @@ const initialState = { export default function offTopic (state = initialState, action) { switch (action.type) { - case TOGGLE_CHECKBOX: { + case OFFTOPIC_TOGGLE_CHECKBOX: { return { ...state, checked: !state.checked From d7dfae89a3c856627c057de42a56033ebba4e403 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 12:05:53 -0300 Subject: [PATCH 17/29] Global classNames, and more --- .eslintignore | 1 + .../src/components/Comment.css | 4 ++++ .../src/components/Comment.js | 2 +- client/coral-embed-stream/src/graphql/index.js | 2 +- client/coral-embed-stream/style/default.css | 6 +----- client/coral-framework/components/Slot.css | 4 ---- client/coral-framework/components/Slot.js | 4 ++-- .../client/components/styles.css | 4 +++- .../client/components/ViewingOptions.js | 2 +- .../client/constants.js | 2 +- .../client/reducer.js | 18 +++++++++--------- plugins/coral-plugin-viewing-options/index.js | 2 +- 12 files changed, 25 insertions(+), 26 deletions(-) diff --git a/.eslintignore b/.eslintignore index cd0c80673..6fecd9d9b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -10,4 +10,5 @@ plugins/* !plugins/coral-plugin-like !plugins/coral-plugin-mod !plugins/coral-plugin-love +!plugins/coral-plugin-viewing-options node_modules diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css index 5fab57d95..e0b21a34d 100644 --- a/client/coral-embed-stream/src/components/Comment.css +++ b/client/coral-embed-stream/src/components/Comment.css @@ -97,3 +97,7 @@ .Wizard .textAlignRight { text-align: right; } + +.commentInfoBar { + float: right; +} diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 2a434c3d7..9d0c9627f 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -282,6 +282,7 @@ export default class Comment extends React.Component { { (currentUser && diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js index 1b4ac500b..49ef6c620 100644 --- a/client/coral-embed-stream/src/graphql/index.js +++ b/client/coral-embed-stream/src/graphql/index.js @@ -141,7 +141,7 @@ const extension = { parent_id, asset_id, action_summaries: [], - tags, + tags: tags.map((t) => ({name: t, __typename: 'Tag'})), status: null, replyCount: 0, replies: { diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index a8b7f9c61..0017b87d3 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -493,8 +493,4 @@ button.comment__action-button[disabled], .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon { visibility: visible; } -} - -.offTopicComment { - display: none; -} +} \ No newline at end of file diff --git a/client/coral-framework/components/Slot.css b/client/coral-framework/components/Slot.css index 91569b717..6a95d79ad 100644 --- a/client/coral-framework/components/Slot.css +++ b/client/coral-framework/components/Slot.css @@ -2,10 +2,6 @@ display: inline-block; } -.right { - float: right; -} - .debug { background-color: coral; } \ No newline at end of file diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 342532bdb..22a315623 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -4,9 +4,9 @@ import styles from './Slot.css'; import {connect} from 'react-redux'; import {getSlotElements} from 'coral-framework/helpers/plugins'; -function Slot ({fill, inline = false, right = false, plugin_config: config, ...rest}) { +function Slot ({fill, inline = false, className, plugin_config: config, ...rest}) { return ( -
      +
      {getSlotElements(fill, {...rest, config})}
      ); diff --git a/plugins/coral-plugin-offtopic/client/components/styles.css b/plugins/coral-plugin-offtopic/client/components/styles.css index cf26c9199..e0c9d5cfe 100644 --- a/plugins/coral-plugin-offtopic/client/components/styles.css +++ b/plugins/coral-plugin-offtopic/client/components/styles.css @@ -22,4 +22,6 @@ padding: 5px 0; } - +:global(.offTopicComment) { + display: none; +} diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js index 0a251fd13..f76006c4e 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js @@ -39,4 +39,4 @@ const ViewingOptions = (props) => { ); }; -export default ViewingOptions; \ No newline at end of file +export default ViewingOptions; diff --git a/plugins/coral-plugin-viewing-options/client/constants.js b/plugins/coral-plugin-viewing-options/client/constants.js index 50fe4023d..7ff2dea6f 100644 --- a/plugins/coral-plugin-viewing-options/client/constants.js +++ b/plugins/coral-plugin-viewing-options/client/constants.js @@ -1,2 +1,2 @@ export const OPEN_VIEWING_OPTIONS = 'OPEN_VIEWING_OPTIONS'; -export const CLOSE_VIEWING_OPTIONS = 'CLOSE_VIEWING_OPTIONS'; \ No newline at end of file +export const CLOSE_VIEWING_OPTIONS = 'CLOSE_VIEWING_OPTIONS'; diff --git a/plugins/coral-plugin-viewing-options/client/reducer.js b/plugins/coral-plugin-viewing-options/client/reducer.js index 8c81e3109..fc1278f38 100644 --- a/plugins/coral-plugin-viewing-options/client/reducer.js +++ b/plugins/coral-plugin-viewing-options/client/reducer.js @@ -6,15 +6,15 @@ const initialState = { export default function offTopic (state = initialState, action) { switch (action.type) { - case OPEN_VIEWING_OPTIONS: - return { - ...state, - open: true - }; - case CLOSE_VIEWING_OPTIONS: - return { - ...state, - open: false + case OPEN_VIEWING_OPTIONS: + return { + ...state, + open: true + }; + case CLOSE_VIEWING_OPTIONS: + return { + ...state, + open: false }; default : return state; diff --git a/plugins/coral-plugin-viewing-options/index.js b/plugins/coral-plugin-viewing-options/index.js index a09954537..f053ebf79 100644 --- a/plugins/coral-plugin-viewing-options/index.js +++ b/plugins/coral-plugin-viewing-options/index.js @@ -1 +1 @@ -module.exports = {}; \ No newline at end of file +module.exports = {}; From 20aba92ad2a3934ccf6cab64289529ff29712bd0 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 12:37:59 -0300 Subject: [PATCH 18/29] Linting --- .../client/containers/ViewingOptions.js | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js index 0e0358b86..2d161218b 100644 --- a/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js @@ -1,4 +1,3 @@ -import React from 'react'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import ViewingOptions from '../components/ViewingOptions'; From 8872248d63ffd9cf6bae5f21ce373f7509e990d9 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 13:10:17 -0300 Subject: [PATCH 19/29] Addiing Stable API Architecture --- client/.eslintrc.json | 11 ++++----- client/coral-framework/components/index.js | 1 + client/coral-framework/helpers/camelize.js | 16 +++++++++++++ client/coral-plugin-api/index.js | 1 - plugin-api/.babelrc | 14 +++++++++++ plugin-api/.eslintrc.json | 23 +++++++++++++++++++ plugin-api/alpha/client/actions/index.js | 2 ++ plugin-api/client/actions/index.js | 0 plugin-api/client/components/index.js | 1 + plugin-api/client/hocs/index.js | 1 + .../client/containers/OffTopicCheckbox.js | 2 +- .../client/containers/OffTopicFilter.js | 10 ++++---- .../client/components/ViewingOptions.js | 2 +- webpack.config.js | 1 + 14 files changed, 72 insertions(+), 13 deletions(-) create mode 100644 client/coral-framework/components/index.js create mode 100644 client/coral-framework/helpers/camelize.js delete mode 100644 client/coral-plugin-api/index.js create mode 100644 plugin-api/.babelrc create mode 100644 plugin-api/.eslintrc.json create mode 100644 plugin-api/alpha/client/actions/index.js create mode 100644 plugin-api/client/actions/index.js create mode 100644 plugin-api/client/components/index.js create mode 100644 plugin-api/client/hocs/index.js diff --git a/client/.eslintrc.json b/client/.eslintrc.json index 1144f985d..5735a91a1 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -4,21 +4,20 @@ "es6": true, "mocha": true }, - "extends": "../.eslintrc.json", "parserOptions": { + "sourceType": "module", "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true - }, - "sourceType": "module" + } }, "parser": "babel-eslint", "plugins": [ "react" ], "rules": { - "react/jsx-uses-react": "error", - "react/jsx-uses-vars": "error", - "no-console": ["warn", { "allow": ["warn", "error"] }] + "react/jsx-uses-react": "error", + "react/jsx-uses-vars": "error", + "no-console": ["warn", { "allow": ["warn", "error"] }] } } diff --git a/client/coral-framework/components/index.js b/client/coral-framework/components/index.js new file mode 100644 index 000000000..b7aaef665 --- /dev/null +++ b/client/coral-framework/components/index.js @@ -0,0 +1 @@ +export {default as Slot} from './Slot'; diff --git a/client/coral-framework/helpers/camelize.js b/client/coral-framework/helpers/camelize.js new file mode 100644 index 000000000..ffc09cebb --- /dev/null +++ b/client/coral-framework/helpers/camelize.js @@ -0,0 +1,16 @@ +const regExp = /[-\s]+(.)?/g; + +/** + * Convert dash separated strings to camel case. + * + * @param {String} str + * @return {String} + */ + +export default function camelize(str) { + return str.replace(regExp, toUpper); +} + +function toUpper(match, c) { + return c ? c.toUpperCase() : ''; +} diff --git a/client/coral-plugin-api/index.js b/client/coral-plugin-api/index.js deleted file mode 100644 index f0f5ad9cc..000000000 --- a/client/coral-plugin-api/index.js +++ /dev/null @@ -1 +0,0 @@ -export {withReaction} from '../coral-framework/hocs'; diff --git a/plugin-api/.babelrc b/plugin-api/.babelrc new file mode 100644 index 000000000..63b1c53de --- /dev/null +++ b/plugin-api/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + "es2015" + ], + "plugins": [ + "add-module-exports", + "transform-class-properties", + "transform-decorators-legacy", + "transform-object-assign", + "transform-object-rest-spread", + "transform-async-to-generator", + "transform-react-jsx" + ] +} diff --git a/plugin-api/.eslintrc.json b/plugin-api/.eslintrc.json new file mode 100644 index 000000000..5735a91a1 --- /dev/null +++ b/plugin-api/.eslintrc.json @@ -0,0 +1,23 @@ +{ + "env": { + "browser": true, + "es6": true, + "mocha": true + }, + "parserOptions": { + "sourceType": "module", + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "jsx": true + } + }, + "parser": "babel-eslint", + "plugins": [ + "react" + ], + "rules": { + "react/jsx-uses-react": "error", + "react/jsx-uses-vars": "error", + "no-console": ["warn", { "allow": ["warn", "error"] }] + } +} diff --git a/plugin-api/alpha/client/actions/index.js b/plugin-api/alpha/client/actions/index.js new file mode 100644 index 000000000..e523f2e35 --- /dev/null +++ b/plugin-api/alpha/client/actions/index.js @@ -0,0 +1,2 @@ +export {addTag, removeTag} from 'coral-plugin-commentbox/actions'; +export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/comment'; diff --git a/plugin-api/client/actions/index.js b/plugin-api/client/actions/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/plugin-api/client/components/index.js b/plugin-api/client/components/index.js new file mode 100644 index 000000000..5d76732fc --- /dev/null +++ b/plugin-api/client/components/index.js @@ -0,0 +1 @@ +export {Slot} from 'coral-framework/components'; diff --git a/plugin-api/client/hocs/index.js b/plugin-api/client/hocs/index.js new file mode 100644 index 000000000..7ec875656 --- /dev/null +++ b/plugin-api/client/hocs/index.js @@ -0,0 +1 @@ +export {withReaction} from 'coral-framework/hocs'; diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js index 8566b10e4..2241f0510 100644 --- a/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js @@ -1,6 +1,6 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; -import {addTag, removeTag} from 'coral-plugin-commentbox/actions'; +import {addTag, removeTag} from 'plugin-api/alpha/client/actions'; import OffTopicCheckbox from '../components/OffTopicCheckbox'; const mapStateToProps = ({commentBox}) => ({commentBox}); diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js index 7870dab00..d334bec05 100644 --- a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js @@ -1,14 +1,16 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {toggleCheckbox} from '../actions'; +import OffTopicFilter from '../components/OffTopicFilter'; +import { + closeViewingOptions +} from 'plugins/coral-plugin-viewing-options/client/actions'; import { addCommentClassName, removeCommentClassName -} from 'coral-embed-stream/src/actions/comment'; -import OffTopicFilter from '../components/OffTopicFilter'; -import {closeViewingOptions} from 'plugins/coral-plugin-viewing-options/client/actions'; +} from 'plugin-api/alpha/client/actions'; -const mapStateToProps = ({comment, ['coral-plugin-offtopic'] : offTopic}) => ({ +const mapStateToProps = ({comment, ['coral-plugin-offtopic']: offTopic}) => ({ commentClassNames: comment.commentClassNames, checked: offTopic.checked }); diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js index f76006c4e..5effa156b 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js @@ -2,7 +2,7 @@ import React from 'react'; import cn from 'classnames'; import {Icon} from 'coral-ui'; import styles from './ViewingOptions.css'; -import Slot from 'coral-framework/components/Slot'; +import {Slot} from 'plugin-api/client/components'; const ViewingOptions = (props) => { const toggleOpen = () => { diff --git a/webpack.config.js b/webpack.config.js index ddd2f9577..ce1e0bd29 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -154,6 +154,7 @@ const config = { }, resolve: { alias: { + 'plugin-api': path.resolve(__dirname, 'plugin-api/'), plugins: path.resolve(__dirname, 'plugins/'), pluginsConfig: pluginsConfigPath }, From f6ad9c93737a6bc9e6fb7fa87dc4e6957ad13b98 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 13:14:52 -0300 Subject: [PATCH 20/29] Adding camelcase for plugin reducers :tada: <3 --- client/coral-framework/helpers/plugins.js | 3 ++- .../coral-plugin-offtopic/client/containers/OffTopicFilter.js | 2 +- .../client/containers/ViewingOptions.js | 4 +++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js index af84188c1..e0aa05c80 100644 --- a/client/coral-framework/helpers/plugins.js +++ b/client/coral-framework/helpers/plugins.js @@ -8,6 +8,7 @@ import flattenDeep from 'lodash/flattenDeep'; import {getDefinitionName, mergeDocuments} from 'coral-framework/utils'; import {loadTranslations} from 'coral-framework/services/i18n'; import {injectReducers} from 'coral-framework/services/store'; +import camelize from './camelize'; /** * Returns React Elements for given slot. @@ -98,7 +99,7 @@ export function injectPluginsReducers() { const reducers = merge( ...plugins .filter((o) => o.module.reducer) - .map((o) => ({[o.plugin] : o.module.reducer})) + .map((o) => ({[camelize(o.plugin)] : o.module.reducer})) ); injectReducers(reducers); } diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js index d334bec05..a55562a37 100644 --- a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js @@ -10,7 +10,7 @@ import { removeCommentClassName } from 'plugin-api/alpha/client/actions'; -const mapStateToProps = ({comment, ['coral-plugin-offtopic']: offTopic}) => ({ +const mapStateToProps = ({comment, coralPluginOfftopic: offTopic}) => ({ commentClassNames: comment.commentClassNames, checked: offTopic.checked }); diff --git a/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js index 2d161218b..767a9197d 100644 --- a/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js @@ -3,7 +3,9 @@ import {bindActionCreators} from 'redux'; import ViewingOptions from '../components/ViewingOptions'; import {openViewingOptions, closeViewingOptions} from '../actions'; -const mapStateToProps = ({['coral-plugin-viewing-options']: state}) => ({open: state.open}); +const mapStateToProps = ({coralPluginViewingOptions: state}) => ({ + open: state.open +}); const mapDispatchToProps = (dispatch) => bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch); From 847a30ff92e84aa61b2755f037965bfa33f0947a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 13:19:36 -0300 Subject: [PATCH 21/29] Adding correct classNames --- client/coral-embed-stream/src/components/Stream.js | 2 +- client/coral-embed-stream/style/default.css | 2 +- .../coral-plugin-offtopic/client/components/OffTopicFilter.js | 2 +- plugins/coral-plugin-offtopic/client/components/styles.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 98cbea224..797aee1ae 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -210,7 +210,7 @@ class Stream extends React.Component { /> )} -
      +
      diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 0017b87d3..101dc18cd 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -178,7 +178,7 @@ hr { display: none; } -.streamBox { +.talk-stream-wrapper-box { padding: 10px 0; } diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js index ff451f9cb..fea2ac6fb 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js @@ -4,7 +4,7 @@ import styles from './styles.css'; export default class OffTopicFilter extends React.Component { tag = 'OFF_TOPIC'; - className = 'offTopicComment'; + className = 'coral-plugin-off-topic-comment'; cn = {[this.className] : {tags: [this.tag]}}; handleChange = (e) => { diff --git a/plugins/coral-plugin-offtopic/client/components/styles.css b/plugins/coral-plugin-offtopic/client/components/styles.css index e0c9d5cfe..94d7eaa85 100644 --- a/plugins/coral-plugin-offtopic/client/components/styles.css +++ b/plugins/coral-plugin-offtopic/client/components/styles.css @@ -22,6 +22,6 @@ padding: 5px 0; } -:global(.offTopicComment) { +:global(.coral-plugin-off-topic-comment) { display: none; } From 87ddfea6897456f2a3ed00089b9b0abbc0abab7e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 7 Jun 2017 13:53:33 -0300 Subject: [PATCH 22/29] indexes css --- client/coral-embed-stream/style/default.css | 2 +- .../client/components/ViewingOptions.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 101dc18cd..d132af6c5 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -184,7 +184,7 @@ hr { .commentStreamContainer { position: relative; - z-index: -1; + z-index: 0; } .commentStream { diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css index 3759295c8..7f4e054b3 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css @@ -11,6 +11,7 @@ } .streamViewingOptionsList { + z-index: 10; background: white; position: absolute; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15); From 66e4f02a1a823b58e5c1453dcde2af6267620bd6 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 8 Jun 2017 00:29:05 +0700 Subject: [PATCH 23/29] Selectors, resolving merge errors, better class names, removing comment reducer --- .../coral-embed-stream/src/actions/comment.js | 11 -------- .../coral-embed-stream/src/actions/stream.js | 10 ++++++++ .../src/components/Comment.js | 3 +-- .../src/components/Stream.js | 2 +- .../src/constants/comment.js | 2 -- .../src/constants/stream.js | 2 ++ .../src/containers/Stream.js | 2 +- .../src/reducers/comment.js | 25 ------------------- .../coral-embed-stream/src/reducers/index.js | 2 -- .../coral-embed-stream/src/reducers/stream.js | 14 +++++++++++ client/coral-embed-stream/style/default.css | 4 +-- plugin-api/alpha/client/actions/index.js | 2 +- plugin-api/alpha/client/selectors/index.js | 2 ++ .../client/components/OffTopicCheckbox.js | 4 +-- .../client/containers/OffTopicCheckbox.js | 5 +++- .../client/containers/OffTopicFilter.js | 7 +++--- plugins/coral-plugin-offtopic/client/index.js | 4 +-- .../client/components/ViewingOptions.js | 9 +++---- 18 files changed, 50 insertions(+), 60 deletions(-) delete mode 100644 client/coral-embed-stream/src/actions/comment.js delete mode 100644 client/coral-embed-stream/src/constants/comment.js delete mode 100644 client/coral-embed-stream/src/reducers/comment.js create mode 100644 plugin-api/alpha/client/selectors/index.js diff --git a/client/coral-embed-stream/src/actions/comment.js b/client/coral-embed-stream/src/actions/comment.js deleted file mode 100644 index b48e29798..000000000 --- a/client/coral-embed-stream/src/actions/comment.js +++ /dev/null @@ -1,11 +0,0 @@ -import {ADD_COMMENT_CLASSNAME, REMOVE_COMMENT_CLASSNAME} from '../constants/comment'; - -export const addCommentClassName = (className) => ({ - type: ADD_COMMENT_CLASSNAME, - className -}); - -export const removeCommentClassName = (idx) => ({ - type: REMOVE_COMMENT_CLASSNAME, - idx -}); diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js index 6a9e47838..9b5d94a9b 100644 --- a/client/coral-embed-stream/src/actions/stream.js +++ b/client/coral-embed-stream/src/actions/stream.js @@ -37,3 +37,13 @@ export const viewAllComments = () => { return {type: actions.VIEW_ALL_COMMENTS}; }; + +export const addCommentClassName = (className) => ({ + type: actions.ADD_COMMENT_CLASSNAME, + className +}); + +export const removeCommentClassName = (idx) => ({ + type: actions.REMOVE_COMMENT_CLASSNAME, + idx +}); diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 53be600dc..b5eca4ff2 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -381,10 +381,9 @@ export default class Comment extends React.Component { return (
      - :
      + :
      ({ assetUrl: state.stream.assetUrl, activeTab: state.embed.activeTab, previousTab: state.embed.previousTab, - commentClassNames: state.comment.commentClassNames + commentClassNames: state.stream.commentClassNames }); const mapDispatchToProps = (dispatch) => diff --git a/client/coral-embed-stream/src/reducers/comment.js b/client/coral-embed-stream/src/reducers/comment.js deleted file mode 100644 index 7cee8d3c8..000000000 --- a/client/coral-embed-stream/src/reducers/comment.js +++ /dev/null @@ -1,25 +0,0 @@ -import {ADD_COMMENT_CLASSNAME, REMOVE_COMMENT_CLASSNAME} from '../constants/comment'; - -const initialState = { - commentClassNames: [] -}; - -export default function comment (state = initialState, action) { - switch (action.type) { - case ADD_COMMENT_CLASSNAME : - return { - ...state, - commentClassNames: [...state.commentClassNames, action.className] - }; - case REMOVE_COMMENT_CLASSNAME : - return { - ...state, - commentClassNames: [ - ...state.commentClassNames.slice(0, action.idx), - ...state.commentClassNames.slice(action.idx + 1) - ] - }; - default : - return state; - } -} diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js index 8366a64f5..61fe950c9 100644 --- a/client/coral-embed-stream/src/reducers/index.js +++ b/client/coral-embed-stream/src/reducers/index.js @@ -1,5 +1,4 @@ import embed from './embed'; -import comment from './comment'; import config from './config'; import stream from './stream'; @@ -7,5 +6,4 @@ export default { embed, config, stream, - comment }; diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js index 59f068530..9e03e3528 100644 --- a/client/coral-embed-stream/src/reducers/stream.js +++ b/client/coral-embed-stream/src/reducers/stream.js @@ -20,6 +20,7 @@ const initialState = { assetId: getQueryVariable('asset_id'), assetUrl: getQueryVariable('asset_url'), commentId: getQueryVariable('comment_id'), + commentClassNames: [] }; export default function stream(state = initialState, action) { @@ -39,6 +40,19 @@ export default function stream(state = initialState, action) { ...state, commentId: '', }; + case actions.ADD_COMMENT_CLASSNAME : + return { + ...state, + commentClassNames: [...state.commentClassNames, action.className] + }; + case actions.REMOVE_COMMENT_CLASSNAME : + return { + ...state, + commentClassNames: [ + ...state.commentClassNames.slice(0, action.idx), + ...state.commentClassNames.slice(action.idx + 1) + ] + }; default: return state; } diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index d132af6c5..c9304c0cf 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -182,7 +182,7 @@ hr { padding: 10px 0; } -.commentStreamContainer { +.talk-stream-comments-container { position: relative; z-index: 0; } @@ -493,4 +493,4 @@ button.comment__action-button[disabled], .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon { visibility: visible; } -} \ No newline at end of file +} diff --git a/plugin-api/alpha/client/actions/index.js b/plugin-api/alpha/client/actions/index.js index e523f2e35..8e8e11c0a 100644 --- a/plugin-api/alpha/client/actions/index.js +++ b/plugin-api/alpha/client/actions/index.js @@ -1,2 +1,2 @@ export {addTag, removeTag} from 'coral-plugin-commentbox/actions'; -export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/comment'; +export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/stream'; diff --git a/plugin-api/alpha/client/selectors/index.js b/plugin-api/alpha/client/selectors/index.js new file mode 100644 index 000000000..ad76326cf --- /dev/null +++ b/plugin-api/alpha/client/selectors/index.js @@ -0,0 +1,2 @@ +export const commentBoxTagsSelector = (state) => state.commentBox.tags; +export const commentClassNamesSelector = (state) => state.stream.commentClassNames; diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js index 4968dc8de..89d8224f8 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js @@ -9,7 +9,7 @@ export default class OffTopicCheckbox extends React.Component { componentDidMount() { this.clearTagsHook = this.props.registerHook('postSubmit', () => { - const idx = this.props.commentBox.tags.indexOf(this.label); + const idx = this.props.tags.indexOf(this.label); this.props.removeTag(idx); }); } @@ -23,7 +23,7 @@ export default class OffTopicCheckbox extends React.Component { if (e.target.checked) { addTag(this.label); } else { - const idx = this.props.commentBox.tags.indexOf(this.label); + const idx = this.props.tags.indexOf(this.label); removeTag(idx); } } diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js index 2241f0510..286fa8d9d 100644 --- a/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js @@ -1,9 +1,12 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {addTag, removeTag} from 'plugin-api/alpha/client/actions'; +import {commentBoxTagsSelector} from 'plugin-api/alpha/client/selectors'; import OffTopicCheckbox from '../components/OffTopicCheckbox'; -const mapStateToProps = ({commentBox}) => ({commentBox}); +const mapStateToProps = (state) => ({ + tags: commentBoxTagsSelector(state) +}); const mapDispatchToProps = (dispatch) => bindActionCreators({addTag, removeTag}, dispatch); diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js index a55562a37..98f5f7aea 100644 --- a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js +++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js @@ -1,6 +1,7 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {toggleCheckbox} from '../actions'; +import {commentClassNamesSelector} from 'plugin-api/alpha/client/selectors'; import OffTopicFilter from '../components/OffTopicFilter'; import { closeViewingOptions @@ -10,9 +11,9 @@ import { removeCommentClassName } from 'plugin-api/alpha/client/actions'; -const mapStateToProps = ({comment, coralPluginOfftopic: offTopic}) => ({ - commentClassNames: comment.commentClassNames, - checked: offTopic.checked +const mapStateToProps = (state) => ({ + commentClassNames: commentClassNamesSelector(state), + checked: state.coralPluginOfftopic.checked }); const mapDispatchToProps = (dispatch) => diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js index ff65f3351..383c7351e 100644 --- a/plugins/coral-plugin-offtopic/client/index.js +++ b/plugins/coral-plugin-offtopic/client/index.js @@ -14,7 +14,7 @@ export default { reducer, slots: { commentInputDetailArea: [OffTopicCheckbox], - streamViewingOptions: [OffTopicFilter], - commentInfoBar: [OffTopicTag] + commentInfoBar: [OffTopicTag], + viewingOptions: [OffTopicFilter] } }; diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js index 5effa156b..9a562dac2 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js @@ -12,9 +12,8 @@ const ViewingOptions = (props) => { props.closeViewingOptions(); } }; - return ( -
      +
      { props.open ? ( -
      +