Adding comment count

src/core/client/stream/components/App.tsx

@@ -20,11 +20,16 @@ type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
 export interface AppProps {
   activeTab: TabValue;
   onTabClick: (tab: TabValue) => void;
+  commentCount: number;
 }
 
-const CommentsTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
-  <Localized id="general-app-commentsTab">
-    <Tab {...props}>Comments</Tab>
+interface CommentsTabProps extends PropTypesOf<typeof Tab> {
+  commentCount: number;
+}
+
+const CommentsTab: StatelessComponent<CommentsTabProps> = props => (
+  <Localized id="general-app-commentsTab" $commentCount={props.commentCount}>
+    <Tab {...props}>{"{$commentCount} Comments"}</Tab>
   </Localized>
 );
 
@@ -40,7 +45,7 @@ const App: StatelessComponent<AppProps> = props => {
   return (
     <HorizontalGutter className={styles.root}>
       <TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
-        <CommentsTab tabId="COMMENTS" />
+        <CommentsTab tabId="COMMENTS" commentCount={props.commentCount} />
         <MyProfileTab tabId="PROFILE" />
       </TabBar>
       <TabContent activeTab={props.activeTab} className={styles.tabContent}>

src/core/client/stream/containers/AppContainer.tsx

@@ -13,6 +13,7 @@ import App from "../components/App";
 interface InnerProps {
   local: Local;
   setActiveTab: SetActiveTabMutation;
+  commentCount: number;
 }
 
 class AppContainer extends React.Component<InnerProps> {
@@ -23,9 +24,16 @@ class AppContainer extends React.Component<InnerProps> {
   public render() {
     const {
       local: { activeTab },
+      commentCount,
     } = this.props;
 
-    return <App activeTab={activeTab} onTabClick={this.handleSetActiveTab} />;
+    return (
+      <App
+        activeTab={activeTab}
+        onTabClick={this.handleSetActiveTab}
+        commentCount={commentCount}
+      />
+    );
   }
 }
 

src/core/client/stream/index.tsx

@@ -4,7 +4,7 @@ import { StatelessComponent } from "react";
 import ReactDOM from "react-dom";
 
 import { createManaged } from "talk-framework/lib/bootstrap";
-import AppContainer from "talk-stream/containers/AppContainer";
+import AppQuery from "talk-stream/queries/AppQuery";
 
 import {
   OnPostMessageAuthError,
@@ -34,7 +34,7 @@ async function main() {
     <ManagedTalkContextProvider>
       <>
         {listeners}
-        <AppContainer />
+        <AppQuery />
       </>
     </ManagedTalkContextProvider>
   );

src/core/client/stream/mutations/CreateCommentMutation.ts

@@ -35,6 +35,16 @@ function sharedUpdater(
  * update integrates new comment into the CommentConnection.
  */
 function update(store: RecordSourceSelectorProxy, input: CreateCommentInput) {
+  // Updating Comment Count
+  const asset = store.get(input.assetID);
+  if (asset) {
+    const record = asset.getLinkedRecord("commentCounts");
+    if (record) {
+      const currentCount = record.getValue("totalVisible");
+      record.setValue(currentCount + 1, "totalVisible");
+    }
+  }
+
   // Get the payload returned from the server.
   const payload = store.getRootField("createComment")!;
 

src/core/client/stream/queries/AppQuery.tsx

@@ -0,0 +1,73 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { ReadyState } from "react-relay";
+import {
+  graphql,
+  QueryRenderer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
+import { AppQuery as QueryTypes } from "talk-stream/__generated__/AppQuery.graphql";
+import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
+import { Spinner } from "talk-ui/components";
+import AppContainer from "../containers/AppContainer";
+
+interface InnerProps {
+  local: Local;
+}
+
+export const render = ({
+  error,
+  props,
+}: ReadyState<QueryTypes["response"]>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+
+  if (props) {
+    if (!props.asset) {
+      return (
+        <Localized id="comments-streamQuery-assetNotFound">
+          <div>Asset not found</div>
+        </Localized>
+      );
+    }
+
+    return (
+      <AppContainer commentCount={props.asset.commentCounts.totalVisible} />
+    );
+  }
+
+  return <Spinner />;
+};
+
+const AppQuery: StatelessComponent<InnerProps> = ({
+  local: { assetID, assetURL },
+}) => (
+  <QueryRenderer<QueryTypes>
+    query={graphql`
+      query AppQuery($assetID: ID, $assetURL: String) {
+        asset(id: $assetID, url: $assetURL) {
+          commentCounts {
+            totalVisible
+          }
+        }
+      }
+    `}
+    variables={{
+      assetID,
+      assetURL,
+    }}
+    render={render}
+  />
+);
+
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment AppQueryLocal on Local {
+      assetID
+      assetURL
+    }
+  `
+)(AppQuery);
+
+export default enhanced;

src/locales/en-US/stream.ftl

@@ -12,7 +12,7 @@ general-userBoxAuthenticated-signedInAs =
 general-userBoxAuthenticated-notYou =
   Not you? <button>Sign Out</button>
 
-general-app-commentsTab = Comments
+general-app-commentsTab = {$commentCount} Comments
 general-app-myProfileTab = My Profile
 
 ## Comments Tab