Add member since

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

@@ -7,7 +7,7 @@
   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: 10;
+  z-index: 9;
   top: 26px;
   left: 0px;
   min-width: 20px;

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,16 @@
+.root {
+  white-space: nowrap;
+}
+
+.memberSince {
+  color: #484747;
+  margin-left: 4px;
+  letter-spacing: 0.2px;
+  font-size: 0.9em;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 1.4em;
+  vertical-align: middle;
+}

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

@@ -0,0 +1,14 @@
+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 moment from 'moment';
+
+export default ({memberSinceDate}) => (
+  <div className={styles.root}>
+    <Icon name="date_range" className={styles.icon} />
+    <span className={styles.memberSince}>
+      {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 = {};