feat: switch to comments tab if on featured (#2437)

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.spec.tsx

@@ -22,6 +22,8 @@ function createDefaultProps(add: DeepPartial<Props> = {}): Props {
       showAuthPopup: noop as any,
       createComment: noop as any,
       refreshSettings: noop as any,
+      tab: "",
+      onChangeTab: noop as any,
       story: {
         id: "story-id",
         isClosed: false,

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.tsx

@@ -17,6 +17,7 @@ import { PropTypesOf } from "coral-framework/types";
 import { PostCommentFormContainer_settings } from "coral-stream/__generated__/PostCommentFormContainer_settings.graphql";
 import { PostCommentFormContainer_story } from "coral-stream/__generated__/PostCommentFormContainer_story.graphql";
 import { PostCommentFormContainer_viewer } from "coral-stream/__generated__/PostCommentFormContainer_viewer.graphql";
+import { COMMENTS_TAB } from "coral-stream/__generated__/StreamContainerLocal.graphql";
 import {
   ShowAuthPopupMutation,
   withShowAuthPopupMutation,
@@ -45,6 +46,8 @@ interface Props {
   viewer: PostCommentFormContainer_viewer | null;
   story: PostCommentFormContainer_story;
   showAuthPopup: ShowAuthPopupMutation;
+  tab: COMMENTS_TAB;
+  onChangeTab: (tab: COMMENTS_TAB) => void;
 }
 
 interface State {
@@ -112,6 +115,10 @@ export class PostCommentFormContainer extends Component<Props, State> {
     typeof PostCommentForm
   >["onSubmit"] = async (input, form) => {
     try {
+      if (this.props.tab === "FEATURED_COMMENTS") {
+        await this.props.onChangeTab("ALL_COMMENTS");
+      }
+
       const submitStatus = getSubmitStatus(
         await this.props.createComment({
           storyID: this.props.story.id,

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

@@ -7,7 +7,10 @@ import { GQLUSER_STATUS } from "coral-framework/schema";
 import { StreamContainer_settings as SettingsData } from "coral-stream/__generated__/StreamContainer_settings.graphql";
 import { StreamContainer_story as StoryData } from "coral-stream/__generated__/StreamContainer_story.graphql";
 import { StreamContainer_viewer as ViewerData } from "coral-stream/__generated__/StreamContainer_viewer.graphql";
-import { StreamContainerLocal } from "coral-stream/__generated__/StreamContainerLocal.graphql";
+import {
+  COMMENTS_TAB,
+  StreamContainerLocal,
+} from "coral-stream/__generated__/StreamContainerLocal.graphql";
 import { UserBoxContainer } from "coral-stream/common/UserBox";
 import {
   Counter,
@@ -66,7 +69,7 @@ export const StreamContainer: FunctionComponent<Props> = props => {
     [setLocal]
   );
   const onChangeTab = useCallback(
-    (tab: any) => setLocal({ commentsTab: tab }),
+    (tab: COMMENTS_TAB) => setLocal({ commentsTab: tab }),
     [setLocal]
   );
   const banned = Boolean(
@@ -84,12 +87,12 @@ export const StreamContainer: FunctionComponent<Props> = props => {
       // 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" });
+        onChangeTab("ALL_COMMENTS");
       } else {
-        setLocal({ commentsTab: "FEATURED_COMMENTS" });
+        onChangeTab("FEATURED_COMMENTS");
       }
     }
-  }, [featuredCommentsCount, local.commentsTab, setLocal]);
+  }, [featuredCommentsCount, local.commentsTab, onChangeTab]);
 
   return (
     <>
@@ -102,6 +105,8 @@ export const StreamContainer: FunctionComponent<Props> = props => {
             settings={props.settings}
             story={props.story}
             viewer={props.viewer}
+            tab={local.commentsTab}
+            onChangeTab={onChangeTab}
           />
         )}
         {banned && <BannedInfo />}