Implementing first draft of FC

plugins/talk-plugin-featured-comments/client/components/Tab.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import {TabCount} from 'plugin-api/beta/client/components/ui';
+
+// TODO: This is just example code, and needs to replaced by an actual implementation.
+export default ({active, asset: {recentComments}}) => (
+  <span>
+    Featured <TabCount active={active} sub>{recentComments.length}</TabCount>
+  </span>
+);

plugins/talk-plugin-featured-comments/client/components/TabPane.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+// TODO: This is just example code, and needs to replaced by an actual implementation.
+export default ({asset: {recentComments}}) => (
+  <div>
+    {recentComments.map((comment) => (
+      <div key={comment.id}>
+        <div><strong>{comment.user.username}</strong></div>
+        <div>
+          {comment.body}
+        </div>
+        <hr />
+      </div>
+    ))}
+  </div>
+);

plugins/talk-plugin-featured-comments/client/containers/Tab.js

@@ -0,0 +1,17 @@
+import {compose, gql} from 'react-apollo';
+import withFragments from 'coral-framework/hocs/withFragments';
+import Tab from '../components/Tab';
+
+// TODO: This is just example code, and needs to replaced by an actual implementation.
+const enhance = compose(
+  withFragments({
+    asset: gql`
+      fragment TalkFeatured_Tab_asset on Asset {
+        recentComments {
+          id
+        }
+      }`,
+  }),
+);
+
+export default enhance(Tab);

plugins/talk-plugin-featured-comments/client/containers/TabPane.js

@@ -0,0 +1,22 @@
+import {compose, gql} from 'react-apollo';
+import withFragments from 'coral-framework/hocs/withFragments';
+import TabPane from '../components/TabPane';
+
+// TODO: This is just example code, and needs to replaced by an actual implementation.
+const enhance = compose(
+  withFragments({
+    asset: gql`
+      fragment TalkFeatured_TabPane_asset on Asset {
+        recentComments {
+          id
+          body
+          user {
+            id
+            username
+          }
+        }
+      }`,
+  }),
+);
+
+export default enhance(TabPane);

plugins/talk-plugin-featured-comments/client/index.js

@@ -1,13 +1,15 @@
 import translations from './translations.json';
 import FeaturedTag from './components/FeaturedTag';
 import FeaturedButton from './components/FeaturedButton';
-import FeaturedComments from './components/FeaturedComments';
+import Tab from './containers/Tab';
+import TabPane from './containers/TabPane';
 
 export default {
   translations,
   slots: {
     commentInfoBar: [FeaturedTag],
     commentReactions: [FeaturedButton],
-    stream: [FeaturedComments]
+    streamTabs: [Tab],
+    streamTabPanes: [TabPane]
   }
 };