Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ampers: Nora Peters #41

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Ampers: Nora Peters #41

wants to merge 14 commits into from

Conversation

npeters5
Copy link

Inspiration Board

Congratulations! You're submitting your assignment!

Comprehension Questions

Question Answer
Explain the steps in creating a new Card from the form. The Board component's render method creates a NewCardForm component, adding addCard as a prop callback function. The NewCardForm component renders a form with two input fields: text field for the message and a select/drop-down menu for the emoji (using the emoji library to convert text into emoji images). The value of these fields is tied to corresponding states by the same name, and the onChange event on each of those fields updates state as the values of those input fields change. Then upon form submission, the function onFormSubmit is called, which passes the entire state of the form component to the addCard callback. addCard makes an axios post request, and uses the JSON response to update the local variable cards which holds all of the data that is passed on when making Card components inside renderCardList function.
How did you learn how to use the API? I read the documentation and practices GET and POST requests in 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 used the React hook componentDidMount(); because it is called during the initial rendering/mounting of the component, so its a great place to make an API GET request and update the state of the component so that it is rendered with the most current data.
Explain the purpose of a Snapshot test. I found this explanation on the internets, and I really like it! (also, I do understand it) - "Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. A typical snapshot test case for a mobile app renders a UI component, takes a screenshot, then compares it to a reference image stored alongside the test. The test will fail if the two images do not match: either the change is unexpected, or the screenshot needs to be updated to the new version of the UI component."
What purpose does Enzyme serve in testing a React app? Enzyme is a library that makes it easier to manipulate, traverse and make assertions on our React components. It's made to work similar to jQuery for selecting, rendering and manipulating the DOM.

@tildeee
Copy link

tildeee commented Jul 6, 2018

Inspiration Board

What We're Looking For

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

Nora! This code looks good!

It's organized well and the code looks clean. In general it works well and looks great.

Overall, good job with this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants