Comments: scroll to latest reply + ESCAPE to close (codesandbox#3867)

* scroll to latest reply + ESCAPE to close

* remove duplicate escape

* use ESC instead of ESCAPE

* i'm a genius

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -1,5 +1,6 @@
-import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
+import { ENTER, ESC } from '@codesandbox/common/lib/utils/keycodes';
 import { hasPermission } from '@codesandbox/common/lib/utils/permission';
+
 import {
   Avatar,
   Element,
@@ -33,7 +34,7 @@ export const CommentDialog = props =>
   ReactDOM.createPortal(<Dialog {...props} />, document.body);
 
 export const Dialog: React.FC = () => {
-  const { state } = useOvermind();
+  const { state, actions } = useOvermind();
   const controller = useAnimation();
 
   const comment = state.comments.currentComment;
@@ -96,6 +97,17 @@ export const Dialog: React.FC = () => {
     setDragging(false);
   };
 
+  React.useEffect(() => {
+    const listener = event => {
+      if (event.which === ESC) {
+        actions.comments.closeComment();
+      }
+    };
+
+    document.addEventListener('keydown', listener);
+    return () => document.removeEventListener('keydown', listener);
+  }, [actions.comments]);
+
   if (!currentCommentPositions) {
     return null;
   }
@@ -152,9 +164,11 @@ export const Dialog: React.FC = () => {
                 />
 
                 <Replies
+                  key={comment.id}
                   replies={replies}
                   replyCount={comment.replyCount}
                   repliesRenderedCallback={() => setRepliesRendered(true)}
+                  listRef={listRef}
                 />
               </Element>
               <AddReply
@@ -279,6 +293,7 @@ const DialogHeader = ({ comment, hasShadow }) => {
   } = useOvermind();
 
   const closeDialog = () => comments.closeComment();
+
   const canResolve =
     hasPermission(editor.currentSandbox.authorization, 'write_project') ||
     comment.user.id === user.id;
@@ -412,7 +427,7 @@ const CommentBody = ({ comment, editing, setEditing, hasReplies }) => {
   );
 };
 
-const Replies = ({ replies, replyCount, repliesRenderedCallback }) => {
+const Replies = ({ replies, replyCount, listRef, repliesRenderedCallback }) => {
   /**
    * Loading animations:
    * 0. Wait for the dialog to have animated in view and scaled up.
@@ -424,20 +439,23 @@ const Replies = ({ replies, replyCount, repliesRenderedCallback }) => {
    *
    */
 
-  const skeletonController = useAnimation();
-  const repliesController = useAnimation();
-
-  /** Wait another <delay>ms after the dialog has transitioned into view */
-  const delay = DIALOG_TRANSITION_DURATION + REPLY_TRANSITION_DELAY;
-  const REPLY_TRANSITION_DURATION = Math.max(replyCount * 0.15, 0.5);
-  const SKELETON_FADE_DURATION = 0.25;
-  const SKELETON_HEIGHT = 146;
-  const repliesLoaded = replies.length === replyCount;
   // initial status of replies -
   // this is false when it's the first time this specific comment is opened
   // after that it will be true because we cache replies in state
+  const repliesLoaded = replies.length === replyCount;
   const repliesAlreadyLoadedOnFirstRender = React.useRef(repliesLoaded);
 
+  /** CONSTANTS:
+   * Wait another <delay> after the dialog has transitioned into view
+   * These are in s not ms
+   */
+  const delay = DIALOG_TRANSITION_DURATION + REPLY_TRANSITION_DELAY;
+  const SKELETON_FADE_DURATION = 0.25;
+  const SKELETON_HEIGHT = 146;
+  const REPLY_TRANSITION_DURATION = repliesLoaded
+    ? 0
+    : Math.max(replyCount * 0.15, 0.5);
+
   // current status of replies-
   /** Welcome to the imperative world of timeline animations
    *
@@ -455,6 +473,8 @@ const Replies = ({ replies, replyCount, repliesRenderedCallback }) => {
    */
 
   const [T, setStepInTimeline] = React.useState(-1);
+  const skeletonController = useAnimation();
+  const repliesController = useAnimation();
 
   /*
    * T = 0 (DOM has rendered, animations can be started)
@@ -541,6 +561,22 @@ const Replies = ({ replies, replyCount, repliesRenderedCallback }) => {
     repliesController,
   ]);
 
+  React.useEffect(() => {
+    // when the animations are done, scroll to last reply
+    let timeout;
+
+    if (T === 2) {
+      timeout = window.setTimeout(() => {
+        listRef.current.scrollTo({
+          top: listRef.current.scrollHeight,
+          behavior: 'smooth',
+        });
+      }, REPLY_TRANSITION_DURATION * 1000);
+    }
+
+    return () => window.clearTimeout(timeout);
+  }, [T, listRef, REPLY_TRANSITION_DURATION]);
+
   return (
     <>
       <motion.div