refactor out factionsDataGridData.tsx

web/src/components/FactionsDataGrid/FactionsDataGrid.tsx

@@ -1,36 +1,19 @@
 import { Box } from '@mui/material'
-import {
-  DataGrid,
-  type GridColDef,
-  type GridRenderCellParams,
-} from '@mui/x-data-grid'
-import _ from 'lodash'
-import type { Faction } from '../../lib/codesync/GameState'
-import { factionPowerResolution } from '../../lib/codesync/ruleset'
+import { DataGrid } from '@mui/x-data-grid'
 import { useGameSessionContext } from '../../lib/gameSession/GameSession'
-import {
-  factionColors,
-  factionNameGridColDef,
-} from '../../lib/rendering/renderFactions'
+import { factionColors } from '../../lib/rendering/renderFactions'
 import {
   defaultComponentMinWidth,
   sxClassesFromColors,
 } from '../../lib/rendering/renderUtils'
-import ManageFactionDialog from './ManageFactionDialog'
+import { getColumns, getRows } from './factionsDataGridData'
 
 const boxHeight = 200
 export function FactionsDataGrid(): React.JSX.Element {
   const gameSession = useGameSessionContext()
   const gs = gameSession.getCurrentGameStateUnsafe()
   const factions = gs?.Factions ?? []
 
-  const rows: FactionRow[] = _.map(factions, (faction: Faction) => ({
-    id: faction.Id,
-    faction: faction.Name,
-    power: Math.floor(faction.Power / factionPowerResolution),
-    intel: faction.IntelInvested,
-  }))
-
   return (
     <Box
       sx={[
@@ -44,8 +27,8 @@ export function FactionsDataGrid(): React.JSX.Element {
       ]}
     >
       <DataGrid
-        rows={rows}
-        columns={columns(factions)}
+        rows={getRows(factions)}
+        columns={getColumns(factions)}
         rowHeight={30}
         initialState={{
           pagination: {
@@ -60,45 +43,3 @@ export function FactionsDataGrid(): React.JSX.Element {
     </Box>
   )
 }
-
-export type FactionRow = {
-  readonly id: number
-  readonly faction: string
-  readonly power: number
-  readonly intel: number
-}
-
-function columns(factions: Faction[]): GridColDef<FactionRow>[] {
-  return [
-    factionNameGridColDef,
-    {
-      field: 'power',
-      headerName: 'Power',
-      width: 110,
-      disableColumnMenu: true,
-    },
-    {
-      field: 'intel',
-      headerName: 'Intel',
-      width: 80,
-      disableColumnMenu: true,
-    },
-    {
-      field: 'deploy',
-      disableColumnMenu: true,
-      sortable: false,
-      headerName: '',
-      width: 90,
-      renderCell: (
-        params: GridRenderCellParams<FactionRow>,
-      ): React.JSX.Element => {
-        const row: FactionRow = params.row
-
-        const faction: Faction = _.find(factions, {
-          Id: row.id,
-        })!
-        return <ManageFactionDialog faction={faction} />
-      },
-    },
-  ]
-}

web/src/components/FactionsDataGrid/factionsDataGridData.tsx

@@ -0,0 +1,57 @@
+import type { GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
+import _ from 'lodash'
+import type { Faction } from '../../lib/codesync/GameState'
+import { factionPowerResolution } from '../../lib/codesync/ruleset'
+import { factionNameGridColDef } from '../../lib/rendering/renderFactions'
+import ManageFactionDialog from './ManageFactionDialog'
+
+export function getRows(factions: Faction[]): FactionRow[] {
+  return _.map(factions, (faction: Faction) => ({
+    id: faction.Id,
+    faction: faction.Name,
+    power: Math.floor(faction.Power / factionPowerResolution),
+    intel: faction.IntelInvested,
+  }))
+}
+
+export type FactionRow = {
+  readonly id: number
+  readonly faction: string
+  readonly power: number
+  readonly intel: number
+}
+
+export function getColumns(factions: Faction[]): GridColDef<FactionRow>[] {
+  return [
+    factionNameGridColDef,
+    {
+      field: 'power',
+      headerName: 'Power',
+      width: 110,
+      disableColumnMenu: true,
+    },
+    {
+      field: 'intel',
+      headerName: 'Intel',
+      width: 80,
+      disableColumnMenu: true,
+    },
+    {
+      field: 'deploy',
+      disableColumnMenu: true,
+      sortable: false,
+      headerName: '',
+      width: 90,
+      renderCell: (
+        params: GridRenderCellParams<FactionRow>,
+      ): React.JSX.Element => {
+        const row: FactionRow = params.row
+
+        const faction: Faction = _.find(factions, {
+          Id: row.id,
+        })!
+        return <ManageFactionDialog faction={faction} />
+      },
+    },
+  ]
+}