From 0ca8b978a13ea7ab1225f8c56bb063e9ab3af51a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 20 Feb 2018 13:21:02 +0100
Subject: [PATCH] Implement profile settings

---
 .eslintignore                                 |  3 +-
 .gitignore                                    |  1 +
 .../coral-embed-stream/src/actions/profile.js |  3 ++
 .../src/components/Embed.js                   | 10 ++--
 .../src/constants/profile.js                  |  2 +
 .../coral-embed-stream/src/reducers/index.js  |  2 +
 .../src/reducers/profile.js                   | 19 ++++++++
 .../src/tabs/profile/components/Profile.css   | 11 +++++
 .../src/tabs/profile/components/Profile.js    | 47 +++++++++++++++----
 .../src/tabs/profile/containers/Comment.js    |  2 +-
 .../src/tabs/profile/containers/Profile.js    | 15 +++++-
 plugins.default.json                          |  3 +-
 .../talk-plugin-ignore-user/client/index.js   |  2 +-
 .../.eslintrc.json                            |  3 ++
 .../client/.eslintrc.json                     |  3 ++
 .../client/components/Tab.js                  |  8 ++++
 .../client/components/TabPane.js              | 21 +++++++++
 .../client/containers/TabPane.js              | 26 ++++++++++
 .../client/index.js                           | 11 +++++
 .../client/translations.yml                   | 27 +++++++++++
 plugins/talk-plugin-profile-settings/index.js |  1 +
 21 files changed, 200 insertions(+), 20 deletions(-)
 create mode 100644 client/coral-embed-stream/src/actions/profile.js
 create mode 100644 client/coral-embed-stream/src/constants/profile.js
 create mode 100644 client/coral-embed-stream/src/reducers/profile.js
 create mode 100644 client/coral-embed-stream/src/tabs/profile/components/Profile.css
 create mode 100644 plugins/talk-plugin-profile-settings/.eslintrc.json
 create mode 100644 plugins/talk-plugin-profile-settings/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-profile-settings/client/components/Tab.js
 create mode 100644 plugins/talk-plugin-profile-settings/client/components/TabPane.js
 create mode 100644 plugins/talk-plugin-profile-settings/client/containers/TabPane.js
 create mode 100644 plugins/talk-plugin-profile-settings/client/index.js
 create mode 100644 plugins/talk-plugin-profile-settings/client/translations.yml
 create mode 100644 plugins/talk-plugin-profile-settings/index.js

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 71ff39240..0e251e9a3 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -15,10 +15,6 @@ 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 = [
       <Tab
@@ -53,6 +49,7 @@ export default class Embed extends React.Component {
   render() {
     const {
       activeTab,
+      setActiveTab,
       commentId,
       root,
       root: { asset },
@@ -65,6 +62,7 @@ export default class Embed extends React.Component {
       parentUrl,
     } = this.props;
     const hasHighlightedComment = !!commentId;
+    const popupUrl = `login?parentUrl=${encodeURIComponent(parentUrl)}`;
 
     return (
       <div
@@ -75,7 +73,7 @@ export default class Embed extends React.Component {
         <AutomaticAssetClosure asset={asset} />
         <IfSlotIsNotEmpty slot="login">
           <Popup
-            href={`login?parentUrl=${encodeURIComponent(parentUrl)}`}
+            href={popupUrl}
             title="Login"
             features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
             open={showSignInDialog}
@@ -91,7 +89,7 @@ export default class Embed extends React.Component {
         <ExtendableTabPanel
           className="talk-embed-stream-tab-bar"
           activeTab={activeTab}
-          setActiveTab={this.changeTab}
+          setActiveTab={setActiveTab}
           fallbackTab="stream"
           tabSlot="embedStreamTabs"
           tabSlotPrepend="embedStreamTabsPrepend"
diff --git a/client/coral-embed-stream/src/constants/profile.js b/client/coral-embed-stream/src/constants/profile.js
new file mode 100644
index 000000000..ae9d47555
--- /dev/null
+++ b/client/coral-embed-stream/src/constants/profile.js
@@ -0,0 +1,2 @@
+const prefix = 'TALK_EMBED_STREAM';
+export const SET_ACTIVE_TAB = `${prefix}_SET_ACTIVE_TAB`;
diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js
index 039db7ec3..f8eed72d4 100644
--- a/client/coral-embed-stream/src/reducers/index.js
+++ b/client/coral-embed-stream/src/reducers/index.js
@@ -3,6 +3,7 @@ import asset from './asset';
 import embed from './embed';
 import configure from './configure';
 import stream from './stream';
+import profile from './profile';
 
 export default {
   login,
@@ -10,4 +11,5 @@ export default {
   embed,
   configure,
   stream,
+  profile,
 };
diff --git a/client/coral-embed-stream/src/reducers/profile.js b/client/coral-embed-stream/src/reducers/profile.js
new file mode 100644
index 000000000..1d550ef78
--- /dev/null
+++ b/client/coral-embed-stream/src/reducers/profile.js
@@ -0,0 +1,19 @@
+import * as actions from '../constants/profile';
+
+const initialState = {
+  activeTab: 'comments',
+  previousTab: '',
+};
+
+export default function stream(state = initialState, action) {
+  switch (action.type) {
+    case actions.SET_ACTIVE_TAB:
+      return {
+        ...state,
+        activeTab: action.tab,
+        previousTab: state.activeTab,
+      };
+    default:
+      return state;
+  }
+}
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
index b457e7a1d..3b707ebe7 100644
--- a/client/coral-embed-stream/src/tabs/profile/components/Profile.js
+++ b/client/coral-embed-stream/src/tabs/profile/components/Profile.js
@@ -2,17 +2,46 @@ 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 }) => (
-  <div className="talk-my-profile talk-embed-stream-profile-container">
-    <h2>{username}</h2>
-    {emailAddress ? <p>{emailAddress}</p> : null}
+const Profile = ({
+  username,
+  emailAddress,
+  data,
+  root,
+  activeTab,
+  setActiveTab,
+}) => (
+  <div className="talk-my-profile talk-profile-container">
+    <div className={styles.userInfo}>
+      <h2 className={styles.username}>{username}</h2>
+      {emailAddress ? <p className={styles.email}>{emailAddress}</p> : null}
+    </div>
     <Slot fill="profileSections" data={data} queryData={{ root }} />
-    <hr />
-    <h3>{t('framework.my_comments')}</h3>
-    <CommentHistory data={data} root={root} />
+    <ExtendableTabPanel
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+      fallbackTab="comments"
+      tabSlot="profileTabs"
+      tabSlotPrepend="profileTabsPrepend"
+      tabPaneSlot="profileTabPanes"
+      slotProps={{ data }}
+      queryData={{ root }}
+      tabs={[
+        <Tab key="comments" tabId="comments">
+          {t('framework.my_comments')}
+        </Tab>,
+      ]}
+      tabPanes={[
+        <TabPane key="comments" tabId="comments">
+          <CommentHistory data={data} root={root} />
+        </TabPane>,
+      ]}
+      sub
+    />
   </div>
 );
 
@@ -21,6 +50,8 @@ Profile.propTypes = {
   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
index 7406d4c5e..b8fb7fad8 100644
--- a/client/coral-embed-stream/src/tabs/profile/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/profile/containers/Comment.js
@@ -7,7 +7,7 @@ const slots = ['commentContent', 'historyCommentTimestamp'];
 
 const withCommentFragments = withFragments({
   comment: gql`
-    fragment TalkEmbedStream_Comment_Fragment on Comment {
+    fragment TalkEmbedStream_ProfileComment_comment on Comment {
       id
       body
       replyCount
diff --git a/client/coral-embed-stream/src/tabs/profile/containers/Profile.js b/client/coral-embed-stream/src/tabs/profile/containers/Profile.js
index 2fc768535..82a0a49eb 100644
--- a/client/coral-embed-stream/src/tabs/profile/containers/Profile.js
+++ b/client/coral-embed-stream/src/tabs/profile/containers/Profile.js
@@ -11,6 +11,7 @@ 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 {
@@ -47,6 +48,8 @@ class ProfileContainer extends Component {
         emailAddress={emailAddress}
         data={data}
         root={root}
+        activeTab={this.props.activeTab}
+        setActiveTab={this.props.setActiveTab}
       />
     );
   }
@@ -57,9 +60,16 @@ ProfileContainer.propTypes = {
   root: PropTypes.object,
   currentUser: PropTypes.object,
   showSignInDialog: PropTypes.func,
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
 };
 
-const slots = ['profileSections'];
+const slots = [
+  'profileSections',
+  'profileTabs',
+  'profileTabsPrepend',
+  'profileTabPanes',
+];
 
 const withProfileQuery = withQuery(
   gql`
@@ -82,10 +92,11 @@ const withProfileQuery = withQuery(
 
 const mapStateToProps = state => ({
   currentUser: state.auth.user,
+  activeTab: state.profile.activeTab,
 });
 
 const mapDispatchToProps = dispatch =>
-  bindActionCreators({ showSignInDialog }, dispatch);
+  bindActionCreators({ showSignInDialog, setActiveTab }, dispatch);
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
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 <span>{t('talk-plugin-profile-settings.tab')}</span>;
+};
+
+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 (
+      <div>
+        <Slot fill="profileSettings" data={data} queryData={{ root }} />
+      </div>
+    );
+  }
+}
+
+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 <TabPane {...this.props} />;
+  }
+}
+
+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 = {};