alefever39 / phase-4-debugging-network-requests-lab

Putting it All Together: Client-Server Communication

Learning Goals

• Understand how to communicate between client and server using fetch, and how the server will process the request based on the URL, HTTP verb, and request body
• Debug common problems that occur as part of the request-response cycle

Introduction

Just like the last lesson, we've got code for a React frontend and Rails API backend set up. This time though, it's up to you to use your debugging skills to find and fix the errors!

To get the backend set up, run:

$ bundle install
$ rails db:migrate db:seed
$ rails s

Then, in a new terminal, run the frontend:

$ npm install --prefix client
$ npm start --prefix client

Confirm both applications are up and running by visiting localhost:4000 and viewing the list of toys in your React application.

Deliverables

In this application, we have the following features:

• Display a list of all the toys
• Add a new toy when the toy form is submitted
• Update the number of likes for a toy
• Donate a toy to Goodwill (and delete it from our database)

The code is in place for all these features on our frontend, but there are some problems with our API! We're able to display all the toys, but the other three features are broken.

Use your debugging tools to find and fix these issues.

There are no tests for this lesson, so you'll need to do your debugging in the browser and using the Rails server logs and byebug.

Note: You shouldn't need to modify any of the React code to get the application working. You should only need to change the code for the Rails API.

As you work on debugging these issues, use the space in this README file to take notes about your debugging process. Being a strong debugger is all about developing a process, and it's helpful to document your steps as part of developing your own process.

Your Notes Here

• Add a new toy when the toy form is submitted

  • How I debugged:

    • I had searched through the create action when I was (incorrectly) debugging the like button and noticed it say Toy(s).create. The s does not belong so I removed it before debugging further.
    • I tried to submit before correcting the create action just to see what would happen. I got a 500 error, adding weight to my previous theory that the error was somewhere in the code of the action.
    • I fixed the Toys.create error.
    • It looks like it works now!

• Update the number of likes for a toy

  • How I debugged:
    • Tried clicking the like button
    • got an unexpected end of json error. This makes me think the error might be in the response of the controller. So I will check the controller
    • I didn't know the end point for the like button. So I first checked the front end fetch request. request goes to POST /toys. ie the create action.
    • It looks like the response is json as it should be so I checked the rest of the code... then realized I was checking the wrong thing, haha.
    • Went back to look for the "LIKE" request, not the submit form request. It is a patch request to a toy with an id as a param. So I checked the update action.
    • I noticed the last line is just updating the toy, but not converting that toy to json. So I added a line to return json
    • that worked!!!

• Donate a toy to Goodwill (and delete it from our database)

  • How I debugged:
    • I started by clicking on the donate to goodwill button.
    • I recieved a 404 not found error.
    • I checked the frontend request first. It is a delete fetch request with an id included which looks correct.
    • I checked the backend controller for a destroy action. It is present and the code looks correct.
    • I checked the config.routes file. The destory action is not included as an endpoint. I added it and tested the code.
    • That did the trick!