Hannah Cameron - Inspo Board - Ocots

[hannahlcameron]

Inspiration Board

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
Explain the steps in creating a new Card from the form.	A user enters information in the form - for the text area, each time a keystroke is typed, a change event is recorded and the value of the field is saved as the from's this.state.text; for the emoji-area, when a user clicks on an image in the drop down, it is set to this.state.emoji. When the user hits the submit button, that data is passed from the newcardform component to the board component via a callback function that was originally sent from board to newcardform as the prop addCardCallback. The state then gets reset to empty strings so that the form clears. The function stored within addCardCallback is addCard, which places a post request to the API with the text and emoji data as parameters. In addition, the message data gets added to the boards' state as a part of the cards collection and is displayed to the user without having to make an additional get request to the API, which would be timely and unnecessary.
How did you learn how to use the API?	I read through the documentation and I sent test calls with Postman and experimented with printing the responses to the console so I could have a good idea of what data would be returned and what the structure would look like.
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 lifecycle method componentDidMount to place the get request because I wanted to make sure that the board was already mounted before I pulled the information for the cards since they exist within the board. This helps provide a better user experience since API calls can take a noticeable amount of time - by having the board load first, it helps the user understand that info is coming and that the whole page isn't broken.
Explain the purpose of a Snapshot test.	Snapshot testing allows for the capturing of what the rendered HTML would look like as HTML tags, and not pixel by pixel. This allows the programmer to compare the changes they have made against what the page used to look like, which is helpful in identifying if the changes that have been made are correct.
What purpose does Enzyme serve in testing a React app?	Enzyme helps with serialization of the snapshots for easier comparison and it is also useful for more easily making assertions within our test.
Summary

[CheezItMan]

Inspiration Board

What We're Looking For

Feature	Feedback
Core Requirements
Git hygiene	Good number of commits and good commit messages
Comprehension questions	Check, well answered
General
Card Component renders the data provided as props	Check
Board Component takes a URL and renders the list of Cards and passes in callback functions	Check
NewCardform Component is a controlled form and uses a callback function to return entered data to the parent component	Check
API
GET request made in componentDidMount	Check
DELETE request made in callback function	Check
POST request made in callback function passed to NewCardForm component.	Check
Snapshot testing	Check, plus testing events
Styling	Basic styling in place, but it could be improved significantly. The messages and form look a bit awkward where they are.
Overall	Well done, you hit the learning goals of the project. Great work!