The DELETE Method

#rails #ruby #javascript

This is basically a follow up of my last blog post: https://evanrpavone.github.io/the_struggle_was_real

I was a mess then, was nearly about to be that same mess this go around, but I finally figured out what my issues were!

The Issues

My backend destroy method and routes were not setup properly
In the frontend the card that was created that included the remove button wasn't getting recognized when adding an Event Listener.
The I.D attribute wasn't suppose to be used.

The Fixes

The Back-end

Let's start out with my back-end in my rails api. My destroy method and my routes were not setup properly. I had to make a destroy method that grabbed all of my breweries and then I used the destroy_all method to delete all of the data inside the breweries api. I had to do the same thing to my other model which was favorites.

destroy method

    def destroy
        breweries = Brewery.all
        if breweries.destroy_all
            render json: { message: 'Breweries deleted' }
        else
            render json: { errors: 
            breweries.errors.full_messages }
        end
    end

routes

For the routes. I had to add the delete HTTP Method to each model route

delete '/breweries' => 'breweries#destroy'
delete '/favorites' => 'favorites#destroy'

The Front-end

Now, for the front-end, my skills aren't that great when it comes to JavaScript. I spent a very long time figuring out what the issue was even though it was right in front of me.

Binding the Event Listener to the Delete Button

Originally, I had the delete button be rendered inside the brewery card when it was created. The Event Listener didn't recognize it, so what I did was add a clear all breweries button to the html file and bind the event listener to that button instead. I probably could have made it work inside the card now that I think about it, but for right now I am going to leave it where it is. After I got the event listener working, I had to get the delete method to work. This wasn't that hard. All I had to do is make a removeBreweries class method that called a removeBreweryCard method and a removeBreweryFromApi method (I probably didn't need to add this). This class method also had to call the removeFavorites Method to delete the favorites from the api as well.

    removeBreweries() {
        fetch(this.baseURL, {
            method: "DELETE",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
        })
        this.removeBreweryCards();
        this.deleteBreweryFromApi();
        this.removeFavorites();
    }

    removeBreweryCards() {
        const allCards = document.querySelector("
                         #brewery-card-container");
        allCards.innerHTML = "";
    }

    deleteBreweryFromApi() {
        return fetch(this.baseURL)
        .then(resp => resp.json())
        .catch(error => console.log("Error: " + error));
    }

    removeFavorites() {
        console.log("Hello")
        fetch(this.favoritesURL, {
            method: "DELETE",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
        })
        console.log("removing favorites");
        this.removeFavoritesFromApi();
        console.log("Removing All Favorites Now");
    }

This all worked out exactly as planned, I didn't have to do much else to the delete button after adding these.

Un-used attribute

So after looking at my code trying to figure out why the favorites wasn't being iterated properly for many hours, I realized that the id attribute wasn't being used at all. Basically, when I submitted a new brewery it was pushing everything by the name of the brewery, which is exactly what I wanted. What I didn't realize for a while is that I had ID as part of my constructor and not in my POST method. It was pushing the form data into an array like so:

this.breweries = []
this.breweries.push(new Brewery(brewery.attributes.id, brewery.attributes.name, brewery.attributes.city, brewery.attributes.state, beers))

const brewery = new Brewery(form[0].value, form[1].value, form[2].value, form[3].value)
// form[0].value was coming back as id but was suppose to be coming back as name
// so it was id: "Brewery Name 1", Name: "City 1", City: "State 1", State: "Favorites"

All I had to do was remove everywhere I was getting the id and everything worked without any other errors, which was really exciting.

Conclusion

I am starting to get more comfortable with JavaScript, definitely won't be my primary language but I am more comfortable with it. I know how to interact with a backend a little better, understand event listeners, and Object-Oriented JavaScript.