1. Tasks
In the last blog, I have made a plan about how to add new feature to Awesome-Adoption project. Here are some tasks I need to complete in this week:
- Create a modal form for user story which has title, description, location(country + region)
- Check that the fields are not empty
- Have the option to reset fields
- Post valid story to the table stories using
react-supabase - Display any errors for the user
- Use a spinner when posting the data (recommend
FetchingButton.jsxin layout) - Success should close the modal
- Be sure to clear the fields after closing the modal
2. Modification Process
First of all, I create a pop up modal using Modal components from bootstrap which will contain Form components in its body. As a result, when the Create your story button is clicked, the modal form will show up for user to input.
After creating the form's input, I use useState() hook to control input's value. As the suggestion of the maintainer, I had made use of react-country-region-selector to display two dropdowns for country and region. To make sure that all fields are not empty when the form is submitted, I added required attribute for all of them.
Source code for the modal form:
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Create Your Story</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="formContainer">
<Form onSubmit={handleSubmit}>
<Form.Group controlId="form.title">
<Form.Label className="str-form-label">Title</Form.Label>
<Form.Control
type="text"
name="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
required
/>
</Form.Group>
<Form.Group controlId="form.description">
<Form.Label className="str-form-label">Description</Form.Label>
<Form.Control
as="textarea"
value={desc}
name="desc"
onChange={(e) => setDesc(e.target.value)}
rows={5}
required
/>
</Form.Group>
<Form.Group controlId="form.country">
<Form.Label className="str-form-label">Country</Form.Label>
<CountryDropdown
className="country"
name="country"
value={country}
onChange={(val) => setCountry(val)}
required
/>
</Form.Group>
<Form.Group controlId="form.region">
<Form.Label className="str-form-label">Region</Form.Label>
<RegionDropdown
className="region"
name="region"
blankOptionLabel="No Country Selected"
country={country}
value={region}
onChange={(val) => setRegion(val)}
required
/>
</Form.Group>
<br />
<hr />
<div className="btnContainer">
<button className="mBtn clearBtn" onClick={clearInput}>
Clear
</button>
<button className="mBtn closeBtn" onClick={handleClose}>
Close
</button>
<FetchingButton
fetching={fetching}
action="Save"
type="submit"
className="mBtn saveBtn"
/>
</div>
</Form>
</div>
</Modal.Body>
{err && (
<div className="alert alert-danger" role="alert">
{err}
</div>
)}
</Modal>
Next, I need to add corresponding functions to each button in the form.
-
Clearbutton will clear all fields:
<button className="mBtn clearBtn" onClick={clearInput}> Clear </button>
const clearInput = () => {
setTitle("");
setDesc("");
setCountry("");
setRegion("");
setErr("");
};
-
Closebutton will set value ofshowtofalseto close the modal form:
<button className="mBtn closeBtn" onClick={handleClose}>Close</button>
const handleClose = () => setShow(false);
-
Savebutton will submit the form, if all inputs are valid, thestorywill be inserted to database usingreact-supabaseotherwise an error will be displayed.
const handleSubmit = async (e) => {
e.preventDefault();
const { error } = await execute({
user_id: user.id,
title: title,
description: desc,
region: region,
country: country,
});
if (!error) {
// insert successfully
clearInput();
handleClose();
} else {
// display error
setErr(error.message);
}
};
3. New experience
This is my very first time working with react-supabase, at first I got into some troubles about inserting inputs to the database.
After a couple of hours searching the solution in hopelessness, I decided to communicate with the maintainer to get some suggestions. He is very friendly and willing to give a hand, he helps me to find out the solution quickly. It turned out that he mistook to capitalize one field in the database. Then he gave me some solutions to simplify my work. I really appreciate that, truly give a big thank to him. Open source is extremely great!
Thank you for reading the post!
Happy coding!
Top comments (0)