Skip to content

Laura | Nodes#23

Open
lauracodecreations wants to merge 11 commits intoAda-C10:masterfrom
lauracodecreations:master
Open

Laura | Nodes#23
lauracodecreations wants to merge 11 commits intoAda-C10:masterfrom
lauracodecreations:master

Conversation

@lauracodecreations
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. 1) create an object that has the data collected from the form (this is saved in the state of the form) 2) pass this object to the function (addCard function) that does the addition of the card to the board and API 3) the addCard function makes a POST request by passing the URL that post data and the object to be posted. If the POST request was successful, it will add an ID to the new card, and it will push the card to the current state of the board. If it was not successful, it will update the current state errorMessages will the error received from the request.
How did you learn how to use the API? I learned to use the API by reading the documentation and testing my assumptions 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 componentDidMount() function because it is invoked immediately after a component is mounted (inserted into the tree).
Explain the purpose of a Snapshot test. The purpose of Snapshot test is to prevent you from accidentally breaking code that was working before.
What purpose does Enzyme serve in testing a React app? It is a library that provides more convenient testing syntax, as well as some advanced functionality making it easier to manipulate, traverse and make assertions on our React components. We used Enzyme's shallow and mount function to create the snapshot.

.catch((error) => {
console.log(error.message);
this.setState({
errorMessage: error.message,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't seem to be displaying this error message anywhere.

emoji = card.emoji
}
return (
<Card text = {card.text} emoji= {emoji} deleteCardCallback={this.removeCard} id={card.id}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No key field defined here!

.then( (response) => {
console.log(response)
const myNewCard = response.data;
newCard.id = myNewCard.id

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be:

        newCard.id = myNewCard.card.id

This actually causes new cards added to the board to be unable to be deleted until the browser is refreshed.

@CheezItMan
Copy link

Inspiration Board

What We're Looking For

Feature Feedback
Core Requirements
Git hygiene Good number of commits and good commit messages
Comprehension questions Check
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, but you have a bug here.
Snapshot testing Check
Styling Check, very... vertical...
Overall You hit most of the learning goals for the project, with a small bug in adding new cards. See my inline notes.

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