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.
31 lines
1.2 KiB
JavaScript
31 lines
1.2 KiB
JavaScript
5 years ago
|
import React from 'react'
|
||
|
|
import {FormController, Input, DecimalInput, Button} 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<h2>Editing {item.name}</h2>
|
||
|
|
<FormController afterSubmit={console.log}>
|
||
|
|
<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)} />
|
||
|
|
<Button type="submit">Save</Button>
|
||
|
|
</FormController>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|