Merge branch 'master' into feature/talk-plugin-toxic-comments

plugins/talk-plugin-author-menu/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-author-menu/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-author-menu/client/actions.js

@@ -0,0 +1,19 @@
+import {SET_CONTENT_SLOT, RESET_CONTENT_SLOT, OPEN_MENU, CLOSE_MENU} from './constants';
+
+export const setContentSlot = (slot) => ({
+  type: SET_CONTENT_SLOT,
+  slot,
+});
+
+export const resetContentSlot = () => ({
+  type: RESET_CONTENT_SLOT,
+});
+
+export const openMenu = (id) => ({
+  type: OPEN_MENU,
+  id,
+});
+
+export const closeMenu = () => ({
+  type: CLOSE_MENU,
+});

plugins/talk-plugin-author-menu/client/components/AuthorName.css

@@ -0,0 +1,16 @@
+.root {
+  display: inline-block;
+  position: relative;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.name {
+  font-weight: bold;
+}
+

plugins/talk-plugin-author-menu/client/components/AuthorName.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Menu from './Menu';
+import styles from './AuthorName.css';
+import {ClickOutside} from 'plugin-api/beta/client/components';
+import cn from 'classnames';
+
+export default ({data, root, asset, comment, contentSlot, menuVisible, toggleMenu, hideMenu}) => {
+  return (
+    <ClickOutside onClickOutside={hideMenu}>
+      <div className={cn(styles.root, 'talk-plugin-author-menu')}>
+        <button
+          className={cn(styles.button, 'talk-plugin-author-menu-button')}
+          onClick={toggleMenu}
+        >
+          <span className={styles.name}>
+            {comment.user.username}
+          </span>
+        </button>
+        {menuVisible &&
+          <Menu
+            data={data}
+            root={root}
+            asset={asset}
+            comment={comment}
+            contentSlot={contentSlot}
+          />
+        }
+      </div>
+    </ClickOutside>
+  );
+};

plugins/talk-plugin-author-menu/client/components/Menu.css

@@ -0,0 +1,45 @@
+
+.menu {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 9;
+  top: 26px;
+  left: 0px;
+  min-width: 20px;
+  text-align: left;
+}
+
+.menu::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  left: 6px;
+  top: -21px;
+  transform: rotate(180deg);
+}
+
+.menu::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 6px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+
+  &:empty {
+    display: none;
+  }
+}

plugins/talk-plugin-author-menu/client/components/Menu.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from './Menu.css';
+import {Slot} from 'plugin-api/beta/client/components';
+import cn from 'classnames';
+
+export default ({data, root, asset, comment, contentSlot}) => {
+  if (contentSlot) {
+    return (
+      <div className={cn(styles.menu, 'talk-plugin-author-menu-popup')}>
+        <Slot
+          fill={contentSlot}
+          data={data}
+          queryData={{asset, root, comment}}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(styles.menu, 'talk-plugin-author-menu-popup')}>
+      <Slot
+        className={cn('talk-plugin-author-menu-infos')}
+        fill={'authorMenuInfos'}
+        data={data}
+        queryData={{asset, root, comment}}
+      />
+      <Slot
+        className={cn(styles.actions, 'talk-plugin-author-menu-actions')}
+        fill={'authorMenuActions'}
+        data={data}
+        queryData={{asset, root, comment}}
+      />
+    </div>
+  );
+};

plugins/talk-plugin-author-menu/client/constants.js

@@ -0,0 +1,7 @@
+const prefix = 'TALK_AUTHOR_MENU';
+
+export const SET_CONTENT_SLOT = `${prefix}_SET_CONTENT_SLOT`;
+export const RESET_CONTENT_SLOT = `${prefix}_RESET_CONTENT_SLOT`;
+export const OPEN_MENU = `${prefix}_OPEN_MENU`;
+export const CLOSE_MENU = `${prefix}_CLOSE_MENU`;
+

