remove onSubmit from CodeLine.tsx

codefreak · May 18, 2021 · d07b86a · d07b86a
1 parent abc95a0
commit d07b86a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 67 deletions.
diff --git a/src/components/CodeLine.tsx b/src/components/CodeLine.tsx
@@ -1,4 +1,4 @@
-import React, {CSSProperties, useEffect, useState} from 'react'
+import React, { CSSProperties, useEffect, useState } from 'react'
 import { Line, LineContent, LineNo } from './styles'
 import { Button } from 'antd'
 import {
@@ -21,17 +21,28 @@ import ReplyEditor from './ReplyEditor'
 import BorderWrapper from './BorderWrapper'
 
 const annotationStyle: CSSProperties = {
-  paddingLeft: "0.15em"
+  paddingLeft: '0.15em'
+}
+
+const newCommentStyle: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  paddingTop: '0.5em',
+  paddingBottom: '0.5em',
+  border: '1px solid #d9d9d9',
+  borderRadius: '0 2px 15px 0',
+  paddingLeft: '1.1em',
+  paddingRight: '0.5em',
+  marginLeft: 0
 }
 
 export interface CodeLineProps {
   line: Token[]
   lineNo: number
   getLineProps: (input: LineInputProps) => LineOutputProps
   getTokenProps: (input: TokenInputProps) => TokenOutputProps
-  onSubmit: (value: string) => void
   comments: CustomComment[]
-  onReplyCreated: (value: string) => void
+  onCommentCreated: (value: string) => void
   onCommentEdited: (
     oldComment: CustomComment,
     newComment: CustomComment
@@ -49,9 +60,8 @@ export const CodeLine: React.FC<CodeLineProps> = ({
   lineNo,
   getLineProps,
   getTokenProps,
-  onSubmit,
   comments,
-  onReplyCreated,
+  onCommentCreated,
   showComments,
   active,
   onToggle,
@@ -60,14 +70,11 @@ export const CodeLine: React.FC<CodeLineProps> = ({
   onCommentDeleted,
   role
 }) => {
-  // isAddButtonShown manages visibility of addButton
   const [isAddButtonShown, setIsAddButtonShown] = useState(false)
   const lineNoRef = React.createRef<HTMLSpanElement>()
   const [isEditorShown, setIsEditorShown] = useState(false)
   const [commentThread, setCommentThread] = useState<boolean>()
-  const [mildInfo, setMildInfo] = useState<boolean>(
-    comments.map(element => element.type).includes('mildInfo')
-  )
+  const [mildInfo, setMildInfo] = useState<boolean>()
 
   // check what kind of comments are present to manage annotations
   useEffect(() => {
@@ -86,7 +93,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({
 
   // prevent awkward border placements when showComments gets toggled
   useEffect(() => {
-    if(!showComments) {
+    if (!showComments) {
       handleMouseLeave()
     }
   }, [showComments])
@@ -102,18 +109,17 @@ export const CodeLine: React.FC<CodeLineProps> = ({
     if (commentThread && mildInfo) {
       return 0.2
     }
-
     return 2.8
   }
 
   // show addButton and adjust padding accordingly
   const handleMouseEnter = () => {
     if (
-        !commentThread &&
-        !mildInfo &&
-        lineNoRef.current &&
-        showComments &&
-        !isEditorShown
+      !commentThread &&
+      !mildInfo &&
+      lineNoRef.current &&
+      showComments &&
+      !isEditorShown
     ) {
       lineNoRef.current.style.paddingLeft =
         getPaddingLeft() - 1.3 + getPaddingLeftOffset() + 'em'
@@ -159,8 +165,8 @@ export const CodeLine: React.FC<CodeLineProps> = ({
 
   return (
     <div
-        onMouseEnter={() => handleMouseEnter()}
-         onMouseLeave={() => handleMouseLeave()}
+      onMouseEnter={() => handleMouseEnter()}
+      onMouseLeave={() => handleMouseLeave()}
     >
       <Line
         key={lineNo}
@@ -172,40 +178,39 @@ export const CodeLine: React.FC<CodeLineProps> = ({
             display: 'table-row'
           }}
         >
-            {isAddButtonShown && showComments && (
-                <>
-                  <Button
-                      icon={<PlusOutlined style={{ paddingLeft: '0.1em' }} />}
-                      size="small"
-                      onClick={() => {
-                        setIsEditorShown(true)
-                        setIsAddButtonShown(false)
-                        handleMouseLeave()
-                      }}
-                      style={{ width: '1.5em', height: '1.5em' }}
-                      data-testid="addButton"
-                  />
-                </>
-            )}
+          {isAddButtonShown && showComments && (
+            <>
+              <Button
+                icon={<PlusOutlined style={{ paddingLeft: '0.1em' }} />}
+                size="small"
+                onClick={() => {
+                  setIsEditorShown(true)
+                  setIsAddButtonShown(false)
+                  handleMouseLeave()
+                }}
+                style={{ width: '1.5em', height: '1.5em' }}
+                data-testid="addButton"
+              />
+            </>
+          )}
 
           <div style={annotationStyle}>
             {mildInfo && showComments && (
-                <InfoCircleTwoTone
-                    style={{ paddingLeft: '0.15em', paddingRight: '0.15em' }}
-                    twoToneColor="#FAC302"
-                    onClick={() => onToggle()}
-                />
+              <InfoCircleTwoTone
+                style={{ paddingLeft: '0.15em', paddingRight: '0.15em' }}
+                twoToneColor="#FAC302"
+                onClick={() => onToggle()}
+              />
             )}
 
             {commentThread && showComments && (
-                <MessageTwoTone
-                    style={{ paddingLeft: '0.15em', paddingRight: '0.15em' }}
-                    onClick={() => onToggle()}
-                />
+              <MessageTwoTone
+                style={{ paddingLeft: '0.15em', paddingRight: '0.15em' }}
+                onClick={() => onToggle()}
+              />
             )}
           </div>
 
-
           <LineNo
             style={{
               paddingLeft: getPaddingLeft() + getPaddingLeftOffset() + 'em'
@@ -227,7 +232,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({
         <div data-testid={'commentViewer' + lineNo}>
           <CommentViewer
             comments={comments}
-            onReplyCreated={onReplyCreated}
+            onReplyCreated={onCommentCreated}
             placeholder={getPlaceholder()}
             active={active}
             onToggle={() => onToggle()}
@@ -249,24 +254,12 @@ export const CodeLine: React.FC<CodeLineProps> = ({
           }}
         >
           <BorderWrapper heightTop={0.5} heightBottom={2}>
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                paddingTop: '0.5em',
-                paddingBottom: '0.5em',
-                border: '1px solid #d9d9d9',
-                borderRadius: '0 2px 15px 0',
-                paddingLeft: '1.1em',
-                paddingRight: '0.5em',
-                marginLeft: 0
-              }}
-            >
+            <div style={newCommentStyle}>
               <ReplyEditor
                 onCancel={() => setIsEditorShown(false)}
                 line={lineNo}
                 onSubmit={value => {
-                  onSubmit(value)
+                  onCommentCreated(value)
                   setIsEditorShown(false)
                 }}
                 placeholder={getPlaceholder()}

diff --git a/src/components/CodeReview.tsx b/src/components/CodeReview.tsx
@@ -157,7 +157,6 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
 
   const createComment = (content: string, author: string, line?: number) => {
     let newComment: CustomComment
-
     if (line !== undefined) {
       // standard comment
       newComment = {
@@ -241,11 +240,8 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
                   line={line}
                   getLineProps={getLineProps}
                   getTokenProps={getTokenProps}
-                  onSubmit={value => {
-                    onCommentCreated(createComment(value, user, i))
-                  }}
                   comments={getCommentsOfLine(i)}
-                  onReplyCreated={value =>
+                  onCommentCreated={value =>
                     onCommentCreated(createComment(value, user, i))
                   }
                   onCommentEdited={onCommentEdited}

diff --git a/src/components/ShortcutMenu.tsx b/src/components/ShortcutMenu.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, useState } from 'react'
+import React, { CSSProperties } from 'react'
 import { Button, Dropdown, Menu, Tooltip } from 'antd'
 import { SettingOutlined } from '@ant-design/icons'
 
@@ -20,13 +20,14 @@ interface ShortcutMenuProps {
   onExpandClick: () => void
   onCollapseClick: () => void
   onShowClick: () => void
-    isShown: boolean
+  isShown: boolean
 }
 
 const ShortcutMenu: React.FC<ShortcutMenuProps> = ({
   onExpandClick,
   onShowClick,
-  onCollapseClick, isShown
+  onCollapseClick,
+  isShown
 }) => {
   return (
     <div