From ab72995a2c63ad2f6bd818014e9d5ef745c2bf2e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 10 Jul 2017 20:46:28 +0700
Subject: [PATCH] Implement streamTabs and streamTabPanes slot

---
 .eslintignore                                 |  1 +
 .gitignore                                    |  1 +
 .../src/components/Stream.js                  | 26 ++++++++++++++-----
 .../src/containers/Stream.js                  | 10 +++++++
 client/coral-framework/helpers/plugins.js     | 26 ++++++++++++++-----
 .../coral-framework/loaders/plugins-loader.js |  2 +-
 client/coral-ui/components/Tab.css            |  1 +
 plugins/talk-plugin-featured/client/.babelrc  | 14 ++++++++++
 .../client/.eslintrc.json                     | 23 ++++++++++++++++
 .../client/components/Tab.js                  |  8 ++++++
 .../client/components/TabPane.js              | 14 ++++++++++
 .../client/containers/Tab.js                  | 16 ++++++++++++
 .../client/containers/TabPane.js              | 21 +++++++++++++++
 plugins/talk-plugin-featured/client/index.js  |  9 +++++++
 plugins/talk-plugin-featured/index.js         |  2 ++
 15 files changed, 161 insertions(+), 13 deletions(-)
 create mode 100644 plugins/talk-plugin-featured/client/.babelrc
 create mode 100644 plugins/talk-plugin-featured/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-featured/client/components/Tab.js
 create mode 100644 plugins/talk-plugin-featured/client/components/TabPane.js
 create mode 100644 plugins/talk-plugin-featured/client/containers/Tab.js
 create mode 100644 plugins/talk-plugin-featured/client/containers/TabPane.js
 create mode 100644 plugins/talk-plugin-featured/client/index.js
 create mode 100644 plugins/talk-plugin-featured/index.js

diff --git a/.eslintignore b/.eslintignore
index 3a259c106..b58e4f058 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -13,4 +13,5 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
+!plugins/talk-plugin-featured
 node_modules
