mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-25 01:03:18 +08:00
Add developer documentation to Git
Currently, this only includes some remarks regarding validation.
This commit is contained in:
parent
215fa9d0b0
commit
022c81ec1f
1 changed files with 30 additions and 0 deletions
30
docs/dev_documentation.md
Normal file
30
docs/dev_documentation.md
Normal file
|
@ -0,0 +1,30 @@
|
|||
# sciNote Developers Documentation
|
||||
|
||||
## Front-end (React.js)
|
||||
|
||||
### Validations
|
||||
|
||||
**Validation components**
|
||||
|
||||
Whenever you have a pretty generic form, use the validation components on the front-end and back-end.
|
||||
|
||||
An example use case for how to handle this new validation can be seen on New Team page. The validators are merely a single-input-field validators, and can only get you so far. For more complex validation (e.g. whether password & password confirmation match), server-side validation should be used.
|
||||
|
||||
The validation is run by providing the same `tag` property to various elements that relate to the same "data field", as well as hooking the relevant validators to the `<InputFormControl>`, and voila - the validation magically works :rainbow:!
|
||||
|
||||
Also the `<ValidatedSubmitButton>` is automatically disabled as soon as there is any error on the form.
|
||||
|
||||
To call the form itself from within the hosting component, you should use the `ref` mechanism:
|
||||
|
||||
```javascript
|
||||
<ValidatedForm ref={(f) => { this.myForm = f; }}>
|
||||
```
|
||||
|
||||
Additional validators can be added once we need them. They are basically a Javascript function that receives `target` (input element reference) and `messageIds`, and returns an array of errors (which are a JSON object which support localization). This will be better once we onboard flow onto them.
|
||||
|
||||
**How to render server errors?**
|
||||
|
||||
If the server returns any error (this excludes actual validation errors, mostly related to the input data being incorrect), ideally we want to display this (e.g. `Oops, something went wrong!` or similar) by one of 2 means:
|
||||
|
||||
* if it's a form, display it as a general form error feedback;
|
||||
* if NOT a form, display it in a flash message (if this is the case and the error occurred in modal window, modal **MUST** be closed, because otherwise flash message isn't really seen by the user properly).
|
Loading…
Reference in a new issue