Challenge 4

.env

@@ -0,0 +1 @@
+REACT_APP_API_YOUTUBE_KEY = AIzaSyAOsyZMq5msH04OZ9W7Y_fQX--TictP_v8

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/components/App/App.jsx

@@ -0,0 +1,36 @@
+import React, { useReducer } from 'react';
+import NavBar from '../NavBar';
+import HomePage from '../../pages/Home';
+import SearchContext from '../../state/SearchContext';
+import SearchReducer from '../../state/SearchReducer';
+import LocalThemeProvider from '../../state/ThemeContext.provider';
+
+function App() {
+  // const [search, setSearch] = useState('Wizeline');
+  const [state, dispatch] = useReducer(SearchReducer, {
+    search: 'Wizeline',
+  });
+
+  const handleSearch = (e) => {
+    const searchValue = e.target.value;
+    dispatch({
+      type: 'SEARCH_VIDEOS',
+      payload: {
+        search: searchValue,
+      },
+    });
+  };
+
+  return (
+    <div>
+      <LocalThemeProvider>
+        <SearchContext.Provider value={{ state, dispatch }}>
+          <NavBar search={handleSearch} />
+          <HomePage />
+        </SearchContext.Provider>
+      </LocalThemeProvider>
+    </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,24 @@
+import React from 'react';
+import { FcManager } from 'react-icons/fc';
+import styled from 'styled-components';
+import InputSearch from '../InputSearch';
+
+const NavBarStyled = styled.div`
+  background-color: ${(props) => props.theme.primary};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+function NavBar({ search }) {
+  return (
+    <NavBarStyled>
+      <InputSearch search={search} />
+      <div>
+        <FcManager size="60" />
+      </div>
+    </NavBarStyled>
+  );
+}
+
+export default NavBar;

src/components/NavBar/index.js

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

src/components/VideoCard/VideoCard.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Container, Title } from './VideoCard.styles';
+
+const VideoCard = ({ video, handleVideoSelected }) => {
+  console.log(`Hello;${video}`);
+  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,16 @@
+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: ${(props) => props.theme.primary};
+    color: ${(props) => props.theme.text};
+  }
+`;
+
+export const Title = styled.div`
+  color: ${(props) => props.theme.textcolor};
+`;

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: ${(props) => props.theme.textcolor};
+`;
+
+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,24 @@
+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';