extract registerGridUpdate

AlexErrant · Dec 1, 2024 · 05b9c0a · 05b9c0a
1 parent 67bbef3
commit 05b9c0a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 41 deletions.
diff --git a/app/src/components/templatesTable.tsx b/app/src/components/templatesTable.tsx
@@ -1,11 +1,4 @@
-import {
-	type VoidComponent,
-	type Owner,
-	Show,
-	onMount,
-	createEffect,
-	on,
-} from 'solid-js'
+import { type VoidComponent, type Owner, Show, onMount } from 'solid-js'
 import {
 	type GridOptions,
 	type ICellRendererParams,
@@ -25,7 +18,7 @@ import { Entries } from '@solid-primitives/keyed'
 import './registry'
 import { C } from '../topLevelAwait'
 import { type Override } from 'shared/utility'
-import { createGrid, Renderer } from '../uiLogic/aggrid'
+import { createGrid, registerGridUpdate, Renderer } from '../uiLogic/aggrid'
 import { useTableCountContext } from './tableCountContext'
 
 LicenseManager.setLicenseKey(import.meta.env.VITE_AG_GRID_LICENSE)
@@ -183,37 +176,8 @@ const TemplatesTable: VoidComponent<{
 					})
 			},
 		})
+		registerGridUpdate(gridApi, useTableCountContext().templateRowDelta)
 	})
-	const [templateRowDelta, setTemplateRowDelta] =
-		useTableCountContext().templateRowDelta
-	createEffect(
-		on(
-			templateRowDelta,
-			(templateRowDelta) => {
-				if (templateRowDelta != null) {
-					// This code is copied from the "Using Cache API Methods" example
-					// https://www.ag-grid.com/javascript-data-grid/infinite-scrolling/#example-using-cache-api-methods
-					// https://codesandbox.io/p/sandbox/v6klrp
-
-					// if the data has stopped looking for the last row, then we need to adjust the
-					// row count to allow for the extra data, otherwise the grid will not allow scrolling
-					// to the last row. eg if we have 1000 rows, scroll all the way to the bottom (so
-					// maxRowFound=true), and then add 5 rows, the rowCount needs to be adjusted
-					// to 1005, so grid can scroll to the end. the grid does NOT do this for you in the
-					// refreshInfiniteCache() method, as this would be assuming you want to do it which
-					// is not true, maybe the row count is constant and you just want to refresh the details.
-					const maxRowFound = gridApi.isLastRowIndexKnown()
-					if (maxRowFound ?? false) {
-						const rowCount = gridApi.getDisplayedRowCount()
-						gridApi.setRowCount(rowCount + templateRowDelta)
-					}
-					gridApi.refreshInfiniteCache()
-					setTemplateRowDelta(undefined) // "unset" add so we can listen to new changes
-				}
-			},
-			{ defer: true },
-		),
-	)
 	const [theme] = useThemeContext()
 	return <div class={`${agGridTheme(theme)} h-full`} ref={ref!} />
 }

diff --git a/app/src/uiLogic/aggrid.ts b/app/src/uiLogic/aggrid.ts
@@ -1,6 +1,18 @@
-import { createGrid as createAgGrid, type GridOptions } from 'ag-grid-community'
+import {
+	createGrid as createAgGrid,
+	type GridApi,
+	type GridOptions,
+} from 'ag-grid-community'
 import { type Override } from 'shared/utility'
-import { getOwner, type JSX, type Owner, runWithOwner } from 'solid-js'
+import {
+	createEffect,
+	getOwner,
+	type JSX,
+	on,
+	type Owner,
+	runWithOwner,
+	type Signal,
+} from 'solid-js'
 import { render } from 'solid-js/web'
 
 export class Renderer {
@@ -43,3 +55,37 @@ export function createGrid<TData>(
 		},
 	})
 }
+
+export function registerGridUpdate<T>(
+	gridApi: GridApi<T>,
+	[templateRowDelta, setTemplateRowDelta]: Signal<number | undefined>,
+) {
+	createEffect(
+		on(
+			templateRowDelta,
+			(templateRowDelta) => {
+				if (templateRowDelta != null) {
+					// This code is copied from the "Using Cache API Methods" example
+					// https://www.ag-grid.com/javascript-data-grid/infinite-scrolling/#example-using-cache-api-methods
+					// https://codesandbox.io/p/sandbox/v6klrp
+
+					// if the data has stopped looking for the last row, then we need to adjust the
+					// row count to allow for the extra data, otherwise the grid will not allow scrolling
+					// to the last row. eg if we have 1000 rows, scroll all the way to the bottom (so
+					// maxRowFound=true), and then add 5 rows, the rowCount needs to be adjusted
+					// to 1005, so grid can scroll to the end. the grid does NOT do this for you in the
+					// refreshInfiniteCache() method, as this would be assuming you want to do it which
+					// is not true, maybe the row count is constant and you just want to refresh the details.
+					const maxRowFound = gridApi.isLastRowIndexKnown()
+					if (maxRowFound ?? false) {
+						const rowCount = gridApi.getDisplayedRowCount()
+						gridApi.setRowCount(rowCount + templateRowDelta)
+					}
+					gridApi.refreshInfiniteCache()
+					setTemplateRowDelta(undefined) // "unset" add so we can listen to new changes
+				}
+			},
+			{ defer: true },
+		),
+	)
+}