@@ -32,7 +32,7 @@ class CommentHistory extends React.Component {
data={data}
root={root}
comment={comment}
- link={link}
+ navigate={navigate}
/>
);
})}
@@ -51,7 +51,7 @@ class CommentHistory extends React.Component {
CommentHistory.propTypes = {
comments: PropTypes.object.isRequired,
loadMore: PropTypes.func,
- link: PropTypes.func,
+ navigate: PropTypes.func,
data: PropTypes.object,
root: PropTypes.object,
};
diff --git a/client/coral-embed-stream/src/tabs/profile/components/Profile.js b/client/coral-embed-stream/src/tabs/profile/components/Profile.js
new file mode 100644
index 000000000..b457e7a1d
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/profile/components/Profile.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Slot from 'coral-framework/components/Slot';
+import CommentHistory from '../containers/CommentHistory';
+
+import t from 'coral-framework/services/i18n';
+
+const Profile = ({ username, emailAddress, data, root }) => (
+
+
{username}
+ {emailAddress ?
{emailAddress}
: null}
+
+
+
{t('framework.my_comments')}
+
+
+);
+
+Profile.propTypes = {
+ username: PropTypes.string,
+ emailAddress: PropTypes.string,
+ data: PropTypes.object,
+ root: PropTypes.object,
+};
+
+export default Profile;
diff --git a/client/coral-embed-stream/src/tabs/profile/containers/Comment.js b/client/coral-embed-stream/src/tabs/profile/containers/Comment.js
new file mode 100644
index 000000000..7406d4c5e
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/profile/containers/Comment.js
@@ -0,0 +1,32 @@
+import { gql, compose } from 'react-apollo';
+import Comment from '../components/Comment';
+import { withFragments } from 'coral-framework/hocs';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+
+const slots = ['commentContent', 'historyCommentTimestamp'];
+
+const withCommentFragments = withFragments({
+ comment: gql`
+ fragment TalkEmbedStream_Comment_Fragment on Comment {
+ id
+ body
+ replyCount
+ action_summaries {
+ count
+ __typename
+ }
+ asset {
+ id
+ title
+ url
+ ${getSlotFragmentSpreads(slots, 'asset')}
+ }
+ created_at
+ ${getSlotFragmentSpreads(slots, 'comment')}
+ }
+ `,
+});
+
+const enhance = compose(withCommentFragments);
+
+export default enhance(Comment);
diff --git a/client/coral-embed-stream/src/tabs/profile/containers/CommentHistory.js b/client/coral-embed-stream/src/tabs/profile/containers/CommentHistory.js
new file mode 100644
index 000000000..a02225939
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/profile/containers/CommentHistory.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose, gql } from 'react-apollo';
+import CommentHistory from '../components/CommentHistory';
+import Comment from './Comment';
+import { withFragments } from 'coral-framework/hocs';
+
+import { appendNewNodes } from 'plugin-api/beta/client/utils';
+import update from 'immutability-helper';
+import { getDefinitionName } from 'coral-framework/utils';
+
+class CommentHistoryContainer extends Component {
+ navigate = url => {
+ this.context.pym.sendMessage('navigate', url);
+ };
+
+ loadMore = () => {
+ return this.props.data.fetchMore({
+ query: LOAD_MORE_QUERY,
+ variables: {
+ limit: 5,
+ cursor: this.props.root.me.comments.endCursor,
+ },
+ updateQuery: (previous, { fetchMoreResult: { me: { comments } } }) => {
+ const updated = update(previous, {
+ me: {
+ comments: {
+ nodes: {
+ $apply: nodes => appendNewNodes(nodes, comments.nodes),
+ },
+ hasNextPage: { $set: comments.hasNextPage },
+ endCursor: { $set: comments.endCursor },
+ },
+ },
+ });
+ return updated;
+ },
+ });
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+CommentHistoryContainer.contextTypes = {
+ pym: PropTypes.object,
+};
+
+CommentHistoryContainer.propTypes = {
+ data: PropTypes.object,
+ root: PropTypes.object,
+};
+
+const LOAD_MORE_QUERY = gql`
+ query TalkEmbedStream_CommentHistory_LoadMoreComments($limit: Int, $cursor: Cursor) {
+ me {
+ comments(query: { limit: $limit, cursor: $cursor }) {
+ nodes {
+ ...${getDefinitionName(Comment.fragments.comment)}
+ }
+ endCursor
+ hasNextPage
+ }
+ }
+ }
+ ${Comment.fragments.comment}
+`;
+
+const withCommentHistoryFragments = withFragments({
+ root: gql`
+ fragment TalkEmbedStream_CommentHistory on RootQuery {
+ me {
+ comments(query: {limit: 10}) {
+ nodes {
+ ...${getDefinitionName(Comment.fragments.comment)}
+ }
+ endCursor
+ hasNextPage
+ }
+ }
+ }
+ ${Comment.fragments.comment}
+ `,
+});
+
+const mapStateToProps = state => ({
+ currentUser: state.auth.user,
+});
+
+export default compose(
+ connect(mapStateToProps, null),
+ withCommentHistoryFragments
+)(CommentHistoryContainer);
diff --git a/client/coral-embed-stream/src/tabs/profile/containers/Profile.js b/client/coral-embed-stream/src/tabs/profile/containers/Profile.js
new file mode 100644
index 000000000..2fc768535
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/profile/containers/Profile.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose, gql } from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { withQuery } from 'coral-framework/hocs';
+import NotLoggedIn from '../components/NotLoggedIn';
+import { Spinner } from 'coral-ui';
+import Profile from '../components/Profile';
+import CommentHistory from './CommentHistory';
+import { getDefinitionName } from 'coral-framework/utils';
+
+import { showSignInDialog } from 'coral-embed-stream/src/actions/login';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+
+class ProfileContainer extends Component {
+ componentWillReceiveProps(nextProps) {
+ if (!this.props.currentUser && nextProps.currentUser) {
+ // Refetch after login.
+ this.props.data.refetch();
+ }
+ }
+
+ render() {
+ const { currentUser, showSignInDialog, root, data } = this.props;
+ const { me } = this.props.root;
+ const loading = this.props.data.loading;
+
+ if (this.props.data.error) {
+ return
{this.props.data.error.message}
;
+ }
+
+ if (!currentUser) {
+ return
;
+ }
+
+ if (loading || !me) {
+ return
;
+ }
+
+ const localProfile = currentUser.profiles.find(p => p.provider === 'local');
+ const emailAddress = localProfile && localProfile.id;
+
+ return (
+
+ );
+ }
+}
+
+ProfileContainer.propTypes = {
+ data: PropTypes.object,
+ root: PropTypes.object,
+ currentUser: PropTypes.object,
+ showSignInDialog: PropTypes.func,
+};
+
+const slots = ['profileSections'];
+
+const withProfileQuery = withQuery(
+ gql`
+ query CoralEmbedStream_Profile {
+ me {
+ id
+ username
+ }
+ ...${getDefinitionName(CommentHistory.fragments.root)}
+ ${getSlotFragmentSpreads(slots, 'root')}
+ }
+ ${CommentHistory.fragments.root}
+`,
+ {
+ options: {
+ fetchPolicy: 'network-only',
+ },
+ }
+);
+
+const mapStateToProps = state => ({
+ currentUser: state.auth.user,
+});
+
+const mapDispatchToProps = dispatch =>
+ bindActionCreators({ showSignInDialog }, dispatch);
+
+export default compose(
+ connect(mapStateToProps, mapDispatchToProps),
+ withProfileQuery
+)(ProfileContainer);
diff --git a/client/coral-embed-stream/src/tabs/profile/containers/ProfileContainer.js b/client/coral-embed-stream/src/tabs/profile/containers/ProfileContainer.js
deleted file mode 100644
index 57aa2b0fe..000000000
--- a/client/coral-embed-stream/src/tabs/profile/containers/ProfileContainer.js
+++ /dev/null
@@ -1,178 +0,0 @@
-import { connect } from 'react-redux';
-import { compose, gql } from 'react-apollo';
-import React, { Component } from 'react';
-import { bindActionCreators } from 'redux';
-import { withQuery } from 'coral-framework/hocs';
-import Slot from 'coral-framework/components/Slot';
-import cn from 'classnames';
-import { link } from 'coral-framework/services/pym';
-import NotLoggedIn from '../components/NotLoggedIn';
-import { Spinner } from 'coral-ui';
-import CommentHistory from '../components/CommentHistory';
-
-import { showSignInDialog } from 'coral-embed-stream/src/actions/login';
-import { appendNewNodes } from 'plugin-api/beta/client/utils';
-import update from 'immutability-helper';
-import { getSlotFragmentSpreads } from 'coral-framework/utils';
-
-import t from 'coral-framework/services/i18n';
-
-class ProfileContainer extends Component {
- componentWillReceiveProps(nextProps) {
- if (!this.props.currentUser && nextProps.currentUser) {
- // Refetch after login.
- this.props.data.refetch();
- }
- }
-
- loadMore = () => {
- return this.props.data.fetchMore({
- query: LOAD_MORE_QUERY,
- variables: {
- limit: 5,
- cursor: this.props.root.me.comments.endCursor,
- },
- updateQuery: (previous, { fetchMoreResult: { me: { comments } } }) => {
- const updated = update(previous, {
- me: {
- comments: {
- nodes: {
- $apply: nodes => appendNewNodes(nodes, comments.nodes),
- },
- hasNextPage: { $set: comments.hasNextPage },
- endCursor: { $set: comments.endCursor },
- },
- },
- });
- return updated;
- },
- });
- };
-
- render() {
- const { currentUser, showSignInDialog, root, data } = this.props;
- const { me } = this.props.root;
- const loading = this.props.data.loading;
-
- if (this.props.data.error) {
- return
{this.props.data.error.message}
;
- }
-
- if (!currentUser) {
- return
;
- }
-
- if (loading || !me) {
- return
;
- }
-
- const localProfile = currentUser.profiles.find(p => p.provider === 'local');
- const emailAddress = localProfile && localProfile.id;
-
- return (
-
-
{me.username}
- {emailAddress ?
{emailAddress}
: null}
-
-
-
{t('framework.my_comments')}
-
- {me.comments.nodes.length ? (
-
- ) : (
-
- {t('user_no_comment')}
-
- )}
-
-
- );
- }
-}
-
-const slots = [
- 'profileSections',
-
- // TODO: These Slots should be included in `talk-plugin-history` instead.
- 'commentContent',
- 'historyCommentTimestamp',
-];
-
-const CommentFragment = gql`
- fragment TalkSettings_CommentConnectionFragment on CommentConnection {
- nodes {
- id
- body
- replyCount
- action_summaries {
- count
- __typename
- }
- asset {
- id
- title
- url
- ${getSlotFragmentSpreads(slots, 'asset')}
- }
- created_at
- ${getSlotFragmentSpreads(slots, 'comment')}
- }
- endCursor
- hasNextPage
- }
-`;
-
-const LOAD_MORE_QUERY = gql`
- query TalkSettings_LoadMoreComments($limit: Int, $cursor: Cursor) {
- me {
- comments(query: { limit: $limit, cursor: $cursor }) {
- ...TalkSettings_CommentConnectionFragment
- }
- }
- }
- ${CommentFragment}
-`;
-
-const withProfileQuery = withQuery(
- gql`
- query CoralEmbedStream_Profile {
- me {
- id
- username
- comments(query: {limit: 10}) {
- ...TalkSettings_CommentConnectionFragment
- }
- }
- ${getSlotFragmentSpreads(slots, 'root')}
- }
- ${CommentFragment}
-`,
- {
- options: {
- fetchPolicy: 'network-only',
- },
- }
-);
-
-const mapStateToProps = state => ({
- currentUser: state.auth.user,
-});
-
-const mapDispatchToProps = dispatch =>
- bindActionCreators({ showSignInDialog }, dispatch);
-
-export default compose(
- connect(mapStateToProps, mapDispatchToProps),
- withProfileQuery
-)(ProfileContainer);
diff --git a/client/coral-framework/services/pym.js b/client/coral-framework/services/pym.js
index be81fc518..b4eb193ee 100644
--- a/client/coral-framework/services/pym.js
+++ b/client/coral-framework/services/pym.js
@@ -1,9 +1,5 @@
import Pym from 'pym.js';
const pym = new Pym.Child({ polling: 100 });
-export default pym;
-export const link = url => e => {
- e.preventDefault();
- pym.sendMessage('navigate', url);
-};
+export default pym;