[CORL-623] add live updates for comments moving from premod to approved (#2571)

* add live updates for comments moving from premod to approved

* rename disposables

* check if comment is system withheld as well as premod to publish event

src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx

@@ -25,6 +25,7 @@ import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContain
 import { ReplyListContainer } from "../../ReplyList";
 import AllCommentsTabViewNewMutation from "./AllCommentsTabViewNewMutation";
 import CommentCreatedSubscription from "./CommentCreatedSubscription";
+import CommentReleasedSubscription from "./CommentReleasedSubscription";
 
 import styles from "./AllCommentsTabContainer.css";
 
@@ -54,6 +55,9 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
     `
   );
   const subscribeToCommentCreated = useSubscription(CommentCreatedSubscription);
+  const subscribeToCommentReleased = useSubscription(
+    CommentReleasedSubscription
+  );
   useEffect(() => {
     if (!props.story.settings.live.enabled) {
       return;
@@ -78,16 +82,22 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
       // Only chronological sort supports top level live updates of incoming comments.
       return;
     }
-    const disposable = subscribeToCommentCreated({
+    const newCommentDisposable = subscribeToCommentCreated({
+      storyID: props.story.id,
+      orderBy: commentsOrderBy,
+    });
+    const releasedCommentDisposable = subscribeToCommentReleased({
       storyID: props.story.id,
       orderBy: commentsOrderBy,
     });
     return () => {
-      disposable.dispose();
+      newCommentDisposable.dispose();
+      releasedCommentDisposable.dispose();
     };
   }, [
     commentsOrderBy,
     subscribeToCommentCreated,
+    subscribeToCommentReleased,
     props.story.id,
     props.relay.hasMore(),
     props.story.settings.live.enabled,

src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/CommentReleasedSubscription.tsx

@@ -0,0 +1,91 @@
+import { graphql, requestSubscription } from "react-relay";
+import {
+  ConnectionHandler,
+  Environment,
+  RecordProxy,
+  RecordSourceSelectorProxy,
+} from "relay-runtime";
+
+import {
+  createSubscription,
+  SubscriptionVariables,
+} from "coral-framework/lib/relay";
+import { GQLCOMMENT_SORT, GQLCOMMENT_SORT_RL } from "coral-framework/schema";
+import { CommentReleasedSubscription } from "coral-stream/__generated__/CommentReleasedSubscription.graphql";
+
+function updateForNewestFirst(
+  store: RecordSourceSelectorProxy,
+  storyID: string
+) {
+  const rootField = store.getRootField("commentReleased");
+  if (!rootField) {
+    return;
+  }
+  const comment = rootField.getLinkedRecord("comment")!;
+  comment.setValue(true, "enteredLive");
+  const commentsEdge = store.create(
+    `edge-${comment.getValue("id")!}`,
+    "CommentsEdge"
+  );
+  commentsEdge.setValue(comment.getValue("createdAt"), "cursor");
+  commentsEdge.setLinkedRecord(comment, "node");
+  const story = store.get(storyID)!;
+  const connection = ConnectionHandler.getConnection(story, "Stream_comments", {
+    orderBy: GQLCOMMENT_SORT.CREATED_AT_DESC,
+  })!;
+  const linked = connection.getLinkedRecords("viewNewEdges") || [];
+  connection.setLinkedRecords(linked.concat(commentsEdge), "viewNewEdges");
+}
+
+function updateForOldestFirst(
+  store: RecordSourceSelectorProxy,
+  storyID: string
+) {
+  const story = store.get(storyID)!;
+  const connection = ConnectionHandler.getConnection(story, "Stream_comments", {
+    orderBy: GQLCOMMENT_SORT.CREATED_AT_ASC,
+  })!;
+  const pageInfo = connection.getLinkedRecord("pageInfo") as RecordProxy;
+  pageInfo.setValue(true, "hasNextPage");
+}
+
+const CommentReleasedSubscription = createSubscription(
+  "subscribeToCommentReleased",
+  (
+    environment: Environment,
+    variables: SubscriptionVariables<CommentReleasedSubscription> & {
+      orderBy: GQLCOMMENT_SORT_RL;
+    }
+  ) =>
+    requestSubscription(environment, {
+      subscription: graphql`
+        subscription CommentReleasedSubscription($storyID: ID!) {
+          commentReleased(storyID: $storyID) {
+            comment {
+              id
+              createdAt
+              ...AllCommentsTabContainer_comment
+            }
+          }
+        }
+      `,
+      variables,
+      updater: store => {
+        if (variables.orderBy === GQLCOMMENT_SORT.CREATED_AT_DESC) {
+          updateForNewestFirst(store, variables.storyID);
+          return;
+        }
+        if (variables.orderBy === GQLCOMMENT_SORT.CREATED_AT_ASC) {
+          updateForOldestFirst(store, variables.storyID);
+          return;
+        }
+        throw new Error(
+          `Unsupport new top level comment live updates for sort ${
+            variables.orderBy
+          }`
+        );
+      },
+    })
+);
+
+export default CommentReleasedSubscription;