[CORL-758] Show new comments in stream when sorting by oldest (#2740)

* Handle comment insertion in stream when sort by oldest

Push the comment to the end of current cursored
comment stream so it shows up.

CORL-758

* Make commenstOrderBy a client only mutation parameter

CORL-758

* fix: addressed linting issue

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/CreateCommentMutation.ts

@@ -19,6 +19,7 @@ import { GQLStory, GQLUSER_ROLE } from "coral-framework/schema";
 import { CreateCommentEvent } from "coral-stream/events";
 
 import { CreateCommentMutation as MutationTypes } from "coral-stream/__generated__/CreateCommentMutation.graphql";
+import { COMMENT_SORT } from "coral-stream/__generated__/StreamContainerLocal.graphql";
 
 import {
   incrementStoryCommentCounts,
@@ -26,7 +27,9 @@ import {
   prependCommentEdgeToProfile,
 } from "../../helpers";
 
-export type CreateCommentInput = MutationInput<MutationTypes>;
+export type CreateCommentInput = MutationInput<MutationTypes> & {
+  commentsOrderBy?: COMMENT_SORT;
+};
 
 function sharedUpdater(
   environment: Environment,
@@ -48,6 +51,24 @@ function sharedUpdater(
   addCommentToStory(store, input, commentEdge);
 }
 
+function getConnection(
+  streamProxy: RecordProxy | null,
+  connectionKey: string,
+  filters: any
+) {
+  if (!streamProxy) {
+    return null;
+  }
+
+  const con = ConnectionHandler.getConnection(
+    streamProxy,
+    connectionKey,
+    filters
+  );
+
+  return con;
+}
+
 /**
  * update integrates new comment into the CommentConnection.
  */
@@ -59,14 +80,18 @@ function addCommentToStory(
   // Get stream proxy.
   const streamProxy = store.get(input.storyID);
   const connectionKey = "Stream_comments";
-  const filters = { orderBy: "CREATED_AT_DESC" };
 
-  if (streamProxy) {
-    const con = ConnectionHandler.getConnection(
-      streamProxy,
-      connectionKey,
-      filters
-    );
+  if (input.commentsOrderBy === "CREATED_AT_ASC") {
+    const con = getConnection(streamProxy, connectionKey, {
+      orderBy: "CREATED_AT_ASC",
+    });
+    if (con) {
+      ConnectionHandler.insertEdgeAfter(con, commentEdge);
+    }
+  } else {
+    const con = getConnection(streamProxy, connectionKey, {
+      orderBy: "CREATED_AT_DESC",
+    });
     if (con) {
       ConnectionHandler.insertEdgeBefore(con, commentEdge);
     }

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

@@ -131,6 +131,7 @@ it("creates a comment", async () => {
       id: storyID,
       isClosed: false,
     },
+    commentsOrderBy: "CREATED_AT_ASC",
   });
 
   await act(async () => {
@@ -156,6 +157,7 @@ it("creates a comment", async () => {
         createCommentStub.calledWith({
           storyID,
           nudge: true,
+          commentsOrderBy: "CREATED_AT_ASC",
           ...input,
         })
       ).toBeTruthy()

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

@@ -23,7 +23,10 @@ import {
 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 {
+  COMMENT_SORT,
+  COMMENTS_TAB,
+} from "coral-stream/__generated__/StreamContainerLocal.graphql";
 
 import {
   getSubmitStatus,
@@ -50,6 +53,7 @@ interface Props {
   showAuthPopup: ShowAuthPopupMutation;
   tab: COMMENTS_TAB;
   onChangeTab: (tab: COMMENTS_TAB) => void;
+  commentsOrderBy?: COMMENT_SORT;
 }
 
 interface State {
@@ -125,6 +129,7 @@ export class PostCommentFormContainer extends Component<Props, State> {
         await this.props.createComment({
           storyID: this.props.story.id,
           nudge: this.state.nudge,
+          commentsOrderBy: this.props.commentsOrderBy,
           ...input,
         })
       );

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

@@ -163,6 +163,7 @@ export const StreamContainer: FunctionComponent<Props> = props => {
             viewer={props.viewer}
             tab={local.commentsTab}
             onChangeTab={onChangeTab}
+            commentsOrderBy={local.commentsOrderBy}
           />
         )}
         {banned && <BannedInfo />}