sos-nextjs/pages/admin/shipments/index.js

import router from 'next/router'

import Link from 'next/link'
import {Button} from '@rmwc/button'
import AdminToolbar from '~/components/admin/actionBar'
import Table from '~/components/table'
import {DateTime} from 'luxon'

AdminShipments.getInitialProps = async ({ctx: {axios}}) => {
  const {data: shipments} = await axios.get('/api/shipments')
  return {shipments}
}

export default function AdminShipments({shipments}){
  return (
    <>
      <AdminToolbar title="Shipments">
        <Button outlined onClick={() => router.push('/admin/shipments/new')}>Add Shipment</Button>
      </AdminToolbar>
      <Table
        columns={[
          {name: 'Note', extractor: shipment => shipment.description},
          {name: 'Date', extractor: shipment => DateTime.fromISO(shipment.date).setZone('local').toFormat('LLLL dd, h:mm a')},
          {name: 'Quantity', extractor: ({stockchanges}) => {
            const totalAdded = stockchanges
              .filter(stockchange => stockchange.direction === 'added')
              .map(stockchange => stockchange.change)
              .reduce((a,b) => (a+b), 0)
            const totalRemoved = stockchanges
              .filter(stockchange => stockchange.direction === 'subtracted')
              .map(stockchange => stockchange.change)
              .reduce((a,b) => (a+b), 0)
            const totalQuantity = totalAdded - totalRemoved
            const totalItems = stockchanges.length

            return (
              <span>
                {totalQuantity} added across {totalItems} items
              </span>
            )
          }},
          {name: '', extractor: shipment => (
            <Link href={`/admin/shipments/${shipment.uuid}`}><a>Details</a></Link>
          )}
        ]}
        // Map in an id property so the table can use array.map
        rows={shipments.map(shipment => ({id: shipment.uuid, ...shipment}))}
      />
    </>
  )
}