You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.4 KiB
JavaScript
37 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import router from 'next/router'
|
|
import {FormController, Input, 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 (
|
|
<>
|
|
<h2>Editing {item.name}</h2>
|
|
<FormController url={`/api/items/${item.uuid}`} afterSubmit={afterUpdate}>
|
|
<Input name="name" initialValue={item.name} validate={stringLengthAtLeastOne} />
|
|
<Input 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>
|
|
</>
|
|
)
|
|
}
|