Skip to content

Conversation

@paulentine
Copy link

TREK

Congratulations! You're submitting your assignment!

Comprehension Questions

Question Answer
What does it mean for code to be asynchronous? It means that that code does not need to be loaded at the same time, some can be loaded later and actions can happen as they load.
Describe a piece of your code that executes asynchronously. How did this affect the way you structured it? Everything fetched by Axios is ran asynchronously; I structured this by breaking it down to two steps: loading and displaying fetched data.
What kind of errors might the API give you? How did you choose to handle them? Network error is one possible error (e.g. you are not connected to the internet when you click load trips). I used reportStatus & reportError functions to catch & display the error to the user should one occur.
Suppose you needed to routinely find a specific Trip in the list by its ID field. Would it be advantageous to keep the list in order by the id field? Explain why or why not. I don't believe so, since we can target any specific element with jQuery.

@CheezItMan
Copy link

TREK

What We're Looking For

Feature Feedback
Core Requirements
Git hygiene Good commit messages, reasonable number of commits
Comprehension questions Check, asynchronous code is code that is run at an undetermined time, not loaded. That's actually another concept.
Functionality
Click a button to load and view a list of trips Check
Clicking the "load" button twice does not cause each trip to display twice Check
Click a trip to load and view trip details Check
Clicking a different trip loads different details Check
Open network tab, then fill out a form to reserve a spot Check
Submitting the form only sends one POST request DOH! If I click around several trips, submitting the form will send one post request for each trip I'd clicked on. Oh man am I going to have a long vacation!
Errors are reported to the user Check
Site is clearly laid out and easy to navigate Easy to navigate, but the trip list is a little messy.
Under the Hood
Callback functions are not nested more than 2 levels deep Check
Callback functions are given descriptive names Check
Code is generally well-organized and easy to read Check
All API calls have both success and error callbacks defined Check
Optional but recommended: closures are used to keep track of which trip is selected Nice!
HTML is semantic Check
CSS is DRY, uses CSS Grid, Flexbox, and/or Bootstrap Minimal styling
Overall You did well and accomplished the learning goals here. Check my inline comments for your bugs. Take note of them and let me know if you have questions.

displayTripDetails(trip);

reportStatus(`Successfully loaded details for: ${trip.name}`);
$('#reservation-form').submit(() => reserveTrip(trip))

Choose a reason for hiding this comment

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

So every time I click on a trip you add another event handler which will run when the form gets submitted. You should use $('#reservation-form').off() to clear out any existing event handlers first.

Oh and nice closure!

})
.catch((error) => {
console.log(error.response);
if (error.response.data && error.response.data.errors) {

Choose a reason for hiding this comment

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

This should include: if (error.response && error.response.data && error.response.data.errors) {

just so that if there's a network error the error can be reported. (no response object for a network error).

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