sos-nextjs/pages/admin/items/[slug].js

import React from 'react'
import router from 'next/router'

import ActionBar from '~/components/admin/actionBar'
import {FormController, Input, TextArea, DecimalInput, Button, Checkbox} from '~/components/form'

EditItem.getInitialProps = async ({ctx: {axios, query: {slug}}}) => {
  const {data: item} = await axios.get(`/api/items/by-slug/${slug}`)
  return {item}
}

export default function EditItem({item}) {
  const stringLengthAtLeastOne = str => str.length > 0
  const slugRestrictions = str => {
    if(str.length < 3) return false;
    if(str.length > 20) return false;
    if(!str.match(/^[-a-z0-9_]*$/i)) return false;
    return true;
  }

  const afterUpdate = (item) => {
    router.replace(`/admin/items/${item.urlslug}`)
  }

  return (
    <>
      <ActionBar title={`Editing ${item.name}`}/>
      <FormController url={`/api/items/${item.uuid}`} afterSubmit={afterUpdate}>
        <Input name="name" initialValue={item.name} validate={stringLengthAtLeastOne} />
        <TextArea name="description" initialValue={item.description} validate={stringLengthAtLeastOne} />
        <Input label="URL Slug" name="urlslug" initialValue={item.urlslug} validate={slugRestrictions} />
        <DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} initialValue={item.price_cents / 100} transform={float => Math.floor(float * 100)} />
        <Checkbox label="Published" name="published" hint="Publish this item" initialValue={item.published} />
        <Button type="submit">Save</Button>
      </FormController>
    </>
  )
}