From ddb555e07f9b38d767a2a6896f93d1685b1d9464 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 24 Aug 2017 21:30:16 +0700 Subject: [PATCH] Add new sorting variables --- .../src/containers/Embed.js | 18 +++++++-- .../src/containers/Stream.js | 27 ++++++++++++-- .../coral-embed-stream/src/graphql/index.js | 2 +- .../coral-embed-stream/src/reducers/stream.js | 2 + .../client/containers/TabPane.js | 37 ++++++++++++++++--- test/server/graph/mutations/editComment.js | 2 +- 6 files changed, 73 insertions(+), 15 deletions(-) diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js index 731cab264..5a0ea534d 100644 --- a/client/coral-embed-stream/src/containers/Embed.js +++ b/client/coral-embed-stream/src/containers/Embed.js @@ -151,7 +151,15 @@ const slots = [ ]; const EMBED_QUERY = gql` - query CoralEmbedStream_Embed($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) { + query CoralEmbedStream_Embed( + $assetId: ID, + $assetUrl: String, + $commentId: ID!, + $hasComment: Boolean!, + $excludeIgnored: Boolean, + $sortBy: SORT_COMMENTS_BY!, + $sort: SORT_ORDER!, + ) { me { id status @@ -163,13 +171,15 @@ const EMBED_QUERY = gql` `; export const withEmbedQuery = withQuery(EMBED_QUERY, { - options: ({auth, commentId, assetId, assetUrl}) => ({ + options: ({auth, commentId, assetId, assetUrl, sortBy, sort}) => ({ variables: { assetId, assetUrl, commentId, hasComment: commentId !== '', excludeIgnored: Boolean(auth && auth.user && auth.user.id), + sortBy, + sort, }, }), }); @@ -180,7 +190,9 @@ const mapStateToProps = (state) => ({ assetId: state.stream.assetId, assetUrl: state.stream.assetUrl, activeTab: state.embed.activeTab, - config: state.config + config: state.config, + sort: state.stream.sort, + sortBy: state.stream.sortBy, }); const mapDispatchToProps = (dispatch) => diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js index 8b02e793f..4720a6889 100644 --- a/client/coral-embed-stream/src/containers/Stream.js +++ b/client/coral-embed-stream/src/containers/Stream.js @@ -119,7 +119,8 @@ class StreamContainer extends React.Component { cursor: this.props.root.asset.comments.endCursor, parent_id: null, asset_id: this.props.root.asset.id, - sort: 'DESC', + sort: this.props.data.variables.sort, + sortBy: this.props.data.variables.sortBy, excludeIgnored: this.props.data.variables.excludeIgnored, }, updateQuery: (prev, {fetchMoreResult:{comments}}) => { @@ -203,8 +204,26 @@ const COMMENTS_EDITED_SUBSCRIPTION = gql` `; const LOAD_MORE_QUERY = gql` - query CoralEmbedStream_LoadMoreComments($limit: Int = 5, $cursor: Cursor, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) { - comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) { + query CoralEmbedStream_LoadMoreComments( + $limit: Int = 5 + $cursor: Cursor + $parent_id: ID + $asset_id: ID + $sort: SORT_ORDER + $sortBy: SORT_COMMENTS_BY = CREATED_AT + $excludeIgnored: Boolean + ) { + comments( + query: { + limit: $limit + cursor: $cursor + parent_id: $parent_id + asset_id: $asset_id + sort: $sort + sortBy: $sortBy + excludeIgnored: $excludeIgnored + } + ) { nodes { ...CoralEmbedStream_Stream_comment } @@ -255,7 +274,7 @@ const fragments = { } commentCount @skip(if: $hasComment) totalCommentCount @skip(if: $hasComment) - comments(query: {limit: 10, excludeIgnored: $excludeIgnored}) @skip(if: $hasComment) { + comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sort: $sort, sortBy: $sortBy}) @skip(if: $hasComment) { nodes { ...CoralEmbedStream_Stream_comment } diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js index 9a3718b0b..b4c5ce163 100644 --- a/client/coral-embed-stream/src/graphql/index.js +++ b/client/coral-embed-stream/src/graphql/index.js @@ -56,7 +56,7 @@ const extension = { fragment CoralEmbedStream_CreateCommentResponse on CreateCommentResponse { comment { ...CoralEmbedStream_CreateCommentResponse_Comment - replies(query: {}) { + replies { nodes { ...CoralEmbedStream_CreateCommentResponse_Comment } diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js index 86d5301b7..02d6933ba 100644 --- a/client/coral-embed-stream/src/reducers/stream.js +++ b/client/coral-embed-stream/src/reducers/stream.js @@ -23,6 +23,8 @@ const initialState = { commentClassNames: [], activeTab: process.env.TALK_DEFAULT_STREAM_TAB, previousTab: '', + sortBy: 'CREATED_AT', + sort: 'DESC', }; export default function stream(state = initialState, action) { diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index b25e93040..9a2280233 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -6,7 +6,7 @@ import {withFragments, connect} from 'plugin-api/beta/client/hocs'; import Comment from '../containers/Comment'; import {addNotification} from 'plugin-api/beta/client/actions/notification'; import {viewComment} from 'coral-embed-stream/src/actions/stream'; -import {insertCommentsSorted, getDefinitionName} from 'plugin-api/beta/client/utils'; +import {getDefinitionName} from 'plugin-api/beta/client/utils'; import update from 'immutability-helper'; class TabPaneContainer extends React.Component { @@ -18,7 +18,8 @@ class TabPaneContainer extends React.Component { limit: 5, cursor: this.props.asset.featuredComments.endCursor, asset_id: this.props.asset.id, - sort: 'DESC', + sort: this.props.data.variables.sort, + sortBy: this.props.data.variables.sortBy, excludeIgnored: this.props.data.variables.excludeIgnored, }, updateQuery: (previous, {fetchMoreResult:{comments}}) => { @@ -26,7 +27,7 @@ class TabPaneContainer extends React.Component { asset: { featuredComments: { nodes: { - $apply: (nodes) => insertCommentsSorted(nodes, comments.nodes, 'DESC'), + $push: comments.nodes, }, hasNextPage: {$set: comments.hasNextPage}, endCursor: {$set: comments.endCursor}, @@ -47,8 +48,25 @@ class TabPaneContainer extends React.Component { } const LOAD_MORE_QUERY = gql` - query TalkFeaturedComments_LoadMoreComments($limit: Int = 5, $cursor: Cursor, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) { - comments(query: {limit: $limit, cursor: $cursor, tags: ["FEATURED"], asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) { + query TalkFeaturedComments_LoadMoreComments( + $limit: Int = 5 + $cursor: Cursor + $asset_id: ID + $sort: SORT_ORDER + $sortBy: SORT_COMMENTS_BY + $excludeIgnored: Boolean + ) { + comments( + query: { + limit: $limit + cursor: $cursor + tags: ["FEATURED"] + asset_id: $asset_id, + sort: $sort + sortBy: $sortBy + excludeIgnored: $excludeIgnored + } + ) { nodes { ...${getDefinitionName(Comment.fragments.comment)} } @@ -79,7 +97,14 @@ const enhance = compose( asset: gql` fragment TalkFeaturedComments_TabPane_asset on Asset { id - featuredComments: comments(query: {tags: ["FEATURED"]}, deep: true) @skip(if: $hasComment) { + featuredComments: comments( + query: { + tags: ["FEATURED"] + sort: $sort + sortBy: $sortBy + } + deep: true + ) @skip(if: $hasComment) { nodes { ...${getDefinitionName(Comment.fragments.comment)} } diff --git a/test/server/graph/mutations/editComment.js b/test/server/graph/mutations/editComment.js index c6b13638b..8507fdc36 100644 --- a/test/server/graph/mutations/editComment.js +++ b/test/server/graph/mutations/editComment.js @@ -227,7 +227,7 @@ describe('graph.mutations.editComment', () => { asset_id: asset.id, author_id: user.id, }, - beforeEdit, + beforeEdit )); // now edit