Video Store - Caroline and Karinna - Octos

[cmn53]

Video Store Consumer

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
Paste a link to the PR for your API	Ada-C9/VideoStoreConsumer-API#12
For each person in your pair, describe something you learned from your partner during this project	Caroline: I learned about custom model validations in Rails. Karinna: I learned that the CORS extension is very important when sending API calls and requests from the same place.
What was one area of React you gained more clarity on during this assignment?	We learned about the React router and how to make an SPA look more extensive.
Describe how you solved the problem of having lists of movies that look mostly the same but have different content	We decided to use the same Movie component to display info in both the search results and the library. If we had wanted to display different information for the library and search results, we could have either created different components or did something similar to what we did with the background colors on the nav bar where the className is dependent on the current path and applied a display: none attribute the elements that we didn't want shown in either the library or search results.
Describe how you handled rentals with React	We had options for checking in and checking out a movie. In App, the state held the selected movie and customer. Movies or customers could be selected from the library or customer list by clicking on the element which invoked a callback function which was defined in App and passed through props all the way to the Movie or Customer object. This callback updated the App state. When the checkout or checkin button was clicked, we sent an API call to our Rails app to checkout or checkin the movie and reset the App state.
Describe a DOM event your application handled	When a movie was clicked in the library, a callback was invoked to update the state in the App component with the selected movie object, and a className (to display a yellow background and black text) is added only when the id of the selected movie and the id of the movie stored in state are the same.
Did you use any functional stateless components? What for?	There was no need for the Home component/welcome page to hold any state, so we made it a functional stateless component. Routes may be one as well...
Did you use any container components? What for?	Search is a container component because it only renders the SearchForm and SearchResults components, manages the state, and passes them as props to the SearchResults component.
Do you have any recommendations on how we could improve this project for the next cohort?