New item form

components/form/checkbox.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 
 import styles from './styles.module.css'
 
@@ -7,6 +7,11 @@ export default function Checkbox({label, error, hint, name, value, onChange, onB
     onChange({target: {value: !value}})
   }
 
+  useEffect(()=>{
+    if(value === "")
+      onChange({target: {value: false}})
+  }, [])
+
   return (
     <div className={styles.formElementContainer + ' ' + styles.checkboxContainer}>
       <label htmlFor={name}>{label}:</label>

components/form/decimalInput.js

@@ -86,7 +86,7 @@ export default function Input({label, prefix, numDecimals, error, hint, name, va
           <span className={styles.numRemaining}>{remainingText}</span>
         </div>
       </div>
-      {hint && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
+      {(hint || error) && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
     </div>
   )
 }

components/form/input.js

@@ -2,14 +2,14 @@ import React from 'react'
 
 import styles from './styles.module.css'
 
-export default function Input({_label, error, hint, type, name, value, onChange, onBlur, isValid}){
+export default function Input({label: _label, error, hint, type, name, value, onChange, onBlur, isValid}){
   const label = _label  || name.replace(name[0], name[0].toUpperCase())
 
   return (
     <div className={styles.formElementContainer}>
       <label htmlFor={name}>{label}:</label>
       <input className={(isValid && !error)?'':styles.invalid} type={type} name={name} value={value} onChange={onChange} onBlur={onBlur} />
-      {hint && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
+      {(hint || error) && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
     </div>
   )
 }

pages/admin/items/index.js

@@ -31,6 +31,7 @@ export default function Items({items: _items}){
   return (
     <>
       <h2>Items</h2>
+      <Link href="/admin/items/new"><a>Create New Item</a></Link>
       <Table
         columns={[
           {name: 'Name', extractor: item => item.name},

pages/admin/items/new.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import router from 'next/router'
+import {FormController, Input, DecimalInput, Button, Checkbox} from '~/components/form'
+
+export default function NewItem() {
+  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 afterCreate = (item) => {
+    router.push(`/admin/items/${item.urlslug}`)
+  }
+
+  return (
+    <>
+      <h2>Create New Item</h2>
+      <FormController url="/api/items" afterSubmit={afterCreate}>
+        <Input name="name" validate={stringLengthAtLeastOne} />
+        <Input name="description" validate={stringLengthAtLeastOne} />
+        <Input label="URL Slug" name="urlslug" validate={slugRestrictions} />
+        <DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
+        <Checkbox label="Published" name="published" hint="Publish this item" />
+        <p><strong>Note:</strong> You can add images to an item after creating it</p>
+        <Button type="submit">Create</Button>
+      </FormController>
+    </>
+  )
+}