Add firearms grid

src/components/EquipmentList/EquipmentList.tsx

@@ -5,6 +5,7 @@ import React, { useContext } from 'react'
 
 import CommandBar from '@/components/CommandBar/CommandBar'
 import ArmorGrid from '@/components/EquipmentList/ArmorGrid'
+import FirearmWeaponsGrid from '@/components/EquipmentList/FirearmWeaponsGrid'
 import MeleeWeaponsGrid from '@/components/EquipmentList/MeleeWeaponsGrid'
 import MiscEquipmentGrid from '@/components/EquipmentList/MiscEquipmentGrid'
 import MissileWeaponsGrid from '@/components/EquipmentList/MissileWeaponsGrid'
@@ -46,6 +47,11 @@ export default function EquipmentList() {
             key: 'miscEquipment',
             title: t`Miscellaneous`,
           },
+          {
+            content: <FirearmWeaponsGrid />,
+            key: 'firearm',
+            title: t`Firearms`,
+          },
         ]}
       />
     </>

src/components/EquipmentList/FirearmWeaponsGrid.tsx

@@ -0,0 +1,127 @@
+import { t } from '@lingui/macro'
+import React, { useMemo } from 'react'
+
+import DamageFragment from '@/components/DamageFragment'
+import DataGrid from '@/components/DataGrid/DataGrid'
+import type { DataGridSortFunction } from '@/components/DataGrid/helpers'
+import type { DataGridColumn } from '@/components/DataGrid/types'
+import {
+  renderCostGridCol,
+  renderDetailsBody,
+  renderWeightGridCol,
+} from '@/components/EquipmentList/gridHelpers'
+import {
+  handleAddEquipmentItemClick,
+  sortWeapons,
+} from '@/components/EquipmentList/helpers'
+import RangeFragment from '@/components/RangeFragment'
+import Equipment from '@/config/Equipment'
+import type { FirearmWeaponItem } from '@/domain/weapon'
+import useTailwindBreakpoint from '@/shared/hooks/useTailwindBreakpoint'
+import { useInventoryState } from '@/state/InventoryState'
+
+const columns: ReadonlyArray<DataGridColumn<FirearmWeaponItem>> = [
+  {
+    className: 'w-1/3',
+    key: 'name',
+    shouldRenderDetails: (item) => !!item.details || !!item.range,
+    renderDetails: renderDetailsBody,
+    get title() {
+      return t`Name`
+    },
+  },
+  {
+    className: 'w-1/6',
+    key: 'damage',
+    render: (item: FirearmWeaponItem) => (
+      <DamageFragment damage={item.damage} />
+    ),
+    get title() {
+      return t`Damage`
+    },
+  },
+  {
+    className: 'w-1/6 hidden sm:table-cell',
+    key: 'range',
+    render: (item: FirearmWeaponItem) => (
+      <RangeFragment range={item.range} compact />
+    ),
+    get title() {
+      return t`Range`
+    },
+  },
+  {
+    className: 'hidden sm:table-cell sm:w-1/6',
+    key: 'points',
+    render: renderWeightGridCol,
+    get title() {
+      return t`Weight`
+    },
+  },
+]
+
+const cityCostColumn: DataGridColumn<FirearmWeaponItem> = {
+  className: 'w-1/6',
+  key: 'cityCostCp',
+  render: renderCostGridCol,
+  get title() {
+    return t`Cost, sp`
+  },
+}
+const ruralCostColumn: DataGridColumn<FirearmWeaponItem> = {
+  className: 'w-1/6',
+  key: 'ruralCostCp',
+  render: renderCostGridCol,
+  get title() {
+    return t`Cost, sp`
+  },
+}
+
+const MissileWeaponsGrid = () => {
+  const {
+    state: { isCostRural },
+  } = useInventoryState()
+  const breakpoint = useTailwindBreakpoint()
+
+  const columnsFilteredByCost = useMemo(() => {
+    const costCol = isCostRural.get() ? ruralCostColumn : cityCostColumn
+    const lastIndex = columns.length - 1
+
+    // put the Cost before the last column
+    return [...columns.slice(0, lastIndex), costCol, columns[lastIndex]]
+  }, [isCostRural])
+
+  const dataFilteredByCost = useMemo(() => {
+    const data = Object.values(Equipment.FirearmWeapons)
+
+    return isCostRural.get() ? data.filter((i) => i.ruralCostCp !== null) : data
+  }, [isCostRural])
+
+  const filterName = (item: FirearmWeaponItem, filterBy: string) => {
+    return item.name.toLocaleLowerCase().includes(filterBy.toLocaleLowerCase())
+  }
+
+  const isSmallViewport = 'xs' === breakpoint
+  const colSpan = isSmallViewport
+    ? columnsFilteredByCost.length - 2
+    : columnsFilteredByCost.length
+
+  return (
+    <>
+      <div className='pt-6 pb-4 text-gray-800'>
+        <p className={'mb-2'}></p>
+      </div>
+      <DataGrid<FirearmWeaponItem>
+        data={dataFilteredByCost}
+        columns={columnsFilteredByCost}
+        onAddClick={handleAddEquipmentItemClick}
+        filterFn={filterName}
+        filterPlaceholder={t`Filter by name`}
+        handleSort={sortWeapons as DataGridSortFunction}
+        spanDetails={colSpan}
+      />
+    </>
+  )
+}
+
+export default MissileWeaponsGrid