From 95e820e9de17de78186da683d21a039ba15f74de Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 3 Jul 2017 09:25:18 -0300 Subject: [PATCH 01/53] Creating Tag Featured --- .eslintignore | 2 ++ .gitignore | 1 + .../client/.babelrc | 14 +++++++++++ .../client/.eslintrc.json | 23 +++++++++++++++++++ .../talk-plugin-featured-comments/index.js | 14 +++++++++++ .../package.json | 8 +++++++ 6 files changed, 62 insertions(+) create mode 100644 plugins/talk-plugin-featured-comments/client/.babelrc create mode 100644 plugins/talk-plugin-featured-comments/client/.eslintrc.json create mode 100644 plugins/talk-plugin-featured-comments/index.js create mode 100644 plugins/talk-plugin-featured-comments/package.json diff --git a/.eslintignore b/.eslintignore index 3a259c106..afa7bf16d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -13,4 +13,6 @@ plugins/* !plugins/coral-plugin-viewing-options !plugins/coral-plugin-comment-content !plugins/talk-plugin-permalink +!plugins/talk-plugin-featured-comments + node_modules diff --git a/.gitignore b/.gitignore index 0be1266c6..bd8edcd94 100644 --- a/.gitignore +++ b/.gitignore @@ -26,5 +26,6 @@ plugins/* !plugins/coral-plugin-viewing-options !plugins/coral-plugin-comment-content !plugins/talk-plugin-permalink +!plugins/talk-plugin-featured-comments **/node_modules/* diff --git a/plugins/talk-plugin-featured-comments/client/.babelrc b/plugins/talk-plugin-featured-comments/client/.babelrc new file mode 100644 index 000000000..60be246eb --- /dev/null +++ b/plugins/talk-plugin-featured-comments/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/talk-plugin-featured-comments/client/.eslintrc.json b/plugins/talk-plugin-featured-comments/client/.eslintrc.json new file mode 100644 index 000000000..9fe56bd14 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/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/talk-plugin-featured-comments/index.js b/plugins/talk-plugin-featured-comments/index.js new file mode 100644 index 000000000..88f8344ae --- /dev/null +++ b/plugins/talk-plugin-featured-comments/index.js @@ -0,0 +1,14 @@ +module.exports = { + tags: [ + { + name: 'FEATURED', + permissions: { + public: true, + self: true, + roles: [] + }, + models: ['COMMENTS'], + created_at: new Date() + } + ] +}; diff --git a/plugins/talk-plugin-featured-comments/package.json b/plugins/talk-plugin-featured-comments/package.json new file mode 100644 index 000000000..0ecae78be --- /dev/null +++ b/plugins/talk-plugin-featured-comments/package.json @@ -0,0 +1,8 @@ +{ + "name": "talk-plugin-featured-comments", + "version": "1.0.0", + "description": "", + "main": "index.js", + "author": "Belen Curcio ", + "license": "ISC" +} From b8020d53479ccf2d203132adb3a89200ab38d4dc Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 3 Jul 2017 10:15:57 -0300 Subject: [PATCH 02/53] Adding talk-plugins-featured-comments to the default json --- plugins.default.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/plugins.default.json b/plugins.default.json index 3bc2e41bf..a03e638eb 100644 --- a/plugins.default.json +++ b/plugins.default.json @@ -4,7 +4,8 @@ "coral-plugin-like", "coral-plugin-respect", "coral-plugin-offtopic", - "coral-plugin-facebook-auth" + "coral-plugin-facebook-auth", + "talk-plugin-featured-comments" ], "client": [ "coral-plugin-respect", @@ -13,6 +14,7 @@ "coral-plugin-offtopic", "coral-plugin-viewing-options", "coral-plugin-comment-content", - "talk-plugin-permalink" + "talk-plugin-permalink", + "talk-plugin-featured-comments" ] } From e3aecd645e999c4839c329679951b9bf699a0bdc Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 3 Jul 2017 10:16:35 -0300 Subject: [PATCH 03/53] =?UTF-8?q?=C3=81dding=20withTags=20hoc,=20and=20cre?= =?UTF-8?q?ating=20withTags=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Comment.js | 1 + .../client/components/FeaturedButton.js | 16 ++ .../client/components/FeaturedTag.js | 17 ++ .../client/components/styles.css | 0 .../client/components/withTags.js | 186 ++++++++++++++++++ .../client/index.js | 11 ++ .../client/translations.json | 3 + 7 files changed, 234 insertions(+) create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js create mode 100644 plugins/talk-plugin-featured-comments/client/components/styles.css create mode 100644 plugins/talk-plugin-featured-comments/client/components/withTags.js create mode 100644 plugins/talk-plugin-featured-comments/client/index.js create mode 100644 plugins/talk-plugin-featured-comments/client/translations.json diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 2e854633b..649adb941 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -496,6 +496,7 @@ export default class Comment extends React.Component { fill="commentReactions" data={this.props.data} root={this.props.root} + asset={asset} comment={comment} commentId={comment.id} inline diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js new file mode 100644 index 000000000..31f7ee32c --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js @@ -0,0 +1,16 @@ +import React from 'react'; +import withTags from './withTags'; + +class FeaturedButton extends React.Component { + render() { + const {alreadyTagged, deleteTag, postTag} = this.props; + return ( + + ); + } +} + +export default withTags('featured')(FeaturedButton); + \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js new file mode 100644 index 000000000..23f62a6d8 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js @@ -0,0 +1,17 @@ +import React from 'react'; +import styles from './styles.css'; +import {t} from 'plugin-api/beta/client/services'; + +const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length; + +export default (props) => ( + + { + isFeatured(props.comment.tags) && props.depth === 0 ? ( + + Featured + + ) : null + } + +); diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css new file mode 100644 index 000000000..e69de29bb diff --git a/plugins/talk-plugin-featured-comments/client/components/withTags.js b/plugins/talk-plugin-featured-comments/client/components/withTags.js new file mode 100644 index 000000000..4e7401577 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/withTags.js @@ -0,0 +1,186 @@ +import React from 'react'; +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {compose, gql} from 'react-apollo'; +import {getDisplayName} from 'coral-framework/helpers/hoc'; +import {capitalize} from 'coral-framework/helpers/strings'; +import withMutation from 'coral-framework/hocs/withMutation'; +import withFragments from 'coral-framework/hocs/withFragments'; +import {showSignInDialog} from 'coral-framework/actions/auth'; +import {addNotification} from 'coral-framework/actions/notification'; + +export default (tag) => (WrappedComponent) => { + if (typeof tag !== 'string') { + console.error('Tag must be a valid string'); + return null; + } + + tag = tag.toLowerCase(); + const Tag = capitalize(tag); + + const COMMENT_FRAGMENT = gql` + fragment Coral_UpdateFragment on Comment { + tags { + tag { + name + } + } + } + `; + + const withAddTag = withMutation( + gql` + mutation AddTag($id: ID!, $asset_id: ID!, $name: String!) { + addTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) { + ...ModifyTagResponse + } + } + `, { + props: ({mutate}) => ({ + addTag: ({id, name, assetId}) => { + return mutate({ + variables: { + id, + name, + asset_id: assetId + }, + optimisticResponse: { + addTag: { + __typename: 'ModifyTagResponse', + errors: null, + } + }, + update: (proxy) => { + const fragmentId = `Comment_${id}`; + + // Read the data from our cache for this query. + const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId}); + + data.tags.push({ + tag: { + __typename: 'Tag', + name: Tag.toUpperCase() + }, + __typename: 'TagLink' + }); + + // Write our data back to the cache. + proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data}); + }, + }); + }}), + }); + + const withRemoveTag = withMutation( + gql` + mutation RemoveTag($id: ID!, $asset_id: ID!, $name: String!) { + removeTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) { + ...ModifyTagResponse + } + } + `, { + props: ({mutate}) => ({ + removeTag: ({id, name, assetId}) => { + return mutate({ + variables: { + id, + name, + asset_id: assetId + }, + optimisticResponse: { + removeTag: { + __typename: 'ModifyTagResponse', + errors: null, + } + }, + update: (proxy) => { + const fragmentId = `Comment_${id}`; + + // Read the data from our cache for this query. + const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId}); + + const idx = data.tags.findIndex((i) => i.tag.name === Tag.toUpperCase()); + + data.tags = [...data.tags.slice(0, idx), ...data.tags.slice(idx + 1)]; + + // Write our data back to the cache. + proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data}); + } + }); + }}), + }); + + class WithTags extends React.Component { + + postTag = () => { + console.log(this.props); + + const {comment, asset} = this.props; + + this.props.addTag({ + id: comment.id, + name: Tag.toUpperCase(), + assetId: asset.id + }); + + console.log('Post Tag'); + } + + deleteTag = () => { + const {comment, asset} = this.props; + + this.props.removeTag({ + id: comment.id, + name: Tag.toUpperCase(), + assetId: asset.id + }); + + console.log('delete Tag'); + } + + + + render() { + const {comment} = this.props; + + const isTagged = (tags) => !!tags.filter((t) => t.tag.name === Tag.toUpperCase()).length; + + const alreadyTagged = isTagged(comment.tags); + + return ; + } + } + + const mapStateToProps = (state) => ({ + user: state.auth.toJS().user, + }); + + const mapDispatchToProps = (dispatch) => + bindActionCreators({showSignInDialog, addNotification}, dispatch); + + const enhance = compose( + withFragments({ + comment: gql` + fragment ${Tag}Button_comment on Comment { + tags { + tag { + name + } + } + }` + }), + connect(mapStateToProps, mapDispatchToProps), + withAddTag, + withRemoveTag + ); + + WithTags.displayName = `WithTags(${getDisplayName(WrappedComponent)})`; + + return enhance(WithTags); +}; diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js new file mode 100644 index 000000000..613d70d13 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -0,0 +1,11 @@ +import translations from './translations.json'; +import FeaturedTag from './components/FeaturedTag'; +import FeaturedButton from './components/FeaturedButton'; + +export default { + translations, + slots: { + commentInfoBar: [FeaturedTag], + commentReactions: [FeaturedButton] + } +}; diff --git a/plugins/talk-plugin-featured-comments/client/translations.json b/plugins/talk-plugin-featured-comments/client/translations.json new file mode 100644 index 000000000..077404aaa --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/translations.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file From 23ebe9f8e3749518044515ba447047a28b08b989 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 3 Jul 2017 11:46:34 -0300 Subject: [PATCH 04/53] Translations and functionality --- .../client/components/FeaturedButton.js | 38 +++++++++++++------ .../client/components/FeaturedTag.js | 2 +- .../client/components/styles.css | 33 ++++++++++++++++ .../client/components/withTags.js | 10 +---- .../client/translations.json | 9 ++++- 5 files changed, 70 insertions(+), 22 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js index 31f7ee32c..0e68b8b70 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js @@ -1,16 +1,32 @@ import React from 'react'; import withTags from './withTags'; +import styles from './styles.css'; +import cn from 'classnames'; +import {t} from 'plugin-api/beta/client/services'; +import {name} from '../../package.json'; +import {Icon} from 'plugin-api/beta/client/components/ui'; -class FeaturedButton extends React.Component { - render() { - const {alreadyTagged, deleteTag, postTag} = this.props; - return ( - - ); - } -} +const FeaturedButton = (props) => { + const {alreadyTagged, deleteTag, postTag} = props; + + return ( + + ); +}; export default withTags('featured')(FeaturedButton); - \ No newline at end of file + diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js index 23f62a6d8..5bfaefc74 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js @@ -9,7 +9,7 @@ export default (props) => ( { isFeatured(props.comment.tags) && props.depth === 0 ? ( - Featured + {t('featured')} ) : null } diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css index e69de29bb..9bca2406c 100644 --- a/plugins/talk-plugin-featured-comments/client/components/styles.css +++ b/plugins/talk-plugin-featured-comments/client/components/styles.css @@ -0,0 +1,33 @@ +.button { + color: #2a2a2a; + margin: 5px 10px 5px 0px; + background: none; + padding: 0px; + border: none; + font-size: inherit; +} + +.button:hover { + color: #767676; + cursor: pointer; +} + +.button.featured { + color: #f7917a; +} + +.button.featured:hover { + color: #f7917a; + cursor: pointer; +} + +.tag { + background: #f7917a; + font-size: 12px; + font-weight: bold; + color: white; + display: inline-block; + margin: 0px 5px; + padding: 5px 5px; + border-radius: 2px; +} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/withTags.js b/plugins/talk-plugin-featured-comments/client/components/withTags.js index 4e7401577..7dff93f65 100644 --- a/plugins/talk-plugin-featured-comments/client/components/withTags.js +++ b/plugins/talk-plugin-featured-comments/client/components/withTags.js @@ -113,8 +113,6 @@ export default (tag) => (WrappedComponent) => { class WithTags extends React.Component { postTag = () => { - console.log(this.props); - const {comment, asset} = this.props; this.props.addTag({ @@ -122,8 +120,6 @@ export default (tag) => (WrappedComponent) => { name: Tag.toUpperCase(), assetId: asset.id }); - - console.log('Post Tag'); } deleteTag = () => { @@ -134,12 +130,8 @@ export default (tag) => (WrappedComponent) => { name: Tag.toUpperCase(), assetId: asset.id }); - - console.log('delete Tag'); } - - - + render() { const {comment} = this.props; diff --git a/plugins/talk-plugin-featured-comments/client/translations.json b/plugins/talk-plugin-featured-comments/client/translations.json index 077404aaa..b7904a164 100644 --- a/plugins/talk-plugin-featured-comments/client/translations.json +++ b/plugins/talk-plugin-featured-comments/client/translations.json @@ -1,3 +1,10 @@ { - + "en" : { + "feature": "Feature", + "featured": "Featured" + }, + "es" : { + "feature" : "Remarcar", + "featured": "Remarcado" + } } \ No newline at end of file From fbdb04455153067575c33a3e895f965020e3d543 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 3 Jul 2017 11:55:09 -0300 Subject: [PATCH 05/53] Moving withTags to the plugin api, adding perms to Feature comments --- plugin-api/beta/client/hocs/index.js | 1 + .../beta/client/hocs}/withTags.js | 0 .../client/components/FeaturedButton.js | 10 +++++----- 3 files changed, 6 insertions(+), 5 deletions(-) rename {plugins/talk-plugin-featured-comments/client/components => plugin-api/beta/client/hocs}/withTags.js (100%) diff --git a/plugin-api/beta/client/hocs/index.js b/plugin-api/beta/client/hocs/index.js index 7be682670..fc3150352 100644 --- a/plugin-api/beta/client/hocs/index.js +++ b/plugin-api/beta/client/hocs/index.js @@ -1 +1,2 @@ export {default as withReaction} from './withReaction'; +export {default as withTags} from './withTags'; diff --git a/plugins/talk-plugin-featured-comments/client/components/withTags.js b/plugin-api/beta/client/hocs/withTags.js similarity index 100% rename from plugins/talk-plugin-featured-comments/client/components/withTags.js rename to plugin-api/beta/client/hocs/withTags.js diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js index 0e68b8b70..54546eb63 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js @@ -1,15 +1,15 @@ import React from 'react'; -import withTags from './withTags'; import styles from './styles.css'; import cn from 'classnames'; -import {t} from 'plugin-api/beta/client/services'; +import {t, can} from 'plugin-api/beta/client/services'; import {name} from '../../package.json'; +import {withTags} from 'plugin-api/beta/client/hocs'; import {Icon} from 'plugin-api/beta/client/components/ui'; const FeaturedButton = (props) => { - const {alreadyTagged, deleteTag, postTag} = props; + const {alreadyTagged, deleteTag, postTag, user} = props; - return ( + return can(user, 'MODERATE_COMMENTS') ? ( - ); + ) : null ; }; export default withTags('featured')(FeaturedButton); From 002dc377a6f0fa6e81df6a325ba7f28117678429 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 3 Jul 2017 13:31:13 -0300 Subject: [PATCH 06/53] Featured Comments container, and FeaturedComment component --- .../src/components/Stream.js | 7 +++- .../client/components/.babelrc | 14 ++++++++ .../client/components/FeaturedComment.js | 28 +++++++++++++++ .../client/components/FeaturedComments.js | 35 +++++++++++++++++++ .../client/components/styles.css | 8 ++++- .../client/index.js | 4 ++- 6 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 plugins/talk-plugin-featured-comments/client/components/.babelrc create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 0cfaf0368..c6a88178f 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -238,7 +238,12 @@ class Stream extends React.Component { :

{asset.settings.closedMessage}

} - + {loggedIn && ( { + return ( +
+

+ {comment.body} +

+ +
+ ); +}; + +export default FeaturedComment; diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js new file mode 100644 index 000000000..cd8c360dd --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js @@ -0,0 +1,35 @@ +import React from 'react'; +import styles from './styles.css'; +import FeaturedComment from './FeaturedComment'; + +const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length; + +class FeaturedComments extends React.Component { + render() { + + const {view : comments} = this.props; + + const featuredComments = comments.reduce((acc, curr) => { + if (isFeatured(curr.tags)) { + acc.push(curr); + } + + return acc; + }, []); + + return ( +
+ { + featuredComments.map((comment, i) => + + ) + } +
+ ); + } +} + +export default FeaturedComments; diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css index 9bca2406c..266f7d2da 100644 --- a/plugins/talk-plugin-featured-comments/client/components/styles.css +++ b/plugins/talk-plugin-featured-comments/client/components/styles.css @@ -22,7 +22,7 @@ } .tag { - background: #f7917a; + background-color: #f7917a; font-size: 12px; font-weight: bold; color: white; @@ -30,4 +30,10 @@ margin: 0px 5px; padding: 5px 5px; border-radius: 2px; +} + +.featuredComments { + padding: 20px; + background-color: #f9f9f9; + margin: 10px 0; } \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 613d70d13..9bed9f46e 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -1,11 +1,13 @@ import translations from './translations.json'; import FeaturedTag from './components/FeaturedTag'; import FeaturedButton from './components/FeaturedButton'; +import FeaturedComments from './components/FeaturedComments'; export default { translations, slots: { commentInfoBar: [FeaturedTag], - commentReactions: [FeaturedButton] + commentReactions: [FeaturedButton], + stream: [FeaturedComments] } }; From 34dbbb0984abd6168899fa3a85f3f2ae5b0dd27d Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 3 Jul 2017 15:27:08 -0300 Subject: [PATCH 07/53] Removing Best from the core --- .../src/components/Comment.js | 73 +----------- .../src/components/Stream.js | 4 - .../src/containers/Stream.js | 6 +- client/coral-framework/graphql/mutations.js | 82 -------------- client/coral-plugin-best/BestButton.js | 104 ------------------ locales/en.yml | 3 - locales/es.yml | 3 - .../client/components/FeaturedButton.js | 12 +- test/e2e/pages/embedStreamPage.js | 6 - test/e2e/tests/Commenter/BestCommentTest.js | 25 ----- test/e2e/tests/Moderator/BestCommentTest.js | 50 --------- 11 files changed, 9 insertions(+), 359 deletions(-) delete mode 100644 client/coral-plugin-best/BestButton.js delete mode 100644 test/e2e/tests/Commenter/BestCommentTest.js delete mode 100644 test/e2e/tests/Moderator/BestCommentTest.js diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 649adb941..a76c8f411 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -1,4 +1,5 @@ -import React, {PropTypes} from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import AuthorName from 'coral-plugin-author-name/AuthorName'; import TagLabel from 'coral-plugin-tag-label/TagLabel'; @@ -10,13 +11,6 @@ import {TransitionGroup} from 'react-transition-group'; import cn from 'classnames'; import styles from './Comment.css'; -import { - BestButton, - IfUserCanModifyBest, - BEST_TAG, - commentIsBest, - BestIndicator -} from 'coral-plugin-best/BestButton'; import LoadMore from './LoadMore'; import {getEditableUntilDate} from './util'; import {TopRightMenu} from './TopRightMenu'; @@ -180,19 +174,13 @@ export default class Comment extends React.Component { }).isRequired, // given a comment, return whether it should be rendered as ignored - commentIsIgnored: React.PropTypes.func, - - // dispatch action to add a tag to a comment - addTag: React.PropTypes.func, - - // dispatch action to remove a tag from a comment - removeTag: React.PropTypes.func, + commentIsIgnored: PropTypes.func, // dispatch action to ignore another user - ignoreUser: React.PropTypes.func, + ignoreUser: PropTypes.func, // edit a comment, passed (id, asset_id, { body }) - editComment: React.PropTypes.func, + editComment: PropTypes.func, } editComment = (...args) => { @@ -322,8 +310,6 @@ export default class Comment extends React.Component { addNotification, charCountEnable, showSignInDialog, - addTag, - removeTag, liveUpdates, commentIsIgnored, commentClassNames = [] @@ -351,40 +337,6 @@ export default class Comment extends React.Component { : `comment ${styles.Comment}`; commentClass += comment.id.indexOf('pending') >= 0 ? ` ${styles.pendingComment}` : ''; - // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar) - const notifyOnError = (fn, errorToMessage) => - async function(...args) { - if (typeof errorToMessage !== 'function') { - errorToMessage = (error) => error.message; - } - try { - return await fn(...args); - } catch (error) { - addNotification('error', errorToMessage(error)); - throw error; - } - }; - - const addBestTag = notifyOnError( - () => - addTag({ - id: comment.id, - name: BEST_TAG, - assetId: asset.id - }), - () => 'Failed to tag comment as best' - ); - - const removeBestTag = notifyOnError( - () => - removeTag({ - id: comment.id, - name: BEST_TAG, - assetId: asset.id - }), - () => 'Failed to remove best comment tag' - ); - /** * classNamesToAdd * adds classNames based on condition @@ -428,10 +380,6 @@ export default class Comment extends React.Component { {isStaff(comment.tags) ? Staff : null} - {commentIsBest(comment) - ? - : null } - { @@ -501,15 +449,6 @@ export default class Comment extends React.Component { commentId={comment.id} inline /> - - - - - {!disableReply && ({ - addTag: ({id, name, assetId}) => { - return mutate({ - variables: { - id, - name, - asset_id: assetId - }, - optimisticResponse: { - addTag: { - __typename: 'ModifyTagResponse', - errors: null, - } - }, - update: (proxy) => { - const fragmentId = `Comment_${id}`; - - // Read the data from our cache for this query. - const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId}); - - data.tags.push({ - tag: { - __typename: 'Tag', - name: 'BEST' - }, - __typename: 'TagLink' - }); - - // Write our data back to the cache. - proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data}); - }, - }); - }}), - }); - -export const withRemoveTag = withMutation( - gql` - mutation RemoveTag($id: ID!, $asset_id: ID!, $name: String!) { - removeTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) { - ...ModifyTagResponse - } - } - `, { - props: ({mutate}) => ({ - removeTag: ({id, name, assetId}) => { - return mutate({ - variables: { - id, - name, - asset_id: assetId - }, - optimisticResponse: { - removeTag: { - __typename: 'ModifyTagResponse', - errors: null, - } - }, - update: (proxy) => { - const fragmentId = `Comment_${id}`; - - // Read the data from our cache for this query. - const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId}); - - const idx = data.tags.findIndex((i) => i.tag.name === 'BEST'); - - data.tags = [...data.tags.slice(0, idx), ...data.tags.slice(idx + 1)]; - - // Write our data back to the cache. - proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data}); - } - }); - }}), - }); - export const withIgnoreUser = withMutation( gql` mutation IgnoreUser($id: ID!) { diff --git a/client/coral-plugin-best/BestButton.js b/client/coral-plugin-best/BestButton.js deleted file mode 100644 index 59204bbb8..000000000 --- a/client/coral-plugin-best/BestButton.js +++ /dev/null @@ -1,104 +0,0 @@ -import React, {Component, PropTypes} from 'react'; - -import t from 'coral-framework/services/i18n'; - -import {Icon} from 'coral-ui'; -import classnames from 'classnames'; - -// tag string for best comments -export const BEST_TAG = 'BEST'; - -export const commentIsBest = ({tags} = {}) => tags.some((t) => t.tag.name === BEST_TAG); - -const name = 'coral-plugin-best'; - -// It would be best if the backend/api held this business logic -const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].some((role) => roles.includes(role)); - -// Put this on a comment to show that it is best - -export const BestIndicator = ({children = }) => ( - - { children } - -); - -/** - * Component that only renders children if the provided user prop can modify best tags - */ -export const IfUserCanModifyBest = ({user, children}) => { - if (!(user && canModifyBestTag(user))) {return null;} - return children; -}; - -/** - * Button that lets a moderator tag a comment as "Best". - * Used to recognize really good comments. - */ -export class BestButton extends Component { - static propTypes = { - - // whether the comment is already tagged as best - isBest: PropTypes.bool.isRequired, - - // set that this comment is best - addBest: PropTypes.func.isRequired, - - // remove the best status - removeBest: PropTypes.func.isRequired, - } - - constructor(props) { - super(props); - this.onClickAddBest = this.onClickAddBest.bind(this); - this.onClickRemoveBest = this.onClickRemoveBest.bind(this); - } - - state = { - isSaving: false - } - - async onClickAddBest(e) { - e.preventDefault(); - const {addBest} = this.props; - if (!addBest) { - console.warn('BestButton#onClickAddBest called even though there is no addBest prop. doing nothing'); - return; - } - this.setState({isSaving: true}); - try { - await addBest(); - } finally { - this.setState({isSaving: false}); - } - } - - async onClickRemoveBest(e) { - e.preventDefault(); - const {removeBest} = this.props; - if (!removeBest) { - console.warn('BestButton#onClickAddBest called even though there is no removeBest prop. doing nothing'); - return; - } - this.setState({isSaving: true}); - try { - await removeBest(); - } finally { - this.setState({isSaving: false}); - } - } - - render() { - const {isBest, addBest, removeBest} = this.props; - const {isSaving} = this.state; - const disabled = isSaving || !(isBest ? removeBest : addBest); - return ( - - ); - } -} diff --git a/locales/en.yml b/locales/en.yml index dce6f621b..d57e03d38 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -31,7 +31,6 @@ en: comment_post_notif_premod: "Thank you for posting. Our moderation team will review your comment shortly." comment_post_banned_word: "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team." characters_remaining: "characters remaining" - comment_is_best: "This comment is one of the best" comment_offensive: "This comment is offensive" comment_singular: Comment comment_plural: Comments @@ -305,7 +304,6 @@ en: report_notif: "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly." report_notif_remove: "Your report has been removed." reported: Reported - set_best: "Tag as Best" settings: all_comments: "All Comments" from_settings_page: "From the Profile Page you can see your comment history." @@ -362,7 +360,6 @@ en: write_message: "Write a message" send: Send thank_you: "We value your safety and feedback. A moderator will review your report." - unset_best: "Untag as Best" user: bio_flags: "flags for this bio" user_bio: "User Bio" diff --git a/locales/es.yml b/locales/es.yml index 6a0334fcd..efb46dbf2 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -31,7 +31,6 @@ es: comment_post_notif_premod: "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto." comment_post_banned_word: "Tu comentario contiene una o más palabras que no están permitidas en nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación." characters_remaining: "carácteres restantes" - comment_is_best: "Este comentario es uno de los mejores" comment_offensive: "Este comentario es ofensivo" comment_singular: Comentario comment_plural: Comentarios @@ -297,7 +296,6 @@ es: report_notif: "Gracias por reportar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar." report_notif_remove: "Tu reporte ha sido eliminado." reported: "Reportado" - set_best: "Etiquetar como el mejor" settings: all_comments: "Todos los comentarios" from_settings_page: "Desde la página de configuración puedes ver tu historial de comentarios." @@ -385,7 +383,6 @@ es: write_message: "Escribir un mensaje" send: "Enviar" thank_you: "Valoramos tanto su seguridad en este espacio como sus comentarios. Un o una moderadora va a leer su reporte." - unset_best: "Des-etiquetar como el mejor" user: bio_flags: "reportes para este bio" user_bio: "Bio de Usuario" diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js index 54546eb63..635eef40c 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js @@ -1,7 +1,7 @@ import React from 'react'; import styles from './styles.css'; import cn from 'classnames'; -import {t, can} from 'plugin-api/beta/client/services'; +import {can} from 'plugin-api/beta/client/services'; import {name} from '../../package.json'; import {withTags} from 'plugin-api/beta/client/hocs'; import {Icon} from 'plugin-api/beta/client/components/ui'; @@ -14,15 +14,7 @@ const FeaturedButton = (props) => { className={cn([name, styles.button, {[styles.featured] : alreadyTagged}])} onClick={alreadyTagged ? deleteTag : postTag} > - {alreadyTagged ? ( - - {t('featured')} - - ) : ( - - {t('feature')} - - )} + {alreadyTagged ? : } ) : null ; diff --git a/test/e2e/pages/embedStreamPage.js b/test/e2e/pages/embedStreamPage.js index 2d59d5e57..536e58b38 100644 --- a/test/e2e/pages/embedStreamPage.js +++ b/test/e2e/pages/embedStreamPage.js @@ -160,12 +160,6 @@ module.exports = { }, registerButton: { selector: '#signInDialog #coralRegister' - }, - setBestButton: { - selector: '.e2e__set-best-comment' - }, - unsetBestButton: { - selector: '.e2e__unset-best-comment' } } }; diff --git a/test/e2e/tests/Commenter/BestCommentTest.js b/test/e2e/tests/Commenter/BestCommentTest.js deleted file mode 100644 index 37e396149..000000000 --- a/test/e2e/tests/Commenter/BestCommentTest.js +++ /dev/null @@ -1,25 +0,0 @@ -module.exports = { - '@tags': ['like', 'comments', 'commenter'], - before: (client) => { - const embedStreamPage = client.page.embedStreamPage(); - const {users} = client.globals; - - embedStreamPage - .navigate() - .ready(); - - embedStreamPage - .login(users.commenter); - }, - 'Commenters should not see the set-best-comment button': (client) => { - const embedStreamPage = client.page.embedStreamPage(); - - embedStreamPage - .postComment('Hi everyone. Isn\'t this the BEST comment!?') - .waitForElementVisible('@likeButton') - .expect.element('@setBestButton').to.not.be.present; - }, - after: (client) => { - client.end(); - } -}; diff --git a/test/e2e/tests/Moderator/BestCommentTest.js b/test/e2e/tests/Moderator/BestCommentTest.js deleted file mode 100644 index 5cdc2e5ed..000000000 --- a/test/e2e/tests/Moderator/BestCommentTest.js +++ /dev/null @@ -1,50 +0,0 @@ -module.exports = { - '@tags': ['like', 'comments', 'commenter'], - before: (client) => { - const embedStreamPage = client.page.embedStreamPage(); - const {users} = client.globals; - - embedStreamPage - .navigate() - .ready(); - - embedStreamPage - .login(users.moderator); - }, - 'Moderator marks/unmarks their comment as BEST': (client) => { - const embedStreamPage = client.page.embedStreamPage(); - - const setBestCommentButton = '.e2e__set-best-comment'; - const unsetBestCommentButton = '.e2e__unset-best-comment'; - - embedStreamPage - .postComment(`Hi everyone. Isn't this the BEST comment!? ${String(Math.random()).slice(2)}`) - .waitForElementVisible(setBestCommentButton, 2000) - .click(setBestCommentButton) - .waitForElementVisible(unsetBestCommentButton, 2000); - - // on refresh, it should still be tagged as best :) - client.refresh(); - embedStreamPage.ready() - - // (bengo) I have no idea why, but if the selector here is '@unsetBestButton', it doesn't find it... I think nightwatch bug? - // this is why I am not using @elements. Advice appreciated. - .waitForElementVisible(unsetBestCommentButton, 2000); - - // now remove the best tag - embedStreamPage - .click(unsetBestCommentButton); - - embedStreamPage - .waitForElementVisible(setBestCommentButton, 2000); - - // on refresh it should still be untagged best - client.refresh(); - embedStreamPage.ready() - .waitForElementVisible(setBestCommentButton); - - }, - after: (client) => { - client.end(); - } -}; From 3ca62cab65a95a2a589135ec3b305c3f2c3e7277 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 5 Jul 2017 11:36:03 -0300 Subject: [PATCH 08/53] wip --- .../client/components/FeaturedButton.js | 4 ++-- .../client/components/FeaturedComment.js | 19 +++++++++++-------- .../client/components/styles.css | 4 ++++ 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js index 635eef40c..5475ea107 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js @@ -1,8 +1,8 @@ import React from 'react'; -import styles from './styles.css'; import cn from 'classnames'; -import {can} from 'plugin-api/beta/client/services'; +import styles from './styles.css'; import {name} from '../../package.json'; +import {can} from 'plugin-api/beta/client/services'; import {withTags} from 'plugin-api/beta/client/hocs'; import {Icon} from 'plugin-api/beta/client/components/ui'; diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index 07a26f9c6..89ab67df1 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -1,24 +1,27 @@ import React from 'react'; +import cn from 'classnames'; import styles from './styles.css'; +import {name} from '../../package.json'; import {timeago} from 'coral-framework/services/i18n'; +import {Icon} from 'plugin-api/beta/client/components/ui'; const FeaturedComment = ({comment}) => { return ( -
-

- {comment.body} +

+

+ "{comment.body}"

diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css index 266f7d2da..4c3db162c 100644 --- a/plugins/talk-plugin-featured-comments/client/components/styles.css +++ b/plugins/talk-plugin-featured-comments/client/components/styles.css @@ -36,4 +36,8 @@ padding: 20px; background-color: #f9f9f9; margin: 10px 0; +} + +.featuredComments .goTo { + color: #2d3fb9; } \ No newline at end of file From 2a9535f88a5ba179656b830b00f9d96e3bc39c3a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 5 Jul 2017 12:28:09 -0300 Subject: [PATCH 09/53] Featured Comment Styles --- .../client/components/FeaturedComment.js | 10 +++---- .../client/components/styles.css | 26 +++++++++++++++++-- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index 89ab67df1..a3f71b1d8 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -7,20 +7,20 @@ import {Icon} from 'plugin-api/beta/client/components/ui'; const FeaturedComment = ({comment}) => { return ( -
-

+

+

"{comment.body}"

diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css index 4c3db162c..9a2943163 100644 --- a/plugins/talk-plugin-featured-comments/client/components/styles.css +++ b/plugins/talk-plugin-featured-comments/client/components/styles.css @@ -35,9 +35,31 @@ .featuredComments { padding: 20px; background-color: #f9f9f9; + margin: 10px 0 30px; +} + +.featuredComment { + margin: 10px 0 35px; +} + +.featuredComment:last-child { margin: 10px 0; } -.featuredComments .goTo { - color: #2d3fb9; +.featuredComment .goTo { + color: #1d5294; + font-size: 13px; + padding: 5px 0; + display: inline-block; +} + +.featuredComment .goTo:hover { + cursor: pointer; + text-decoration: underline; +} + +.featuredComment .body { + line-height: 20px; + text-align: left; + letter-spacing: 0.1px; } \ No newline at end of file From 28010488be809decbe0a69916ce4756c5ead65f0 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 5 Jul 2017 12:31:35 -0300 Subject: [PATCH 10/53] Linting --- client/coral-embed-stream/src/components/Comment.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 86195d4f7..f531d794f 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -533,6 +533,7 @@ export default class Comment extends React.Component { currentUser={currentUser} postFlag={postFlag} deleteAction={deleteAction} + loadMore={loadMore} ignoreUser={ignoreUser} charCountEnable={charCountEnable} maxCharCount={maxCharCount} From bfbe8d44aae2b14d45834cab994e45cd361d2427 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 13 Jul 2017 12:05:53 -0300 Subject: [PATCH 11/53] Merg --- client/coral-embed-stream/src/components/AllCommentsPane.js | 4 ---- client/coral-embed-stream/src/components/Stream.js | 2 -- 2 files changed, 6 deletions(-) diff --git a/client/coral-embed-stream/src/components/AllCommentsPane.js b/client/coral-embed-stream/src/components/AllCommentsPane.js index 6af72475a..7166aa6e9 100644 --- a/client/coral-embed-stream/src/components/AllCommentsPane.js +++ b/client/coral-embed-stream/src/components/AllCommentsPane.js @@ -125,8 +125,6 @@ class AllCommentsPane extends React.Component { root, comments, commentClassNames, - addTag, - removeTag, ignoreUser, setActiveReplyBox, activeReplyBox, @@ -173,8 +171,6 @@ class AllCommentsPane extends React.Component { currentUser={currentUser} postFlag={postFlag} postDontAgree={postDontAgree} - addTag={addTag} - removeTag={removeTag} ignoreUser={ignoreUser} commentIsIgnored={commentIsIgnored} loadMore={loadNewReplies} diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 3fe4659da..89eb4c359 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -67,7 +67,6 @@ class Stream extends React.Component { deleteAction, showSignInDialog, updateItem, - addTag, ignoreUser, activeStreamTab, setActiveStreamTab, @@ -160,7 +159,6 @@ class Stream extends React.Component { fill="stream" data={this.props.data} root={this.props.root} - view={view} /> {loggedIn && ( From 8d4c0c672145535b104a56ec7d66d974b7687221 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 13 Jul 2017 12:15:13 -0300 Subject: [PATCH 12/53] WIP --- plugin-api/beta/client/hocs/withTags.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js index 7dff93f65..6d0ed920c 100644 --- a/plugin-api/beta/client/hocs/withTags.js +++ b/plugin-api/beta/client/hocs/withTags.js @@ -27,7 +27,10 @@ export default (tag) => (WrappedComponent) => { } } `; - + + const isTagged = (tags) => + !!tags.filter((t) => t.tag.name === Tag.toUpperCase()).length; + const withAddTag = withMutation( gql` mutation AddTag($id: ID!, $asset_id: ID!, $name: String!) { @@ -112,7 +115,7 @@ export default (tag) => (WrappedComponent) => { class WithTags extends React.Component { - postTag = () => { + postTag() { const {comment, asset} = this.props; this.props.addTag({ @@ -122,7 +125,7 @@ export default (tag) => (WrappedComponent) => { }); } - deleteTag = () => { + deleteTag() { const {comment, asset} = this.props; this.props.removeTag({ @@ -135,8 +138,6 @@ export default (tag) => (WrappedComponent) => { render() { const {comment} = this.props; - const isTagged = (tags) => !!tags.filter((t) => t.tag.name === Tag.toUpperCase()).length; - const alreadyTagged = isTagged(comment.tags); return Date: Thu, 13 Jul 2017 12:53:01 -0300 Subject: [PATCH 13/53] Implementing first draft of FC --- .eslintignore | 3 ++- .gitignore | 2 +- .../client/components/Tab.js | 0 .../client/components/TabPane.js | 0 .../client/containers/Tab.js | 0 .../client/containers/TabPane.js | 0 .../client/index.js | 6 +++-- plugins/talk-plugin-featured/client/.babelrc | 14 ----------- .../client/.eslintrc.json | 23 ------------------- plugins/talk-plugin-featured/client/index.js | 9 -------- plugins/talk-plugin-featured/index.js | 2 -- 11 files changed, 7 insertions(+), 52 deletions(-) rename plugins/{talk-plugin-featured => talk-plugin-featured-comments}/client/components/Tab.js (100%) rename plugins/{talk-plugin-featured => talk-plugin-featured-comments}/client/components/TabPane.js (100%) rename plugins/{talk-plugin-featured => talk-plugin-featured-comments}/client/containers/Tab.js (100%) rename plugins/{talk-plugin-featured => talk-plugin-featured-comments}/client/containers/TabPane.js (100%) delete mode 100644 plugins/talk-plugin-featured/client/.babelrc delete mode 100644 plugins/talk-plugin-featured/client/.eslintrc.json delete mode 100644 plugins/talk-plugin-featured/client/index.js delete mode 100644 plugins/talk-plugin-featured/index.js diff --git a/.eslintignore b/.eslintignore index b58e4f058..afa7bf16d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -13,5 +13,6 @@ plugins/* !plugins/coral-plugin-viewing-options !plugins/coral-plugin-comment-content !plugins/talk-plugin-permalink -!plugins/talk-plugin-featured +!plugins/talk-plugin-featured-comments + node_modules diff --git a/.gitignore b/.gitignore index 0e809b43a..bd8edcd94 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,6 @@ plugins/* !plugins/coral-plugin-viewing-options !plugins/coral-plugin-comment-content !plugins/talk-plugin-permalink -!plugins/talk-plugin-featured +!plugins/talk-plugin-featured-comments **/node_modules/* diff --git a/plugins/talk-plugin-featured/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js similarity index 100% rename from plugins/talk-plugin-featured/client/components/Tab.js rename to plugins/talk-plugin-featured-comments/client/components/Tab.js diff --git a/plugins/talk-plugin-featured/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js similarity index 100% rename from plugins/talk-plugin-featured/client/components/TabPane.js rename to plugins/talk-plugin-featured-comments/client/components/TabPane.js diff --git a/plugins/talk-plugin-featured/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js similarity index 100% rename from plugins/talk-plugin-featured/client/containers/Tab.js rename to plugins/talk-plugin-featured-comments/client/containers/Tab.js diff --git a/plugins/talk-plugin-featured/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js similarity index 100% rename from plugins/talk-plugin-featured/client/containers/TabPane.js rename to plugins/talk-plugin-featured-comments/client/containers/TabPane.js diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 9bed9f46e..9ca3cc1eb 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -1,13 +1,15 @@ import translations from './translations.json'; import FeaturedTag from './components/FeaturedTag'; import FeaturedButton from './components/FeaturedButton'; -import FeaturedComments from './components/FeaturedComments'; +import Tab from './containers/Tab'; +import TabPane from './containers/TabPane'; export default { translations, slots: { commentInfoBar: [FeaturedTag], commentReactions: [FeaturedButton], - stream: [FeaturedComments] + streamTabs: [Tab], + streamTabPanes: [TabPane] } }; diff --git a/plugins/talk-plugin-featured/client/.babelrc b/plugins/talk-plugin-featured/client/.babelrc deleted file mode 100644 index 63b1c53de..000000000 --- a/plugins/talk-plugin-featured/client/.babelrc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "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/plugins/talk-plugin-featured/client/.eslintrc.json b/plugins/talk-plugin-featured/client/.eslintrc.json deleted file mode 100644 index 9fe56bd14..000000000 --- a/plugins/talk-plugin-featured/client/.eslintrc.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "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/talk-plugin-featured/client/index.js b/plugins/talk-plugin-featured/client/index.js deleted file mode 100644 index 69dfaa6cb..000000000 --- a/plugins/talk-plugin-featured/client/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import Tab from './containers/Tab'; -import TabPane from './containers/TabPane'; - -export default { - slots: { - streamTabs: [Tab], - streamTabPanes: [TabPane], - } -}; diff --git a/plugins/talk-plugin-featured/index.js b/plugins/talk-plugin-featured/index.js deleted file mode 100644 index 85dfb349b..000000000 --- a/plugins/talk-plugin-featured/index.js +++ /dev/null @@ -1,2 +0,0 @@ -module.exports = {}; - From f8a69874769de170840c2137a26368f92529c132 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 13 Jul 2017 16:36:41 -0300 Subject: [PATCH 14/53] Styles --- .../client/components/FeaturedButton.css | 27 +++++++ .../client/components/FeaturedButton.js | 7 +- .../client/components/FeaturedComment.css | 43 ++++++++++ .../client/components/FeaturedComment.js | 10 +-- .../client/components/FeaturedTag.css | 20 +++++ .../client/components/FeaturedTag.js | 2 +- .../client/components/styles.css | 79 ------------------- .../client/containers/TabPane.js | 1 + 8 files changed, 102 insertions(+), 87 deletions(-) create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css create mode 100644 plugins/talk-plugin-featured-comments/client/components/FeaturedTag.css delete mode 100644 plugins/talk-plugin-featured-comments/client/components/styles.css diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css new file mode 100644 index 000000000..804ae2c92 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css @@ -0,0 +1,27 @@ +.button { + color: #2a2a2a; + background: none; + padding: 0px; + border: none; + margin-right: 10px; +} + +.button:hover { + color: #767676; + cursor: pointer; +} + +.button.featured { + color: #10589b; +} + +.button.featured:hover { + color: #10589b; + cursor: pointer; +} + +.icon { + font-size: 18px; + padding: 0 5px; + vertical-align: middle; +} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js index 5475ea107..a9da1ecbf 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js @@ -1,6 +1,6 @@ import React from 'react'; import cn from 'classnames'; -import styles from './styles.css'; +import styles from './FeaturedButton.css'; import {name} from '../../package.json'; import {can} from 'plugin-api/beta/client/services'; import {withTags} from 'plugin-api/beta/client/hocs'; @@ -14,7 +14,10 @@ const FeaturedButton = (props) => { className={cn([name, styles.button, {[styles.featured] : alreadyTagged}])} onClick={alreadyTagged ? deleteTag : postTag} > - {alreadyTagged ? : } + {alreadyTagged ? + : + + } ) : null ; diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css new file mode 100644 index 000000000..4a735914d --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css @@ -0,0 +1,43 @@ +.featuredComment { + margin: 10px 0 35px; +} + +.featuredComment:last-child { + margin: 10px 0; +} + +.featuredComment .goTo { + color: #1d5294; + font-size: 13px; + padding: 5px 0; + display: inline-block; +} + +.featuredComment .goToIcon { + font-size: 16px; + vertical-align: middle; + line-height: 13px; + font-weight: bold; +} + +.featuredComment .goTo:hover { + cursor: pointer; + text-decoration: underline; +} + +.featuredComment .quote { + line-height: 20px; + text-align: left; + letter-spacing: 0.1px; + margin: 0; + quotes: '\201c' '\201d'; + margin-bottom: 10px; +} + +.featuredComment .quote:before { + content: open-quote; +} + +.featuredComment .quote:after { + content: close-quote; +} diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index a3f71b1d8..6365a08ac 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -1,6 +1,6 @@ import React from 'react'; import cn from 'classnames'; -import styles from './styles.css'; +import styles from './FeaturedComment.css'; import {name} from '../../package.json'; import {timeago} from 'coral-framework/services/i18n'; import {Icon} from 'plugin-api/beta/client/components/ui'; @@ -8,9 +8,9 @@ import {Icon} from 'plugin-api/beta/client/components/ui'; const FeaturedComment = ({comment}) => { return (
-

- "{comment.body}" -

+
+ {comment.body} +
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.css new file mode 100644 index 000000000..8874bfa0c --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.css @@ -0,0 +1,20 @@ +.tagIcon { + font-size: 12px; + vertical-align: middle; +} + +.icon { + font-size: 12px; + vertical-align: middle; +} + +.tag { + background-color: #10589b; + font-size: 12px; + font-weight: bold; + color: white; + display: inline-block; + margin: 0px 5px; + padding: 5px 5px; + border-radius: 2px; +} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js index 5bfaefc74..ef1758c32 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './styles.css'; +import styles from './FeaturedTag.css'; import {t} from 'plugin-api/beta/client/services'; const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length; diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css deleted file mode 100644 index 502807623..000000000 --- a/plugins/talk-plugin-featured-comments/client/components/styles.css +++ /dev/null @@ -1,79 +0,0 @@ -.tagIcon { - font-size: 12px; - vertical-align: middle; -} - -.icon { - font-size: 12px; - vertical-align: middle; -} - - - - -.button { - composes: buttonReset from "coral-framework/styles/reset.css"; - color: #2a2a2a; - margin: 5px 10px 5px 0px; - background: none; - padding: 0px; - border: none; - font-size: inherit; -} - -.button:hover { - color: #767676; - cursor: pointer; -} - -.button.featured { - color: #f7917a; -} - -.button.featured:hover { - color: #f7917a; - cursor: pointer; -} - -.tag { - background-color: #f7917a; - font-size: 12px; - font-weight: bold; - color: white; - display: inline-block; - margin: 0px 5px; - padding: 5px 5px; - border-radius: 2px; -} - -.featuredComments { - padding: 20px; - background-color: #f9f9f9; - margin: 10px 0 30px; -} - -.featuredComment { - margin: 10px 0 35px; -} - -.featuredComment:last-child { - margin: 10px 0; -} - -.featuredComment .goTo { - color: #1d5294; - font-size: 13px; - padding: 5px 0; - display: inline-block; -} - -.featuredComment .goTo:hover { - cursor: pointer; - text-decoration: underline; -} - -.featuredComment .body { - line-height: 20px; - text-align: left; - letter-spacing: 0.1px; -} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 313b5bbec..567f52593 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -13,6 +13,7 @@ const enhance = compose( created_at user { id + username } } } From b5ce16a33b939fe0e33e5f228703025c528da78e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 13 Jul 2017 16:56:40 -0300 Subject: [PATCH 15/53] Styling --- .../src/components/Comment.css | 4 + .../src/components/Comment.js | 90 ++++++++++--------- plugins/coral-plugin-like/client/styles.css | 1 + .../coral-plugin-respect/client/styles.css | 1 + .../client/components/FeaturedButton.css | 3 +- 5 files changed, 54 insertions(+), 45 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css index 143577cf6..7f96607a8 100644 --- a/client/coral-embed-stream/src/components/Comment.css +++ b/client/coral-embed-stream/src/components/Comment.css @@ -162,3 +162,7 @@ vertical-align: middle; font-size: 14px; } + +.commentFooter { + padding-top: 8px; +} diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 8a728a0d5..6a9f76771 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -443,51 +443,53 @@ export default class Comment extends React.Component {
} - -
- - {!disableReply && - - - } -
-
- - - +
+ - + {!disableReply && + + + } +
+
+ + + + +
{activeReplyBox === comment.id diff --git a/plugins/coral-plugin-like/client/styles.css b/plugins/coral-plugin-like/client/styles.css index 859581bd4..a1d88b1b0 100644 --- a/plugins/coral-plugin-like/client/styles.css +++ b/plugins/coral-plugin-like/client/styles.css @@ -9,6 +9,7 @@ padding: 0px; border: none; font-size: inherit; + vertical-align: middle; &:hover { color: #767676; diff --git a/plugins/coral-plugin-respect/client/styles.css b/plugins/coral-plugin-respect/client/styles.css index 362e02b8f..1022fe20d 100644 --- a/plugins/coral-plugin-respect/client/styles.css +++ b/plugins/coral-plugin-respect/client/styles.css @@ -9,6 +9,7 @@ padding: 0px; border: none; font-size: inherit; + vertical-align: middle; &:hover { color: #767676; diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css index 804ae2c92..6828e64fd 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css @@ -4,6 +4,7 @@ padding: 0px; border: none; margin-right: 10px; + vertical-align: middle; } .button:hover { @@ -23,5 +24,5 @@ .icon { font-size: 18px; padding: 0 5px; - vertical-align: middle; + vertical-align: top; } \ No newline at end of file From b8d00ec9ceee3b5fd41e809c6400a6cf435d0ee1 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 13 Jul 2017 17:29:54 -0300 Subject: [PATCH 16/53] Adding go to conversation --- plugin-api/beta/client/actions/stream.js | 1 + plugin-api/beta/client/hocs/index.js | 1 + .../client/components/FeaturedComment.js | 7 +++++-- .../client/components/TabPane.js | 9 +++++++-- .../client/containers/TabPane.js | 11 ++++++++++- 5 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 plugin-api/beta/client/actions/stream.js diff --git a/plugin-api/beta/client/actions/stream.js b/plugin-api/beta/client/actions/stream.js new file mode 100644 index 000000000..0ddb1ba13 --- /dev/null +++ b/plugin-api/beta/client/actions/stream.js @@ -0,0 +1 @@ +export {setActiveTab} from 'coral-embed-stream/src/actions/stream'; diff --git a/plugin-api/beta/client/hocs/index.js b/plugin-api/beta/client/hocs/index.js index fc3150352..a2494a842 100644 --- a/plugin-api/beta/client/hocs/index.js +++ b/plugin-api/beta/client/hocs/index.js @@ -1,2 +1,3 @@ export {default as withReaction} from './withReaction'; export {default as withTags} from './withTags'; +export {default as withFragments} from 'coral-framework/hocs/withFragments'; diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index 6365a08ac..39b7bdfc8 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -5,7 +5,7 @@ import {name} from '../../package.json'; import {timeago} from 'coral-framework/services/i18n'; import {Icon} from 'plugin-api/beta/client/components/ui'; -const FeaturedComment = ({comment}) => { +const FeaturedComment = ({comment, setActiveTab}) => { return (
@@ -20,7 +20,10 @@ const FeaturedComment = ({comment}) => { ,{' '}{timeago(comment.created_at)}
- + setActiveTab('all')} + > Go to conversation diff --git a/plugins/talk-plugin-featured-comments/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js index a6cb53e09..36244c4b7 100644 --- a/plugins/talk-plugin-featured-comments/client/components/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/components/TabPane.js @@ -1,8 +1,13 @@ import React from 'react'; import FeaturedComment from './FeaturedComment'; -export default ({asset: {featuredComments}}) => ( +export default ({asset: {featuredComments}, setActiveTab}) => (
- {featuredComments.nodes.map((comment) => )} + {featuredComments.nodes.map((comment) => + + )}
); diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 567f52593..fe024355b 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -1,8 +1,17 @@ +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; import {compose, gql} from 'react-apollo'; -import withFragments from 'coral-framework/hocs/withFragments'; import TabPane from '../components/TabPane'; +import {withFragments} from 'plugin-api/beta/client/hocs'; +import {setActiveTab} from 'plugin-api/beta/client/actions/stream'; + +const mapDispatchToProps = (dispatch) => + bindActionCreators({ + setActiveTab, + }, dispatch); const enhance = compose( + connect(null, mapDispatchToProps), withFragments({ asset: gql` fragment TalkFeatured_TabPane_asset on Asset { From eb038b9d49702fffe8d109b5f3ea67e6e1431c8b Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 13 Jul 2017 17:59:09 -0300 Subject: [PATCH 17/53] Adding a slot to push like into featured comments :sunglasses: --- plugins/coral-plugin-like/client/index.js | 3 +- .../client/components/FeaturedComment.css | 19 +++++++++ .../client/components/FeaturedComment.js | 41 ++++++++++++------- .../client/containers/TabPane.js | 9 ++++ 4 files changed, 57 insertions(+), 15 deletions(-) diff --git a/plugins/coral-plugin-like/client/index.js b/plugins/coral-plugin-like/client/index.js index 68b7a2c46..e2fd1efbf 100644 --- a/plugins/coral-plugin-like/client/index.js +++ b/plugins/coral-plugin-like/client/index.js @@ -4,6 +4,7 @@ import translations from './translations.yml'; export default { translations, slots: { - commentReactions: [LikeButton] + commentReactions: [LikeButton], + featuredCommentsReactions: [LikeButton] } }; diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css index 4a735914d..640d572f6 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css @@ -13,6 +13,13 @@ display: inline-block; } +.featuredComment .repliesIcon { + font-size: 16px; + vertical-align: middle; + line-height: 13px; + font-weight: bold; +} + .featuredComment .goToIcon { font-size: 16px; vertical-align: middle; @@ -41,3 +48,15 @@ .featuredComment .quote:after { content: close-quote; } + +.footer { + display: flex; +} + +.reactionsContainer, .actionsContainer { + flex: auto; +} + +.actionsContainer { + text-align: right; +} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index 39b7bdfc8..f1b7255e4 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -3,29 +3,42 @@ import cn from 'classnames'; import styles from './FeaturedComment.css'; import {name} from '../../package.json'; import {timeago} from 'coral-framework/services/i18n'; +import {Slot} from 'plugin-api/beta/client/components'; import {Icon} from 'plugin-api/beta/client/components/ui'; const FeaturedComment = ({comment, setActiveTab}) => { return (
+
{comment.body}
-
-
- - {comment.user.username} - - - ,{' '}{timeago(comment.created_at)} - + +
+ + {comment.user.username} + + + ,{' '}{timeago(comment.created_at)} + +
+ +
); diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index fe024355b..5ebc9d680 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -20,6 +20,15 @@ const enhance = compose( id body created_at + replyCount + action_summaries { + ... on LikeActionSummary { + count + current_user { + id + } + } + } user { id username From 94032b69fc8f5c76a4d35c35dd3fa52e24e19c01 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 14 Jul 2017 11:34:20 -0300 Subject: [PATCH 18/53] Missing asset --- client/coral-embed-stream/src/components/Comment.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 19fa76483..ca6c8e487 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -462,6 +462,7 @@ export default class Comment extends React.Component { fill="commentReactions" data={this.props.data} root={this.props.root} + asset={asset} comment={comment} commentId={comment.id} inline From 71b4413f9275f0d9feac4ad70b58434a4394c6ba Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 14 Jul 2017 13:39:35 -0300 Subject: [PATCH 19/53] Using same slot --- plugins/coral-plugin-like/client/index.js | 3 +-- .../client/components/FeaturedComment.js | 6 ++++-- .../client/components/TabPane.js | 3 ++- .../client/containers/TabPane.js | 6 ++++++ plugins/talk-plugin-featured-comments/yarn.lock | 4 ++++ 5 files changed, 17 insertions(+), 5 deletions(-) create mode 100644 plugins/talk-plugin-featured-comments/yarn.lock diff --git a/plugins/coral-plugin-like/client/index.js b/plugins/coral-plugin-like/client/index.js index e2fd1efbf..68b7a2c46 100644 --- a/plugins/coral-plugin-like/client/index.js +++ b/plugins/coral-plugin-like/client/index.js @@ -4,7 +4,6 @@ import translations from './translations.yml'; export default { translations, slots: { - commentReactions: [LikeButton], - featuredCommentsReactions: [LikeButton] + commentReactions: [LikeButton] } }; diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index f1b7255e4..61fc9810e 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -6,7 +6,7 @@ import {timeago} from 'coral-framework/services/i18n'; import {Slot} from 'plugin-api/beta/client/components'; import {Icon} from 'plugin-api/beta/client/components/ui'; -const FeaturedComment = ({comment, setActiveTab}) => { +const FeaturedComment = ({comment, asset, setActiveTab}) => { return (
@@ -25,10 +25,12 @@ const FeaturedComment = ({comment, setActiveTab}) => {
+
diff --git a/plugins/talk-plugin-featured-comments/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js index 36244c4b7..04c52c0cc 100644 --- a/plugins/talk-plugin-featured-comments/client/components/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/components/TabPane.js @@ -1,12 +1,13 @@ import React from 'react'; import FeaturedComment from './FeaturedComment'; -export default ({asset: {featuredComments}, setActiveTab}) => ( +export default ({asset: {featuredComments, ...asset}, setActiveTab}) => (
{featuredComments.nodes.map((comment) => )}
diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 5ebc9d680..65c5c1cdf 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -15,12 +15,18 @@ const enhance = compose( withFragments({ asset: gql` fragment TalkFeatured_TabPane_asset on Asset { + id featuredComments: comments(tags: ["FEATURED"]) { nodes { id body created_at replyCount + tags { + tag { + name + } + } action_summaries { ... on LikeActionSummary { count diff --git a/plugins/talk-plugin-featured-comments/yarn.lock b/plugins/talk-plugin-featured-comments/yarn.lock new file mode 100644 index 000000000..fb57ccd13 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + From a8467db7aaaac77dbb750ef642a01000a3c2c36a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 14 Jul 2017 14:57:34 -0300 Subject: [PATCH 20/53] Handling cache and mutations --- .../coral-embed-stream/src/graphql/utils.js | 13 ++++ plugin-api/beta/client/utils/stream.js | 1 + .../client/components/Tab.js | 4 +- .../client/containers/Tab.js | 2 +- .../client/containers/TabPane.js | 2 +- .../client/index.js | 60 ++++++++++++++++++- 6 files changed, 77 insertions(+), 5 deletions(-) create mode 100644 plugin-api/beta/client/utils/stream.js diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js index 523cc571f..bd174dc98 100644 --- a/client/coral-embed-stream/src/graphql/utils.js +++ b/client/coral-embed-stream/src/graphql/utils.js @@ -150,6 +150,19 @@ const ascending = (a, b) => { return 0; }; +const descending = (a, b) => ascending(a, b) * -1; + +export function insertSorted(nodes, comment, sortOrder = 'CHRONOLOGICAL') { + const added = nodes.concat(comment); + if (sortOrder === 'CHRONOLOGICAL') { + return added.sort(ascending); + } + if (sortOrder === 'REVERSE_CHRONOLOGICAL') { + return added.sort(descending); + } + throw new Error(`Unknown sort order ${sortOrder}`); +} + function findAndInsertFetchedComments(parent, comments, parent_id) { const isAsset = parent.__typename === 'Asset'; const connectionField = isAsset ? 'comments' : 'replies'; diff --git a/plugin-api/beta/client/utils/stream.js b/plugin-api/beta/client/utils/stream.js new file mode 100644 index 000000000..dbaa302a9 --- /dev/null +++ b/plugin-api/beta/client/utils/stream.js @@ -0,0 +1 @@ +export {findCommentInEmbedQuery, insertSorted} from 'coral-embed-stream/src/graphql/utils'; diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js index 0b8c4b1d9..643d74574 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js @@ -2,8 +2,8 @@ import React from 'react'; import {TabCount} from 'plugin-api/beta/client/components/ui'; // TODO: This is just example code, and needs to replaced by an actual implementation. -export default ({active, asset: {featuredCommentCount}}) => ( +export default ({active, asset: {featuredCommentsCount}}) => ( - Featured {featuredCommentCount} + Featured {featuredCommentsCount} ); diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js index 7da3cc7a9..a5f487f8f 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js @@ -6,7 +6,7 @@ const enhance = compose( withFragments({ asset: gql` fragment TalkFeatured_Tab_asset on Asset { - featuredCommentCount: commentCount(tags: ["FEATURED"]) + featuredCommentsCount: totalCommentCount(tags: ["FEATURED"]) }`, }), ); diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 65c5c1cdf..c486b2dc4 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -16,7 +16,7 @@ const enhance = compose( asset: gql` fragment TalkFeatured_TabPane_asset on Asset { id - featuredComments: comments(tags: ["FEATURED"]) { + featuredComments: comments(tags: ["FEATURED"], deep: true) { nodes { id body diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 642cc6d31..02a3ed2d4 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -3,6 +3,9 @@ import TabPane from './containers/TabPane'; import FeaturedTag from './components/FeaturedTag'; import FeaturedButton from './components/FeaturedButton'; import translations from './translations.json'; +import update from 'immutability-helper'; + +import {findCommentInEmbedQuery, insertSorted} from 'plugin-api/beta/client/utils/stream'; export default { translations, @@ -11,5 +14,60 @@ export default { streamTabPanes: [TabPane], commentInfoBar: [FeaturedTag], commentReactions: [FeaturedButton] - } + }, + mutations: { + AddTag: ({variables}) => ({ + updateQueries: { + CoralEmbedStream_Embed: (previous) => { + + if (variables.name !== 'FEATURED') { + return; + } + + const comment = findCommentInEmbedQuery(previous, variables.id); + + const updated = update(previous, { + asset: { + featuredComments: { + nodes: { + $apply: (nodes) => insertSorted(nodes, comment, 'REVERSE_CHRONOLOGICAL') + } + }, + featuredCommentsCount: { + $apply: (value) => value + 1 + } + } + }); + + return updated; + }, + } + }), + RemoveTag: ({variables}) => ({ + updateQueries: { + CoralEmbedStream_Embed: (previous) => { + + if (variables.name !== 'FEATURED') { + return; + } + + const updated = update(previous, { + asset: { + featuredComments: { + nodes: { + $apply: (nodes) => + nodes.filter((n) => n.id !== variables.id) + } + }, + featuredCommentsCount: { + $apply: (value) => value - 1 + } + } + }); + + return updated; + }, + } + }) + }, }; From 8c7c564a30423a1c7c1fb06ff9f3bee521cd31d9 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 15:23:02 +0700 Subject: [PATCH 21/53] Allow comment slots to extend the asset fragment + harmonize slot props --- .../src/components/Comment.js | 40 +++++++++---------- .../src/containers/Comment.js | 7 ++++ .../src/containers/Stream.js | 2 + 3 files changed, 29 insertions(+), 20 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index ca6c8e487..792dfd2d5 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -291,6 +291,8 @@ export default class Comment extends React.Component { render () { const { asset, + data, + root, depth, comment, postFlag, @@ -376,6 +378,15 @@ export default class Comment extends React.Component { } ); + // props that are passed down the slots. + const slotProps = { + data, + root, + asset, + comment, + depth, + }; + return (
@@ -410,11 +418,7 @@ export default class Comment extends React.Component { @@ -453,18 +457,18 @@ export default class Comment extends React.Component { stopEditing={this.stopEditing} /> :
- +
}
{!disableReply && @@ -480,11 +484,7 @@ export default class Comment extends React.Component { diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js index 1ffac82cf..68b0b3906 100644 --- a/client/coral-embed-stream/src/containers/Comment.js +++ b/client/coral-embed-stream/src/containers/Comment.js @@ -22,6 +22,13 @@ export default withFragments({ } ${pluginFragments.definitions('root')} `, + asset: gql` + fragment CoralEmbedStream_Comment_asset on Asset { + __typename + ${pluginFragments.spreads('asset')} + } + ${pluginFragments.definitions('asset')} + `, comment: gql` fragment CoralEmbedStream_Comment_comment on Comment { id diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js index 30e9d8fe0..f3af18e6f 100644 --- a/client/coral-embed-stream/src/containers/Stream.js +++ b/client/coral-embed-stream/src/containers/Stream.js @@ -278,6 +278,7 @@ const fragments = { endCursor } ${pluginFragments.spreads('asset')} + ...${getDefinitionName(Comment.fragments.asset)} } me { status @@ -293,6 +294,7 @@ const fragments = { } ${pluginFragments.definitions('asset')} ${pluginFragments.definitions('root')} + ${Comment.fragments.asset} ${Comment.fragments.root} ${commentFragment} `, From 043d5fdcec7313fd6a94b15d4924bdd0797bde30 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 16:39:06 +0700 Subject: [PATCH 22/53] Handle ignore user --- .../client/containers/Tab.js | 2 +- .../client/containers/TabPane.js | 46 +++++++++---------- .../client/index.js | 25 +++++++++- 3 files changed, 47 insertions(+), 26 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js index a5f487f8f..790291841 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js @@ -6,7 +6,7 @@ const enhance = compose( withFragments({ asset: gql` fragment TalkFeatured_Tab_asset on Asset { - featuredCommentsCount: totalCommentCount(tags: ["FEATURED"]) + featuredCommentsCount: totalCommentCount(tags: ["FEATURED"], excludeIgnored: $excludeIgnored) }`, }), ); diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index c486b2dc4..2c33fb5b9 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -16,31 +16,31 @@ const enhance = compose( asset: gql` fragment TalkFeatured_TabPane_asset on Asset { id - featuredComments: comments(tags: ["FEATURED"], deep: true) { - nodes { - id - body - created_at - replyCount - tags { - tag { - name - } - } - action_summaries { - ... on LikeActionSummary { - count - current_user { - id - } - } - } - user { - id - username - } + featuredComments: comments(tags: ["FEATURED"], excludeIgnored: $excludeIgnored, deep: true) { + nodes { + id + body + created_at + replyCount + tags { + tag { + name } + } + action_summaries { + ... on LikeActionSummary { + count + current_user { + id + } + } + } + user { + id + username + } } + } }`, }), ); diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 02a3ed2d4..18ec28901 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -16,10 +16,31 @@ export default { commentReactions: [FeaturedButton] }, mutations: { + IgnoreUser: ({variables}) => ({ + updateQueries: { + CoralEmbedStream_Embed: (previous) => { + const ignoredUserId = variables.id; + const updated = update(previous, { + asset: { + featuredComments: { + nodes: { + $apply: (nodes) => + nodes.filter((n) => n.user.id !== ignoredUserId) + } + }, + featuredCommentsCount: { + $apply: (value) => value - 1 + } + } + }); + return updated; + } + } + }), AddTag: ({variables}) => ({ updateQueries: { CoralEmbedStream_Embed: (previous) => { - + if (variables.name !== 'FEATURED') { return; } @@ -55,7 +76,7 @@ export default { asset: { featuredComments: { nodes: { - $apply: (nodes) => + $apply: (nodes) => nodes.filter((n) => n.id !== variables.id) } }, From afeeffc262cf13d77944f3fa55e3aa94cdeedaf0 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 17:08:14 +0700 Subject: [PATCH 23/53] Show notification upon failure --- plugin-api/beta/client/hocs/withTags.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js index f23b39492..62b50bf36 100644 --- a/plugin-api/beta/client/hocs/withTags.js +++ b/plugin-api/beta/client/hocs/withTags.js @@ -8,6 +8,7 @@ import withMutation from 'coral-framework/hocs/withMutation'; import withFragments from 'coral-framework/hocs/withFragments'; import {showSignInDialog} from 'coral-framework/actions/auth'; import {addNotification} from 'coral-framework/actions/notification'; +import {forEachError} from 'coral-framework/utils'; export default (tag) => (WrappedComponent) => { if (typeof tag !== 'string') { @@ -27,10 +28,10 @@ export default (tag) => (WrappedComponent) => { } } `; - + const isTagged = (tags) => !!tags.filter((t) => t.tag.name === Tag.toUpperCase()).length; - + const withAddTag = withMutation( gql` mutation AddTag($id: ID!, $asset_id: ID!, $name: String!) { @@ -112,29 +113,35 @@ export default (tag) => (WrappedComponent) => { }); }}), }); - + class WithTags extends React.Component { postTag = () => { - const {comment, asset} = this.props; - + const {comment, asset, addNotification} = this.props; + this.props.addTag({ id: comment.id, name: Tag.toUpperCase(), assetId: asset.id + }) + .catch((err) => { + forEachError(err, ({msg}) => addNotification('error', msg)); }); } deleteTag = () => { - const {comment, asset} = this.props; + const {comment, asset, addNotification} = this.props; this.props.removeTag({ id: comment.id, name: Tag.toUpperCase(), assetId: asset.id + }) + .catch((err) => { + forEachError(err, ({msg}) => addNotification('error', msg)); }); } - + render() { const {comment} = this.props; From ad09ce03a17eef2713e34c27827eea7342d17c20 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 17:09:48 +0700 Subject: [PATCH 24/53] Prevent double execution of mutation --- plugin-api/beta/client/hocs/withTags.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js index 62b50bf36..63001392f 100644 --- a/plugin-api/beta/client/hocs/withTags.js +++ b/plugin-api/beta/client/hocs/withTags.js @@ -115,16 +115,27 @@ export default (tag) => (WrappedComponent) => { }); class WithTags extends React.Component { + loading = false; postTag = () => { const {comment, asset, addNotification} = this.props; + if (this.loading) { + return; + } + + this.loading = true; + this.props.addTag({ id: comment.id, name: Tag.toUpperCase(), assetId: asset.id }) + .then(() => { + this.loading = false; + }) .catch((err) => { + this.loading = false; forEachError(err, ({msg}) => addNotification('error', msg)); }); } @@ -132,12 +143,20 @@ export default (tag) => (WrappedComponent) => { deleteTag = () => { const {comment, asset, addNotification} = this.props; + if (this.loading) { + return; + } + this.props.removeTag({ id: comment.id, name: Tag.toUpperCase(), assetId: asset.id }) + .then(() => { + this.loading = false; + }) .catch((err) => { + this.loading = false; forEachError(err, ({msg}) => addNotification('error', msg)); }); } From 4ee727c86a3fa5c4d255f47c7efd53758e2c2724 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 18:27:58 +0700 Subject: [PATCH 25/53] Fix inconsistent query state --- client/coral-embed-stream/src/containers/Comment.js | 1 + client/coral-embed-stream/src/containers/Stream.js | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js index 68b0b3906..8f660c3ca 100644 --- a/client/coral-embed-stream/src/containers/Comment.js +++ b/client/coral-embed-stream/src/containers/Comment.js @@ -35,6 +35,7 @@ export default withFragments({ body created_at status + replyCount tags { tag { name diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js index f3af18e6f..1504227dc 100644 --- a/client/coral-embed-stream/src/containers/Stream.js +++ b/client/coral-embed-stream/src/containers/Stream.js @@ -159,7 +159,6 @@ const commentFragment = gql` id ...${getDefinitionName(Comment.fragments.comment)} ${nest(` - replyCount(excludeIgnored: $excludeIgnored) replies(excludeIgnored: $excludeIgnored) { nodes { id @@ -210,7 +209,6 @@ const LOAD_MORE_QUERY = gql` id ...${getDefinitionName(Comment.fragments.comment)} ${nest(` - replyCount(excludeIgnored: $excludeIgnored) replies(limit: 3, excludeIgnored: $excludeIgnored) { nodes { id From 9746422b16b33a15e35289958f44926ed6ace31e Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 18:31:35 +0700 Subject: [PATCH 26/53] Remove unused actions --- plugin-api/beta/client/hocs/withTags.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js index 63001392f..3a50dc87e 100644 --- a/plugin-api/beta/client/hocs/withTags.js +++ b/plugin-api/beta/client/hocs/withTags.js @@ -6,7 +6,6 @@ import {getDisplayName} from 'coral-framework/helpers/hoc'; import {capitalize} from 'coral-framework/helpers/strings'; import withMutation from 'coral-framework/hocs/withMutation'; import withFragments from 'coral-framework/hocs/withFragments'; -import {showSignInDialog} from 'coral-framework/actions/auth'; import {addNotification} from 'coral-framework/actions/notification'; import {forEachError} from 'coral-framework/utils'; @@ -181,7 +180,7 @@ export default (tag) => (WrappedComponent) => { }); const mapDispatchToProps = (dispatch) => - bindActionCreators({showSignInDialog, addNotification}, dispatch); + bindActionCreators({addNotification}, dispatch); const enhance = compose( withFragments({ From d45038ccc585a8f788d41730dc0553e236030a4b Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 19:37:24 +0700 Subject: [PATCH 27/53] Adapt package.json --- plugins/talk-plugin-featured-comments/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/package.json b/plugins/talk-plugin-featured-comments/package.json index 0ecae78be..8314148a3 100644 --- a/plugins/talk-plugin-featured-comments/package.json +++ b/plugins/talk-plugin-featured-comments/package.json @@ -1,8 +1,8 @@ { - "name": "talk-plugin-featured-comments", - "version": "1.0.0", - "description": "", + "name": "@coralproject/talk-plugin-featured-comments", + "version": "0.0.1", + "description": "Provides support for featured comments", "main": "index.js", - "author": "Belen Curcio ", - "license": "ISC" + "author": "The Coral Project Team ", + "license": "Apache-2.0" } From 636d1f4788c8b609041078177df2ba19258fb466 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 19:37:30 +0700 Subject: [PATCH 28/53] Use `withFragments` from plugin-api --- plugins/talk-plugin-featured-comments/client/containers/Tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js index 790291841..4e9a2e22c 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js @@ -1,5 +1,5 @@ import {compose, gql} from 'react-apollo'; -import withFragments from 'coral-framework/hocs/withFragments'; +import {withFragments} from 'plugin-api/beta/client/hocs'; import Tab from '../components/Tab'; const enhance = compose( From 99fc67d0d9aa8e66a29d6a792ed483732425b6b9 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 19:38:52 +0700 Subject: [PATCH 29/53] Rename insertSorted to insertCommentSorted --- client/coral-embed-stream/src/graphql/utils.js | 2 +- plugins/talk-plugin-featured-comments/client/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js index bd174dc98..5738785fb 100644 --- a/client/coral-embed-stream/src/graphql/utils.js +++ b/client/coral-embed-stream/src/graphql/utils.js @@ -152,7 +152,7 @@ const ascending = (a, b) => { const descending = (a, b) => ascending(a, b) * -1; -export function insertSorted(nodes, comment, sortOrder = 'CHRONOLOGICAL') { +export function insertCommentSorted(nodes, comment, sortOrder = 'CHRONOLOGICAL') { const added = nodes.concat(comment); if (sortOrder === 'CHRONOLOGICAL') { return added.sort(ascending); diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 18ec28901..1c5d2cb82 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -5,7 +5,7 @@ import FeaturedButton from './components/FeaturedButton'; import translations from './translations.json'; import update from 'immutability-helper'; -import {findCommentInEmbedQuery, insertSorted} from 'plugin-api/beta/client/utils/stream'; +import {findCommentInEmbedQuery, insertCommentSorted} from 'plugin-api/beta/client/utils/stream'; export default { translations, @@ -51,7 +51,7 @@ export default { asset: { featuredComments: { nodes: { - $apply: (nodes) => insertSorted(nodes, comment, 'REVERSE_CHRONOLOGICAL') + $apply: (nodes) => insertCommentSorted(nodes, comment, 'REVERSE_CHRONOLOGICAL') } }, featuredCommentsCount: { From 19929c97d82248a01676e261292e426019a3ad29 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 20:17:01 +0700 Subject: [PATCH 30/53] Fix layout issues in comment --- .../src/components/Comment.css | 33 +- .../src/components/Comment.js | 292 +++++++++--------- .../src/components/Toggleable.css | 14 +- .../src/components/Toggleable.js | 5 +- 4 files changed, 172 insertions(+), 172 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css index 2b7198a1d..7eb2ece71 100644 --- a/client/coral-embed-stream/src/components/Comment.css +++ b/client/coral-embed-stream/src/components/Comment.css @@ -17,8 +17,6 @@ .comment { padding-left: 15px; - display: flex; - flex-flow: row; } .commentLevel0 { @@ -67,17 +65,6 @@ border-bottom: 1px solid rgba(255, 255, 255, 0.3); } -/* element in the top right of the Comment */ -.topRight { - float: right; - margin-top: 10px; - text-align: right; -} - -.topRight > * { - text-align: initial; -} - .topRight .popover { margin-top: 1em; right: 0px; @@ -89,11 +76,6 @@ border-bottom: 2px solid currentColor; } -.topRightMenu { - cursor: pointer; - margin-top: 5px; -} - .editCommentForm { margin-bottom: 10px; } @@ -144,7 +126,7 @@ } .commentInfoBar { - float: right; + margin-left: auto; } @keyframes enter { @@ -158,7 +140,6 @@ } .commentContainer { - flex: auto; } .commentAvatar { @@ -177,3 +158,15 @@ .commentFooter { padding-top: 8px; } + +.header { + display: flex; + align-items: center; +} + +.content { +} + +.footer { + +} diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 792dfd2d5..8e0539279 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -403,165 +403,169 @@ export default class Comment extends React.Component {
- - {isStaff(comment.tags) ? Staff : null} +
+ + {isStaff(comment.tags) ? Staff : null} - - - { - (comment.editing && comment.editing.edited) - ?  ({t('comment.edited')}) - : null - } - - - - - { (currentUser && (comment.user.id === currentUser.id)) && - - /* User can edit/delete their own comment for a short window after posting */ - + + { - commentIsStillEditable(comment) && - Edit + (comment.editing && comment.editing.edited) + ?  ({t('comment.edited')}) + : null } - } - { (currentUser && (comment.user.id !== currentUser.id)) && - /* TopRightMenu allows currentUser to ignore other users' comments */ - - + + + { (currentUser && (comment.user.id === currentUser.id)) && + + /* User can edit/delete their own comment for a short window after posting */ + + { + commentIsStillEditable(comment) && + Edit + } - } - { - this.state.isEditing - ? - :
- -
- } + } + { (currentUser && (comment.user.id !== currentUser.id)) && -
- - {!disableReply && - - - } + /* TopRightMenu allows currentUser to ignore other users' comments */ + + + + }
-
- - - + { + this.state.isEditing + ? + :
+ +
+ } +
+
+
+ - + {!disableReply && + + + } +
+
+ + + + +
- {activeReplyBox === comment.id - ? { - setActiveReplyBox(''); - }} + {activeReplyBox === comment.id + ? { + setActiveReplyBox(''); + }} + charCountEnable={charCountEnable} + maxCharCount={maxCharCount} + setActiveReplyBox={setActiveReplyBox} + parentId={(depth < THREADING_LEVEL) ? comment.id : parentId} + addNotification={addNotification} + postComment={postComment} + currentUser={currentUser} + assetId={asset.id} + /> + : null} + + + {view.map((reply) => { + return commentIsIgnored(reply) + ? + : - : null} - - - {view.map((reply) => { - return commentIsIgnored(reply) - ? - : ; - })} - -
- + showSignInDialog={showSignInDialog} + commentIsIgnored={commentIsIgnored} + liveUpdates={liveUpdates} + reactKey={reply.id} + key={reply.id} + comment={reply} + />; + })} + +
+
); diff --git a/client/coral-embed-stream/src/components/Toggleable.css b/client/coral-embed-stream/src/components/Toggleable.css index 0ce8a119b..bbdd5e3d6 100644 --- a/client/coral-embed-stream/src/components/Toggleable.css +++ b/client/coral-embed-stream/src/components/Toggleable.css @@ -2,21 +2,25 @@ outline: none; } -/** +.toggler { + composes: buttonReset from "coral-framework/styles/reset.css"; +} + +/** * Up/Down Chevrons for the top right menu */ .chevron { } .chevron:before { content: '⌃'; - display: inline-block; + display: inline-block; position: relative; - top: 0.25em; + top: 0.25em; } -/* Down Arrow */ +/* Down Arrow */ .chevron.down:before { - display: inline-block; + display: inline-block; position: relative; transform: rotate(180deg); top: 0; diff --git a/client/coral-embed-stream/src/components/Toggleable.js b/client/coral-embed-stream/src/components/Toggleable.js index c7996d866..1c70f2468 100644 --- a/client/coral-embed-stream/src/components/Toggleable.js +++ b/client/coral-embed-stream/src/components/Toggleable.js @@ -27,9 +27,8 @@ export default class Toggleable extends React.Component { const {isOpen} = this.state; return ( - - {isOpen ? upArrow : downArrow} + + {isOpen ? children : null} From 6652368221b993da66052ef7bfdac0e8ece9cbb6 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 21:04:30 +0700 Subject: [PATCH 31/53] Don't export internals of embed stream in plugin-api (for now) --- .../coral-embed-stream/src/graphql/utils.js | 29 +++---------------- client/coral-framework/utils/index.js | 22 ++++++++++++++ plugin-api/beta/client/actions/stream.js | 1 - plugin-api/beta/client/utils/index.js | 1 + plugin-api/beta/client/utils/stream.js | 1 - .../client/containers/TabPane.js | 2 +- .../client/index.js | 5 ++-- 7 files changed, 31 insertions(+), 30 deletions(-) delete mode 100644 plugin-api/beta/client/actions/stream.js create mode 100644 plugin-api/beta/client/utils/index.js delete mode 100644 plugin-api/beta/client/utils/stream.js diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js index 5738785fb..4f51b0ae2 100644 --- a/client/coral-embed-stream/src/graphql/utils.js +++ b/client/coral-embed-stream/src/graphql/utils.js @@ -1,4 +1,6 @@ import update from 'immutability-helper'; +import {insertCommentsSorted} from 'coral-framework/utils'; + function determineCommentDepth(comment) { let depth = 0; let cur = comment; @@ -142,27 +144,6 @@ export function findCommentInEmbedQuery(root, callbackOrId) { return findComment(root.asset.comments.nodes, callback); } -const ascending = (a, b) => { - const dateA = new Date(a.created_at); - const dateB = new Date(b.created_at); - if (dateA < dateB) { return -1; } - if (dateA > dateB) { return 1; } - return 0; -}; - -const descending = (a, b) => ascending(a, b) * -1; - -export function insertCommentSorted(nodes, comment, sortOrder = 'CHRONOLOGICAL') { - const added = nodes.concat(comment); - if (sortOrder === 'CHRONOLOGICAL') { - return added.sort(ascending); - } - if (sortOrder === 'REVERSE_CHRONOLOGICAL') { - return added.sort(descending); - } - throw new Error(`Unknown sort order ${sortOrder}`); -} - function findAndInsertFetchedComments(parent, comments, parent_id) { const isAsset = parent.__typename === 'Asset'; const connectionField = isAsset ? 'comments' : 'replies'; @@ -175,11 +156,9 @@ function findAndInsertFetchedComments(parent, comments, parent_id) { if (isAsset) { return nodes.concat(comments.nodes); } - return nodes - .concat(comments.nodes.filter( + return insertCommentsSorted(nodes, comments.nodes.filter( (comment) => !nodes.some((node) => node.id === comment.id) - )) - .sort(ascending); + )); }}, }, }); diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js index 1866005be..bad551482 100644 --- a/client/coral-framework/utils/index.js +++ b/client/coral-framework/utils/index.js @@ -144,3 +144,25 @@ export function forEachError(error, callback) { callback({error: e, msg}); }); } + +const ascending = (a, b) => { + const dateA = new Date(a.created_at); + const dateB = new Date(b.created_at); + if (dateA < dateB) { return -1; } + if (dateA > dateB) { return 1; } + return 0; +}; + +const descending = (a, b) => ascending(a, b) * -1; + +export function insertCommentsSorted(nodes, comments, sortOrder = 'CHRONOLOGICAL') { + const added = nodes.concat(comments); + if (sortOrder === 'CHRONOLOGICAL') { + return added.sort(ascending); + } + if (sortOrder === 'REVERSE_CHRONOLOGICAL') { + return added.sort(descending); + } + throw new Error(`Unknown sort order ${sortOrder}`); +} + diff --git a/plugin-api/beta/client/actions/stream.js b/plugin-api/beta/client/actions/stream.js deleted file mode 100644 index 0ddb1ba13..000000000 --- a/plugin-api/beta/client/actions/stream.js +++ /dev/null @@ -1 +0,0 @@ -export {setActiveTab} from 'coral-embed-stream/src/actions/stream'; diff --git a/plugin-api/beta/client/utils/index.js b/plugin-api/beta/client/utils/index.js new file mode 100644 index 000000000..09a0ef6bb --- /dev/null +++ b/plugin-api/beta/client/utils/index.js @@ -0,0 +1 @@ +export {insertCommentsSorted} from 'coral-framework/utils'; diff --git a/plugin-api/beta/client/utils/stream.js b/plugin-api/beta/client/utils/stream.js deleted file mode 100644 index dbaa302a9..000000000 --- a/plugin-api/beta/client/utils/stream.js +++ /dev/null @@ -1 +0,0 @@ -export {findCommentInEmbedQuery, insertSorted} from 'coral-embed-stream/src/graphql/utils'; diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 2c33fb5b9..54d23f82c 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -3,7 +3,7 @@ import {bindActionCreators} from 'redux'; import {compose, gql} from 'react-apollo'; import TabPane from '../components/TabPane'; import {withFragments} from 'plugin-api/beta/client/hocs'; -import {setActiveTab} from 'plugin-api/beta/client/actions/stream'; +import {setActiveTab} from 'coral-embed-stream/src/actions/stream'; const mapDispatchToProps = (dispatch) => bindActionCreators({ diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 1c5d2cb82..6d3191374 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -5,7 +5,8 @@ import FeaturedButton from './components/FeaturedButton'; import translations from './translations.json'; import update from 'immutability-helper'; -import {findCommentInEmbedQuery, insertCommentSorted} from 'plugin-api/beta/client/utils/stream'; +import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils'; +import {insertCommentsSorted} from 'plugin-api/beta/client/utils'; export default { translations, @@ -51,7 +52,7 @@ export default { asset: { featuredComments: { nodes: { - $apply: (nodes) => insertCommentSorted(nodes, comment, 'REVERSE_CHRONOLOGICAL') + $apply: (nodes) => insertCommentsSorted(nodes, comment, 'REVERSE_CHRONOLOGICAL') } }, featuredCommentsCount: { From 8a619a219f9ad8b8db6407ac52238f1374f3b16a Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 21:10:59 +0700 Subject: [PATCH 32/53] Refactor isFeatured / isTagged --- client/coral-framework/utils/index.js | 1 + plugin-api/beta/client/hocs/withTags.js | 7 ++----- plugin-api/beta/client/utils/index.js | 2 +- .../coral-plugin-offtopic/client/components/OffTopicTag.js | 5 ++--- .../client/components/FeaturedTag.js | 5 ++--- 5 files changed, 8 insertions(+), 12 deletions(-) diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js index bad551482..0917b73ba 100644 --- a/client/coral-framework/utils/index.js +++ b/client/coral-framework/utils/index.js @@ -166,3 +166,4 @@ export function insertCommentsSorted(nodes, comments, sortOrder = 'CHRONOLOGICAL throw new Error(`Unknown sort order ${sortOrder}`); } +export const isTagged = (tags, which) => tags.some((t) => t.tag.name === which); diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js index 3a50dc87e..bf559024a 100644 --- a/plugin-api/beta/client/hocs/withTags.js +++ b/plugin-api/beta/client/hocs/withTags.js @@ -7,7 +7,7 @@ import {capitalize} from 'coral-framework/helpers/strings'; import withMutation from 'coral-framework/hocs/withMutation'; import withFragments from 'coral-framework/hocs/withFragments'; import {addNotification} from 'coral-framework/actions/notification'; -import {forEachError} from 'coral-framework/utils'; +import {forEachError, isTagged} from 'coral-framework/utils'; export default (tag) => (WrappedComponent) => { if (typeof tag !== 'string') { @@ -28,9 +28,6 @@ export default (tag) => (WrappedComponent) => { } `; - const isTagged = (tags) => - !!tags.filter((t) => t.tag.name === Tag.toUpperCase()).length; - const withAddTag = withMutation( gql` mutation AddTag($id: ID!, $asset_id: ID!, $name: String!) { @@ -163,7 +160,7 @@ export default (tag) => (WrappedComponent) => { render() { const {comment} = this.props; - const alreadyTagged = isTagged(comment.tags); + const alreadyTagged = isTagged(comment.tags, Tag.toUpperCase()); return !!tags.filter((t) => t.tag.name === 'OFF_TOPIC').length; +import {isTagged} from 'plugin-api/beta/client/utils'; export default (props) => ( { - isOffTopic(props.comment.tags) && props.depth === 0 ? ( + isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? ( {t('off_topic')} diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js index ef1758c32..6cd236370 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedTag.js @@ -1,13 +1,12 @@ import React from 'react'; import styles from './FeaturedTag.css'; import {t} from 'plugin-api/beta/client/services'; - -const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length; +import {isTagged} from 'plugin-api/beta/client/utils'; export default (props) => ( { - isFeatured(props.comment.tags) && props.depth === 0 ? ( + isTagged(props.comment.tags, 'FEATURED') && props.depth === 0 ? ( {t('featured')} From 46473142ba23bab970dab659ce5264d72e92890a Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 18 Jul 2017 21:23:39 +0700 Subject: [PATCH 33/53] Use generic version of addTag, removeTag in framework --- client/coral-framework/graphql/mutations.js | 111 ++++++++++++++++++++ plugin-api/beta/client/hocs/withTags.js | 108 ++----------------- 2 files changed, 120 insertions(+), 99 deletions(-) diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js index 024778c1e..91d2ae0ab 100644 --- a/client/coral-framework/graphql/mutations.js +++ b/client/coral-framework/graphql/mutations.js @@ -1,6 +1,117 @@ import {gql} from 'react-apollo'; import withMutation from '../hocs/withMutation'; +function convertItemType(item_type) { + switch (item_type) { + case 'COMMENTS': + return 'Comment'; + case 'USERS': + return 'User'; + case 'ASSETS': + return 'Asset'; + default: + throw new Error(`Unknown item_type ${item_type}`); + } +} + +function getTagFragment(item_type) { + return gql` + fragment Coral_UpdateFragment on ${convertItemType(item_type)} { + tags { + tag { + name + } + } + } + `; +} + +export const withAddTag = withMutation( + gql` + mutation AddTag($id: ID!, $asset_id: ID!, $name: String!, $item_type: TAGGABLE_ITEM_TYPE!) { + addTag(tag: {name: $name, id: $id, item_type: $item_type, asset_id: $asset_id}) { + ...ModifyTagResponse + } + } + `, { + props: ({mutate}) => ({ + addTag: ({id, name, assetId, itemType}) => { + return mutate({ + variables: { + id, + name, + asset_id: assetId, + item_type: itemType, + }, + optimisticResponse: { + addTag: { + __typename: 'ModifyTagResponse', + errors: null, + } + }, + update: (proxy) => { + const fragmentId = `${convertItemType(itemType)}_${id}`; + const fragment = getTagFragment(itemType); + + // Read the data from our cache for this query. + const data = proxy.readFragment({fragment, id: fragmentId}); + + data.tags.push({ + tag: { + __typename: 'Tag', + name + }, + __typename: 'TagLink' + }); + + // Write our data back to the cache. + proxy.writeFragment({fragment, id: fragmentId, data}); + }, + }); + }}), + }); + +export const withRemoveTag = withMutation( + gql` + mutation RemoveTag($id: ID!, $asset_id: ID!, $name: String!, $item_type: TAGGABLE_ITEM_TYPE!) { + removeTag(tag: {name: $name, id: $id, item_type: $item_type, asset_id: $asset_id}) { + ...ModifyTagResponse + } + } + `, { + props: ({mutate}) => ({ + removeTag: ({id, name, assetId, itemType}) => { + return mutate({ + variables: { + id, + name, + asset_id: assetId, + item_type: itemType, + }, + optimisticResponse: { + removeTag: { + __typename: 'ModifyTagResponse', + errors: null, + } + }, + update: (proxy) => { + const fragmentId = `${convertItemType(itemType)}_${id}`; + const fragment = getTagFragment(itemType); + + // Read the data from our cache for this query. + const data = proxy.readFragment({fragment, id: fragmentId}); + + const idx = data.tags.findIndex((i) => i.tag.name === name); + + data.tags = [...data.tags.slice(0, idx), ...data.tags.slice(idx + 1)]; + + // Write our data back to the cache. + proxy.writeFragment({fragment, id: fragmentId, data}); + } + }); + }}), + }); + export const withSetCommentStatus = withMutation( gql` mutation SetCommentStatus($commentId: ID!, $status: COMMENT_STATUS!){ diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js index bf559024a..75d434bef 100644 --- a/plugin-api/beta/client/hocs/withTags.js +++ b/plugin-api/beta/client/hocs/withTags.js @@ -4,7 +4,7 @@ import {bindActionCreators} from 'redux'; import {compose, gql} from 'react-apollo'; import {getDisplayName} from 'coral-framework/helpers/hoc'; import {capitalize} from 'coral-framework/helpers/strings'; -import withMutation from 'coral-framework/hocs/withMutation'; +import {withAddTag, withRemoveTag} from 'coral-framework/graphql/mutations'; import withFragments from 'coral-framework/hocs/withFragments'; import {addNotification} from 'coral-framework/actions/notification'; import {forEachError, isTagged} from 'coral-framework/utils'; @@ -15,100 +15,8 @@ export default (tag) => (WrappedComponent) => { return null; } - tag = tag.toLowerCase(); const Tag = capitalize(tag); - - const COMMENT_FRAGMENT = gql` - fragment Coral_UpdateFragment on Comment { - tags { - tag { - name - } - } - } - `; - - const withAddTag = withMutation( - gql` - mutation AddTag($id: ID!, $asset_id: ID!, $name: String!) { - addTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) { - ...ModifyTagResponse - } - } - `, { - props: ({mutate}) => ({ - addTag: ({id, name, assetId}) => { - return mutate({ - variables: { - id, - name, - asset_id: assetId - }, - optimisticResponse: { - addTag: { - __typename: 'ModifyTagResponse', - errors: null, - } - }, - update: (proxy) => { - const fragmentId = `Comment_${id}`; - - // Read the data from our cache for this query. - const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId}); - - data.tags.push({ - tag: { - __typename: 'Tag', - name: Tag.toUpperCase() - }, - __typename: 'TagLink' - }); - - // Write our data back to the cache. - proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data}); - }, - }); - }}), - }); - - const withRemoveTag = withMutation( - gql` - mutation RemoveTag($id: ID!, $asset_id: ID!, $name: String!) { - removeTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) { - ...ModifyTagResponse - } - } - `, { - props: ({mutate}) => ({ - removeTag: ({id, name, assetId}) => { - return mutate({ - variables: { - id, - name, - asset_id: assetId - }, - optimisticResponse: { - removeTag: { - __typename: 'ModifyTagResponse', - errors: null, - } - }, - update: (proxy) => { - const fragmentId = `Comment_${id}`; - - // Read the data from our cache for this query. - const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId}); - - const idx = data.tags.findIndex((i) => i.tag.name === Tag.toUpperCase()); - - data.tags = [...data.tags.slice(0, idx), ...data.tags.slice(idx + 1)]; - - // Write our data back to the cache. - proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data}); - } - }); - }}), - }); + const TAG = tag.toUpperCase(); class WithTags extends React.Component { loading = false; @@ -124,8 +32,9 @@ export default (tag) => (WrappedComponent) => { this.props.addTag({ id: comment.id, - name: Tag.toUpperCase(), - assetId: asset.id + name: TAG, + assetId: asset.id, + itemType: 'COMMENTS', }) .then(() => { this.loading = false; @@ -145,8 +54,9 @@ export default (tag) => (WrappedComponent) => { this.props.removeTag({ id: comment.id, - name: Tag.toUpperCase(), - assetId: asset.id + name: TAG, + assetId: asset.id, + itemType: 'COMMENTS', }) .then(() => { this.loading = false; @@ -160,7 +70,7 @@ export default (tag) => (WrappedComponent) => { render() { const {comment} = this.props; - const alreadyTagged = isTagged(comment.tags, Tag.toUpperCase()); + const alreadyTagged = isTagged(comment.tags, TAG); return Date: Tue, 18 Jul 2017 23:00:12 +0700 Subject: [PATCH 34/53] Embed scroll to correct element --- client/coral-embed-stream/src/containers/Embed.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js index a5c6ba1a6..a71f86845 100644 --- a/client/coral-embed-stream/src/containers/Embed.js +++ b/client/coral-embed-stream/src/containers/Embed.js @@ -94,7 +94,7 @@ class EmbedContainer extends React.Component { if (!prevProps.root.comment && this.props.root.comment) { // Scroll to a permalinked comment if one is in the URL once the page is done rendering. - setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0); + setTimeout(() => pym.scrollParentToChildEl('talk-embed-stream-container'), 0); } } From 3b10aa39450904d75f1e2374a8c41e2f8a7474de Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 19 Jul 2017 00:33:01 +0700 Subject: [PATCH 35/53] Implement 'Go to conversation' --- .../coral-embed-stream/src/actions/stream.js | 51 +++++++++++-------- .../src/constants/stream.js | 1 + .../coral-embed-stream/src/reducers/stream.js | 11 ++-- client/coral-embed/src/index.js | 48 ++++++++++++++--- client/coral-framework/utils/index.js | 9 ++++ package.json | 1 + .../client/components/FeaturedComment.js | 4 +- .../client/components/TabPane.js | 8 +-- .../client/containers/TabPane.js | 4 +- yarn.lock | 14 +++-- 10 files changed, 109 insertions(+), 42 deletions(-) diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js index d936879e9..7250b86f3 100644 --- a/client/coral-embed-stream/src/actions/stream.js +++ b/client/coral-embed-stream/src/actions/stream.js @@ -1,35 +1,24 @@ import pym from 'coral-framework/services/pym'; import * as actions from '../constants/stream'; +import {buildUrl} from 'coral-framework/utils'; +import queryString from 'query-string'; export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id}); -function removeParam(key, sourceURL) { - let rtn = sourceURL.split('?')[0]; - let param; - let params_arr = []; - let queryString = (sourceURL.indexOf('?') !== -1) ? sourceURL.split('?')[1] : ''; - if (queryString !== '') { - params_arr = queryString.split('&'); - for (let i = params_arr.length - 1; i >= 0; i -= 1) { - param = params_arr[i].split('=')[0]; - if (param === key) { - params_arr.splice(i, 1); - } - } - rtn = `${rtn}?${params_arr.join('&')}`; - } - return rtn; -} - export const viewAllComments = () => { + const search = queryString.stringify({ + ...queryString.parse(location.search), + comment_id: undefined, + }); + // remove the comment_id url param - const modifiedUrl = removeParam('comment_id', location.href); + const url = buildUrl({...location, search}); try { // "window" here refers to the embedded iframe - window.history.replaceState({}, document.title, modifiedUrl); + window.history.replaceState({}, document.title, url); // also change the parent url pym.sendMessage('coral-view-all-comments'); @@ -38,6 +27,28 @@ export const viewAllComments = () => { return {type: actions.VIEW_ALL_COMMENTS}; }; +export const viewComment = (id) => { + + const search = queryString.stringify({ + ...queryString.parse(location.search), + comment_id: id, + }); + + // remove the comment_id url param + const url = buildUrl({...location, search}); + + try { + + // "window" here refers to the embedded iframe + window.history.replaceState({}, document.title, url); + + // also change the parent url + pym.sendMessage('coral-view-comment', id); + } catch (e) { /* not sure if we're worried about old browsers */ } + + return {type: actions.VIEW_COMMENT, id}; +}; + export const addCommentClassName = (className) => ({ type: actions.ADD_COMMENT_CLASSNAME, className diff --git a/client/coral-embed-stream/src/constants/stream.js b/client/coral-embed-stream/src/constants/stream.js index 622a86c18..7ac9427cf 100644 --- a/client/coral-embed-stream/src/constants/stream.js +++ b/client/coral-embed-stream/src/constants/stream.js @@ -1,6 +1,7 @@ export const SET_ACTIVE_REPLY_BOX = 'SET_ACTIVE_REPLY_BOX'; export const ADDTL_COMMENTS_ON_LOAD_MORE = 10; export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS'; +export const VIEW_COMMENT = 'VIEW_COMMENT'; export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME'; export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME'; export const THREADING_LEVEL = process.env.TALK_THREADING_LEVEL; diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js index 4f4fcf47f..2bb8cf0d3 100644 --- a/client/coral-embed-stream/src/reducers/stream.js +++ b/client/coral-embed-stream/src/reducers/stream.js @@ -17,9 +17,9 @@ function getQueryVariable(variable) { const initialState = { activeReplyBox: '', - assetId: getQueryVariable('asset_id'), - assetUrl: getQueryVariable('asset_url'), - commentId: getQueryVariable('comment_id'), + assetId: getQueryVariable('asset_id') || '', + assetUrl: getQueryVariable('asset_url') || '', + commentId: getQueryVariable('comment_id') || '', commentClassNames: [], activeTab: 'all', previousTab: '', @@ -48,6 +48,11 @@ export default function stream(state = initialState, action) { ...state, commentId: '', }; + case actions.VIEW_COMMENT: + return { + ...state, + commentId: action.id, + }; case actions.ADD_COMMENT_CLASSNAME : return { ...state, diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js index 702308c3a..eb61f3b90 100644 --- a/client/coral-embed/src/index.js +++ b/client/coral-embed/src/index.js @@ -1,7 +1,8 @@ import pym from 'pym.js'; import URLSearchParams from 'url-search-params'; -import {stringify} from 'querystring'; +import {buildUrl} from 'coral-framework/utils'; +import queryString from 'query-string'; // TODO: Styles should live in a separate file const snackbarStyles = { @@ -39,7 +40,7 @@ function buildStreamIframeUrl(talkBaseUrl, query) { 'embed/stream?' ].join(''); - url += stringify(query); + url += queryString.stringify(query); return url; } @@ -98,10 +99,37 @@ function configurePymParent(pymParent, opts) { // remove the permalink comment id from the hash pymParent.onMessage('coral-view-all-comments', function() { + + const search = queryString.stringify({ + ...queryString.parse(location.search), + commentId: undefined, + }); + + // remove the commentId url param + const url = buildUrl({...location, search}); + window.history.replaceState( {}, document.title, - location.origin + location.pathname + location.search + url, + ); + }); + + // remove the permalink comment id from the hash + pymParent.onMessage('coral-view-comment', function(id) { + + const search = queryString.stringify({ + ...queryString.parse(location.search), + commentId: id, + }); + + // remove the commentId url param + const url = buildUrl({...location, search}); + + window.history.replaceState( + {}, + document.title, + url, ); }); @@ -193,12 +221,18 @@ Talk.render = function(el, opts) { let urlParams = new URLSearchParams(window.location.search); - query.comment_id = urlParams.get('commentId'); + if (urlParams.get('commentId')) { + query.comment_id = urlParams.get('commentId'); + } - query.asset_id = opts.asset_id; + if (opts.asset_id) { + query.asset_id = opts.asset_id; + } - query.asset_url = opts.asset_url; - if (!query.asset_url) { + if (opts.asset_url) { + query.asset_url = opts.asset_url; + } + else { try { query.asset_url = document.querySelector('link[rel="canonical"]').href; } catch (e) { diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js index 0917b73ba..974be9502 100644 --- a/client/coral-framework/utils/index.js +++ b/client/coral-framework/utils/index.js @@ -167,3 +167,12 @@ export function insertCommentsSorted(nodes, comments, sortOrder = 'CHRONOLOGICAL } export const isTagged = (tags, which) => tags.some((t) => t.tag.name === which); + +export function buildUrl({protocol, hostname, port, pathname, search, hash} = window.location) { + if (search && search[0] !== '?') { + search = `?${search}`; + } else if (search === '?') { + search = ''; + } + return `${protocol}//${hostname}${port ? `:${port}` : ''}${pathname}${search}${hash}`; +} diff --git a/package.json b/package.json index 76b0c299a..ee41de42d 100644 --- a/package.json +++ b/package.json @@ -111,6 +111,7 @@ "passport-jwt": "^2.2.1", "passport-local": "^1.0.0", "prop-types": "^15.5.10", + "query-strings": "^0.0.1", "react-apollo": "^1.1.0", "react-input-autosize": "^1.1.4", "react-recaptcha": "^2.2.6", diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index 61fc9810e..f28d01b6d 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -6,7 +6,7 @@ import {timeago} from 'coral-framework/services/i18n'; import {Slot} from 'plugin-api/beta/client/components'; import {Icon} from 'plugin-api/beta/client/components/ui'; -const FeaturedComment = ({comment, asset, setActiveTab}) => { +const FeaturedComment = ({comment, asset, viewComment}) => { return (
@@ -36,7 +36,7 @@ const FeaturedComment = ({comment, asset, setActiveTab}) => {
setActiveTab('all')} > + onClick={() => viewComment(comment.id)} > {comment.replyCount} | Go to conversation diff --git a/plugins/talk-plugin-featured-comments/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js index 04c52c0cc..f4c7d2bd9 100644 --- a/plugins/talk-plugin-featured-comments/client/components/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/components/TabPane.js @@ -1,14 +1,14 @@ import React from 'react'; import FeaturedComment from './FeaturedComment'; -export default ({asset: {featuredComments, ...asset}, setActiveTab}) => ( +export default ({asset: {featuredComments, ...asset}, viewComment}) => (
- {featuredComments.nodes.map((comment) => - + + viewComment={viewComment} /> )}
); diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 54d23f82c..f7a794328 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -3,11 +3,11 @@ import {bindActionCreators} from 'redux'; import {compose, gql} from 'react-apollo'; import TabPane from '../components/TabPane'; import {withFragments} from 'plugin-api/beta/client/hocs'; -import {setActiveTab} from 'coral-embed-stream/src/actions/stream'; +import {viewComment} from 'coral-embed-stream/src/actions/stream'; const mapDispatchToProps = (dispatch) => bindActionCreators({ - setActiveTab, + viewComment, }, dispatch); const enhance = compose( diff --git a/yarn.lock b/yarn.lock index b2b169db2..710b89fa2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1560,6 +1560,10 @@ check-types@1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/check-types/-/check-types-1.4.0.tgz#eed63bbac9ea49a0e26a096314058b03b08dd62b" +check-valid-url@0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/check-valid-url/-/check-valid-url-0.0.2.tgz#938fc545fc90b71edf800f7345bfd36f3aa0a057" + cheerio@^0.20.0: version "0.20.0" resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.20.0.tgz#5c710f2bab95653272842ba01c6ea61b3545ec35" @@ -4628,10 +4632,6 @@ json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1: dependencies: jsonify "~0.0.0" -json-stringify-pretty-compact@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-1.0.4.tgz#d5161131be27fd9748391360597fcca250c6c5ce" - json-stringify-safe@~5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" @@ -6806,6 +6806,12 @@ query-string@^4.1.0, query-string@^4.2.2: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +query-strings@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/query-strings/-/query-strings-0.0.1.tgz#d22bab97c9d39e2267b3b8e5f78592424b3e58cd" + dependencies: + check-valid-url "0.0.2" + querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" From f051ee1d58bfe78adf47364e8589e04c195582b1 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 19 Jul 2017 00:48:33 +0700 Subject: [PATCH 36/53] Don't create callback in render --- .../client/components/FeaturedComment.js | 80 ++++++++++--------- 1 file changed, 44 insertions(+), 36 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index f28d01b6d..702d7c4dc 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -6,44 +6,52 @@ import {timeago} from 'coral-framework/services/i18n'; import {Slot} from 'plugin-api/beta/client/components'; import {Icon} from 'plugin-api/beta/client/components/ui'; -const FeaturedComment = ({comment, asset, viewComment}) => { - return ( -
+class FeaturedComment extends React.Component { -
- {comment.body} -
+ viewComment = () => { + this.props.viewComment(this.props.comment.id); + } -
- - {comment.user.username} - - - ,{' '}{timeago(comment.created_at)} - + render() { + const {comment, asset} = this.props; + return ( +
+ +
+ {comment.body} +
+ +
+ + {comment.user.username} + + + ,{' '}{timeago(comment.created_at)} + +
+ +
- - -
- ); -}; + ); + } +} export default FeaturedComment; From dcdfbb691aa497b3fd15c0b9518a9d452cc8a783 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 19 Jul 2017 23:30:51 +0700 Subject: [PATCH 37/53] Use lazy loading for slot fragments --- client/coral-framework/helpers/plugins.js | 4 +-- .../client/containers/Tab.js | 2 +- .../client/containers/TabPane.js | 27 ++++++++++++------- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js index d60329baa..e20dfa3e2 100644 --- a/client/coral-framework/helpers/plugins.js +++ b/client/coral-framework/helpers/plugins.js @@ -2,12 +2,12 @@ import React from 'react'; import uniq from 'lodash/uniq'; import pick from 'lodash/pick'; import merge from 'lodash/merge'; -import plugins from 'pluginsConfig'; -import flatten from 'lodash/flatten'; import flattenDeep from 'lodash/flattenDeep'; +import flatten from 'lodash/flatten'; import {loadTranslations} from 'coral-framework/services/i18n'; import {injectReducers, getStore} from 'coral-framework/services/store'; import camelize from './camelize'; +import plugins from 'pluginsConfig'; export function getSlotComponents(slot) { const pluginConfig = getStore().getState().config.plugin_config; diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js index 4e9a2e22c..27c504214 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js @@ -5,7 +5,7 @@ import Tab from '../components/Tab'; const enhance = compose( withFragments({ asset: gql` - fragment TalkFeatured_Tab_asset on Asset { + fragment TalkFeaturedComments_Tab_asset on Asset { featuredCommentsCount: totalCommentCount(tags: ["FEATURED"], excludeIgnored: $excludeIgnored) }`, }), diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index f7a794328..10f407588 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -3,8 +3,14 @@ import {bindActionCreators} from 'redux'; import {compose, gql} from 'react-apollo'; import TabPane from '../components/TabPane'; import {withFragments} from 'plugin-api/beta/client/hocs'; +import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils'; + import {viewComment} from 'coral-embed-stream/src/actions/stream'; +const slots = [ + 'commentReactions', +]; + const mapDispatchToProps = (dispatch) => bindActionCreators({ viewComment, @@ -13,8 +19,14 @@ const mapDispatchToProps = (dispatch) => const enhance = compose( connect(null, mapDispatchToProps), withFragments({ + root: gql` + fragment TalkFeaturedComments_TabPane_root on RootQuery { + __typename + ${getSlotFragmentSpreads(slots, 'root')} + } + `, asset: gql` - fragment TalkFeatured_TabPane_asset on Asset { + fragment TalkFeaturedComments_TabPane_asset on Asset { id featuredComments: comments(tags: ["FEATURED"], excludeIgnored: $excludeIgnored, deep: true) { nodes { @@ -27,21 +39,16 @@ const enhance = compose( name } } - action_summaries { - ... on LikeActionSummary { - count - current_user { - id - } - } - } user { id username } + ${getSlotFragmentSpreads(slots, 'comment')} } } - }`, + ${getSlotFragmentSpreads(slots, 'asset')} + } + `, }), ); From 47a5b84a740f0ad8868fc49cda509595b5712137 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 19 Jul 2017 23:37:35 +0700 Subject: [PATCH 38/53] Pass correct slot props --- .../client/components/FeaturedComment.js | 5 +++-- .../client/components/TabPane.js | 4 +++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js index 702d7c4dc..85d674e45 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js @@ -13,7 +13,7 @@ class FeaturedComment extends React.Component { } render() { - const {comment, asset} = this.props; + const {comment, asset, root, data} = this.props; return (
@@ -35,8 +35,9 @@ class FeaturedComment extends React.Component { diff --git a/plugins/talk-plugin-featured-comments/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js index f4c7d2bd9..63766b7ce 100644 --- a/plugins/talk-plugin-featured-comments/client/components/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/components/TabPane.js @@ -1,11 +1,13 @@ import React from 'react'; import FeaturedComment from './FeaturedComment'; -export default ({asset: {featuredComments, ...asset}, viewComment}) => ( +export default ({root, data, asset: {featuredComments, ...asset}, viewComment}) => (
{featuredComments.nodes.map((comment) => From 8f64229dee4dc4819e6d67442ab35f01245d790a Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 19 Jul 2017 23:50:39 +0700 Subject: [PATCH 39/53] Implement FeaturedComment container --- .../client/components/TabPane.js | 2 +- .../client/containers/FeaturedComment.js | 41 +++++++++++++++++++ .../client/containers/TabPane.js | 32 +++++---------- 3 files changed, 53 insertions(+), 22 deletions(-) create mode 100644 plugins/talk-plugin-featured-comments/client/containers/FeaturedComment.js diff --git a/plugins/talk-plugin-featured-comments/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js index 63766b7ce..3eecfad70 100644 --- a/plugins/talk-plugin-featured-comments/client/components/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/components/TabPane.js @@ -1,5 +1,5 @@ import React from 'react'; -import FeaturedComment from './FeaturedComment'; +import FeaturedComment from '../containers/FeaturedComment'; export default ({root, data, asset: {featuredComments, ...asset}, viewComment}) => (
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedComment.js new file mode 100644 index 000000000..6a2013269 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedComment.js @@ -0,0 +1,41 @@ +import {gql} from 'react-apollo'; +import FeaturedComment from '../components/FeaturedComment'; +import {withFragments} from 'plugin-api/beta/client/hocs'; +import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils'; + +const slots = [ + 'commentReactions', +]; + +export default withFragments({ + root: gql` + fragment TalkFeaturedComments_Comment_root on RootQuery { + __typename + ${getSlotFragmentSpreads(slots, 'root')} + } + `, + asset: gql` + fragment TalkFeaturedComments_Comment_asset on Asset { + __typename + ${getSlotFragmentSpreads(slots, 'asset')} + } + `, + comment: gql` + fragment TalkFeaturedComments_Comment_comment on Comment { + id + body + created_at + replyCount + tags { + tag { + name + } + } + user { + id + username + } + ${getSlotFragmentSpreads(slots, 'comment')} + } + ` +})(FeaturedComment); diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 10f407588..2b4894c7d 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -3,14 +3,11 @@ import {bindActionCreators} from 'redux'; import {compose, gql} from 'react-apollo'; import TabPane from '../components/TabPane'; import {withFragments} from 'plugin-api/beta/client/hocs'; -import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils'; +import FeaturedComment from '../containers/FeaturedComment'; +import {getDefinitionName} from 'coral-framework/utils'; import {viewComment} from 'coral-embed-stream/src/actions/stream'; -const slots = [ - 'commentReactions', -]; - const mapDispatchToProps = (dispatch) => bindActionCreators({ viewComment, @@ -22,32 +19,25 @@ const enhance = compose( root: gql` fragment TalkFeaturedComments_TabPane_root on RootQuery { __typename - ${getSlotFragmentSpreads(slots, 'root')} + ...${getDefinitionName(FeaturedComment.fragments.root)} } + ${FeaturedComment.fragments.root} `, asset: gql` fragment TalkFeaturedComments_TabPane_asset on Asset { id featuredComments: comments(tags: ["FEATURED"], excludeIgnored: $excludeIgnored, deep: true) { nodes { - id - body - created_at - replyCount - tags { - tag { - name - } - } - user { - id - username - } - ${getSlotFragmentSpreads(slots, 'comment')} + ...${getDefinitionName(FeaturedComment.fragments.comment)} } + hasNextPage + startCursor + endCursor } - ${getSlotFragmentSpreads(slots, 'asset')} + ...${getDefinitionName(FeaturedComment.fragments.asset)} } + ${FeaturedComment.fragments.comment} + ${FeaturedComment.fragments.asset} `, }), ); From 7005175fc0189b71727190c51f6fabb963bd19c5 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 19 Jul 2017 23:55:35 +0700 Subject: [PATCH 40/53] Simplify file namings --- .../components/{FeaturedButton.css => Button.css} | 0 .../components/{FeaturedButton.js => Button.js} | 10 +++++----- .../{FeaturedComment.css => Comment.css} | 0 .../components/{FeaturedComment.js => Comment.js} | 6 +++--- .../client/components/TabPane.js | 4 ++-- .../client/components/{FeaturedTag.css => Tag.css} | 0 .../client/components/{FeaturedTag.js => Tag.js} | 2 +- .../containers/{FeaturedComment.js => Comment.js} | 4 ++-- .../client/containers/TabPane.js | 14 +++++++------- .../talk-plugin-featured-comments/client/index.js | 8 ++++---- 10 files changed, 24 insertions(+), 24 deletions(-) rename plugins/talk-plugin-featured-comments/client/components/{FeaturedButton.css => Button.css} (100%) rename plugins/talk-plugin-featured-comments/client/components/{FeaturedButton.js => Button.js} (79%) rename plugins/talk-plugin-featured-comments/client/components/{FeaturedComment.css => Comment.css} (100%) rename plugins/talk-plugin-featured-comments/client/components/{FeaturedComment.js => Comment.js} (93%) rename plugins/talk-plugin-featured-comments/client/components/{FeaturedTag.css => Tag.css} (100%) rename plugins/talk-plugin-featured-comments/client/components/{FeaturedTag.js => Tag.js} (90%) rename plugins/talk-plugin-featured-comments/client/containers/{FeaturedComment.js => Comment.js} (91%) diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css b/plugins/talk-plugin-featured-comments/client/components/Button.css similarity index 100% rename from plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css rename to plugins/talk-plugin-featured-comments/client/components/Button.css diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/Button.js similarity index 79% rename from plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js rename to plugins/talk-plugin-featured-comments/client/components/Button.js index a9da1ecbf..82b17018e 100644 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js +++ b/plugins/talk-plugin-featured-comments/client/components/Button.js @@ -1,20 +1,20 @@ import React from 'react'; import cn from 'classnames'; -import styles from './FeaturedButton.css'; +import styles from './Button.css'; import {name} from '../../package.json'; import {can} from 'plugin-api/beta/client/services'; import {withTags} from 'plugin-api/beta/client/hocs'; import {Icon} from 'plugin-api/beta/client/components/ui'; -const FeaturedButton = (props) => { +const Button = (props) => { const {alreadyTagged, deleteTag, postTag, user} = props; return can(user, 'MODERATE_COMMENTS') ? ( - +
+ ); + } +} + +LoadMore.propTypes = { + loadMore: PropTypes.func.isRequired, + loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']), +}; + +export default LoadMore; diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js index 643d74574..1b535f982 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js @@ -1,9 +1,9 @@ import React from 'react'; import {TabCount} from 'plugin-api/beta/client/components/ui'; +import {t} from 'plugin-api/beta/client/services'; -// TODO: This is just example code, and needs to replaced by an actual implementation. export default ({active, asset: {featuredCommentsCount}}) => ( - Featured {featuredCommentsCount} + {t('featured')} {featuredCommentsCount} ); diff --git a/plugins/talk-plugin-featured-comments/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js index 25d43aa7d..3cf8b2cfd 100644 --- a/plugins/talk-plugin-featured-comments/client/components/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/components/TabPane.js @@ -1,16 +1,47 @@ import React from 'react'; import Comment from '../containers/Comment'; +import LoadMore from './LoadMore'; +import {forEachError} from 'plugin-api/beta/client/utils'; -export default ({root, data, asset: {featuredComments, ...asset}, viewComment}) => ( -
- {featuredComments.nodes.map((comment) => - - )} -
-); +class TabPane extends React.Component { + state = { + loadingState: '', + }; + + loadMore = () => { + this.setState({loadingState: 'loading'}); + this.props.loadMore() + .then(() => { + this.setState({loadingState: 'success'}); + }) + .catch((error) => { + this.setState({loadingState: 'error'}); + forEachError(error, ({msg}) => {this.props.addNotification('error', msg);}); + }); + } + + render() { + const {root, data, asset: {featuredComments, ...asset}, viewComment} = this.props; + return ( +
+ {featuredComments.nodes.map((comment) => + + )} + {featuredComments.hasNextPage && + + } +
+ ); + } +} + +export default TabPane; diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 0dd83c92d..f7989099a 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -1,3 +1,4 @@ +import React from 'react'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {compose, gql} from 'react-apollo'; @@ -5,12 +6,66 @@ import TabPane from '../components/TabPane'; import {withFragments} from 'plugin-api/beta/client/hocs'; import Comment from '../containers/Comment'; import {getDefinitionName} from 'coral-framework/utils'; - +import {addNotification} from 'plugin-api/beta/client/actions/notification'; import {viewComment} from 'coral-embed-stream/src/actions/stream'; +import {insertCommentsSorted} from 'plugin-api/beta/client/utils'; +import update from 'immutability-helper'; + +class TabPaneContainer extends React.Component { + + loadMore = () => { + return this.props.data.fetchMore({ + query: LOAD_MORE_QUERY, + variables: { + limit: 5, + cursor: this.props.root.asset.featuredComments.endCursor, + asset_id: this.props.root.asset.id, + sort: 'REVERSE_CHRONOLOGICAL', + excludeIgnored: this.props.data.variables.excludeIgnored, + }, + updateQuery: (previous, {fetchMoreResult:{comments}}) => { + const updated = update(previous, { + asset: { + featuredComments: { + nodes: { + $apply: (nodes) => insertCommentsSorted(nodes, comments.nodes, 'REVERSE_CHRONOLOGICAL'), + }, + hasNextPage: {$set: comments.hasNextPage}, + endCursor: {$set: comments.endCursor}, + }, + } + }); + return updated; + }, + }); + }; + + render() { + return ; + } +} + +const LOAD_MORE_QUERY = gql` + query CoralEmbedStream_LoadMoreComments($limit: Int = 5, $cursor: Date, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) { + comments(query: {limit: $limit, cursor: $cursor, tags: ["FEATURED"], asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) { + nodes { + ...${getDefinitionName(Comment.fragments.comment)} + } + hasNextPage + startCursor + endCursor + } + } + ${Comment.fragments.comment} +`; const mapDispatchToProps = (dispatch) => bindActionCreators({ viewComment, + addNotification, }, dispatch); const enhance = compose( @@ -42,4 +97,4 @@ const enhance = compose( }), ); -export default enhance(TabPane); +export default enhance(TabPaneContainer); From da2bc69d191d14637431a69466de3cd0e0f52055 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 01:27:06 +0700 Subject: [PATCH 42/53] Translation --- .../client/components/Comment.js | 4 ++-- .../client/components/Tab.js | 2 +- .../client/components/Tag.js | 2 +- plugins/talk-plugin-featured-comments/client/index.js | 2 +- .../client/translations.json | 10 ---------- .../client/translations.yml | 8 ++++++++ 6 files changed, 13 insertions(+), 15 deletions(-) delete mode 100644 plugins/talk-plugin-featured-comments/client/translations.json create mode 100644 plugins/talk-plugin-featured-comments/client/translations.yml diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js index 7ac2869b1..40452b024 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.js +++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js @@ -2,7 +2,7 @@ import React from 'react'; import cn from 'classnames'; import styles from './Comment.css'; import {name} from '../../package.json'; -import {timeago} from 'plugin-api/beta/client/services'; +import {t, timeago} from 'plugin-api/beta/client/services'; import {Slot} from 'plugin-api/beta/client/components'; import {Icon} from 'plugin-api/beta/client/components/ui'; @@ -46,7 +46,7 @@ class Comment extends React.Component { {comment.replyCount} | - Go to conversation + {t('talk-plugin-featured-comments.go_to_conversation')}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js index 1b535f982..c780887c6 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js @@ -4,6 +4,6 @@ import {t} from 'plugin-api/beta/client/services'; export default ({active, asset: {featuredCommentsCount}}) => ( - {t('featured')} {featuredCommentsCount} + {t('talk-plugin-featured-comments.featured')} {featuredCommentsCount} ); diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index 06603faab..4afa9629a 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js @@ -8,7 +8,7 @@ export default (props) => ( { isTagged(props.comment.tags, 'FEATURED') && props.depth === 0 ? ( - {t('featured')} + {t('talk-plugin-featured-comments.featured')} ) : null } diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index f8460c04c..8301ab624 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -2,7 +2,7 @@ import Tab from './containers/Tab'; import TabPane from './containers/TabPane'; import Tag from './components/Tag'; import Button from './components/Button'; -import translations from './translations.json'; +import translations from './translations.yml'; import update from 'immutability-helper'; import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils'; diff --git a/plugins/talk-plugin-featured-comments/client/translations.json b/plugins/talk-plugin-featured-comments/client/translations.json deleted file mode 100644 index b7904a164..000000000 --- a/plugins/talk-plugin-featured-comments/client/translations.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "en" : { - "feature": "Feature", - "featured": "Featured" - }, - "es" : { - "feature" : "Remarcar", - "featured": "Remarcado" - } -} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/translations.yml b/plugins/talk-plugin-featured-comments/client/translations.yml new file mode 100644 index 000000000..7f6db9370 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/translations.yml @@ -0,0 +1,8 @@ +en: + talk-plugin-featured-comments: + featured: Featured + go_to_conversation: Go to conversation +es: + talk-plugin-featured-comments: + featured: Remarcado + go_to_conversation: Ir al comentario From 673f0cd232529b080d6da7021d6bbf49233d5e18 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 02:07:40 +0700 Subject: [PATCH 43/53] Hide featured comments tab when empty --- .../src/components/Stream.js | 34 ++++++++++++++----- .../client/containers/Tab.js | 3 +- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 2bb1ffaa1..395ca8c3b 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -36,6 +36,21 @@ class Stream extends React.Component { if (!this.userIsDegraged(this.props) && this.userIsDegraged(next)) { this.setState({keepCommentBox: true}); } + + if (next.activeStreamTab !== 'all') { + const slotPlugins = this.getSlotComponents('streamTabs', next).map((c) => c.talkPluginName); + if (slotPlugins.indexOf(next.activeStreamTab) === -1) { + next.setActiveStreamTab('all'); + } + } + } + + getSlotProps({data, root, root: {asset}} = this.props) { + return {data, root, asset}; + } + + getSlotComponents(slot, props = this.props) { + return getSlotComponents(slot, props.reduxState, this.getSlotProps(props)); } setActiveReplyBox = (id) => { @@ -74,7 +89,6 @@ class Stream extends React.Component { loadMoreComments, viewAllComments, auth: {loggedIn, user}, - reduxState, editName } = this.props; const {keepCommentBox} = this.state; @@ -98,7 +112,7 @@ class Stream extends React.Component { }; const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox); - const streamTabProps = {data, root, asset}; + const slotProps = this.getSlotProps(); if (!comment && !comments) { console.error('Talk: No comments came back from the graph given that query. Please, check the query params.'); @@ -159,8 +173,7 @@ class Stream extends React.Component { {loggedIn && ( @@ -207,13 +220,16 @@ class Stream extends React.Component {
- +
- {getSlotComponents('streamTabs', reduxState, streamTabProps).map((PluginComponent) => ( + {this.getSlotComponents('streamTabs').map((PluginComponent) => ( @@ -223,10 +239,10 @@ class Stream extends React.Component { - {getSlotComponents('streamTabPanes', reduxState, streamTabProps).map((PluginComponent) => ( + {this.getSlotComponents('streamTabPanes').map((PluginComponent) => ( ))} diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js index 27c504214..5d92387d6 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js @@ -1,5 +1,5 @@ import {compose, gql} from 'react-apollo'; -import {withFragments} from 'plugin-api/beta/client/hocs'; +import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs'; import Tab from '../components/Tab'; const enhance = compose( @@ -9,6 +9,7 @@ const enhance = compose( featuredCommentsCount: totalCommentCount(tags: ["FEATURED"], excludeIgnored: $excludeIgnored) }`, }), + excludeIf((props) => props.asset.featuredCommentsCount === 0), ); export default enhance(Tab); From baa480836439e28dcd4c44c0eaff49d257e1b2cc Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 02:16:19 +0700 Subject: [PATCH 44/53] Allow setting default stream tab --- .../coral-embed-stream/src/components/Stream.js | 16 ++++++++++++---- client/coral-embed-stream/src/reducers/stream.js | 2 +- webpack.config.js | 3 ++- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 395ca8c3b..2a1381862 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -37,10 +37,18 @@ class Stream extends React.Component { this.setState({keepCommentBox: true}); } - if (next.activeStreamTab !== 'all') { - const slotPlugins = this.getSlotComponents('streamTabs', next).map((c) => c.talkPluginName); - if (slotPlugins.indexOf(next.activeStreamTab) === -1) { - next.setActiveStreamTab('all'); + this.fallbackAllTab(next); + } + + componentDidMount() { + this.fallbackAllTab(); + } + + fallbackAllTab(props = this.props) { + if (props.activeStreamTab !== 'all') { + const slotPlugins = this.getSlotComponents('streamTabs', props).map((c) => c.talkPluginName); + if (slotPlugins.indexOf(props.activeStreamTab) === -1) { + props.setActiveStreamTab('all'); } } } diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js index 2bb8cf0d3..c624c0959 100644 --- a/client/coral-embed-stream/src/reducers/stream.js +++ b/client/coral-embed-stream/src/reducers/stream.js @@ -21,7 +21,7 @@ const initialState = { assetUrl: getQueryVariable('asset_url') || '', commentId: getQueryVariable('comment_id') || '', commentClassNames: [], - activeTab: 'all', + activeTab: process.env.TALK_DEFAULT_STEAM_TAB, previousTab: '', }; diff --git a/webpack.config.js b/webpack.config.js index 5c6655d17..395cf02a3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -109,7 +109,8 @@ const config = { }), new webpack.EnvironmentPlugin({ 'TALK_PLUGINS_JSON': '{}', - 'TALK_THREADING_LEVEL': '3' + 'TALK_THREADING_LEVEL': '3', + 'TALK_DEFAULT_STEAM_TAB': 'all', }) ], resolveLoader: { From fd0143da5d8c4ef5db6ce8d26f719c982267f674 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 02:17:31 +0700 Subject: [PATCH 45/53] Use connect from framework --- .../talk-plugin-featured-comments/client/containers/TabPane.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index f7989099a..e2be0ad99 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -1,9 +1,8 @@ import React from 'react'; -import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {compose, gql} from 'react-apollo'; import TabPane from '../components/TabPane'; -import {withFragments} from 'plugin-api/beta/client/hocs'; +import {withFragments, connect} from 'plugin-api/beta/client/hocs'; import Comment from '../containers/Comment'; import {getDefinitionName} from 'coral-framework/utils'; import {addNotification} from 'plugin-api/beta/client/actions/notification'; From 3fa475009a55f76556c66bca549203a8bbfc7998 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 02:30:06 +0700 Subject: [PATCH 46/53] Use getDefinition name from plugin-api --- plugin-api/beta/client/utils/index.js | 1 + .../talk-plugin-featured-comments/client/containers/TabPane.js | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugin-api/beta/client/utils/index.js b/plugin-api/beta/client/utils/index.js index 5b9748699..e0ff635e0 100644 --- a/plugin-api/beta/client/utils/index.js +++ b/plugin-api/beta/client/utils/index.js @@ -3,4 +3,5 @@ export { insertCommentsSorted, getSlotFragmentSpreads, forEachError, + getDefinitionName, } from 'coral-framework/utils'; diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index e2be0ad99..e9d466061 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -4,10 +4,9 @@ import {compose, gql} from 'react-apollo'; import TabPane from '../components/TabPane'; import {withFragments, connect} from 'plugin-api/beta/client/hocs'; import Comment from '../containers/Comment'; -import {getDefinitionName} from 'coral-framework/utils'; import {addNotification} from 'plugin-api/beta/client/actions/notification'; import {viewComment} from 'coral-embed-stream/src/actions/stream'; -import {insertCommentsSorted} from 'plugin-api/beta/client/utils'; +import {insertCommentsSorted, getDefinitionName} from 'plugin-api/beta/client/utils'; import update from 'immutability-helper'; class TabPaneContainer extends React.Component { From d6adff288cd5299ced561820241b42e113ad8f2f Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 02:51:09 +0700 Subject: [PATCH 47/53] Fix typo --- client/coral-embed-stream/src/reducers/stream.js | 2 +- webpack.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js index c624c0959..86d5301b7 100644 --- a/client/coral-embed-stream/src/reducers/stream.js +++ b/client/coral-embed-stream/src/reducers/stream.js @@ -21,7 +21,7 @@ const initialState = { assetUrl: getQueryVariable('asset_url') || '', commentId: getQueryVariable('comment_id') || '', commentClassNames: [], - activeTab: process.env.TALK_DEFAULT_STEAM_TAB, + activeTab: process.env.TALK_DEFAULT_STREAM_TAB, previousTab: '', }; diff --git a/webpack.config.js b/webpack.config.js index 395cf02a3..1f4c16ee4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -110,7 +110,7 @@ const config = { new webpack.EnvironmentPlugin({ 'TALK_PLUGINS_JSON': '{}', 'TALK_THREADING_LEVEL': '3', - 'TALK_DEFAULT_STEAM_TAB': 'all', + 'TALK_DEFAULT_STREAM_TAB': 'all', }) ], resolveLoader: { From 6cab2634bf0847ee22ca6db3999095f340795ea0 Mon Sep 17 00:00:00 2001 From: Kim Gardner Date: Wed, 19 Jul 2017 16:05:28 -0400 Subject: [PATCH 48/53] Add space before Go to conversation text --- .../talk-plugin-featured-comments/client/components/Comment.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js index 40452b024..619cc27fc 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.js +++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js @@ -45,8 +45,7 @@ class Comment extends React.Component {
From 64571d384859f2870cdfef8a5cd2404e0ceedc43 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 03:28:45 +0700 Subject: [PATCH 49/53] Subtract ignored comments correctly --- plugins/talk-plugin-featured-comments/client/index.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 8301ab624..d804e2b55 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -21,16 +21,15 @@ export default { updateQueries: { CoralEmbedStream_Embed: (previous) => { const ignoredUserId = variables.id; + const newNodes = previous.asset.featuredComments.nodes.filter((n) => n.user.id !== ignoredUserId); + const removedCount = previous.asset.featuredComments.nodes.length - newNodes.length; const updated = update(previous, { asset: { featuredComments: { - nodes: { - $apply: (nodes) => - nodes.filter((n) => n.user.id !== ignoredUserId) - } + nodes: {$set: newNodes} }, featuredCommentsCount: { - $apply: (value) => value - 1 + $apply: (value) => value - removedCount, } } }); From 0b884a766449531ac39591f3a2737339112f00ca Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 03:44:25 +0700 Subject: [PATCH 50/53] Harmonize classnames --- .../client/components/Button.js | 4 ++-- .../client/components/Comment.js | 20 +++++++++---------- .../package.json | 1 + 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.js b/plugins/talk-plugin-featured-comments/client/components/Button.js index 82b17018e..b9d0cc95f 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Button.js +++ b/plugins/talk-plugin-featured-comments/client/components/Button.js @@ -1,7 +1,7 @@ import React from 'react'; import cn from 'classnames'; import styles from './Button.css'; -import {name} from '../../package.json'; +import {pluginName} from '../../package.json'; import {can} from 'plugin-api/beta/client/services'; import {withTags} from 'plugin-api/beta/client/hocs'; import {Icon} from 'plugin-api/beta/client/components/ui'; @@ -11,7 +11,7 @@ const Button = (props) => { return can(user, 'MODERATE_COMMENTS') ? (
From 2342934f48329425f0c3a8409196abf275975ce8 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 03:58:22 +0700 Subject: [PATCH 52/53] Reset star button css --- .../client/components/Button.css | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css index 6828e64fd..cd05d7238 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Button.css +++ b/plugins/talk-plugin-featured-comments/client/components/Button.css @@ -1,15 +1,14 @@ .button { + + /* TODO: figure out the best location to include the `reset.css` */ + composes: buttonReset from "coral-framework/styles/reset.css"; + color: #2a2a2a; - background: none; - padding: 0px; - border: none; margin-right: 10px; - vertical-align: middle; } -.button:hover { +.button { color: #767676; - cursor: pointer; } .button.featured { @@ -18,11 +17,9 @@ .button.featured:hover { color: #10589b; - cursor: pointer; } .icon { font-size: 18px; - padding: 0 5px; vertical-align: top; -} \ No newline at end of file +} From 44e89bc96c138295656adb9e9a1cdb0dfc6faa3e Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 20 Jul 2017 04:01:39 +0700 Subject: [PATCH 53/53] Remove unused style --- .../client/components/Button.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css index cd05d7238..11e35d40b 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Button.css +++ b/plugins/talk-plugin-featured-comments/client/components/Button.css @@ -15,10 +15,6 @@ color: #10589b; } -.button.featured:hover { - color: #10589b; -} - .icon { font-size: 18px; vertical-align: top;