OSD600 - The Final Release Progress
Tags: opensource
Published: 2021-12-09 07:02:55

## 1. Tasks 
In the last blog, I have made a plan about how to add [new feature](https://github.com/redxzeta/Awesome-Adoption/issues/232) to [Awesome-Adoption](https://github.com/redxzeta/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](https://getbootstrap.com/docs/4.3/components/modal/) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1athi98m3n6urof8ewb.png)
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](https://www.npmjs.com/package/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!