Earth - Ringo & Schanen

[schanenR]

Video Store Consumer

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
Paste a link to the PR for your API	#31
For each person in your pair, describe something you learned from your partner during this project	Schanen was the one who identified the need for a Store component in our project, after we originally tried using App as our container component. She also noticed, which I missed, that App was written as a class component. This helped clarify for me some of the structuring needs in a project and also the differences between class and functional components. I loved seeing how Ringo implemented the search functionality. At the beginning of this project I didn't totally understand how all the pieces were fitting together. Ringo helped me better understand the dependencies and the flow of data.
What was one area of React you gained more clarity on during this assignment?	I gained a greater understanding of the potential of React.js and power of a React.js SPA.
Describe how you solved the problem of having lists of movies that look mostly the same but have different content	We had two different components responsible for creating the different lists, VideoLibrary and SearchResultList. Both of them passed props down to the same component, Video, to render similar-looking individual movie items, because we wanted to keep our code DRY and reuse an existing component rather than make a second, very similar, SearchResult component. The chief difficulty here was that the button returned as part of the Video component was supposed to have different text and call function depending on whether it was a search result or a video in the library, and if it was in the library, whether it was selected or unselected. We solved this by having a function that constructed our button for us based on the props that were handed down.
Describe how you handled rentals with React	Video and Customer selections were made in the Video and Customer components. The selection object held the necessary fields to make the post requests to our rails API. At the Store component these values were passed to the Rental component. Here, the post request were made for check-out and return. If a successful post request was made state functions passed from Store would reset the selected customer and video to null & a success alert flashed. If the request failed the user received an error alert.
Describe a DOM event your application handled	The SearchForm component used event handlers to track the user input and submission of search. When the text input was changed, the event handler set the value of the target in the component’s state.
Did you use any functional stateless components? What for?	Video and Customer were both stateless functional components. Their role was to take in information about one discrete item (a specific video or customer) and package it together with any necessary event handlers so that it could be rendered as part of a collection of similar components. To do that, they only need information that gets handed down to them and remains constant, so they only need props and not state.
Did you use any container components? What for?	We used the container component Store to house our library and customer list, so that when a video or a customer was selected, the selections could be passed up to the Store level in order to make a rental that involved information from two different components. CustomerList, SearchResultList, and VideoLibrary were also container components used to produce multiple instances of similar child components.
Do you have any recommendations on how we could improve this project for the next cohort?	I would have loved to have a little more time to focus on concept and design. Ideally this project would not fall on a short week with Capstone Proposals in the works as well. -- Agreed, I liked that this project was open ended and allowed a lot of creativity, but ultimately felt like I didn’t have the time to be as creative as I would have liked.