[CORL-181] Comment Count Injection (#2581)

* feat: inject comment counts

* fix: tests

* feat: integrate stream embed with coral counts

* chore: refactor constants

* test: test for count bundle

* test: test live comment count integration with stream embed

* feat: use defer

* fix: snapshot

* feat: auto add count.js in when calling Coral.createStreamEmbed

* fix: tests

* fix: rm duplicate test

* chore: remove unuse file

src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx

@@ -36,6 +36,7 @@ import SortMenu from "./SortMenu";
 import StoryClosedTimeoutContainer from "./StoryClosedTimeout";
 import styles from "./StreamContainer.css";
 import { SuspendedInfoContainer } from "./SuspendedInfo/index";
+import useCommentCountEvent from "./useCommentCountEvent";
 
 interface Props {
   story: StoryData;
@@ -96,6 +97,9 @@ export const StreamContainer: FunctionComponent<Props> = props => {
   const allCommentsCount = props.story.commentCounts.totalPublished;
   const featuredCommentsCount = props.story.commentCounts.tags.FEATURED;
 
+  // Emit comment count event.
+  useCommentCountEvent(props.story.id, props.story.url, allCommentsCount);
+
   useEffect(() => {
     // If the comment tab is still in its uninitialized state, "NONE", then we
     // should evaluate that based on the featuredCommentsCount if we should show
@@ -221,6 +225,8 @@ const enhanced = withFragmentContainer<Props>({
       ...StoryClosedTimeoutContainer_story
       ...CreateCommentReplyMutation_story
       ...CreateCommentMutation_story
+      id
+      url
       commentCounts {
         totalPublished
         tags {

src/core/client/stream/tabs/Comments/Stream/useCommentCountEvent.ts

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+
+import { useEffectWhenChanged } from "coral-framework/hooks";
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { getMessage } from "coral-framework/lib/i18n";
+
+/**
+ * useCommentCountEvent is a React hook that will
+ * emit `commentCount` events.
+ * @param storyID story id of the comment count
+ * @param storyURL story url of the comment count
+ * @param commentCount number of total published comments
+ */
+function useCommentCountEvent(
+  storyID: string,
+  storyURL: string,
+  commentCount: number
+) {
+  const { eventEmitter, localeBundles } = useCoralContext();
+  const callback = () => {
+    eventEmitter.emit("commentCount", {
+      number: commentCount,
+      text: getMessage(localeBundles, "comment-count-text", "Comment", {
+        count: commentCount,
+      }),
+      storyID,
+      storyURL,
+    });
+  };
+  useEffect(callback, []);
+  useEffectWhenChanged(callback, [
+    eventEmitter,
+    commentCount,
+    localeBundles,
+    storyID,
+    storyURL,
+  ]);
+}
+
+export default useCommentCountEvent;

src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx

@@ -320,7 +320,7 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                           Cancel
                         </Button>
                       </Localized>
-                      <Localized id="profile-changeUsername-submit-button-save">
+                      <Localized id="profile-changeUsername-save">
                         <Button
                           className={CLASSES.myUsername.form.saveButton}
                           variant={pristine || invalid ? "outlined" : "filled"}

src/core/client/stream/test/comments/stream/emitCountEvents.spec.tsx

@@ -0,0 +1,56 @@
+import { pureMerge } from "coral-common/utils";
+import { GQLResolver } from "coral-framework/schema";
+import {
+  createResolversStub,
+  CreateTestRendererParams,
+} from "coral-framework/testHelpers";
+
+import { commenters, settings, stories } from "../../fixtures";
+import create from "./create";
+
+const story = stories[0];
+const viewer = commenters[0];
+
+async function createTestRenderer(
+  params: CreateTestRendererParams<GQLResolver> = {}
+) {
+  const { testRenderer, context } = create({
+    ...params,
+    resolvers: pureMerge(
+      createResolversStub<GQLResolver>({
+        Query: {
+          settings: () => settings,
+          viewer: () => viewer,
+          story: () => story,
+        },
+      }),
+      params.resolvers
+    ),
+    initLocalState: (localRecord, source, environment) => {
+      localRecord.setValue(story.id, "storyID");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+  return {
+    testRenderer,
+    context,
+  };
+}
+
+it("emit commentCount events", done => {
+  createTestRenderer().then(({ context: { eventEmitter } }) => {
+    eventEmitter.on("commentCount", args => {
+      expect(args).toMatchInlineSnapshot(`
+        Object {
+          "number": 2,
+          "storyID": "story-1",
+          "storyURL": "http://localhost/stories/story-1",
+          "text": "Comments",
+        }
+      `);
+      done();
+    });
+  });
+});

src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap

@@ -123,9 +123,9 @@ exports[`renders configure 1`] = `
               <p
                 className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
               >
-                When enabled, the comments will be updated instantly 
-as new comments and replies are submitted, instead of 
-requiring a page refresh. You can disable this in the 
+                When enabled, the comments will be updated instantly
+as new comments and replies are submitted, instead of
+requiring a page refresh. You can disable this in the
 unusual situation of an article getting so much traffic that the comments are loading slowly.
               </p>
             </div>
@@ -258,8 +258,8 @@ unusual situation of an article getting so much traffic that the comments are lo
                 <p
                   className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
                 >
-                  Add a message to the top of the comment box for your readers. 
-Use this to suggest a discussion topic, ask a question or make 
+                  Add a message to the top of the comment box for your readers.
+Use this to suggest a discussion topic, ask a question or make
 announcements relating to the comments on this story.
                 </p>
               </div>

src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap

@@ -300,7 +300,7 @@ exports[`renders the empty settings pane 1`] = `
                         className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                       >
                         An email has been sent to $email to verify your account.
-You must verify your new email address before it can be used 
+You must verify your new email address before it can be used
 to sign in to your account or to receive notifications.
                       </p>
                       <button