WIP save drafts of posts

This commit is contained in:
keyan 2022-01-07 12:28:23 -06:00
parent 9a96879e46
commit e42f1d6bb9
3 changed files with 40 additions and 5 deletions

View File

@ -74,6 +74,7 @@ export function DiscussionForm ({
router.push('/recent') router.push('/recent')
} }
})} })}
storageKeyPrefix={item ? undefined : 'discussion'}
> >
<Input <Input
label={titleLabel} label={titleLabel}

View File

@ -3,7 +3,7 @@ import InputGroup from 'react-bootstrap/InputGroup'
import BootstrapForm from 'react-bootstrap/Form' import BootstrapForm from 'react-bootstrap/Form'
import Alert from 'react-bootstrap/Alert' import Alert from 'react-bootstrap/Alert'
import { Formik, Form as FormikForm, useFormikContext, useField } from 'formik' import { Formik, Form as FormikForm, useFormikContext, useField } from 'formik'
import { useEffect, useRef, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import copy from 'clipboard-copy' import copy from 'clipboard-copy'
import Thumb from '../svgs/thumb-up-fill.svg' import Thumb from '../svgs/thumb-up-fill.svg'
import { Nav } from 'react-bootstrap' import { Nav } from 'react-bootstrap'
@ -114,13 +114,28 @@ function FormGroup ({ className, label, children }) {
) )
} }
function InputInner ({ prepend, append, hint, showValid, onChange, overrideValue, innerRef, ...props }) { function InputInner ({
prepend, append, hint, showValid, onChange, overrideValue,
innerRef, storageKeyPrefix, ...props
}) {
const [field, meta, helpers] = props.readOnly ? [{}, {}, {}] : useField(props) const [field, meta, helpers] = props.readOnly ? [{}, {}, {}] : useField(props)
const formik = props.readOnly ? null : useFormikContext() const formik = props.readOnly ? null : useFormikContext()
const storageKey = storageKeyPrefix ? storageKeyPrefix + '-' + props.name : undefined
useEffect(() => { useEffect(() => {
if (overrideValue) { if (overrideValue) {
helpers.setValue(overrideValue) helpers.setValue(overrideValue)
if (storageKey) {
localStorage.setItem(storageKey, overrideValue)
}
} else if (storageKey) {
const draft = localStorage.getItem(storageKey)
if (draft) {
// for some reason we have to turn off validation to get formik to
// not assume this is invalid
helpers.setValue(draft, false)
}
} }
}, [overrideValue]) }, [overrideValue])
@ -142,6 +157,11 @@ function InputInner ({ prepend, append, hint, showValid, onChange, overrideValue
{...field} {...props} {...field} {...props}
onChange={(e) => { onChange={(e) => {
field.onChange(e) field.onChange(e)
if (storageKey) {
localStorage.setItem(storageKey, e.target.value)
}
if (onChange) { if (onChange) {
onChange(formik, e) onChange(formik, e)
} }
@ -204,7 +224,7 @@ export function Checkbox ({ children, label, extra, handleChange, inline, ...pro
} }
export function Form ({ export function Form ({
initial, schema, onSubmit, children, initialError, validateImmediately, ...props initial, schema, onSubmit, children, initialError, validateImmediately, storageKeyPrefix, ...props
}) { }) {
const [error, setError] = useState(initialError) const [error, setError] = useState(initialError)
@ -215,11 +235,24 @@ export function Form ({
initialTouched={validateImmediately && initial} initialTouched={validateImmediately && initial}
validateOnBlur={false} validateOnBlur={false}
onSubmit={async (...args) => onSubmit={async (...args) =>
onSubmit && onSubmit(...args).catch(e => setError(e.message || e))} onSubmit && onSubmit(...args).then(() => {
if (!storageKeyPrefix) return
console.log(...args)
Object.keys(...args).forEach(v =>
localStorage.removeItem(storageKeyPrefix + '-' + v))
}).catch(e => setError(e.message || e))}
> >
<FormikForm {...props} noValidate> <FormikForm {...props} noValidate>
{error && <Alert variant='danger' onClose={() => setError(undefined)} dismissible>{error}</Alert>} {error && <Alert variant='danger' onClose={() => setError(undefined)} dismissible>{error}</Alert>}
{children} {storageKeyPrefix
? React.Children.map(children, (child) => {
if (child) {
return React.cloneElement(child, {
storageKeyPrefix
})
}
})
: children}
</FormikForm> </FormikForm>
</Formik> </Formik>
) )

View File

@ -105,6 +105,7 @@ export function LinkForm ({ item, editThreshold }) {
router.push('/recent') router.push('/recent')
} }
}} }}
storageKeyPrefix={item ? undefined : 'link'}
> >
<Input <Input
label='title' label='title'