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

import React, {useState} from 'react'
import Link from 'next/link'
import axios from 'axios'

import Table from '~/components/table'

Items.getInitialProps = async ({ctx}) => {
  const {data: items} = await ctx.axios.get('/api/items?showUnpublished=true')
  return {items}
}

export default function Items({items: _items}){
  const [items, setItems] = useState(_items)

  const updateItem = newItem => setItems(items=>items.map(i => {
    if(i.uuid === newItem.uuid)
      return newItem
    return i
  }))

  const publish = item => async () => {
    const {data: newItem} = await axios.post(`/api/items/${item.uuid}/publish`)
    updateItem(newItem)
  }

  const unpublish = item => async () => {
    const {data: newItem} = await axios.post(`/api/items/${item.uuid}/unpublish`)
    updateItem(newItem)
  }

  return (
    <>
      <h2>Items</h2>
      <p>
        <Link href="/admin/items/new"><a>Create New Item</a></Link>
      </p>
      <Table
        columns={[
          {name: 'Name', extractor: item => item.name},
          {name: 'URL', extractor: item =>
            <Link href={`/store/item/${item.urlslug}`}><a>/store/item/{item.urlslug}</a></Link> },
          {name: 'Price', extractor: item => `$${(item.price_cents / 100).toFixed(2)}`},
          {name: 'Number in stock', extractor: item => item.number_in_stock},
          {name: 'Actions', extractor: item => (
            <span>
              <Link href={`/admin/items/${item.urlslug}`}><a>Edit</a></Link>
              {
                item.published
                  ?<button onClick={unpublish(item)} type="button" className="buttonLink">Unpublish</button>
                  :<button onClick={publish(item)}   type="button" className="buttonLink">Publish</button>
              }
            </span>
          )}
        ]}
        // Map in an id property so the table can use array.map
        rows={items.map(item => ({id: item.uuid, ...item}))}
      />
    </>
  )
}