access-youtube-api

Accessing Youtube API with Axios

 -----   -->Send data for videos related to dogs-->    ----------
| APP |                                               | YOUTUBE |
 -----             <---Here you go!<---               |   API   |
                                                       ----------

Youtube API Docs
-Docs don't make the instructions clear regarding search

-Under Request, make a GET request to the URL: https://www.googleapis.com/youtube/v3/search
-When request is made, pass in a number of params
  -part = snippet: what info to retrieve about each video, send back some snippet summary of entire video
  eg: title, link, description, author, etc

  -maxResult: Number of results to get back from search process(Docs is defaulted at 25)

  -q: query, search term to make


COMMUNICATE FROM CHILD TO PARENT

                        APP
                       state
                  videos | [video...]
            selectedVideo | video        <---Video object retrieved from Youtube API
                         |
            ------------ | ------------
            |            |            |
        SearchBar   VideoDetail   VideoList
                                      |
                         ------------ | ------------
                         |            |            |
                    VideoItem     VideoItem     VideoItem


-App component currently has State Object with a single prop on it: Video
-Add 2nd prop calls selectedVideo
  -Take video object and assign it to selectedVideo prop
  -Anytime there is a selectedVideo prop, make sure that video is passed down to the VideoDetail Component
  -Tells VideoDetail component what needs to show on the screen

-Complicated: understand how to update selectedVideo prop with a user clicks on a single Video
1. At the very top is the App component, has list of videos passed as prop to VideoList
2. App passes a reference of a callback() down to VideoList(onVideoSelect prop)
3. VideoList will take cb() and pass it down to each video item
4. Each video item currently recieves a props object with a single video
5. Each video item will now take a 2nd prop called onVideoSelect(same cb() from App to VideoList)

*Adding new method to App Component
*And passing a reference to that method/function
*Down first to the VideoList then to the VideoItem
*Any time a video item is clicked, it will tell the VideoItem to call the onVideoSelect cb()
*Then it will pass in the video that was also called
*Finally the method/function on the App component is invoked with video object, the App Component will
 update its State and to whatever video was clicked on

*When Communicating from Child to Parent, make use of callback()(onVideoSelect)