From 0c777cbad491fc8ded814651d4be52ce00309452 Mon Sep 17 00:00:00 2001 From: David Jay Date: Wed, 8 Feb 2017 08:59:38 -0800 Subject: [PATCH 01/14] Adding loadMore function. --- client/coral-embed-stream/src/Embed.js | 19 +++++++++++++- .../graphql/queries/getCounts.graphql | 10 ++++++++ .../coral-framework/graphql/queries/index.js | 25 +++++++++++++++++++ .../graphql/queries/loadMore.graphql | 7 ++++++ .../graphql/queries/streamQuery.graphql | 4 +-- package.json | 4 +-- 6 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 client/coral-framework/graphql/queries/getCounts.graphql create mode 100644 client/coral-framework/graphql/queries/loadMore.graphql diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index a853efead..3eb12b04f 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -3,7 +3,7 @@ import {compose} from 'react-apollo'; import {connect} from 'react-redux'; import isEqual from 'lodash/isEqual'; -import {TabBar, Tab, TabContent, Spinner} from 'coral-ui'; +import {TabBar, Tab, TabContent, Spinner, Button} from 'coral-ui'; const {logout, showSignInDialog, requestConfirmEmail} = authActions; const {addNotification, clearNotification} = notificationActions; @@ -77,6 +77,17 @@ class Embed extends Component { } } + loadMoreComments = () => { + this.props.loadMore({ + limit: 10, + cursor: new Date(), + asset_id: this.props.asset.id, + sort: 'REVERSE_CHRONOLOGICAL' + }) + .then((result) => console.log('result', result)) + .catch((err) => console.log('err', err)); + } + render () { const {activeTab} = this.state; const {closedAt} = this.props.asset; @@ -95,6 +106,8 @@ class Embed extends Component { return ; } + console.log('Render', this.props.data); + return (
@@ -155,6 +168,10 @@ class Embed extends Component { clearNotification={this.props.clearNotification} notification={{text: null}} /> + ({ + data, + loadMore: ({limit, cursor, parent_id, asset_id, sort}) => { + return data.fetchMore({ + query: LOAD_MORE, + variables: { + limit, + cursor, + parent_id, + asset_id, + sort + }, + updateQuery: ({asset}, {fetchMoreResult:{data:{new_top_level_comments}}}) => { + const comments = asset.comments.concat(new_top_level_comments); + return { + asset: { + ...asset, + comments + } + }; + } + }); + } }) }); diff --git a/client/coral-framework/graphql/queries/loadMore.graphql b/client/coral-framework/graphql/queries/loadMore.graphql new file mode 100644 index 000000000..a85eaecca --- /dev/null +++ b/client/coral-framework/graphql/queries/loadMore.graphql @@ -0,0 +1,7 @@ +#import "../fragments/commentView.graphql" + +query LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER) { + new_top_level_comments: comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort}) { + ...commentView + } +} diff --git a/client/coral-framework/graphql/queries/streamQuery.graphql b/client/coral-framework/graphql/queries/streamQuery.graphql index 583a2db13..bfd7cee33 100644 --- a/client/coral-framework/graphql/queries/streamQuery.graphql +++ b/client/coral-framework/graphql/queries/streamQuery.graphql @@ -18,9 +18,9 @@ query AssetQuery($asset_url: String!) { requireEmailConfirmation } commentCount - comments { + comments(limit: 2) { ...commentView - replies { + replies(limit: 2) { ...commentView } } diff --git a/package.json b/package.json index 548119cfc..048d487be 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ }, "homepage": "https://github.com/coralproject/talk#readme", "dependencies": { - "apollo-client": "^0.7.3", + "apollo-client": "^0.8.3", "bcrypt": "^0.8.7", "body-parser": "^1.15.2", "cli-table": "^0.3.1", @@ -82,7 +82,7 @@ "passport": "^0.3.2", "passport-facebook": "^2.1.1", "passport-local": "^1.0.0", - "react-apollo": "^0.8.1", + "react-apollo": "^0.10.0", "redis": "^2.6.3", "uuid": "^2.0.3" }, From ddeb28d729e0aebcfe5ce4cac1e03cf9c165ce0d Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 8 Feb 2017 16:27:09 -0700 Subject: [PATCH 02/14] have cursor be the date of the oldest comment --- client/coral-embed-stream/src/Embed.js | 7 ++++++- client/coral-framework/graphql/queries/index.js | 13 +++++++------ client/coral-sign-in/components/SignInContent.js | 2 +- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 3eb12b04f..b66deb18c 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -78,9 +78,14 @@ class Embed extends Component { } loadMoreComments = () => { + + if (!this.props.asset.comments.length) { + return; + } + this.props.loadMore({ limit: 10, - cursor: new Date(), + cursor: this.props.asset.comments[this.props.asset.comments.length - 1].created_at, asset_id: this.props.asset.id, sort: 'REVERSE_CHRONOLOGICAL' }) diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js index 7916b9b28..831d3512c 100644 --- a/client/coral-framework/graphql/queries/index.js +++ b/client/coral-framework/graphql/queries/index.js @@ -35,13 +35,14 @@ export const queryStream = graphql(STREAM_QUERY, { asset_id, sort }, - updateQuery: ({asset}, {fetchMoreResult:{data:{new_top_level_comments}}}) => { - const comments = asset.comments.concat(new_top_level_comments); + updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) => { + const asset = { + ...oldData.asset, + comments: [...oldData.asset.comments, ...new_top_level_comments] + }; return { - asset: { - ...asset, - comments - } + ...oldData, + asset }; } }); diff --git a/client/coral-sign-in/components/SignInContent.js b/client/coral-sign-in/components/SignInContent.js index c7a5dc80d..eebaf960b 100644 --- a/client/coral-sign-in/components/SignInContent.js +++ b/client/coral-sign-in/components/SignInContent.js @@ -97,7 +97,7 @@ const SignInContent = ({ SignInContent.propTypes = { auth: PropTypes.shape({ isLoading: PropTypes.bool.isRequired, - error: PropTypes.object, + error: PropTypes.string, emailVerificationFailure: PropTypes.bool }).isRequired, fetchSignInFacebook: PropTypes.func.isRequired, From 05fcc61c9c6d8ecb25e121763269785cfb096f77 Mon Sep 17 00:00:00 2001 From: David Jay Date: Thu, 9 Feb 2017 17:56:28 -0800 Subject: [PATCH 03/14] Resolving bug on comment load. --- client/coral-embed-stream/src/Embed.js | 6 +----- client/coral-embed-stream/src/Stream.js | 8 ++++---- client/coral-framework/graphql/queries/index.js | 13 +++++-------- .../graphql/queries/loadMore.graphql | 3 +++ .../graphql/queries/streamQuery.graphql | 4 ++-- client/coral-plugin-stream/Stream.js | 1 - 6 files changed, 15 insertions(+), 20 deletions(-) diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index b66deb18c..ef1760e12 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -88,9 +88,7 @@ class Embed extends Component { cursor: this.props.asset.comments[this.props.asset.comments.length - 1].created_at, asset_id: this.props.asset.id, sort: 'REVERSE_CHRONOLOGICAL' - }) - .then((result) => console.log('result', result)) - .catch((err) => console.log('err', err)); + }); } render () { @@ -111,8 +109,6 @@ class Embed extends Component { return ; } - console.log('Render', this.props.data); - return (
diff --git a/client/coral-embed-stream/src/Stream.js b/client/coral-embed-stream/src/Stream.js index 65743e6c7..1b586706f 100644 --- a/client/coral-embed-stream/src/Stream.js +++ b/client/coral-embed-stream/src/Stream.js @@ -46,8 +46,8 @@ class Stream extends React.Component { return (
{ - comments.map(comment => { - return + ; - }) + comment={comment} /> + ) }
); diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js index 831d3512c..aa22feae5 100644 --- a/client/coral-framework/graphql/queries/index.js +++ b/client/coral-framework/graphql/queries/index.js @@ -35,16 +35,13 @@ export const queryStream = graphql(STREAM_QUERY, { asset_id, sort }, - updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) => { - const asset = { + updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) => ({ + ...oldData, + asset: { ...oldData.asset, comments: [...oldData.asset.comments, ...new_top_level_comments] - }; - return { - ...oldData, - asset - }; - } + } + }) }); } }) diff --git a/client/coral-framework/graphql/queries/loadMore.graphql b/client/coral-framework/graphql/queries/loadMore.graphql index a85eaecca..c7dca9bf3 100644 --- a/client/coral-framework/graphql/queries/loadMore.graphql +++ b/client/coral-framework/graphql/queries/loadMore.graphql @@ -3,5 +3,8 @@ query LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER) { new_top_level_comments: comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort}) { ...commentView + replies(limit: 3) { + ...commentView + } } } diff --git a/client/coral-framework/graphql/queries/streamQuery.graphql b/client/coral-framework/graphql/queries/streamQuery.graphql index bfd7cee33..bab18490d 100644 --- a/client/coral-framework/graphql/queries/streamQuery.graphql +++ b/client/coral-framework/graphql/queries/streamQuery.graphql @@ -18,9 +18,9 @@ query AssetQuery($asset_url: String!) { requireEmailConfirmation } commentCount - comments(limit: 2) { + comments(limit: 10) { ...commentView - replies(limit: 2) { + replies(limit: 3) { ...commentView } } diff --git a/client/coral-plugin-stream/Stream.js b/client/coral-plugin-stream/Stream.js index 633a98502..5add6b753 100644 --- a/client/coral-plugin-stream/Stream.js +++ b/client/coral-plugin-stream/Stream.js @@ -19,7 +19,6 @@ class Stream extends Component { } render() { - console.log(this.props); const {data} = this.props; return
From 5b2f52a2839e9cf81dd334083ccc4578f2b42a1f Mon Sep 17 00:00:00 2001 From: David Jay Date: Mon, 13 Feb 2017 13:22:50 -0500 Subject: [PATCH 04/14] Restyling Load More button. --- client/coral-embed-stream/src/LoadMore.js | 31 +++++++++++++++++++++ client/coral-embed-stream/style/default.css | 6 ++++ 2 files changed, 37 insertions(+) create mode 100644 client/coral-embed-stream/src/LoadMore.js diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js new file mode 100644 index 000000000..ce96f18b9 --- /dev/null +++ b/client/coral-embed-stream/src/LoadMore.js @@ -0,0 +1,31 @@ +import React from 'react'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from 'coral-framework/translations.json'; +import Button from 'coral-ui'; +const lang = new I18n(translations); + +const loadMoreComments = (id, comments, loadMore) => { + + if (!comments.length) { + return; + } + + loadMore({ + limit: 10, + cursor: comments[comments.length - 1].created_at, + asset_id: id, + sort: 'REVERSE_CHRONOLOGICAL' + }); +}; + +const LoadMore = ({id, comments, loadMore}) => comments.length > 5 ? + + : null; + +export default LoadMore; diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 2d7f478c1..8d93f08e9 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -304,3 +304,9 @@ hr { .close-comments-alert i.material-icons { font-size: 16px !important; } + +/* Load More */ + +.coral-load-more { + width: 100%; +} From c756b22302c2d4e0792c9a5c006e050edaed7e6b Mon Sep 17 00:00:00 2001 From: David Jay Date: Mon, 13 Feb 2017 15:15:27 -0500 Subject: [PATCH 05/14] Switching Load More to stateless component. --- client/coral-embed-stream/src/Embed.js | 26 ++++++--------------- client/coral-embed-stream/src/LoadMore.js | 4 ++-- client/coral-embed-stream/style/default.css | 1 + client/coral-framework/translations.json | 2 ++ 4 files changed, 12 insertions(+), 21 deletions(-) diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 3acbc30d9..116c8d34e 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -3,7 +3,7 @@ import {compose} from 'react-apollo'; import {connect} from 'react-redux'; import isEqual from 'lodash/isEqual'; -import {TabBar, Tab, TabContent, Spinner, Button} from 'coral-ui'; +import {TabBar, Tab, TabContent, Spinner} from 'coral-ui'; const {logout, showSignInDialog, requestConfirmEmail} = authActions; const {addNotification, clearNotification} = notificationActions; @@ -25,6 +25,7 @@ import ChangeDisplayNameContainer from '../../coral-sign-in/containers/ChangeDis import SettingsContainer from 'coral-settings/containers/SettingsContainer'; import RestrictedContent from 'coral-framework/components/RestrictedContent'; import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer'; +import LoadMore from './LoadMore'; class Embed extends Component { @@ -77,20 +78,6 @@ class Embed extends Component { } } - loadMoreComments = () => { - - if (!this.props.asset.comments.length) { - return; - } - - this.props.loadMore({ - limit: 10, - cursor: this.props.asset.comments[this.props.asset.comments.length - 1].created_at, - asset_id: this.props.asset.id, - sort: 'REVERSE_CHRONOLOGICAL' - }); - } - render () { const {activeTab} = this.state; const {closedAt} = this.props.asset; @@ -170,10 +157,11 @@ class Embed extends Component { clearNotification={this.props.clearNotification} notification={{text: null}} /> - + asset.comments.length} + loadMore={this.props.loadMore}/> { @@ -18,7 +18,7 @@ const loadMoreComments = (id, comments, loadMore) => { }); }; -const LoadMore = ({id, comments, loadMore}) => comments.length > 5 ? +const LoadMore = ({id, comments, loadMore, moreComments}) => moreComments ? - : null; +const LoadMore = ({asset_id, comments, loadMore, moreComments}) => ( + moreComments + ? + : null +); + +LoadMore.propTypes = { + asset_id: PropTypes.string.isRequired, + comments: PropTypes.array.isRequired, + moreComments: PropTypes.bool.isRequired, + loadMore: PropTypes.func.isRequired +}; export default LoadMore; From 1cad1d36d532fc841156ed1c10f87fc534bff121 Mon Sep 17 00:00:00 2001 From: David Jay Date: Wed, 15 Feb 2017 13:26:56 -0500 Subject: [PATCH 14/14] Updating asset_id to camelcase. --- client/coral-embed-stream/src/Embed.js | 2 +- client/coral-embed-stream/src/LoadMore.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 86510a74d..96d3310cb 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -160,7 +160,7 @@ class Embed extends Component { notification={{text: null}} /> asset.comments.length} loadMore={this.props.loadMore}/> diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js index faf3299e8..803f544bd 100644 --- a/client/coral-embed-stream/src/LoadMore.js +++ b/client/coral-embed-stream/src/LoadMore.js @@ -4,7 +4,7 @@ import translations from 'coral-framework/translations.json'; import {Button} from 'coral-ui'; const lang = new I18n(translations); -const loadMoreComments = (asset_id, comments, loadMore) => { +const loadMoreComments = (assetId, comments, loadMore) => { if (!comments.length) { return; @@ -13,16 +13,16 @@ const loadMoreComments = (asset_id, comments, loadMore) => { loadMore({ limit: 10, cursor: comments[comments.length - 1].created_at, - asset_id, + assetId, sort: 'REVERSE_CHRONOLOGICAL' }); }; -const LoadMore = ({asset_id, comments, loadMore, moreComments}) => ( +const LoadMore = ({assetId, comments, loadMore, moreComments}) => ( moreComments ?