with-react-formidable
A small wrapper parsing react-router location and match to provide helpful form contextual properties.
Convention
Your app needs to work with a special react-router pathname syntax. Given the url, withFormidable will find by itself if you are in readOnly, creation or modification state. Render your component with its Route config:
<Route component=Foo path='/foos/:fooId([A-Za-z0-9]{2,}|creation)/:modification(modification)?' />
Then :
/foos/AE
is a readOnly url, for the specific fetch of the entity foo with id=AE,/foos/creation
is the creation url for posting a new foo object,/foos/AE/modification
is the modification url for patching an already existing foo entity with id AE.
Basic usage with react-final-form and redux-thunk-data
Make your app starting at location.pathname="/foos/AE"
.
react old school
{ const form handleRequestFoo = thisprops const apiPath isCreatedEntity = form if !isCreatedEntity } { const form history = thisprops const modificationUrl = form history } { const payload = action const datum = payload const id: createdId = datum const form history = thisprops const getReadOnlyUrl = form history } { const form handleSubmitFoo = thisprops const apiPath method = form const formSubmitPromise = { } return formSubmitPromise } { const form = thisprops const readOnly = form return <input ...input readOnly=readOnly type="text" /> } { const form = thisprops const readOnly = form return <form onSubmit=handleSubmit> <Field name="title" render=thisrenderField /> readOnly ? <button onClick=thishandleActivateForm type="button" > 'Modify' </button> : <button type="submit"> 'Save' </button> </form> } { const form = thisprops const readOnly = form return <Form initialValues=initialValues onSubmit=thisonFormSubmit render=thisrenderForm /> } FoopropTypes = form: PropTypesshape apiPath: PropTypesstring getReadOnlyUrl: PropTypesfunc isCreatedEntity: PropTypesbool method: PropTypesstring modificationUrl: PropTypesstring readOnly: PropTypesbool isRequired const mapDispatchProps = withRouter withFormidable Foo
react hooks school
const FooField = { const location = const params = const readOnly = return <input ...input readOnly=readOnly type="text" /> } const FooForm = { const history = const location = const params = const modificationUrl readOnly = const handleActivateForm = return <form onSubmit=handleSubmit> <Field name="title" render=FooField /> readOnly ? <button onClick=handleActivateForm type="button" > 'Modify' </button> : <button type="submit"> 'Save' </button> </form> } const Foo = { const dispatch = const history = const location = const params = const apiPath isCreatedEntity getReadOnlyUrl method readOnly } = const handleFormSubmit =