OSD600 - The Final Release Progress

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.jsx in 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.

• Clear button will clear all fields:

<button className="mBtn clearBtn" onClick={clearInput}> Clear </button>

 const clearInput = () => {
    setTitle("");
    setDesc("");
    setCountry("");
    setRegion("");
    setErr("");
  };

• Close button will set value of show to false to close the modal form:

<button className="mBtn closeBtn" onClick={handleClose}>Close</button>
const handleClose = () => setShow(false);

• Save button will submit the form, if all inputs are valid, the story will be inserted to database using react-supabase otherwise 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!