diff --git a/.gitignore b/.gitignore
index 0be1266c6..0e809b43a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,5 +26,6 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
+!plugins/talk-plugin-featured
 
 **/node_modules/*
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index ae457ffbe..6205a2a10 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -9,6 +9,7 @@ import {ModerationLink} from 'coral-plugin-moderation';
 import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
 import t, {timeago} from 'coral-framework/services/i18n';
+import {getSlotComponents} from 'coral-framework/helpers/plugins';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import {Button, TabBar, Tab, TabCount, TabContent, TabPane} from 'coral-ui';
@@ -202,17 +203,30 @@ class Stream extends React.Component {
                 <Slot fill="streamFilter" />
               </div>
               <TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
-                <Tab tabId={'featured'}>
-                 Featured
-                </Tab>
+                {getSlotComponents('streamTabs').map((PluginComponent) => (
+                  <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+                    <PluginComponent
+                      active={activeStreamTab === PluginComponent.talkPluginName}
+                      data={data}
+                      root={root}
+                      asset={asset}
+                    />
+                  </Tab>
+                ))}
                 <Tab tabId={'all'}>
                   All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
                 </Tab>
               </TabBar>
               <TabContent activeTab={activeStreamTab} sub>
-                <TabPane tabId={'featured'}>
-                  TODO
-                </TabPane>
+                {getSlotComponents('streamTabPanes').map((PluginComponent) => (
+                  <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+                    <PluginComponent
+                      data={data}
+                      root={root}
+                      asset={asset}
+                    />
+                  </TabPane>
+                ))}
                 <TabPane tabId={'all'}>
                   <AllCommentsPane
                     data={data}
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index 21a29dd38..2a10581b8 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -14,6 +14,7 @@ import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/strea
 import Stream from '../components/Stream';
 import Comment from './Comment';
 import {withFragments} from 'coral-framework/hocs';
+import {getSlotsFragments} from 'coral-framework/helpers/plugins';
 import {Spinner} from 'coral-ui';
 import {getDefinitionName} from 'coral-framework/utils';
 import {
@@ -240,6 +241,11 @@ const LOAD_MORE_QUERY = gql`
   ${Comment.fragments.comment}
 `;
 
+const pluginFragments = getSlotsFragments([
+  'streamTabs',
+  'streamTabPanes',
+]);
+
 const fragments = {
   root: gql`
     fragment CoralEmbedStream_Stream_root on RootQuery {
@@ -281,6 +287,7 @@ const fragments = {
           startCursor
           endCursor
         }
+        ${pluginFragments.spreads('asset')}
       }
       me {
         status
@@ -291,8 +298,11 @@ const fragments = {
       settings {
         organizationName
       }
+      ${pluginFragments.spreads('root')}
       ...${getDefinitionName(Comment.fragments.root)}
     }
+    ${pluginFragments.definitions('asset')}
+    ${pluginFragments.definitions('root')}
     ${Comment.fragments.root}
     ${commentFragment}
   `,
diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js
index ab5e3080e..cd96e8906 100644
--- a/client/coral-framework/helpers/plugins.js
+++ b/client/coral-framework/helpers/plugins.js
@@ -10,17 +10,16 @@ import {loadTranslations} from 'coral-framework/services/i18n';
 import {injectReducers, getStore} from 'coral-framework/services/store';
 import camelize from './camelize';
 
-function getSlotComponents(slot) {
+export function getSlotComponents(slot) {
   const pluginConfig = getStore().getState().config.plugin_config;
 
-    // Filter out components that have been disabled in `plugin_config`
   return flatten(plugins
 
     // Filter out components that have been disabled in `plugin_config`
-    .filter((o) => !pluginConfig || !pluginConfig[o.plugin] || !pluginConfig[o.plugin].disable_components)
-
+    .filter((o) => !pluginConfig || !pluginConfig[o.name] || !pluginConfig[o.name].disable_components)
     .filter((o) => o.module.slots[slot])
-    .map((o) => o.module.slots[slot]));
+    .map((o) => o.module.slots[slot])
+  );
 }
 
 export function isSlotEmpty(slot) {
@@ -113,7 +112,22 @@ export function injectPluginsReducers() {
   const reducers = merge(
     ...plugins
       .filter((o) => o.module.reducer)
-      .map((o) => ({[camelize(o.plugin)] : o.module.reducer}))
+      .map((o) => ({[camelize(o.name)] : o.module.reducer}))
   );
   injectReducers(reducers);
 }
+
+function addMetaDataToSlotComponents() {
+
+  // Add talkPluginName to Slot Components.
+  plugins.forEach((plugin) => {
+    const slots = plugin.module.slots;
+    slots && Object.keys(slots).forEach((slot) => {
+      slots[slot].forEach((component) => {
+        component.talkPluginName = plugin.name;
+      });
+    });
+  });
+}
+
+addMetaDataToSlotComponents();
diff --git a/client/coral-framework/loaders/plugins-loader.js b/client/coral-framework/loaders/plugins-loader.js
index 4feae42ca..a9fed95ab 100644
--- a/client/coral-framework/loaders/plugins-loader.js
+++ b/client/coral-framework/loaders/plugins-loader.js
@@ -22,7 +22,7 @@ module.exports = function(source) {
   const config = this.exec(source, this.resourcePath);
   const plugins = getPluginList(config).map((plugin) => `{
     module: require('${plugin}/client'),
-    plugin: '${plugin}'
+    name: '${plugin}'
   }`);
 
   return stripIndent`
diff --git a/client/coral-ui/components/Tab.css b/client/coral-ui/components/Tab.css
index b5bf2463c..b3c026b3d 100644
--- a/client/coral-ui/components/Tab.css
+++ b/client/coral-ui/components/Tab.css
@@ -60,6 +60,7 @@
   font-weight: bold;
   border-bottom: solid 3px #10589b;
   margin-bottom: 0px;
+  padding: 6px 10px;
 }
 
 .root:only-child .button, .rootSub:only-child .buttonSub {
diff --git a/plugins/talk-plugin-featured/client/.babelrc b/plugins/talk-plugin-featured/client/.babelrc
new file mode 100644
index 000000000..63b1c53de
--- /dev/null
+++ b/plugins/talk-plugin-featured/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"
+  ]
+}
diff --git a/plugins/talk-plugin-featured/client/.eslintrc.json b/plugins/talk-plugin-featured/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-plugin-featured/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"] }]
+  }
+}
diff --git a/plugins/talk-plugin-featured/client/components/Tab.js b/plugins/talk-plugin-featured/client/components/Tab.js
new file mode 100644
index 000000000..f5306ebaa
--- /dev/null
+++ b/plugins/talk-plugin-featured/client/components/Tab.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import {TabCount} from 'plugin-api/beta/client/components/ui';
+
+export default ({active, asset: {recentComments}}) => (
+  <span>
+    Featured <TabCount active={active} sub>{recentComments.length}</TabCount>
+  </span>
+);
diff --git a/plugins/talk-plugin-featured/client/components/TabPane.js b/plugins/talk-plugin-featured/client/components/TabPane.js
new file mode 100644
index 000000000..7e6f5834b
--- /dev/null
+++ b/plugins/talk-plugin-featured/client/components/TabPane.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default ({asset: {recentComments}}) => (
+  <div>
+    {recentComments.map((comment) => (
+      <p key={comment.id}>
+        <div><strong>{comment.user.username}</strong></div>
+        <div>
+          {comment.body}
+        </div>
+      </p>
+    ))}
+  </div>
+);
diff --git a/plugins/talk-plugin-featured/client/containers/Tab.js b/plugins/talk-plugin-featured/client/containers/Tab.js
new file mode 100644
index 000000000..2a38933c6
--- /dev/null
+++ b/plugins/talk-plugin-featured/client/containers/Tab.js
@@ -0,0 +1,16 @@
+import {compose, gql} from 'react-apollo';
+import withFragments from 'coral-framework/hocs/withFragments';
+import Tab from '../components/Tab';
+
+const enhance = compose(
+  withFragments({
+    asset: gql`
+      fragment TalkFeatured_Tab_asset on Asset {
+        recentComments {
+          id
+        }
+      }`,
+  }),
+);
+
+export default enhance(Tab);
diff --git a/plugins/talk-plugin-featured/client/containers/TabPane.js b/plugins/talk-plugin-featured/client/containers/TabPane.js
new file mode 100644
index 000000000..13046cb00
--- /dev/null
+++ b/plugins/talk-plugin-featured/client/containers/TabPane.js
@@ -0,0 +1,21 @@
+import {compose, gql} from 'react-apollo';
+import withFragments from 'coral-framework/hocs/withFragments';
+import TabPane from '../components/TabPane';
+
+const enhance = compose(
+  withFragments({
+    asset: gql`
+      fragment TalkFeatured_TabPane_asset on Asset {
+        recentComments {
+          id
+          body
+          user {
+            id
+            username
+          }
+        }
+      }`,
+  }),
+);
+
+export default enhance(TabPane);
diff --git a/plugins/talk-plugin-featured/client/index.js b/plugins/talk-plugin-featured/client/index.js
new file mode 100644
index 000000000..69dfaa6cb
--- /dev/null
+++ b/plugins/talk-plugin-featured/client/index.js
@@ -0,0 +1,9 @@
+import Tab from './containers/Tab';
+import TabPane from './containers/TabPane';
+
+export default {
+  slots: {
+    streamTabs: [Tab],
+    streamTabPanes: [TabPane],
+  }
+};
diff --git a/plugins/talk-plugin-featured/index.js b/plugins/talk-plugin-featured/index.js
new file mode 100644
index 000000000..85dfb349b
--- /dev/null
+++ b/plugins/talk-plugin-featured/index.js
@@ -0,0 +1,2 @@
+module.exports = {};
+