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

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

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

import {Button as RMWCButton} from '@rmwc/button'
import {FormController, IntegerInput, Button, DateInput} from '~/components/form'

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

export default function EditItem({item, numPreorders}) {
  const minimum = Math.max(numPreorders, 1)
  const initial = Math.max(minimum, item.preorder_maximum);

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

  const deletePreorder = async () => {
    await axios.post(`/api/items/${item.uuid}/preorder`, {availability_date: null, preorder_maximum: null})
    router.push(`/admin/items/${item.urlslug}`)
  }

  return (
    <>
      {
        item.preorder_availability_date
          ? <ActionBar title={`Updating pre-order for "${item.name}"`}>
              {numPreorders < 1 &&
                <RMWCButton outlined onClick={deletePreorder}>Remove pre-order</RMWCButton>
              }
            </ActionBar>
          : <ActionBar title={`Adding pre-order for "${item.name}"`}/>
      }
      <FormController url={`/api/items/${item.uuid}/preorder`} afterSubmit={afterUpdate}>
        <DateInput label="Estimated Delivery" initialValue={item.preorder_availability_date} minDate={new Date()} name="availability_date" />
        <IntegerInput label="Max pre-orders" initialValue={initial.toFixed(0)} name="preorder_maximum" minimum={minimum.toFixed(0)} validate={i => i > 0} />
        {item.preorder_availability_date &&
          <p>There are currently {numPreorders} pre-orders for this item</p>
        }
        <Button type="submit">Create</Button>
      </FormController>
    </>
  )
}