diff --git a/.eslintignore b/.eslintignore index 50d3f7109..5be504ff4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -31,4 +31,5 @@ public !plugins/talk-plugin-sort-oldest !plugins/talk-plugin-subscriber !plugins/talk-plugin-toxic-comments -!plugins/talk-plugin-viewing-options \ No newline at end of file +!plugins/talk-plugin-viewing-options +!plugins/talk-plugin-profile-settings diff --git a/.gitignore b/.gitignore index a27a08f15..837bee402 100644 --- a/.gitignore +++ b/.gitignore @@ -52,6 +52,7 @@ plugins/* !plugins/talk-plugin-subscriber !plugins/talk-plugin-flag-details !plugins/talk-plugin-slack-notifications +!plugins/talk-plugin-profile-settings **/node_modules/* yarn-error.log diff --git a/client/coral-embed-stream/src/actions/profile.js b/client/coral-embed-stream/src/actions/profile.js new file mode 100644 index 000000000..4b0c8f2e2 --- /dev/null +++ b/client/coral-embed-stream/src/actions/profile.js @@ -0,0 +1,3 @@ +import * as actions from '../constants/profile'; + +export const setActiveTab = tab => ({ type: actions.SET_ACTIVE_TAB, tab }); diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js index b7eb6d580..0e251e9a3 100644 --- a/client/coral-embed-stream/src/components/Embed.js +++ b/client/coral-embed-stream/src/components/Embed.js @@ -9,16 +9,12 @@ import AutomaticAssetClosure from '../containers/AutomaticAssetClosure'; import ExtendableTabPanel from '../containers/ExtendableTabPanel'; import { Tab, TabPane } from 'coral-ui'; -import ProfileContainer from '../tabs/profile/containers/ProfileContainer'; +import Profile from '../tabs/profile/containers/Profile'; import Popup from 'coral-framework/components/Popup'; import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty'; import cn from 'classnames'; export default class Embed extends React.Component { - changeTab = tab => { - this.props.setActiveTab(tab); - }; - getTabs() { const tabs = [ - + , { + this.props.navigate(this.props.comment.asset.url); + }; + + goToConversation = () => { + this.props.navigate( + `${this.props.comment.asset.url}?commentId=${this.props.comment.id}` + ); + }; + render() { - const { comment, link, data, root } = this.props; + const { comment, data, root } = this.props; const reactionCount = getTotalReactionsCount(comment.action_summaries); const queryData = { root, comment, asset: comment.asset }; @@ -67,7 +77,7 @@ class Comment extends React.Component { {t('common.story')}:{' '} {comment.asset.title ? comment.asset.title : comment.asset.url} @@ -77,10 +87,7 @@ class Comment extends React.Component {
  • - + {t('view_conversation')} @@ -105,10 +112,10 @@ class Comment extends React.Component { } Comment.propTypes = { - comment: PropTypes.shape({ - id: PropTypes.string, - body: PropTypes.string, - }).isRequired, + comment: PropTypes.object.isRequired, + navigate: PropTypes.func.isRequired, + data: PropTypes.object.isRequired, + root: PropTypes.object.isRequired, }; export default Comment; diff --git a/client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js b/client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js index a17a347c5..39f3bfd04 100644 --- a/client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js +++ b/client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Comment from './Comment'; +import Comment from '../containers/Comment'; import LoadMore from './LoadMore'; class CommentHistory extends React.Component { @@ -21,9 +21,9 @@ class CommentHistory extends React.Component { }; render() { - const { link, comments, data, root } = this.props; + const { navigate, comments, data, root } = this.props; return ( -
    +
    {comments.nodes.map((comment, i) => { return ( @@ -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.css b/client/coral-embed-stream/src/tabs/profile/components/Profile.css new file mode 100644 index 000000000..e9b74b7cb --- /dev/null +++ b/client/coral-embed-stream/src/tabs/profile/components/Profile.css @@ -0,0 +1,11 @@ +.userInfo { + margin-bottom: 20px; +} + +.email { + margin: 0; +} + +.username { + margin-bottom: 4px; +} 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..3b707ebe7 --- /dev/null +++ b/client/coral-embed-stream/src/tabs/profile/components/Profile.js @@ -0,0 +1,57 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Slot from 'coral-framework/components/Slot'; +import CommentHistory from '../containers/CommentHistory'; +import ExtendableTabPanel from '../../../containers/ExtendableTabPanel'; +import { Tab, TabPane } from 'coral-ui'; +import styles from './Profile.css'; +import t from 'coral-framework/services/i18n'; + +const Profile = ({ + username, + emailAddress, + data, + root, + activeTab, + setActiveTab, +}) => ( +
    +
    +

    {username}

    + {emailAddress ?

    {emailAddress}

    : null} +
    + + + {t('framework.my_comments')} + , + ]} + tabPanes={[ + + + , + ]} + sub + /> +
    +); + +Profile.propTypes = { + username: PropTypes.string, + emailAddress: PropTypes.string, + data: PropTypes.object, + root: PropTypes.object, + activeTab: PropTypes.string.isRequired, + setActiveTab: PropTypes.func.isRequired, +}; + +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..b8fb7fad8 --- /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_ProfileComment_comment 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..82a0a49eb --- /dev/null +++ b/client/coral-embed-stream/src/tabs/profile/containers/Profile.js @@ -0,0 +1,104 @@ +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 { setActiveTab } from '../../../actions/profile'; +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, + activeTab: PropTypes.string.isRequired, + setActiveTab: PropTypes.func.isRequired, +}; + +const slots = [ + 'profileSections', + 'profileTabs', + 'profileTabsPrepend', + 'profileTabPanes', +]; + +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, + activeTab: state.profile.activeTab, +}); + +const mapDispatchToProps = dispatch => + bindActionCreators({ showSignInDialog, setActiveTab }, 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; diff --git a/plugins.default.json b/plugins.default.json index 066c94478..b54c6a54c 100644 --- a/plugins.default.json +++ b/plugins.default.json @@ -21,6 +21,7 @@ "talk-plugin-sort-most-respected", "talk-plugin-sort-newest", "talk-plugin-sort-oldest", - "talk-plugin-viewing-options" + "talk-plugin-viewing-options", + "talk-plugin-profile-settings" ] } diff --git a/plugins/talk-plugin-ignore-user/client/index.js b/plugins/talk-plugin-ignore-user/client/index.js index 3284915db..a7cb6c886 100644 --- a/plugins/talk-plugin-ignore-user/client/index.js +++ b/plugins/talk-plugin-ignore-user/client/index.js @@ -8,7 +8,7 @@ export default { slots: { authorMenuActions: [IgnoreUserAction], ignoreUserConfirmation: [IgnoreUserConfirmation], - profileSections: [IgnoredUserSection], + profileSettings: [IgnoredUserSection], }, translations, mutations: { diff --git a/plugins/talk-plugin-profile-settings/.eslintrc.json b/plugins/talk-plugin-profile-settings/.eslintrc.json new file mode 100644 index 000000000..78f7c2397 --- /dev/null +++ b/plugins/talk-plugin-profile-settings/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "@coralproject/eslint-config-talk" +} diff --git a/plugins/talk-plugin-profile-settings/client/.eslintrc.json b/plugins/talk-plugin-profile-settings/client/.eslintrc.json new file mode 100644 index 000000000..c8a6db18a --- /dev/null +++ b/plugins/talk-plugin-profile-settings/client/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "@coralproject/eslint-config-talk/client" +} diff --git a/plugins/talk-plugin-profile-settings/client/components/Tab.js b/plugins/talk-plugin-profile-settings/client/components/Tab.js new file mode 100644 index 000000000..86df0e8d1 --- /dev/null +++ b/plugins/talk-plugin-profile-settings/client/components/Tab.js @@ -0,0 +1,8 @@ +import React from 'react'; +import { t } from 'plugin-api/beta/client/services'; + +const Tab = () => { + return {t('talk-plugin-profile-settings.tab')}; +}; + +export default Tab; diff --git a/plugins/talk-plugin-profile-settings/client/components/TabPane.js b/plugins/talk-plugin-profile-settings/client/components/TabPane.js new file mode 100644 index 000000000..c0347a95c --- /dev/null +++ b/plugins/talk-plugin-profile-settings/client/components/TabPane.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Slot } from 'plugin-api/beta/client/components'; + +class TabPane extends React.Component { + render() { + const { data, root } = this.props; + return ( +
    + +
    + ); + } +} + +TabPane.propTypes = { + data: PropTypes.object, + root: PropTypes.object, +}; + +export default TabPane; diff --git a/plugins/talk-plugin-profile-settings/client/containers/TabPane.js b/plugins/talk-plugin-profile-settings/client/containers/TabPane.js new file mode 100644 index 000000000..6384c7160 --- /dev/null +++ b/plugins/talk-plugin-profile-settings/client/containers/TabPane.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { compose, gql } from 'react-apollo'; +import TabPane from '../components/TabPane'; +import { withFragments } from 'plugin-api/beta/client/hocs'; +import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils'; + +const slots = ['profileSettings']; + +class TabPaneContainer extends React.Component { + render() { + return ; + } +} + +const enhance = compose( + withFragments({ + root: gql` + fragment TalkProfileSettings_TabPane_root on RootQuery { + __typename + ${getSlotFragmentSpreads(slots, 'root')} + } + `, + }) +); + +export default enhance(TabPaneContainer); diff --git a/plugins/talk-plugin-profile-settings/client/index.js b/plugins/talk-plugin-profile-settings/client/index.js new file mode 100644 index 000000000..00e37a0f1 --- /dev/null +++ b/plugins/talk-plugin-profile-settings/client/index.js @@ -0,0 +1,11 @@ +import Tab from './components/Tab'; +import TabPane from './containers/TabPane'; +import translations from './translations.yml'; + +export default { + slots: { + profileTabs: [Tab], + profileTabPanes: [TabPane], + }, + translations, +}; diff --git a/plugins/talk-plugin-profile-settings/client/translations.yml b/plugins/talk-plugin-profile-settings/client/translations.yml new file mode 100644 index 000000000..cd8edb415 --- /dev/null +++ b/plugins/talk-plugin-profile-settings/client/translations.yml @@ -0,0 +1,27 @@ +en: + talk-plugin-profile-settings: + tab: Settings +de: + talk-plugin-profile-settings: + tab: Einstellungen +es: + talk-plugin-profile-settings: + tab: Configuración +fr: + talk-plugin-profile-settings: + tab: Paramètres +nl_NL: + talk-plugin-profile-settings: + tab: Instellingen +da: + talk-plugin-profile-settings: + tab: Indstillinger +pt_PR: + talk-plugin-profile-settings: + tab: Configurações +zh_TW: + talk-plugin-profile-settings: + tab: 設置 +zh_CN: + talk-plugin-profile-settings: + tab: 设置 diff --git a/plugins/talk-plugin-profile-settings/index.js b/plugins/talk-plugin-profile-settings/index.js new file mode 100644 index 000000000..f053ebf79 --- /dev/null +++ b/plugins/talk-plugin-profile-settings/index.js @@ -0,0 +1 @@ +module.exports = {};