Challenge 3

package.json

@@ -6,11 +6,14 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "axios": "^0.21.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/apis/youtube.js

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

src/components/App/App.jsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import NavBar from '../NavBar';
+import HomePage from '../../pages/Home';
+import youtube from '../../apis/youtube';
+
+function App() {
+  const [search, setSearch] = useState('Wizeline');
+  const [videos, setVideos] = useState([]);
+
+  const handleSearch = (e) => {
+    setSearch(e.target.value);
+    console.log(search);
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      const response = await youtube.get('/search', {
+        params: {
+          q: search,
+        },
+      });
+      console.log(response.data.items);
+      setVideos(response.data.items);
+    }
+    fetchData();
+  }, [search]);
+  console.log(videos);
+  return (
+    <div>
+      <NavBar search={handleSearch} />
+      <HomePage videos={videos} />
+    </div>
+  );
+}
+
+export default App;

src/components/App/index.js

@@ -1 +1 @@
-export { default } from './App.component';
+export { default } from './App';

src/components/InputSearch/InputSearch.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const InputSearchStyled = styled.div`
+  margin-left: 50px;
+`;
+
+export default function InputSearch({ search }) {
+  return (
+    <InputSearchStyled>
+      <input type="text" placeholder="Search" onChange={search} />
+    </InputSearchStyled>
+  );
+}

src/components/InputSearch/index.js

@@ -0,0 +1 @@
+export { default } from './InputSearch';

src/components/NavBar/NavBar.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FcManager } from 'react-icons/fc';
+import InputSearch from '../InputSearch';
+import { NavBarStyled } from './NavBar.styles';
+
+function NavBar({ search }) {
+  return (
+    <NavBarStyled>
+      <InputSearch search={search} />
+      <div>
+        <FcManager size="60" />
+      </div>
+    </NavBarStyled>
+  );
+}
+
+export default NavBar;

src/components/NavBar/NavBar.styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const NavBarStyled = styled.div`
+  background-color: #5472ba;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const NavRightIconStyled = styled.div``;

src/components/NavBar/index.js

@@ -0,0 +1 @@
+export { default } from './NavBar';

src/components/VideoCard/VideoCard.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Container, Title } from './VideoCard.styles';
+
+const VideoCard = ({ video, handleVideoSelected }) => {
+  return (
+    <Container>
+      <div role="button">
+        <img alt={video.snippet.description} src={video.snippet.thumbnails.default.url} />
+        <div>
+          <Title>{video.snippet.title}</Title>
+        </div>
+      </div>
+      <button type="button" onClick={() => handleVideoSelected(video)}>
+        View details
+      </button>
+    </Container>
+  );
+};
+
+export default VideoCard;

src/components/VideoCard/VideoCard.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  border-bottom: 1px solid #cccccc;
+  border-radius: 5px;
+  padding: 20px;
+  text-align: left;
+  :hover {
+    background-color: #374b7a;
+  }
+`;
+
+export const Title = styled.div`
+  color: white;
+`;

src/components/VideoCard/index.js

@@ -0,0 +1 @@
+export { default } from './VideoCard';

src/components/VideoDetail/VideoDetail.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const VideoStyled = styled.div`
+  .video {
+    margin-top: 50px;
+    width: 100%;
+    height: 300px;
+  }
+`;
+const Title = styled.h4`
+  color: #b9b1b1;
+`;
+
+const VideoDetail = ({ video }) => {
+  if (!video) {
+    return (
+      <div>
+        <Title>Select a video</Title>
+      </div>
+    );
+  }
+  const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;
+  return (
+    <VideoStyled>
+      <iframe className="video" src={videoSrc} title="Video" />
+
+      <div>
+        <Title>{video.snippet.title}</Title>
+        <Title>{video.snippet.description}</Title>
+      </div>
+    </VideoStyled>
+  );
+};
+
+export default VideoDetail;

src/components/VideoDetail/index.js

@@ -0,0 +1 @@
+export { default } from './VideoDetail';

src/components/VideoList/VideoList.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import VideoCard from '../VideoCard';
+
+const VideoListContainer = styled.div`
+  text-align: center;
+`;
+
+export default function VideoList({ videos, handleVideoSelected }) {
+  if (!videos) {
+    return <div />;
+  }
+  const renderedVideos = videos.map((video) => {
+    return (
+      <VideoCard
+        key={Math.random()}
+        video={video}
+        handleVideoSelected={handleVideoSelected}
+      />
+    );
+  });
+  return <VideoListContainer>{renderedVideos}</VideoListContainer>;
+}

src/components/VideoList/index.js

@@ -0,0 +1 @@
+export { default } from './VideoList';