From 763802f6b502eda4aaafaf3041fa7a89c7252b1b Mon Sep 17 00:00:00 2001
From: Evan Purkhiser <evanpurkhiser@gmail.com>
Date: Wed, 6 Jul 2022 17:50:53 -0700
Subject: [PATCH] style(js): Small code style cleanup in stacktracePreview
 (#36388)

Co-authored-by: Alberto Leal <mail4alberto@gmail.com>
---
 static/app/components/stacktracePreview.tsx | 34 ++++++++++-----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/static/app/components/stacktracePreview.tsx b/static/app/components/stacktracePreview.tsx
index 03952cdb15e7d5..5f7eaddeb6ddff 100644
--- a/static/app/components/stacktracePreview.tsx
+++ b/static/app/components/stacktracePreview.tsx
@@ -20,7 +20,7 @@ import findBestThread from './events/interfaces/threads/threadSelector/findBestT
 import getThreadStacktrace from './events/interfaces/threads/threadSelector/getThreadStacktrace';
 
 const REQUEST_DELAY = 100;
-const HOVERCARD_DELAY = 400;
+const HOVERCARD_CONTENT_DELAY = 400;
 
 export const STACKTRACE_PREVIEW_TOOLTIP_DELAY = 1000;
 
@@ -137,9 +137,10 @@ function StackTracePreview(props: StackTracePreviewProps): React.ReactElement {
       return;
     }
 
-    loaderTimeoutRef.current = window.setTimeout(() => {
-      setLoadingVisible(true);
-    }, HOVERCARD_DELAY);
+    loaderTimeoutRef.current = window.setTimeout(
+      () => setLoadingVisible(true),
+      HOVERCARD_CONTENT_DELAY
+    );
 
     try {
       const evt = await api.requestPromise(
@@ -176,18 +177,15 @@ function StackTracePreview(props: StackTracePreviewProps): React.ReactElement {
     delayTimeoutRef.current = undefined;
   }, []);
 
-  // Not sure why we need to stop propagation, maybe to to prevent the hovercard from closing?
-  // If we are doing this often, maybe it should be part of the hovercard component.
-  const handleStackTracePreviewClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-  }, []);
+  // Not sure why we need to stop propagation, maybe to prevent the
+  // hovercard from closing? If we are doing this often, maybe it should be
+  // part of the hovercard component.
+  const handleStackTracePreviewClick = useCallback(
+    (e: React.MouseEvent) => void e.stopPropagation(),
+    []
+  );
 
-  const stacktrace = useMemo(() => {
-    if (event) {
-      return getStacktrace(event);
-    }
-    return null;
-  }, [event]);
+  const stacktrace = useMemo(() => (event ? getStacktrace(event) : null), [event]);
 
   return (
     <span
@@ -195,7 +193,7 @@ function StackTracePreview(props: StackTracePreviewProps): React.ReactElement {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <StyledHovercard
+      <StacktraceHovercard
         body={
           status === 'loading' && !loadingVisible ? null : status === 'loading' ? (
             <NoStackTraceWrapper onClick={handleStackTracePreviewClick}>
@@ -233,14 +231,14 @@ function StackTracePreview(props: StackTracePreviewProps): React.ReactElement {
         tipColor="background"
       >
         {props.children}
-      </StyledHovercard>
+      </StacktraceHovercard>
     </span>
   );
 }
 
 export {StackTracePreview};
 
-const StyledHovercard = styled(Hovercard)<{state: 'loading' | 'empty' | 'done'}>`
+const StacktraceHovercard = styled(Hovercard)<{state: 'loading' | 'empty' | 'done'}>`
   /* Lower z-index to match the modals (10000 vs 10002) to allow stackTraceLinkModal be on top of stack trace preview. */
   z-index: ${p => p.theme.zIndex.modal};
   width: ${p => {