<file_sep>import React from "react"

// components
import VideoItem from "./VideoItem"

const VideoList = ({ videos, onSelectVideo }) => {
  const videoItems = videos.map((video) => (
    <VideoItem key={video.id.videoId} video={video} onSelectVideo={onSelectVideo} />
  ))
  return <div className="ui relaxed divided list">{videoItems}</div>
}

export default VideoList
<file_sep>import React from "react"

const Spinner = ({ msg }) => {
  return (
    <div className="ui active inverted dimmer">
      <div className="ui text big loader">{msg}</div>
    </div>
  )
}

Spinner.defaultProps = {
  msg: "Application is Loading...",
}

export default Spinner
<file_sep>import React, { useState, useEffect } from "react"

// components
import Footer from "./Footer"
import SearchBar from "./SearchBar"
import Spinner from "./Spinner"
import VideoDetails from "./VideoDetails"
import VideoList from "./VideoList"

// styles
import "./App.css"
// hooks
import useVideo from "../hooks/useVideos"

const App = () => {
  const [isLoading, videos, setVideos] = useVideo("python")
  const [selectedVideo, setSelectedVideo] = useState(null)

  useEffect(() => {
    setSelectedVideo(videos[0])
  }, [videos])

  if (selectedVideo) {
    return (
      <>
        <div className="ui container">
          <SearchBar onSearchSubmit={setVideos} isLoading={isLoading} />
          <div className="ui grid">
            <div className="ui row">
              <div className="eleven wide column">
                <VideoDetails video={selectedVideo} />
              </div>
              <div className="five wide column">
                <VideoList videos={videos} onSelectVideo={setSelectedVideo} />
              </div>
            </div>
          </div>
        </div>
        <Footer />
      </>
    )
  }
  return <Spinner />
}

export default App
<file_sep># Screenshots

A live version of this project is available at [search-youtube-videos-with-reactjs.netlify.app](https://search-youtube-videos-with-reactjs.netlify.app/)

![application preview](https://raw.githubusercontent.com/StephenRoille/project-428016a805-part-1/master/screenshots/preview.png)

# Usage

Clone this repo to your computer.

```shell
git clone https://github.com/StephenRoille/project-428016a805-part-1.git youtube-search
```

Create a `.env` file and set a private Youtube token to allow your application to query the Youtube API,

```ini
REACT_APP_YOUTUBE_TOKEN='<...>'
```

Install all the dependencies,

```shell
npm install
```

Start the development server,

```shell
npm run start
```

Your Youtube token is automatically loaded by `React`.

To create a production build simply run,

```shell
npm run build
```

This command creates a `build` directory that you can serve from a web server ([Apache](https://www.apache.org/), [nginx](https://www.nginx.com/)) or using a CDN platform ([Netlify](https://www.netlify.com/))

# Dependencies

This project has the following dependencies,

1. `axios` (Youtube API requests)
2. `react` (user interface)

# Reference

Based on the [Modern React with Redux](https://www.udemy.com/course/react-redux/) course by <NAME>.
