diff --git a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap index a6b74f98a..b59accafe 100644 --- a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap +++ b/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\\", diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts index befda585d..0d1906156 100644 --- a/src/core/client/stream/local/initLocalState.ts +++ b/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"); }); } diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql index 469bef4d1..fa3c4e873 100644 --- a/src/core/client/stream/local/local.graphql +++ b/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 { diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx index a2fcd0f9e..12f6c43e6 100644 --- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx +++ b/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 => { 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 ( <>