[CORL-421, CORL-415] Live Comments on Stream (#2379)

* feat: support comment replies

* feat: comment created

* feat: live update top level comments

* feat: live updates on the stream embed

* fix: tests

* chore: refactor FadeInTransition

* fix: add missing translation and a live update bug

* fix: graqphql

* feat: improve loading experiene :-)

* fix: live comment bugs

* chore: adapt translation

* feat: stop live updates when story is closed or commenting is disabled

* test: add tests for stream live updates

* fix: remove forgotten piece of code

* fix: tests

src/core/client/framework/components/FadeInTransition.css

@@ -0,0 +1,8 @@
+.appear {
+  opacity: 0;
+  pointer-events: none;
+}
+.appearActive {
+  opacity: 1;
+  transition: opacity 400ms;
+}

src/core/client/framework/components/FadeInTransition.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from "react";
+import { CSSTransition } from "react-transition-group";
+
+import styles from "./FadeInTransition.css";
+
+interface Props {
+  active: boolean;
+  children: React.ReactNode;
+}
+
+const FadeInTransition: FunctionComponent<Props> = ({ children, active }) => {
+  if (!active) {
+    return <>{children}</>;
+  }
+  return (
+    <CSSTransition
+      in
+      appear
+      enter={false}
+      exit={false}
+      classNames={{
+        appear: styles.appear,
+        appearActive: styles.appearActive,
+      }}
+      timeout={600}
+    >
+      <div>{children}</div>
+    </CSSTransition>
+  );
+};
+export default FadeInTransition;

src/core/client/framework/components/index.ts

@@ -4,4 +4,5 @@ export { default as FacebookButton } from "./FacebookButton";
 export { default as GoogleButton } from "./GoogleButton";
 export { default as OIDCButton } from "./OIDCButton";
 export { default as Markdown } from "./Markdown";
+export { default as FadeInTransition } from "./FadeInTransition";
 export { default as DurationField, DURATION_UNIT } from "./DurationField";

src/core/client/framework/testHelpers/denormalize.ts

@@ -32,8 +32,10 @@ export function denormalizeComment(
   return createFixture<GQLComment>({
     ...comment,
     replies: { edges: replyEdges, pageInfo: repliesPageInfo },
-    replyCount: replyEdges.length,
+    replyCount:
+      comment.replyCount !== undefined ? comment.replyCount : replyEdges.length,
     parentCount: parents.length,
+    parent: parents.length > 0 ? parents[parents.length - 1].node : undefined,
     parents: {
       edges: parents,
       pageInfo: { startCursor: null, hasPreviousPage: false },
@@ -55,9 +57,15 @@ export function denormalizeStory(story: Fixture<GQLStory>) {
       }))) ||
     [];
   const commentsPageInfo = (story.comments && story.comments.pageInfo) || {
-    endCursor: null,
     hasNextPage: false,
   };
+  if (commentsPageInfo.endCursor === undefined) {
+    commentsPageInfo.endCursor =
+      commentNodes.length > 0
+        ? commentNodes[commentNodes.length - 1].node.createdAt
+        : null;
+  }
+
   const featuredCommentsCount = commentNodes.filter(
     n => n.tags && n.tags.some((t: GQLTag) => t.code === GQLTAG.FEATURED)
   ).length;