plugins/talk-plugin-author-menu/client/containers/AuthorName.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import {connect, withFragments} from 'plugin-api/beta/client/hocs';
+import {bindActionCreators} from 'redux';
+import AuthorName from '../components/AuthorName';
+import {setContentSlot, resetContentSlot, openMenu, closeMenu} from '../actions';
+import {compose, gql} from 'react-apollo';
+import {getSlotFragmentSpreads, getShallowChanges} from 'plugin-api/beta/client/utils';
+
+class AuthorNameContainer extends React.Component {
+
+  shouldComponentUpdate(nextProps) {
+
+    // Specifically handle `showMenuForComment` if it is the only change.
+    const changes = getShallowChanges(this.props, nextProps);
+    if (changes.length === 1 && changes[0] === 'showMenuForComment') {
+      const commentId = this.props.comment.id;
+      if (
+        commentId !== this.props.showMenuForComment &&
+        commentId !== nextProps.showMenuForComment
+      ) {
+        return false;
+      }
+    }
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
+  }
+
+  toggleMenu = () => {
+    if (this.props.showMenuForComment === this.props.comment.id) {
+      this.props.closeMenu();
+    } else {
+      this.props.openMenu(this.props.comment.id);
+    }
+  }
+
+  hideMenu = () => {
+    if (this.props.showMenuForComment === this.props.comment.id) {
+      this.props.closeMenu();
+    }
+  }
+
+  render() {
+    return <AuthorName
+      data={this.props.data}
+      root={this.props.root}
+      asset={this.props.asset}
+      comment={this.props.comment}
+      contentSlot={this.props.contentSlot}
+      menuVisible={this.props.showMenuForComment === this.props.comment.id}
+      toggleMenu={this.toggleMenu}
+      hideMenu={this.hideMenu}
+    />;
+  }
+}
+
+const slots = [
+  'authorMenuInfos',
+  'authorMenuActions',
+];
+
+const mapStateToProps = ({talkPluginAuthorMenu: state}) => ({
+  contentSlot: state.contentSlot,
+  showMenuForComment: state.showMenuForComment,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    setContentSlot,
+    resetContentSlot,
+    openMenu,
+    closeMenu,
+  }, dispatch);
+
+const withAuthorNameFragments = withFragments({
+  root: gql`
+    fragment TalkAuthorMenu_AuthorName_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }`,
+  asset: gql`
+    fragment TalkAuthorMenu_AuthorName_asset on Asset {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'asset')}
+    }`,
+  comment: gql`
+    fragment TalkAuthorMenu_AuthorName_comment on Comment {
+      __typename
+      id
+      user {
+        username
+      }
+      ${getSlotFragmentSpreads(slots, 'comment')}
+    }`,
+});
+
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withAuthorNameFragments,
+);
+
+export default enhance(AuthorNameContainer);

plugins/talk-plugin-author-menu/client/index.js

@@ -0,0 +1,11 @@
+import AuthorName from './containers/AuthorName';
+import reducer from './reducer';
+import translations from './translations.yml';
+
+export default {
+  reducer,
+  slots: {
+    commentAuthorName: [AuthorName]
+  },
+  translations
+};

plugins/talk-plugin-author-menu/client/reducer.js

@@ -0,0 +1,34 @@
+import {SET_CONTENT_SLOT, RESET_CONTENT_SLOT, OPEN_MENU, CLOSE_MENU} from './constants';
+
+const initialState = {
+  contentSlot: null,
+  showMenuForComment: null,
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+  case SET_CONTENT_SLOT:
+    return {
+      ...state,
+      contentSlot: action.slot,
+    };
+  case RESET_CONTENT_SLOT:
+    return {
+      ...state,
+      contentSlot: initialState.contentSlot,
+    };
+  case OPEN_MENU:
+    return {
+      ...state,
+      showMenuForComment: action.id,
+    };
+  case CLOSE_MENU:
+    return {
+      ...state,
+      showMenuForComment: null,
+      contentSlot: null,
+    };
+  default :
+    return state;
+  }
+}

plugins/talk-plugin-author-menu/client/translations.yml

@@ -0,0 +1,4 @@
+en:
+  talk-plugin-author-menu:
+es:
+  talk-plugin-author-menu:

plugins/talk-plugin-author-menu/index.js

@@ -0,0 +1 @@
+module.exports = {};

plugins/talk-plugin-ignore-user/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-ignore-user/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.css

@@ -0,0 +1,17 @@
+.root {
+  white-space: nowrap;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  border: 1px solid rgba(1, 1, 1, 0.8);
+  border-radius: 1px;
+  padding: 3px 6px;
+  font-size: 12px;
+  transition: color 100ms, background 100ms;
+
+  &:hover {
+    background-color: rgba(1, 1, 1, 0.8);
+    color: white;
+  }
+}

plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './IgnoreUserAction.css';
+import {t} from 'plugin-api/beta/client/services';
+import cn from 'classnames';
+
+export default ({ignoreUser}) => (
+  <button
+    className={cn(styles.button, 'talk-plugin-ignore-user-action')}
+    onClick={ignoreUser}>
+    {t('talk-plugin-ignore-user.ignore_user')}
+  </button>
+);

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css

@@ -0,0 +1,45 @@
+.root {
+  width: 200px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.message {
+  font-size: 13px;
+}
+
+.title {
+  padding: 0;
+  margin: 0 0 8px 0;
+  font-size: 15px;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  border: 1px solid rgba(1, 1, 1, 0.8);
+  border-radius: 1px;
+  padding: 3px 6px;
+  font-size: 12px;
+  transition: color 100ms, background 100ms;
+
+  &:hover {
+    background-color: rgba(1, 1, 1, 0.8);
+    color: white;
+  }
+}
+
+.cancel {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  padding: 3px 6px;
+  font-size: 12px;
+  transition: color 100ms;
+  margin-right: 4px;
+
+  &:hover {
+    color: rgba(1, 1, 1, 0.75);
+  }
+}

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './IgnoreUserConfirmation.css';
+import {t} from 'plugin-api/beta/client/services';
+import cn from 'classnames';
+
+export default ({ignoreUser, cancel, username}) => (
+  <aside className={cn(styles.root, 'talk-plugin-ignore-user-confirmation')}>
+    <div className={styles.message}>
+      <h1 className={styles.title}>
+        {t('talk-plugin-ignore-user.confirmation_title', username)}
+      </h1>
+      {t('talk-plugin-ignore-user.confirmation')}
+    </div>
+    <div className={cn(styles.actions, 'talk-plugin-ignore-user-confirmation-actions')}>
+      <button className={cn(styles.cancel, 'talk-plugin-ignore-user-confirmation-cancel')} onClick={cancel}>
+        {t('talk-plugin-ignore-user.cancel')}
+      </button>
+      <button className={cn(styles.button, 'talk-plugin-ignore-user-confirmation-button')} onClick={ignoreUser}>
+        {t('talk-plugin-ignore-user.ignore_user')}
+      </button>
+    </div>
+  </aside>
+);

plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.css

@@ -0,0 +1,22 @@
+.list {
+  display: table;
+  list-style-type: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.listItem {
+  display: table-row;
+}
+
+.username {
+  display: table-cell;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+
+  margin-left: 16px;
+  color: #D0011B;
+  text-decoration: underline;
+}

plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './IgnoredUserSection.css';
+import {t} from 'plugin-api/beta/client/services';
+
+export default ({ignoredUsers, stopIgnoringUser}) => (
+  <section className={'talk-plugin-ignore-user-section'}>
+    <h3>{t('talk-plugin-ignore-user.section_title')}</h3>
+    <p>{t('talk-plugin-ignore-user.section_info')}</p>
+    <ul className={styles.list}>
+      {ignoredUsers.map(({username, id}) => (
+        <li className={styles.listItem} key={id}>
+          <span className={styles.username}>{username}</span>
+          <button
+            onClick={() => stopIgnoringUser({id})}
+            className={styles.button}
+          >
+            {t('talk-plugin-ignore-user.stop_ignoring')}
+          </button>
+        </li>
+      ))}
+    </ul>
+  </section>
+);

plugins/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import IgnoreUserAction from '../components/IgnoreUserAction';
+import {compose, gql} from 'react-apollo';
+import {connect, withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+import {bindActionCreators} from 'redux';
+import {setContentSlot} from 'plugins/talk-plugin-author-menu/client/actions';
+import IgnoreUserConfirmation from './IgnoreUserConfirmation';
+import {getDefinitionName} from 'plugin-api/beta/client/utils';
+
+class IgnoreUserActionContainer extends React.Component {
+
+  ignoreUser = () => {
+    this.props.setContentSlot('ignoreUserConfirmation');
+  };
+
+  render() {
+    return <IgnoreUserAction
+      ignoreUser={this.ignoreUser}
+    />;
+  }
+}
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    setContentSlot,
+  }, dispatch);
+
+const withIgnoreUserActionFragments = withFragments({
+  root: gql`
+    fragment TalkIgnoreUser_IgnoreUserAction_root on RootQuery {
+      me {
+        id
+      }
+    }
+  `,
+  comment: gql`
+    fragment TalkIgnoreUser_IgnoreUserAction_comment on Comment {
+      user {
+        id
+      }
+      ...${getDefinitionName(IgnoreUserConfirmation.fragments.comment)}
+    }
+    ${IgnoreUserConfirmation.fragments.comment}
+  `,
+});
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withIgnoreUserActionFragments,
+  excludeIf(({root: {me}, comment}) => !me || me.id === comment.user.id),
+);
+
+export default enhance(IgnoreUserActionContainer);

plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import IgnoreUserConfirmation from '../components/IgnoreUserConfirmation';
+import {compose, gql} from 'react-apollo';
+import {connect, withFragments, withIgnoreUser} from 'plugin-api/beta/client/hocs';
+import {bindActionCreators} from 'redux';
+import {closeMenu} from 'plugins/talk-plugin-author-menu/client/actions';
+import {notify} from 'plugin-api/beta/client/actions/notification';
+import {t} from 'plugin-api/beta/client/services';
+import {getErrorMessages} from 'plugin-api/beta/client/utils';
+
+class IgnoreUserConfirmationContainer extends React.Component {
+
+  ignoreUser = () => {
+    const {ignoreUser, notify, comment, closeMenu} = this.props;
+    ignoreUser(comment.user.id)
+      .then(() => {
+        notify('success', t('talk-plugin-ignore-user.notify_success', comment.user.username));
+      })
+      .catch((err) => {
+        notify('error', getErrorMessages(err));
+      });
+    closeMenu();
+  };
+
+  cancel = () => {
+    this.props.closeMenu();
+  }
+
+  render() {
+    return <IgnoreUserConfirmation
+      username={this.props.comment.user.username}
+      ignoreUser={this.ignoreUser}
+      cancel={this.cancel}
+    />;
+  }
+}
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    closeMenu,
+    notify,
+  }, dispatch);
+
+const withIgnoreUserConfirmationFragments = withFragments({
+  comment: gql`
+    fragment TalkIgnoreUser_IgnoreUserConfirmation_comment on Comment {
+      user {
+        id
+        username
+      }
+    }`,
+});
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withIgnoreUserConfirmationFragments,
+  withIgnoreUser,
+);
+
+export default enhance(IgnoreUserConfirmationContainer);

plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import IgnoredUserSection from '../components/IgnoredUserSection';
+import {compose, gql} from 'react-apollo';
+import {withFragments, excludeIf, withStopIgnoringUser} from 'plugin-api/beta/client/hocs';
+
+class IgnoredUserSectionContainer extends React.Component {
+
+  render() {
+    return <IgnoredUserSection
+      stopIgnoringUser={this.props.stopIgnoringUser}
+      ignoredUsers={this.props.root.me.ignoredUsers}
+    />;
+  }
+}
+
+const withIgnoredUserSectionFragments = withFragments({
+  root: gql`
+    fragment TalkIgnoreUser_IgnoredUserSection_root on RootQuery {
+      me {
+        id
+        ignoredUsers {
+          id,
+          username,
+        }
+      }
+    }
+  `,
+});
+
+const enhance = compose(
+  withIgnoredUserSectionFragments,
+  withStopIgnoringUser,
+  excludeIf(({root: {me}}) => me.ignoredUsers.length === 0),
+);
+
+export default enhance(IgnoredUserSectionContainer);

plugins/talk-plugin-ignore-user/client/index.js

@@ -0,0 +1,43 @@
+import IgnoreUserAction from './containers/IgnoreUserAction';
+import IgnoreUserConfirmation from './containers/IgnoreUserConfirmation';
+import IgnoredUserSection from './containers/IgnoredUserSection';
+import translations from './translations.yml';
+import update from 'immutability-helper';
+
+export default {
+  slots: {
+    authorMenuActions: [IgnoreUserAction],
+    ignoreUserConfirmation: [IgnoreUserConfirmation],
+    profileSections: [IgnoredUserSection],
+  },
+  translations,
+  mutations: {
+    IgnoreUser: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (previousData) => {
+          const ignoredUserId = variables.id;
+          const updated = update(previousData, {me: {ignoredUsers: {$push: [{
+            id: ignoredUserId,
+            __typename: 'User',
+          }]}}});
+          return updated;
+        }
+      }
+    }),
+    StopIgnoringUser: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Profile: (previousData) => {
+          const noLongerIgnoredUserId = variables.id;
+
+          // remove noLongerIgnoredUserId from ignoredUsers
+          const updated = update(previousData, {me: {ignoredUsers: {
+            $apply: (ignoredUsers) => {
+              return ignoredUsers.filter((u) => u.id !== noLongerIgnoredUserId);
+            }
+          }}});
+          return updated;
+        }
+      }
+    }),
+  },
+};

