Forms
Forms used in this application in general all follows the same structure but just with different inputting fields. All of them uses StandardForm and StandardFormGroup for standard styling and uses a common custom hook useForms
The standard form takes in a title and the actual form fields as children, the title is used for the navigation bar aka the UtilityBar component to display what form the user is currently on.
components/Forms/StandardForm.js
components/Hooks/UseForms.js
The purpose of this hook is to extract the commonly used state validated and function handleSubmit used by all forms. The state validated is used for field input checking, such that an error message would be displayed when user fails to input into a field that requires an input. The function handleSubmit is called whenever a form is submitted, which takes in an event e and another function onSubmit that indicates what to do to the form data after submitting.
components/Upload/UploadDataset.js
Taking Dataset uploading form as an example, on submit, handle submit takes in the uploadDataset function as parameter and the required form fields are validated. The data received in the form are then formatted using FormData. This is because backend requires the request body to be of type multipart/formdata, hence the form cannot be sent directly.
The uploading state is set the true to enable the Spinner component to render which lasts for the duration of the uploading process. Then the uploading API is invoked and uploading is set to false after receiving a response. If the response is OK, then a successful popup would appear, otherwise a warning popup would appear displaying the error message.
