Brenda Rios - Inspiration-board- Octos

[brendarios]

Inspiration Board

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
Explain the steps in creating a new Card from the form.	Board passed the function addCardCallback to NewCardForm as a prop. The NewCardForm has a onFormSubmit function that will use this callback function and trigger the addCard function into the Board component. The API and board will then be updated with the new card.
How did you learn how to use the API?	The delete request by looking at the resources provided, and for the get and post requests by following the Ada pets exercise.
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 componentDidMount. This function is invoked after a component is inserted into the tree and the component rendering does not depend on the API call.
Explain the purpose of a Snapshot test.	The purpose of the Snapshot test is to verify that the UI does not change unexpectedly. A snapshot test case renders a UI component, takes a screenshot, then compares it to a reference image stored alongside the test.
What purpose does Enzyme serve in testing a React app?	the library Enzyme provides the mount and shallow functions that will help and see if the snapshots matches the expected HTML.
Summary	Great project! Helped to reinforce what we have learned of React. I can't wait to see how it will be to work rails and react together.

[Hamled]

Inspiration Board

What We're Looking For

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

[Hamled]

I think we could remove this status part of the Board component's state. This is because we're already tracking the status message state in the App component (and indeed, that's where the data is being used to render the Status component).

So basically, this bit of state data is redundant and is not currently being used by your code.

[Hamled]

This could probably be simplified to just return card.card;.

[Hamled]

Good use of closures to easily re-use the card data from the form (in the card variable), to later on add that data into state even though the API did not return a response which included all of the card data.

[Hamled]

This is good, however we could probably include more snapshot tests.

Specifically, we frequently want to have snapshot tests for each of the props that a component receives which have some impact on the visual result. In this case that would be the text and emoji props.

Having at least one test for each of those props (and maybe one for when both are set), will help us to cover more possible outcomes from rendering a component. This will in turn help ensure that we don't accidentally break the rendering for some part of the component.

As an example, if we accidentally removed line 25 from Card.js (<p className="card_content-text">{this.props.text}</p>) then our card would not render correctly, but this test might continue to pass.