From 27c938384ab8c988ee2a1be87b79609f0eb86fcc Mon Sep 17 00:00:00 2001
From: Glen Wider <skyhigh4@web.de>
Date: Mon, 26 Apr 2021 18:47:53 +0200
Subject: [PATCH] fix comment viewer collapse bug

---
 src/components/CommentViewer.tsx       | 22 +++++++++++-----------
 src/stories/CodeReviewCard.stories.tsx |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/CommentViewer.tsx b/src/components/CommentViewer.tsx
index daa6665..4d5dc97 100644
--- 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
index 5ccb7b8..bfcf3ce 100644
--- 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]