plugins/talk-plugin-ignore-user/client/translations.yml

@@ -0,0 +1,25 @@
+en:
+  talk-plugin-ignore-user:
+    section_title: Ignored users
+    section_info: Because you ignored the following commenters, their comments are hidden.
+    stop_ignoring: Stop ignoring
+    ignore_user: Ignore User
+    cancel: Cancel
+    confirmation: |
+      When you ignore a user, all comments they wrote on the site will be hidden from you. You can
+      undo this later from My Profile.
+    notify_success: |
+      You are now ignoring {0}. You can undo this action from My Profile.
+    confirmation_title: Ignore {0}?
+es:
+  talk-plugin-ignore-user:
+    section_title: "Usuarios ignorados"
+    stop_ignoring: "No ignorar más"
+fr:
+  talk-plugin-ignore-user:
+    section_title: "Utilisateurs ignorés"
+pt_Br:
+  talk-plugin-ignore-user:
+    section_title: "Usuários ignorados"
+    section_info: "Porque você ignorou os seguintes comentadores, seus comentários estão ocultos."
+    stop_ignoring: "Pare de ignorar"

plugins/talk-plugin-ignore-user/index.js

@@ -0,0 +1 @@
+module.exports = {};

plugins/talk-plugin-like/client/index.js

@@ -5,5 +5,5 @@ export default {
   translations,
   slots: {
     commentReactions: [LikeButton]
-  }
+  },
 };

plugins/talk-plugin-member-since/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-member-since/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-member-since/client/components/MemberSinceInfo.css

@@ -0,0 +1,19 @@
+.root {
+  white-space: nowrap;
+}
+
+.root:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.memberSince {
+  margin-left: 4px;
+  letter-spacing: 0.2px;
+  font-size: 13px;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 18px;
+  vertical-align: middle;
+}

plugins/talk-plugin-member-since/client/components/MemberSinceInfo.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './MemberSinceInfo.css';
+import {t} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+import cn from 'classnames';
+import moment from 'moment';
+
+export default ({memberSinceDate}) => (
+  <div className={cn(styles.root, 'talk-plugin-member-since')}>
+    <Icon name="date_range" className={cn(styles.icon, 'talk-plugin-member-since-icon')} />
+    <span className={cn(styles.memberSince, 'talk-plugin-member-since-date')}>
+      {t('talk-plugin-member-since.member_since')}: {moment(new Date(memberSinceDate)).format('MMM DD, YYYY')}
+    </span>
+  </div>
+);

plugins/talk-plugin-member-since/client/containers/MemberSinceInfo.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import MemberSinceInfo from '../components/MemberSinceInfo';
+import {compose, gql} from 'react-apollo';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+
+class MemberSinceInfoContainer extends React.Component {
+  render() {
+    return <MemberSinceInfo
+      memberSinceDate={this.props.comment.user.created_at}
+    />;
+  }
+}
+
+const withMemberSinceInfoFragments = withFragments({
+  comment: gql`
+    fragment TalkAuthorMenu_MemberSinceInfo_comment on Comment {
+      user {
+        username
+        created_at
+      }
+    }`,
+});
+
+const enhance = compose(
+  withMemberSinceInfoFragments,
+);
+
+export default enhance(MemberSinceInfoContainer);

plugins/talk-plugin-member-since/client/index.js

@@ -0,0 +1,9 @@
+import MemberSinceInfo from './containers/MemberSinceInfo';
+import translations from './translations.yml';
+
+export default {
+  slots: {
+    authorMenuInfos: [MemberSinceInfo]
+  },
+  translations
+};

plugins/talk-plugin-member-since/client/translations.yml

@@ -0,0 +1,6 @@
+en:
+  talk-plugin-member-since:
+    member_since: "Member Since"
+es:
+  talk-plugin-member-since:
+    member_since: "Miembro desde"

plugins/talk-plugin-member-since/index.js

@@ -0,0 +1 @@
+module.exports = {};