Ana Lisa Sutherland -- Octos C9

[The-Beez-Kneez]

Inspiration Board

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
Explain the steps in creating a new Card from the form.	The NewCardForm returns a form that has two separate event handler tied to it. On an input field change, the onInputChange event handler updates the state of the Card with the new data that was put in. Upon the user hitting the submit button, the onFormSubmit event handler then calls the addCardCallBack with the updated state. This then goes to the Board and the addCard function is called, which updates the card list with the newest.
How did you learn how to use the API?	I clicked on all of the heroku links given to us and observed the data within it. I then noted down the difference in the URL's for each action I wanted to complete and utilized them. I referred back to the information stored in each URL response to check what it was I needed to reference as needed.
What function did you use to place the GET request from the API to get the list of cards? Why use that function?	I used the function componentDidMount along with the axios.get request. I did this so that when the page loads the cards already existing would be loaded by componentDidMount first before the other renders.
Explain the purpose of a Snapshot test.	The Snapshot test is used to compare two pictures of the DOM, it allows you to compare that the page was rendered as you expected against a previously held picture. You can then check to make sure the appropriate changes were executed.
What purpose does Enzyme serve in testing a React app?	Enzyme allows us to manipulate and make assertions on our React components.

[droberts-sea]

Inspiration Board

What We're Looking For

Feature	Feedback
Core Requirements
Git hygiene	yes
Comprehension questions	yes
General
Card Component renders the data provided as props	yes
Board Component takes a URL and renders the list of Cards and passes in callback functions	yes
NewCardform Component is a controlled form and uses a callback function to return entered data to the parent component	yes
API
GET request made in componentDidMount	yes
DELETE request made in callback function	yes
POST request made in callback function passed to NewCardForm component.	yes
Snapshot testing	yes
Styling	yes
Overall

Good work overall. It looks like you were very close on deleting a card, and everything else works beautifully.

My one piece of advice after this submission is for you to keep practicing your debugging skills! Here is the general pattern I follow:

• Describe the observed bad behavior. Out loud or written down is fine, but make it explicit. Turning a thought in your head into words is important.
• If there's an error, read it! What is it trying to tell you?
  • If you're not sure if there was an error, how would you find out?
• Make a hypothesis about what could have caused the bad behavior.
• Come up with a way to test whether your hypothesis is true.
  • This might be making the change and seeing if the problem is fixed, but for a more complex bug you might need some intermediate measurements.
  • If your change didn't fix the bug, change it back! Testing only one thing at a time an important part of the scientific method.
• Remember that a bug is always the result of an incorrect assumption on your part. Making these assumptions explicit can help you test them, which will help you find where they break down.

I am quite happy with this submission, so keep up the hard work!

[droberts-sea]

It looks like you're missing a / in your URL before the ID. When I added that, this code worked fine.

The way I found this was by noticing the error code - 404 indicates not found, which means either you have a bad card ID, or a bad URL format. I then looked in Chrome's network tab to see what you were actually sending, and noticed the missing /.

[droberts-sea]

It would probably be wise to put the string something in a variable here.

[droberts-sea]

You've got classes defined for this Status component, but no CSS that uses them!