feat: default to the featured tab when available (#2402)

src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap

@@ -21,7 +21,7 @@ exports[`init local state 1`] = `
     },
     \\"activeTab\\": \\"COMMENTS\\",
     \\"profileTab\\": \\"MY_COMMENTS\\",
-    \\"commentsTab\\": \\"ALL_COMMENTS\\"
+    \\"commentsTab\\": \\"NONE\\"
   },
   \\"client:root.local.authPopup\\": {
     \\"__id\\": \\"client:root.local.authPopup\\",

src/core/client/stream/local/initLocalState.ts

@@ -57,6 +57,9 @@ export default async function initLocalState(
     // Set active tabs
     localRecord.setValue("COMMENTS", "activeTab");
     localRecord.setValue("MY_COMMENTS", "profileTab");
-    localRecord.setValue("ALL_COMMENTS", "commentsTab");
+
+    // Initilzie the comments tab to NONE for now, it will be initialized to an
+    // actual tab when we find out how many feature comments there are.
+    localRecord.setValue("NONE", "commentsTab");
   });
 }

src/core/client/stream/local/local.graphql

@@ -15,8 +15,13 @@ enum PROFILE_TAB {
 }
 
 enum COMMENTS_TAB {
-  ALL_COMMENTS
+  """
+  NONE is used before the active tab can be determined. The active tab is
+  determined after we count how many featured comments there are.
+  """
+  NONE
   FEATURED_COMMENTS
+  ALL_COMMENTS
 }
 
 enum COMMENT_VIEWER_ACTION {

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

@@ -1,5 +1,5 @@
 import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent, useCallback } from "react";
+import React, { FunctionComponent, useCallback, useEffect } from "react";
 import { graphql } from "react-relay";
 
 import { useLocal, withFragmentContainer } from "coral-framework/lib/relay";
@@ -75,6 +75,22 @@ export const StreamContainer: FunctionComponent<Props> = props => {
 
   const allCommentsCount = props.story.commentCounts.totalVisible;
   const featuredCommentsCount = props.story.commentCounts.tags.FEATURED;
+
+  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
+    // the featured comments tab first or not.
+    if (local.commentsTab === "NONE") {
+      // If the selected tab is FEATURED_COMMENTS, but there aren't any featured
+      // comments, then switch it to the all comments tab.
+      if (featuredCommentsCount === 0) {
+        setLocal({ commentsTab: "ALL_COMMENTS" });
+      } else {
+        setLocal({ commentsTab: "FEATURED_COMMENTS" });
+      }
+    }
+  }, [featuredCommentsCount, local.commentsTab, setLocal]);
+
   return (
     <>
       <StoryClosedTimeoutContainer story={props.story} />