Create Video Search

Add Search Bar
Add Axios to fetch Youtube API
Add Style with semantic UI
display youtube thumbnails and name with videoList and VideoItem components
Add VideoItem css
Add VideoDetails Component to add Callbacks and display VideoDetail in App
Add some style to VideoDetails

.gitignore

@@ -12,12 +12,23 @@
 /build
 
 # misc
+.idea/
+.vscode/
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
+*.tgz
+my-app*
+template/src/__tests__/__snapshots__/
+lerna-debug.log
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/.changelog
+.npm/
+yarn.lock

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",

public/index.html

@@ -9,6 +9,13 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
+      integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/apis/youtube.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+const KEY = 'AIzaSyBJDGB39IlFbvrMJ1rC8PIIzvsXePaKSi8';
+
+export default axios.create({
+  baseURL: 'https://www.googleapis.com/youtube/v3',
+  params: {
+    part: 'snippet',
+    type: 'video',
+    maxResults: 5,
+    key: KEY,
+  },
+});
+

src/components/App.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import SearchBar from './SearchBar';
+import youtube from '../apis/youtube';
+import VideoList from './VideoList';
+import VideoDetail from './VideoDetail';
+
+class App extends React.Component {
+  state = { videos: [], selectedVideo: null };
+
+  onTermSubmit = async term => {
+    const response = await youtube.get('/search', {
+      params: {
+        q: term,
+      }
+    });
+
+    this.setState({ videos: response.data.items });
+  };
+
+  onVideoSelect = (video) => {
+    this.setState({ selectedVideo: video })
+  };
+
+  render() {
+    return (
+    <div className="ui container" style={{ marginTop: '30px' }}>
+      <SearchBar onFormSubmit={this.onTermSubmit} />
+      <VideoDetail video={this.state.selectedVideo} />
+      <VideoList 
+        onVideoSelect={this.onVideoSelect}
+        videos={this.state.videos}
+      />
+    </div>
+    )
+  }
+}
+
+export default App;

src/components/SearchBar.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+class SearchBar extends React.Component {
+  state = { term: '' };
+
+  onInputChange = (event) => {
+    this.setState({ term: event.target.value })
+  };
+
+  onFormSubmit = event =>{
+    event.preventDefault();
+
+    this.props.onFormSubmit(this.state.term)
+  };
+
+  render () {
+    return (
+    <div className="search-bar ui segment">
+      <form onSubmit={this.onFormSubmit} className="ui form">
+        <div className="field">
+          <label>Video Search</label>
+          <div className="ui icon input">
+            <input 
+              className="prompt"
+              type="text" placeholder="Search videos..." 
+              value={this.state.term}
+              onChange={this.onInputChange}
+              />
+            <i className="search icon"></i>
+          </div>
+        </div>
+      </form>
+    </div>
+    );
+  }
+}
+
+export default SearchBar;

src/components/VideoDetail.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const VideoDetail = ({ video }) => {
+  if (!video) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+  <div>
+    <div className="ui segment">
+      <h4 className="ui header">{video.snippet.title}</h4>
+      <p className="">{video.snippet.description}</p>
+    </div>
+  </div>
+  );
+};
+
+export default VideoDetail;

src/components/VideoItem.css

@@ -0,0 +1,9 @@
+.video-item {
+  display: flex !important;
+  align-items: center;
+  cursor: pointer;
+}
+
+.video-item.item img {
+  max-width: 180px;
+}

src/components/VideoItem.js

@@ -0,0 +1,15 @@
+import './VideoItem.css';
+import React from 'react';
+
+const VideoItem = ({ video, onVideoSelect }) => {
+  return (
+    <div onClick={() => onVideoSelect(video)} className='video-item item'>
+      <img className='ui image' alt={video.snippet.description} src={video.snippet.thumbnails.medium.url} />
+      <div className='content'>
+        <div className='header'>{video.snippet.title} </div>
+      </div>
+    </div>
+  )
+};
+
+export default VideoItem;

src/components/VideoList.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import VideoItem from './VideoItem';
+
+const VideoList = ({ videos, onVideoSelect }) => {
+  const renderedList = videos.map((video) => {
+    return <VideoItem onVideoSelect={onVideoSelect} video={video} />;
+  });
+
+  return <div className='ui relaxed divided list'>{renderedList}</div>
+};
+
+export default VideoList;

src/index.js

@@ -1,17 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import ReactDOM from 'react-dom';
+import App from './components/App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+ReactDOM.render(
+  <App  />,
+  document.querySelector('#root')
+);