Handling cache and mutations

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

@@ -2,8 +2,8 @@ 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: {featuredCommentCount}}) => (
+export default ({active, asset: {featuredCommentsCount}}) => (
   <span>
-    Featured <TabCount active={active} sub>{featuredCommentCount}</TabCount>
+    Featured <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
   </span>
 );

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

@@ -6,7 +6,7 @@ const enhance = compose(
   withFragments({
     asset: gql`
       fragment TalkFeatured_Tab_asset on Asset {
-          featuredCommentCount: commentCount(tags: ["FEATURED"])
+          featuredCommentsCount: totalCommentCount(tags: ["FEATURED"])
       }`,
   }),
 );

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

@@ -16,7 +16,7 @@ const enhance = compose(
     asset: gql`
       fragment TalkFeatured_TabPane_asset on Asset {
         id
-        featuredComments: comments(tags: ["FEATURED"]) {
+        featuredComments: comments(tags: ["FEATURED"], deep: true) {
               nodes {
                   id
                   body

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

@@ -3,6 +3,9 @@ import TabPane from './containers/TabPane';
 import FeaturedTag from './components/FeaturedTag';
 import FeaturedButton from './components/FeaturedButton';
 import translations from './translations.json';
+import update from 'immutability-helper';
+
+import {findCommentInEmbedQuery, insertSorted} from 'plugin-api/beta/client/utils/stream';
 
 export default {
   translations,
@@ -11,5 +14,60 @@ export default {
     streamTabPanes: [TabPane],
     commentInfoBar: [FeaturedTag],
     commentReactions: [FeaturedButton]
-  }
+  },
+  mutations: {
+    AddTag: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (previous) => {
+        
+          if (variables.name !== 'FEATURED') {
+            return;
+          }
+
+          const comment = findCommentInEmbedQuery(previous, variables.id);
+
+          const updated = update(previous, {
+            asset: {
+              featuredComments: {
+                nodes: {
+                  $apply: (nodes) => insertSorted(nodes, comment, 'REVERSE_CHRONOLOGICAL')
+                }
+              },
+              featuredCommentsCount: {
+                $apply: (value) => value + 1
+              }
+            }
+          });
+
+          return updated;
+        },
+      }
+    }),
+    RemoveTag: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (previous) => {
+
+          if (variables.name !== 'FEATURED') {
+            return;
+          }
+
+          const updated = update(previous, {
+            asset: {
+              featuredComments: {
+                nodes: {
+                  $apply: (nodes) => 
+                    nodes.filter((n) => n.id !== variables.id)
+                }
+              },
+              featuredCommentsCount: {
+                $apply: (value) => value - 1
+              }
+            }
+          });
+
+          return updated;
+        },
+      }
+    })
+  },
 };