sos-nextjs/pages/admin/categories/[slug]/children.js

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

import ActionBar from '~/components/admin/actionBar'
import Table from '~/components/table'

CategoryChildren.getInitialProps = async ({ctx: {axios, query: {slug}}}) => {
  const {data: category} = await axios.get(`/api/categories/by-slug/${slug}`)
  const {data: allCategories} = await axios.get(`/api/categories`)
  return {category, allCategories}
}

export default function CategoryChildren({category: _category, allCategories}) {
  const [category, updateCategory] = useState(_category)

  const childrenUUIDs = category.children.map(child => child.uuid)
  const possibleChildren = allCategories.filter(cat => !cat.parent && cat.uuid !== category.uuid && !childrenUUIDs.includes(cat.uuid))

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

    const {data: updated} = await axios.delete(`/api/categories/${category.uuid}/children/${uuid}`)
    updateCategory(updated)
  }

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

    const {data: updated} = await axios.put(`/api/categories/${category.uuid}/children/${uuid}`)
    updateCategory(updated)
  }

  return (
    <>
      <ActionBar title={`Editing children of "${category.name}"`}/>
      <h3>Child Categories</h3>
      <Table
        columns={[
          {name: 'Name', extractor: category => category.name},
          {name: 'URL Slug', extractor: category => <Link href={`/store/category/${category.urlslug}`}><a>{category.urlslug}</a></Link> },
          {name: 'Actions', extractor: category => (
            <span>
              <button onClick={removeChild(category.uuid)} className="buttonLink">Remove</button>
            </span>
          )}
        ]}
        // Map in an id property so the table can use array.map
        rows={category.children}
      />

      <h3>Add Child Category</h3>
      <Table
        columns={[
          {name: 'Name', extractor: category => category.name},
          {name: 'URL Slug', extractor: category => <Link href={`/store/category/${category.urlslug}`}><a>{category.urlslug}</a></Link> },
          {name: 'Actions', extractor: category => (
            <span>
              <button onClick={addChild(category.uuid)} className="buttonLink">Add</button>
            </span>
          )}
        ]}
        // Map in an id property so the table can use array.map
        rows={possibleChildren}
      />
    </>
  )
}