Kat - Inspiration-Board - Octos

[kseastman]

Inspiration Board

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
Explain the steps in creating a new Card from the form.	Form input modifies the text and emoji entries for the form's state, form submit uses a submit handler that references a callback function to add the card. An axios request, including the card information, is posted to the API, and the collection of cards is modified to include the newly created card.
How did you learn how to use the API?	Reading the API documentation, and exploring the results in console and PostMan.
What function did you use to place the GET request from the API to get the list of cards? Why use that function?	I created a helper function that was responsible for both the board and the card list get requests. I then called that helper function from my componentDidMount and componentDidUpdate functions, because in the first case it prevents the page from displaying junk data or stalling out while the API request finishes. In the second, it allowed the boards to be re-rendered based on the current selection.
Explain the purpose of a Snapshot test.	To compare the html of the snapshot against any subsequent changes. This allows us to refactor and verify that our changes haven't broken anything.
What purpose does Enzyme serve in testing a React app?	Enzyme creates snapshots.
Summary	deployed at: https://kseastman.github.io/inspiration-board/

[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, Enzyme is used to render components shallowly, which makes Jest snapshot tests more usable. It also lets you select elements within a component for testing events.
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 good tests with mocking axios
Styling	Very nicely done.
Overall	Awesome work! You hit all the learning goals and a number of extras. Great work!

[CheezItMan]

Outstanding!

[CheezItMan]

Why do 2 API calls?

[kseastman]

Forgot to refactor after implementing the functionality to allow a user to change the inspiration board. I was following the whole "make it work, make it right, make it pretty" mantra. It works, but it is not right or pretty. :*(