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; + }, + } + }) + }, };