Putting it all together...

Photo by Luis Francisco Cordero from FreeImages

This post is all about my first project using JavaScript with Rails as API!

This was definitely the most challenging project for me so far. Up to this point, I have been using Rails for the front and back end of my apps, but now was the time to plunge into HTML, CSS, and JavaScript to do that work instead. Without too much prior practice, I made lots of mistakes and had to do a lot of refactoring (I didn't start out using Object Oriented JS initially- big mistake!). Overall, I really enjoyed working on this project and it sure has taught me a lot!

Maybe you are having a similar experience so I would like to pass along a tip that was shared with me that I found to be quite helpful as I was working along on this project. Since I had already gotten kinda cozy with the rules and structure of Rails, it did take a moment to adjust to using JS on the front end. Before I heard this little JavaScript mantra, (please see credit below), I have to say that I felt a bit lost at times.
We all know that’s no fun, so try to remember this:

When some event happens, I want to make what kind of fetch and then manipulate the DOM in what way?

Event  ➤  Fetch  ➤  DOM manipulation

So the event triggers, a fetch request is fired off, and then the DOM changes in some predetermined way. It seems so simple when you think of it like this but there is so much going on behind the scenes during this sequence.

Consider this basic example:

    static categoryFormListener() {
        const categoryForm = 
          document.getElementById("category-form-container")
        categoryForm.addEventListener('submit', 
          function(event) {
            event.preventDefault()
            const categoryObject = { group: 
              event.target.querySelector("#group").value}
            event.target.querySelector("#group").value = ""

            fetch(CATEGORIES_URL, {
                method: 'POST', 
                headers: {
                    'Content-Type': 'application/json'
                },
                body: 
                 JSON.stringify({category:categoryObject}) 
            })
            .then(res => res.json())
            .then((json) => {
                new Category(json)
                Category.addCategoriesToDOM()
            })
        })
    }

This class method is using .addEventListener to listen for a 'submit' event. So we are waiting for the user to enter some information into the Category form and then click 'submit'.

After this event has triggered ('submit' has been clicked), a fetch request is made to the CATEGORIES_URL. This returns a promise that resolves to the response of that request. Response instances are returned when the fetch() promises are resolved, successful or not.

What exactly is a promise though? According to MDN, The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. The resulting value will be parsed into JSON so then the data returned can be manipulated on the DOM and displayed to the user. It is the json() method of the Body mixin that takes a Response stream and reads it to completion. It then returns a promise that resolves with the result of parsing the body text as JSON.

This JSON is then used to manipulate the DOM to render the desired result, in this case, creating a new Category.

This is what the Category form looks like on the front end:

->credit to Ayana, thank you so much!