From c261cdc0c691db752e7d577a145ceb8215632b1f Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 24 Apr 2017 22:49:52 +0700 Subject: [PATCH] Compose comment fragments --- .../src/containers/Comment.js | 28 +++++++++ .../src/containers/Embed.js | 3 +- .../src/containers/Stream.js | 59 +++++-------------- client/coral-framework/hocs/withFragments.js | 16 +++++ 4 files changed, 61 insertions(+), 45 deletions(-) create mode 100644 client/coral-embed-stream/src/containers/Comment.js create mode 100644 client/coral-framework/hocs/withFragments.js diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js new file mode 100644 index 000000000..93c9f2471 --- /dev/null +++ b/client/coral-embed-stream/src/containers/Comment.js @@ -0,0 +1,28 @@ +import {gql} from 'react-apollo'; +import Comment from '../components/Comment'; +import withFragments from 'coral-framework/hocs/withFragments'; + +export default withFragments({ + comment: gql` + fragment Comment_comment on Comment { + id + body + created_at + status + tags { + name + } + user { + id + name: username + } + action_summaries { + __typename + count + current_user { + id + created_at + } + } + }`, +})(Comment); diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js index fe715cd3b..0a03462fc 100644 --- a/client/coral-embed-stream/src/containers/Embed.js +++ b/client/coral-embed-stream/src/containers/Embed.js @@ -9,7 +9,7 @@ import {authActions, assetActions, pym} from 'coral-framework'; import Embed from '../components/Embed'; import {setCommentCountCache, viewAllComments} from '../actions/stream'; import {setActiveTab} from '../actions/embed'; -import * as Stream from './Stream'; +import Stream from './Stream'; const {logout, checkLogin} = authActions; const {fetchAssetSuccess} = assetActions; @@ -25,6 +25,7 @@ class EmbedContainer extends React.Component { if(this.props.data.me && !nextProps.data.me) { // Refetch because on logout `excludeIgnored` becomes `false`. + // TODO: logout via mutation and obsolete this? this.props.data.refetch(); } diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js index d57c37b33..838df1084 100644 --- a/client/coral-embed-stream/src/containers/Stream.js +++ b/client/coral-embed-stream/src/containers/Stream.js @@ -5,12 +5,14 @@ import {bindActionCreators} from 'redux'; import uniqBy from 'lodash/uniqBy'; import sortBy from 'lodash/sortBy'; import isNil from 'lodash/isNil'; -import Stream from '../components/Stream'; import {NEW_COMMENT_COUNT_POLL_INTERVAL} from '../constants/stream'; import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag, ignoreUser} from 'coral-framework/graphql/mutations'; import {notificationActions, authActions} from 'coral-framework'; import {editName} from 'coral-framework/actions/user'; import {setCommentCountCache, setActiveReplyBox} from '../actions/stream'; +import Stream from '../components/Stream'; +import Comment from './Comment'; +import withFragments from 'coral-framework/hocs/withFragments'; const {showSignInDialog} = authActions; const {addNotification} = notificationActions; @@ -135,36 +137,6 @@ class StreamContainer extends React.Component { } } -const commentViewFragment = gql` - fragment commentView on Comment { - id - body - created_at - status - tags { - name - } - user { - id - name: username - } - action_summaries { - ...actionSummaryView - } - } -`; - -const actionSummaryViewFragment = gql` - fragment actionSummaryView on ActionSummary { - __typename - count - current_user { - id - created_at - } - } -`; - const LOAD_COMMENT_COUNTS_QUERY = gql` query LoadCommentCounts($asset_id: ID, $limit: Int = 5, $sort: SORT_ORDER) { asset(id: $asset_id) { @@ -181,31 +153,30 @@ const LOAD_COMMENT_COUNTS_QUERY = gql` const LOAD_MORE_QUERY = gql` query LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) { new_top_level_comments: comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) { - ...commentView + ...Comment_comment replyCount(excludeIgnored: $excludeIgnored) replies(limit: 3) { - ...commentView + ...Comment_comment } } } - ${commentViewFragment} - ${actionSummaryViewFragment} + ${Comment.fragments.comment} `; -StreamContainer.fragments = { +const fragments = { root: gql` fragment Stream_root on RootQuery { comment(id: $commentId) @include(if: $hasComment) { - ...commentView + ...Comment_comment replyCount(excludeIgnored: $excludeIgnored) replies { - ...commentView + ...Comment_comment } parent { - ...commentView + ...Comment_comment replyCount(excludeIgnored: $excludeIgnored) replies { - ...commentView + ...Comment_comment } } } @@ -234,10 +205,10 @@ StreamContainer.fragments = { commentCount(excludeIgnored: $excludeIgnored) totalCommentCount(excludeIgnored: $excludeIgnored) comments(limit: 10, excludeIgnored: $excludeIgnored) { - ...commentView + ...Comment_comment replyCount(excludeIgnored: $excludeIgnored) replies(limit: 3, excludeIgnored: $excludeIgnored) { - ...commentView + ...Comment_comment } } } @@ -249,8 +220,7 @@ StreamContainer.fragments = { status } } - ${commentViewFragment} - ${actionSummaryViewFragment} + ${Comment.fragments.comment} `, }; @@ -284,5 +254,6 @@ export default compose( removeCommentTag, ignoreUser, deleteAction, + withFragments(fragments), )(StreamContainer); diff --git a/client/coral-framework/hocs/withFragments.js b/client/coral-framework/hocs/withFragments.js new file mode 100644 index 000000000..8e5fbccb9 --- /dev/null +++ b/client/coral-framework/hocs/withFragments.js @@ -0,0 +1,16 @@ +import React from 'react'; + +function getDisplayName(WrappedComponent) { + return WrappedComponent.displayName || WrappedComponent.name || 'Component'; +} + +export default fragments => WrappedComponent => { + class WithFragments extends React.Component { + render() { + return ; + } + } + WithFragments.fragments = fragments; + WithFragments.displayName = `WithFragments(${getDisplayName(WrappedComponent)})`; + return WithFragments; +};