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

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

import {Button} from '@rmwc/button'
import ActionBar from '~/components/admin/actionBar'
import Table from '~/components/table'

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

export default function CategoryList({categories: _categories}) {
  const [categories, setCategories] = useState(_categories)

  const remove = uuid => async ev => {
    if(ev) ev.preventDefault()

    const {data: categories} = await axios.delete(`/api/categories/${uuid}`)
    setCategories(categories)
  }

  return (
    <>
      <ActionBar title="Categories">
        <Button outlined onClick={()=>router.push('/admin/categories/new')}>Create New category</Button>
      </ActionBar>
      <Table
        columns={[
          {name: 'Name', extractor: category => category.name},
          {name: 'Items', extractor: category => category.items?.length || '0'},
          {name: 'URL Slug', extractor: category => <Link href={`/store/category/${category.urlslug}`}><a>{category.urlslug}</a></Link> },
          {name: 'Parent', extractor: category => category.parent?.name || '(none)'},
          {name: 'Description', extractor: category => <div style={{maxWidth: 150, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{category.description}</div>},
          {name: 'Actions', extractor: category => (
            <span>
              <Link href={`/admin/categories/${category.urlslug}`}><a>Edit</a></Link>
              <button onClick={remove(category.uuid)} type="button" className="buttonLink">Delete</button>
            </span>
          )}
        ]}
        rows={categories}
      />
    </>
  )
}

async function remove(category){
  // Placeholder for when we have delete in the API
}