fix comment viewer collapse bug

codefreak · Apr 26, 2021 · 27c9383 · 27c9383
1 parent 410b4b1
commit 27c9383
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/components/CommentViewer.tsx b/src/components/CommentViewer.tsx
@@ -30,16 +30,20 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({comments,
     const [activeKey, setActiveKey] = useState<string | string[]>("0")
     const [oldToggleState, setOldToggleState] = useState<boolean>(false)
 
+    const toggleCollapse = () => {
+        if(activeKey === "0") {
+            setActiveKey("1")
+        } else {
+            setActiveKey("0")
+        }
+    }
+
     useEffect(() => {
         if(toggle !== oldToggleState) {
-            if(activeKey === "0") {
-                setActiveKey("1")
-            } else {
-                setActiveKey("0")
-            }
+            toggleCollapse()
         }
         setOldToggleState(toggle)
-    }, [toggle, oldToggleState, activeKey])
+    }, [toggle, oldToggleState, activeKey, toggleCollapse])
 
     const getHeader = () => {
         if(result) {
@@ -53,10 +57,6 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({comments,
         }
     }
 
-    const handleKeyChange = (key: string | string[]) => {
-        setActiveKey(key)
-    }
-
     const getType = () => {
         if(!replyType) {
             let noComment = true;
@@ -92,7 +92,7 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({comments,
 
     return(
         <div className="commentViewer" data-testid="commentViewer">
-            <Collapse className="commentViewerCollapse" activeKey={activeKey} onChange={handleKeyChange}>
+            <Collapse className="commentViewerCollapse" activeKey={activeKey} onChange={() => toggleCollapse()}>
                 <Panel  key={1} header={getHeader()} className="customPanel" extra={getExtra()}>
                     {!result ? (
                         <>

diff --git a/src/stories/CodeReviewCard.stories.tsx b/src/stories/CodeReviewCard.stories.tsx
@@ -115,11 +115,11 @@ const customComment4: CustomComment = {
     content: `
     Expected: 10
     But was: 0
-    `.trim(),
+    `,
     type: "severeInfo"
 }
 
-let customCommentContainer = [ customComment2, customComment3, customComment4];
+let customCommentContainer = [customComment1, customComment2, customComment3, customComment4];
 
 const handleCommentCreatedJsx = (comment: CustomComment) => {
     jsx.args!.getCodeReviewProps!.commentContainer = [...jsx.args!.getCodeReviewProps!.commentContainer!, comment]