The DELETE Method

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.