add callback function

hubmapconsortium · Feb 5, 2025 · 35fe314 · 35fe314
1 parent 7e493e0
commit 35fe314
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/...t/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDataset.tsx b/...t/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDataset.tsx
@@ -8,6 +8,7 @@ import CloudDownloadRounded from '@mui/icons-material/CloudDownloadRounded';
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
+import { useEventCallback } from '@mui/material/utils';
 
 import { InternalLink } from 'js/shared-styles/Links';
 import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
@@ -98,22 +99,27 @@ function FilesAccordion() {
   const [openTabIndex, setOpenTabIndex] = useState(0);
   const track = useTrackEntityPageEvent();
 
+  const handleTrack = useEventCallback(() => {
+    track({
+      action: 'Navigate to Bulk Download',
+      label: hubmap_id,
+    });
+  });
+
   if (!files || files.length === 0) {
     return (
       <Subsection title="Files" icon={<InsertDriveFileRounded />}>
         <SectionDescription subsection>
-          Files are available via <InternalLink href="#bulk-data-transfer">bulk data transfer.</InternalLink>
+          Files are available via{' '}
+          <InternalLink onClick={handleTrack} href="#bulk-data-transfer">
+            bulk data transfer.
+          </InternalLink>
         </SectionDescription>
         <Button
           startIcon={<CloudDownloadRounded />}
           variant="contained"
           href="#bulk-data-transfer"
-          onClick={() => {
-            track({
-              action: 'Navigate to Bulk Download',
-              label: hubmap_id,
-            });
-          }}
+          onClick={handleTrack}
         >
           Scroll to Bulk Data Transfer
         </Button>