Merge pull request #999 from coralproject/subscriber-badge

Subscriber Badge Plugin and User Tags bug

.eslintignore

@@ -26,6 +26,7 @@ plugins/*
 !plugins/talk-plugin-toxic-comments
 !plugins/talk-plugin-remember-sort
 !plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-subscriber
 !plugins/talk-plugin-flag-details
 
 node_modules

.gitignore

@@ -43,6 +43,7 @@ plugins/*
 !plugins/talk-plugin-toxic-comments
 !plugins/talk-plugin-remember-sort
 !plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-subscriber
 !plugins/talk-plugin-flag-details
 
 **/node_modules/*

client/coral-embed-stream/src/graphql/index.js

@@ -96,6 +96,11 @@ export default {
         user {
           id
           username
+          tags {
+            tag {
+              name
+            }
+          }
         }
         action_summaries {
           count
@@ -129,7 +134,19 @@ export default {
             user: {
               __typename: 'User',
               id: auth.user.id,
-              username: auth.user.username
+              username: auth.user.username,
+              tags: tags.map((tag) => ({
+                tag: {
+                  name: tag,
+                  created_at: new Date().toISOString(),
+                  __typename: 'Tag'
+                },
+                assigned_by: {
+                  id: auth.user.id,
+                  __typename: 'User'
+                },
+                __typename: 'TagLink'
+              })),
             },
             created_at: new Date().toISOString(),
             body,
@@ -140,10 +157,6 @@ export default {
                 created_at: new Date().toISOString(),
                 __typename: 'Tag'
               },
-              assigned_by: {
-                id: auth.user.id,
-                __typename: 'User'
-              },
               __typename: 'TagLink'
             })),
             status: 'NONE',

plugins/talk-plugin-subscriber/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+    "extends": "@coralproject/eslint-config-talk"
+  }
+  

plugins/talk-plugin-subscriber/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-subscriber/client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}

plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css

@@ -0,0 +1,12 @@
+.badge {
+  background-color: #616161;
+  color: white;
+  display: inline-block;
+  margin: 0px 5px;
+  padding: 5px 5px;
+  border-radius: 2px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  font-weight: bold;
+}

plugins/talk-plugin-subscriber/client/components/SubscriberBadge.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './SubscriberBadge.css';
+import {t} from 'plugin-api/beta/client/services';
+
+export default () =>(
+  <span className={styles.badge}>
+    {t('talk-plugin-subscriber.subscriber')}
+  </span>
+);

plugins/talk-plugin-subscriber/client/containers/SubscriberBadge.js

@@ -0,0 +1,23 @@
+import SubscriberBadge from '../components/SubscriberBadge';
+import {compose, gql} from 'react-apollo';
+import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+
+const isSubscriber = (tags = []) => tags.some((t) => t.tag.name === 'SUBSCRIBER');
+
+const enhance = compose(
+  withFragments({
+    comment: gql`
+      fragment TalkSubscriberBadge_SubscriberBadge_comment on Comment {
+        user {
+          tags {
+            tag {
+              name
+            }
+          }
+        }
+      }`
+  }),
+  excludeIf(({comment}) => !isSubscriber(comment.user.tags))
+);
+  
+export default enhance(SubscriberBadge);

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

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

plugins/talk-plugin-subscriber/client/translations.yml

@@ -0,0 +1,6 @@
+en:
+  talk-plugin-subscriber:
+    subscriber: "Subscriber"
+es:
+  talk-plugin-subscriber:
+    subscriber: "Subscriptor"

plugins/talk-plugin-subscriber/index.js

@@ -0,0 +1,14 @@
+module.exports = {
+  tags: [
+    {
+      name: 'SUBSCRIBER',
+      permissions: {
+        public: true,
+        self: false,
+        roles: []
+      },
+      models: ['USERS'],
+      created_at: new Date()
+    }
+  ]
+};

plugins/talk-plugin-subscriber/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@coralproject/talk-plugin-subscriber",
+  "version": "0.1.0",
+  "description": "A Recipe to display a user badge",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "moment": "^2.18.1"
+  }
+}

plugins/talk-plugin-subscriber/yarn.lock

@@ -0,0 +1,11 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+moment@^2.18.1:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
+momentjs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/momentjs/-/momentjs-2.0.0.tgz#73df904b4fa418f6e3c605e831cef6ed5518ebd4"