From c6189e8b3afccbed11eba7672337821e01cdf1fd Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 7 Apr 2017 14:05:23 -0300 Subject: [PATCH 01/24] Slots and off topic plugin --- client/coral-framework/components/Slot.css | 3 +++ client/coral-plugin-commentbox/styles.css | 6 ++++++ 2 files changed, 9 insertions(+) create mode 100644 client/coral-framework/components/Slot.css create mode 100644 client/coral-plugin-commentbox/styles.css diff --git a/client/coral-framework/components/Slot.css b/client/coral-framework/components/Slot.css new file mode 100644 index 000000000..6048da181 --- /dev/null +++ b/client/coral-framework/components/Slot.css @@ -0,0 +1,3 @@ +.inline { + display: inline-block; +} diff --git a/client/coral-plugin-commentbox/styles.css b/client/coral-plugin-commentbox/styles.css new file mode 100644 index 000000000..d0f851f18 --- /dev/null +++ b/client/coral-plugin-commentbox/styles.css @@ -0,0 +1,6 @@ +.slot { + display: inline-block; + div { + display: inline-block; + } +} From aef0f433c9f06315238ddae86d55e22dcd1db158 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 7 Apr 2017 14:12:51 -0300 Subject: [PATCH 02/24] Slots and off topic plugin --- client/coral-embed-stream/src/Comment.js | 2 +- client/coral-framework/components/Slot.js | 5 +++-- client/coral-plugin-commentbox/CommentBox.js | 3 +++ plugins/coral-plugin-respect/client/index.js | 1 + 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 45f2ef084..7928320e2 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -158,7 +158,7 @@ class Comment extends React.Component { ? : null } - +
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 3d1d61328..c1e5dfe65 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -1,11 +1,12 @@ import React, {Component} from 'react'; import {getSlotElements} from 'coral-framework/helpers/plugins'; +import styles from './Slot.css'; class Slot extends Component { render() { - const {fill, ...rest} = this.props; + const {fill, inline = false, ...rest} = this.props; return ( -
+
{getSlotElements(fill, rest)}
); diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 19472ef70..3b2aa887d 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -2,6 +2,8 @@ import React, {Component, PropTypes} from 'react'; import {I18n} from '../coral-framework'; import translations from './translations.json'; import {Button} from 'coral-ui'; +import {Slot} from 'coral-framework'; +import styles from './styles.css'; const name = 'coral-plugin-commentbox'; @@ -102,6 +104,7 @@ class CommentBox extends Component { `${charCount - length} ${lang.t('characters-remaining')}` }
+
{ isReply && ( diff --git a/plugins/coral-plugin-respect/client/index.js b/plugins/coral-plugin-respect/client/index.js index 2caa6611b..a336786d6 100644 --- a/plugins/coral-plugin-respect/client/index.js +++ b/plugins/coral-plugin-respect/client/index.js @@ -1,4 +1,5 @@ import RespectButton from './containers/RespectButton'; + export default { slots: { commentDetail: [RespectButton], From e888161fe4c0fd2dc2df064e05376658b859c7b9 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 11 Apr 2017 11:23:23 -0300 Subject: [PATCH 03/24] off topic plugins, and examples --- .gitignore | 2 ++ client/coral-embed-stream/src/Comment.js | 2 +- client/coral-plugin-commentbox/CommentBox.js | 2 +- plugins/coral-plugin-offtopic/client/.babelrc | 14 +++++++++ .../client/.eslintrc.json | 23 ++++++++++++++ .../client/components/OffTopicCheckbox.js | 22 ++++++++++++++ .../client/components/OffTopicTag.js | 9 ++++++ .../client/components/styles.css | 13 ++++++++ plugins/coral-plugin-offtopic/client/index.js | 9 ++++++ plugins/coral-plugin-offtopic/index.js | 3 ++ plugins/coral-plugin-x/client/.babelrc | 14 +++++++++ plugins/coral-plugin-x/client/.eslintrc.json | 23 ++++++++++++++ .../client/components/OffTopicBadge.js | 15 ++++++++++ .../client/components/OffTopicCheckbox.js | 21 +++++++++++++ .../client/components/style.css | 30 +++++++++++++++++++ plugins/coral-plugin-x/client/index.js | 9 ++++++ .../coral-plugin-x/client/translations.json | 10 +++++++ plugins/coral-plugin-x/index.js | 2 ++ 18 files changed, 221 insertions(+), 2 deletions(-) create mode 100644 plugins/coral-plugin-offtopic/client/.babelrc create mode 100644 plugins/coral-plugin-offtopic/client/.eslintrc.json create mode 100644 plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js create mode 100644 plugins/coral-plugin-offtopic/client/components/OffTopicTag.js create mode 100644 plugins/coral-plugin-offtopic/client/components/styles.css create mode 100644 plugins/coral-plugin-offtopic/client/index.js create mode 100644 plugins/coral-plugin-offtopic/index.js create mode 100644 plugins/coral-plugin-x/client/.babelrc create mode 100644 plugins/coral-plugin-x/client/.eslintrc.json create mode 100644 plugins/coral-plugin-x/client/components/OffTopicBadge.js create mode 100644 plugins/coral-plugin-x/client/components/OffTopicCheckbox.js create mode 100644 plugins/coral-plugin-x/client/components/style.css create mode 100644 plugins/coral-plugin-x/client/index.js create mode 100644 plugins/coral-plugin-x/client/translations.json create mode 100644 plugins/coral-plugin-x/index.js diff --git a/.gitignore b/.gitignore index 8982613ac..b87f2b6d7 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,5 @@ plugins.json plugins/* !plugins/coral-plugin-facebook-auth !plugins/coral-plugin-respect +!plugins/coral-plugin-* + diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 7928320e2..ccd6b3d61 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -158,7 +158,7 @@ class Comment extends React.Component { ? : null } - +
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 3b2aa887d..2592614cc 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -104,7 +104,7 @@ class CommentBox extends Component { `${charCount - length} ${lang.t('characters-remaining')}` }
- +
{ isReply && ( diff --git a/plugins/coral-plugin-offtopic/client/.babelrc b/plugins/coral-plugin-offtopic/client/.babelrc new file mode 100644 index 000000000..60be246eb --- /dev/null +++ b/plugins/coral-plugin-offtopic/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-offtopic/client/.eslintrc.json b/plugins/coral-plugin-offtopic/client/.eslintrc.json new file mode 100644 index 000000000..9fe56bd14 --- /dev/null +++ b/plugins/coral-plugin-offtopic/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/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js new file mode 100644 index 000000000..d713fba3f --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js @@ -0,0 +1,22 @@ +import React from 'react'; +import styles from './styles.css'; + +class OffTopicCheckbox extends React.Component { + + handleChange = () => { + console.log('handle Change'); + } + + render() { + return ( +
+ +
+ ) + } +} + +export default OffTopicCheckbox; diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js new file mode 100644 index 000000000..83ba00dec --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js @@ -0,0 +1,9 @@ +import React from 'react'; +import styles from './styles.css'; + +export default (props) => ( + + {console.log('Offtopic tag', props.offtopic)} + Off-topic + +); diff --git a/plugins/coral-plugin-offtopic/client/components/styles.css b/plugins/coral-plugin-offtopic/client/components/styles.css new file mode 100644 index 000000000..e33a7484e --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/components/styles.css @@ -0,0 +1,13 @@ +.offTopic { + label { + padding: 10px 20px; + } +} + +.tag { + padding: 0 12px; + background: coral; + border-radius: 3px; +} + + diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js new file mode 100644 index 000000000..c006c9a9e --- /dev/null +++ b/plugins/coral-plugin-offtopic/client/index.js @@ -0,0 +1,9 @@ +import OffTopicCheckbox from './components/OffTopicCheckbox'; +import OffTopicTag from './components/OffTopicTag'; + +export default { + slots: { + commentBoxDetail: [OffTopicCheckbox], + commentInfoBar: [OffTopicTag] + } +}; diff --git a/plugins/coral-plugin-offtopic/index.js b/plugins/coral-plugin-offtopic/index.js new file mode 100644 index 000000000..f4d625303 --- /dev/null +++ b/plugins/coral-plugin-offtopic/index.js @@ -0,0 +1,3 @@ +module.exports = { + +}; diff --git a/plugins/coral-plugin-x/client/.babelrc b/plugins/coral-plugin-x/client/.babelrc new file mode 100644 index 000000000..60be246eb --- /dev/null +++ b/plugins/coral-plugin-x/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-x/client/.eslintrc.json b/plugins/coral-plugin-x/client/.eslintrc.json new file mode 100644 index 000000000..9fe56bd14 --- /dev/null +++ b/plugins/coral-plugin-x/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/plugins/coral-plugin-x/client/components/OffTopicBadge.js b/plugins/coral-plugin-x/client/components/OffTopicBadge.js new file mode 100644 index 000000000..647ff1ea9 --- /dev/null +++ b/plugins/coral-plugin-x/client/components/OffTopicBadge.js @@ -0,0 +1,15 @@ +import React, {Component} from 'react'; +import styles from './style.css'; + +class OffTopicBadge extends Component { + render() { + return ( + + OffTopicCheckbox + + ); + } +} + +export default OffTopicBadge; + diff --git a/plugins/coral-plugin-x/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-x/client/components/OffTopicCheckbox.js new file mode 100644 index 000000000..715877b42 --- /dev/null +++ b/plugins/coral-plugin-x/client/components/OffTopicCheckbox.js @@ -0,0 +1,21 @@ +import React, {Component} from 'react'; +import styles from './style.css'; + +class OffTopicCheckbox extends Component { + constructor () { + this.state = { + checked: false; + } + } + render() { + return ( +
+ OffTopicCheckbox + + ); + } +} + +export default OffTopicCheckbox; + diff --git a/plugins/coral-plugin-x/client/components/style.css b/plugins/coral-plugin-x/client/components/style.css new file mode 100644 index 000000000..32f9a8959 --- /dev/null +++ b/plugins/coral-plugin-x/client/components/style.css @@ -0,0 +1,30 @@ +.respect { + display: inline-block; + } + +.button { + color: #2a2a2a; + margin: 5px 10px 5px 0px; + background: none; + padding: 0px; + border: none; + font-size: inherit; + + &:hover { + color: #767676; + cursor: pointer; + } + + &.respected { + color: #c98211; + + &:hover { + color: #e59614; + cursor: pointer; + } + } +} + +.icon { + padding: 0 5px; +} diff --git a/plugins/coral-plugin-x/client/index.js b/plugins/coral-plugin-x/client/index.js new file mode 100644 index 000000000..920417f44 --- /dev/null +++ b/plugins/coral-plugin-x/client/index.js @@ -0,0 +1,9 @@ +import OffTopicCheckbox from './components/OffTopicCheckbox'; +import OffTopicBadge from './components/OffTopicBadge'; + +export default { + slots: { + commentBoxDetail: [OffTopicCheckbox], + commentInfoBar: [OffTopicBadge] + } +}; diff --git a/plugins/coral-plugin-x/client/translations.json b/plugins/coral-plugin-x/client/translations.json new file mode 100644 index 000000000..643f32ccf --- /dev/null +++ b/plugins/coral-plugin-x/client/translations.json @@ -0,0 +1,10 @@ +{ + "en": { + "respect": "Respect", + "respected": "Respected" + }, + "es": { + "respect": "Respeto", + "respected": "Respetado" + } +} diff --git a/plugins/coral-plugin-x/index.js b/plugins/coral-plugin-x/index.js new file mode 100644 index 000000000..631f37565 --- /dev/null +++ b/plugins/coral-plugin-x/index.js @@ -0,0 +1,2 @@ +module.exports = { +} From 6aad4411d9e34dcd6961ad8197a8bbd27d91705c Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 11 Apr 2017 11:57:08 -0300 Subject: [PATCH 04/24] Styling for plugins --- client/coral-plugin-commentbox/CommentBox.js | 2 +- .../client/components/OffTopicCheckbox.js | 2 +- .../client/components/OffTopicTag.js | 1 - .../client/components/styles.css | 17 +++++++++++------ 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 2592614cc..5ba952d4d 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -104,8 +104,8 @@ class CommentBox extends Component { `${charCount - length} ${lang.t('characters-remaining')}` }
-
+ { isReply && ( ) From 7fca451263dba47e13573f8a4a30f0d2df9b7bba Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 12 Apr 2017 19:21:55 -0300 Subject: [PATCH 17/24] Immutable plugins --- .../graphql/mutations/index.js | 4 +- client/coral-plugin-commentbox/CommentBox.js | 143 ++++++++++-------- .../client/components/OffTopicCheckbox.js | 38 +++-- 3 files changed, 107 insertions(+), 78 deletions(-) diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js index 16bac9b1a..8b1feed66 100644 --- a/client/coral-framework/graphql/mutations/index.js +++ b/client/coral-framework/graphql/mutations/index.js @@ -16,7 +16,7 @@ export const postComment = graphql(POST_COMMENT, { props: ({ownProps, mutate}) => ({ postItem: comment => { const {asset_id, body, parent_id, tags = []} = comment; - + console.log(tags) return mutate({ variables: { comment @@ -77,7 +77,7 @@ export const postComment = graphql(POST_COMMENT, { return updatedAsset; } } - }) + }); } }), }); diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index a25dbc76c..c506da0cc 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -8,49 +8,42 @@ const name = 'coral-plugin-commentbox'; class CommentBox extends Component { - static propTypes = { - commentPostedHandler: PropTypes.func, - postItem: PropTypes.func.isRequired, - cancelButtonClicked: PropTypes.func, - assetId: PropTypes.string.isRequired, - parentId: PropTypes.string, - authorId: PropTypes.string.isRequired, - isReply: PropTypes.bool.isRequired, - canPost: PropTypes.bool, - currentUser: PropTypes.object + constructor(props) { + super(props); + + this.state = { + username: '', + comment: { + body: '', + tags: [] + }, + hooks: { + preSubmit: [], + postSubmit: [] + } + }; } - state = { - body: '', - username: '', - hooks: { - preSubmit: [], - postSubmit: [] - } - } + updateComment = cb => this.setState(cb); postComment = () => { const { - commentPostedHandler, - postItem, - assetId, - updateCountCache, isReply, - countCache, + assetId, parentId, + postItem, + countCache, addNotification, - authorId + updateCountCache, + commentPostedHandler, } = this.props; let comment = { - body: this.state.body, asset_id: assetId, - parent_id: parentId + parent_id: parentId, + ...this.state.comment }; - if (this.props.charCount && this.state.body.length > this.props.charCount) { - return; - } !isReply && updateCountCache(assetId, countCache + 1); // Execute preSubmit Hooks @@ -75,33 +68,37 @@ class CommentBox extends Component { commentPostedHandler(); } }) - .catch((err) => console.error(err)); - this.setState({body: ''}); + .catch((err) => console.error(err)); + + this.setState({ + comment: { + ...this.state.comment, + body: '' + } + }); } registerHook = (hookType = '', hook = () => {}) => { - if (typeof hook === 'function') { - if (typeof hookType === 'string') { - this.setState(state => ({ - hooks: { - ...state.hooks, - [hookType]: [ - ...state.hooks[hookType], - hook - ] - } - })); + if (typeof hook !== 'function') { + return console.warn(`Hooks must be functions. Please check your ${hookType} hooks`); + } else if (typeof hookType === 'string') { + this.setState(state => ({ + hooks: { + ...state.hooks, + [hookType]: [ + ...state.hooks[hookType], + hook + ] + } + })); - return { - hookType, - hook - }; + return { + hookType, + hook + }; - } else { - console.warn('hookTypes must be a string. Please check your hooks'); - } } else { - console.warn(`Hooks must be functions. Please check your ${hookType} hooks`); + return console.warn('hookTypes must be a string. Please check your hooks'); } } @@ -129,10 +126,21 @@ class CommentBox extends Component { }); } + handleChange = e => { + this.setState({ + comment: { + ...this.state.comment, + body: e.target.value + } + }); + } + render () { const {styles, isReply, authorId, charCount} = this.props; let {cancelButtonClicked} = this.props; - const length = this.state.body.length; + + const length = this.state.comment.body.length; + const enablePostComment = !length || (charCount && length > charCount); if (isReply && typeof cancelButtonClicked !== 'function') { console.warn('the CommentBox component should have a cancelButtonClicked callback defined if it lives in a Reply'); @@ -151,46 +159,39 @@ class CommentBox extends Component {