From c2af25442e3198a4e1806abc2ff9e6ff51e7ac34 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 30 Oct 2020 11:17:25 -0600
Subject: [PATCH] cases status useCallback

---
 .../cases/components/case_status/index.tsx    | 103 +++++++++---------
 .../cases/components/case_view/index.tsx      |   9 +-
 2 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/cases/components/case_status/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_status/index.tsx
index db008707280f0..2d3a7850eb0b6 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_status/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_status/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import {
   EuiBadge,
@@ -62,57 +62,62 @@ const CaseStatusComp: React.FC<CaseStatusProps> = ({
   title,
   toggleStatusCase,
   value,
-}) => (
-  <EuiFlexGroup gutterSize="l" justifyContent="flexEnd">
-    <EuiFlexItem grow={false}>
-      <MyDescriptionList compressed>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              <EuiBadge color={badgeColor} data-test-subj="case-view-status">
-                {status}
-              </EuiBadge>
-            </EuiDescriptionListDescription>
+}) => {
+  const handleToggleStatusCase = useCallback(() => {
+    toggleStatusCase(!isSelected);
+  }, [toggleStatusCase, isSelected]);
+  return (
+    <EuiFlexGroup gutterSize="l" justifyContent="flexEnd">
+      <EuiFlexItem grow={false}>
+        <MyDescriptionList compressed>
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiBadge color={badgeColor} data-test-subj="case-view-status">
+                  {status}
+                </EuiBadge>
+              </EuiDescriptionListDescription>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <FormattedRelativePreferenceDate data-test-subj={dataTestSubj} value={value} />
+              </EuiDescriptionListDescription>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </MyDescriptionList>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="l" alignItems="center">
+          <EuiFlexItem>
+            <EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
+              {i18n.CASE_REFRESH}
+            </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              <FormattedRelativePreferenceDate data-test-subj={dataTestSubj} value={value} />
-            </EuiDescriptionListDescription>
+            <EuiButton
+              data-test-subj="toggle-case-status"
+              isDisabled={disabled}
+              iconType={icon}
+              isLoading={isLoading}
+              fill={isSelected}
+              onClick={handleToggleStatusCase}
+            >
+              {buttonLabel}
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <CaseViewActions
+              caseData={caseData}
+              currentExternalIncident={currentExternalIncident}
+              disabled={disabled}
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
-      </MyDescriptionList>
-    </EuiFlexItem>
-    <EuiFlexItem grow={false}>
-      <EuiFlexGroup gutterSize="l" alignItems="center">
-        <EuiFlexItem>
-          <EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
-            {i18n.CASE_REFRESH}
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiButton
-            data-test-subj="toggle-case-status"
-            isDisabled={disabled}
-            iconType={icon}
-            isLoading={isLoading}
-            fill={isSelected}
-            onClick={() => toggleStatusCase(!isSelected)}
-          >
-            {buttonLabel}
-          </EuiButton>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <CaseViewActions
-            caseData={caseData}
-            currentExternalIncident={currentExternalIncident}
-            disabled={disabled}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
 
 export const CaseStatus = React.memo(CaseStatusComp);
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
index b81bba9e67e9a..7ee2b856f8786 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
@@ -307,6 +307,11 @@ export const CaseComponent = React.memo<CaseProps>(
       [allCasesLink]
     );
 
+    const isSelected = useMemo(() => caseStatusData.isSelected, [caseStatusData]);
+    const handleToggleStatusCase = useCallback(() => {
+      toggleStatusCase(!isSelected);
+    }, [toggleStatusCase, isSelected]);
+
     return (
       <>
         <HeaderWrapper>
@@ -330,7 +335,7 @@ export const CaseComponent = React.memo<CaseProps>(
               disabled={!userCanCrud}
               isLoading={isLoading && updateKey === 'status'}
               onRefresh={handleRefresh}
-              toggleStatusCase={() => toggleStatusCase(!caseStatusData.isSelected)}
+              toggleStatusCase={handleToggleStatusCase}
               {...caseStatusData}
             />
           </HeaderPage>
@@ -364,7 +369,7 @@ export const CaseComponent = React.memo<CaseProps>(
                           isDisabled={!userCanCrud}
                           isLoading={isLoading && updateKey === 'status'}
                           fill={caseStatusData.isSelected}
-                          onClick={() => toggleStatusCase(!caseStatusData.isSelected)}
+                          onClick={handleToggleStatusCase}
                         >
                           {caseStatusData.buttonLabel}
                         </EuiButton>