move dispatch calls outside of IncidentRow render

PagerDuty · Jun 30, 2023 · e779b91 · e779b91
1 parent 5fda725
commit e779b91
Showing 1 changed file with 40 additions and 43 deletions.
diff --git a/src/components/IncidentTable/IncidentTableComponent.js b/src/components/IncidentTable/IncidentTableComponent.js
@@ -39,7 +39,7 @@ import {
 } from 'react-contextmenu';
 
 import {
-  InView,
+  useInView,
 } from 'react-intersection-observer';
 
 import {
@@ -59,7 +59,6 @@ import EmptyIncidentsComponent from './subcomponents/EmptyIncidentsComponent';
 import QueryActiveComponent from './subcomponents/QueryActiveComponent';
 import GetAllModal from './subcomponents/GetAllModal';
 import GetAllForSortModal from './subcomponents/GetAllForSortModal';
-// import IncidentTableRow from './subcomponents/IncidentTableRow';
 
 import './IncidentTableComponent.scss';
 
@@ -92,9 +91,6 @@ const Delayed = ({
   return isShown ? children : null;
 };
 
-// TODO: Make CSV Export work properly
-// (fetch all the notes and alerts for the selected incidents,
-//   warn the user if that will take a long time)
 const doCsvExport = (tableData) => {
   // Create headers from table columns
   const headers = tableData.columns
@@ -314,48 +310,49 @@ const IncidentTableComponent = () => {
     ({
       data, index, style,
     }) => {
+      const {
+        ref, inView,
+      } = useInView({
+        threshold: 0.1,
+      });
+
       const row = data[index];
+      useEffect(() => {
+        if (inView) {
+          if (!row.original.alerts) {
+            getIncidentAlerts(row.original.id);
+          }
+          if (!row.original.notes) {
+            getIncidentNotes(row.original.id);
+          }
+        }
+      }, [inView]);
+
       prepareRow(row);
       return (
-        <InView>
-          {({
-            inView, ref,
-          }) => {
-            if (inView) {
-              if (!row.original.alerts) {
-                getIncidentAlerts(row.original.id);
+        <Box
+          {...row.getRowProps({
+            style,
+          })}
+          className={index % 2 === 0 ? 'tr' : 'tr-odd'}
+          ref={ref}
+        >
+          {row.cells.map((cell) => (
+            <Box
+              {...cell.getCellProps()}
+              className="td"
+              data-incident-header={
+                typeof cell.column.Header === 'string'
+                  ? cell.column.Header
+                  : 'incident-header'
               }
-              if (!row.original.notes) {
-                getIncidentNotes(row.original.id);
-              }
-            }
-            return (
-              <Box
-                {...row.getRowProps({
-                  style,
-                })}
-                className={index % 2 === 0 ? 'tr' : 'tr-odd'}
-                ref={ref}
-              >
-                {row.cells.map((cell) => (
-                  <Box
-                    {...cell.getCellProps()}
-                    className="td"
-                    data-incident-header={
-                      typeof cell.column.Header === 'string'
-                        ? cell.column.Header
-                        : 'incident-header'
-                    }
-                    data-incident-row-cell-idx={row.index}
-                    data-incident-cell-id={row.original.id}
-                  >
-                    {cell.render('Cell')}
-                  </Box>
-                ))}
-              </Box>
-            );
-          }}
-        </InView>
+              data-incident-row-cell-idx={row.index}
+              data-incident-cell-id={row.original.id}
+            >
+              {cell.render('Cell')}
+            </Box>
+          ))}
+        </Box>
       );
     },
     [prepareRow, columns],