scroll to top when adding comment (codesandbox#3829)

christianalfoni · web-flow · commit adbcc01753a4 · 2020-04-03T10:40:12.000+02:00
* scroll to top when adding comment

* add smooth scroll

* fix type check
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/AddComment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/AddComment.tsx
@@ -1,26 +1,28 @@
 import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
 import { Element, FormField, Textarea } from '@codesandbox/components';
 import { css } from '@styled-system/css';
-import { useOvermind } from 'app/overmind';
 import React, { useState } from 'react';
 
-export const AddComment: React.FC = () => {
+type Props = {
+  onSubmit: (value: string) => void;
+};
+
+export const AddComment: React.FC<Props> = ({ onSubmit }) => {
   const [value, setValue] = useState('');
-  const { actions } = useOvermind();
 
-  const onSubmit = e => {
-    e.preventDefault();
+  const submit = event => {
+    event.preventDefault();
     if (value) {
-      actions.comments.addComment({
-        content: value,
-      });
+      onSubmit(value);
       setValue('');
     }
   };
 
   // Form elements submit on Enter, except Textarea :)
   const submitOnEnter = event => {
-    if (event.keyCode === ENTER && !event.shiftKey) onSubmit(event);
+    if (event.keyCode === ENTER && !event.shiftKey) {
+      submit(event);
+    }
   };
 
   return (
@@ -34,7 +36,7 @@ export const AddComment: React.FC = () => {
         boxShadow: theme => `0px -32px 32px ${theme.colors.dialog.background}`,
       })}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={submit}>
         <FormField label="Add a comment" hideLabel>
           <Textarea
             autosize
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
@@ -10,6 +10,7 @@ import {
 import { css } from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
 import React from 'react';
+
 import { AddComment } from './AddComment';
 import { Comment } from './Comment';
 
@@ -24,6 +25,7 @@ export const Comments: React.FC = () => {
     },
     actions: { comments: commentsActions },
   } = useOvermind();
+  const scrollRef = React.useRef(null);
   const options = Object.values(CommentsFilterOption);
 
   const getSelectedFilter = () => {
@@ -37,6 +39,13 @@ export const Comments: React.FC = () => {
     }
   };
 
+  const onSubmit = value => {
+    commentsActions.addComment({
+      content: value,
+    });
+    scrollRef.current.scrollTop = 0;
+  };
+
   const Empty = () => (
     <Stack
       direction="vertical"
@@ -101,11 +110,13 @@ export const Comments: React.FC = () => {
 
         {currentComments.length ? (
           <List
+            ref={scrollRef}
             marginTop={4}
             css={{
               // stretch within container, leaving space for comment box
               height: 'calc(100% - 32px)',
               overflow: 'auto',
+              scrollBehavior: 'smooth',
             }}
           >
             {currentCommentsByDate.today.length ? (
@@ -132,7 +143,7 @@ export const Comments: React.FC = () => {
         ) : null}
       </div>
       {currentComments.length ? null : <Empty />}
-      <AddComment />
+      <AddComment onSubmit={onSubmit} />
     </Stack>
   );
 };
