Mini challenge 5 routing

.env

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

.eslintrc

@@ -3,7 +3,7 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error",
-    "react/jsx-filename-extension": "error",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",

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,69 @@
+import React, { useReducer } from 'react';
+import { Switch, Route, BrowserRouter } from 'react-router-dom';
+import styled from 'styled-components';
+import AuthProvider from '../../providers/Auth/Auth.provider';
+import VideoDetail from '../VideoDetail';
+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';
+import VideoProvider from '../../providers/Video/Video.provider';
+import Login from '../../pages/Login/Login';
+import FavoritesProvider from '../../providers/Favorites/Favorites';
+import FavoriteVideos from '../../pages/FavoriteVideos/FavoriteVideos';
+import FavoriteVideoDetail from '../../pages/FavoriteVideoDetail/FavoriteVideoDetail';
+import Private from '../Private/Private.component';
+import NotFound from '../../pages/NotFound/NotFound';
+
+function App() {
+  const [state, dispatch] = useReducer(SearchReducer, {
+    search: 'Wizeline',
+    video: null,
+  });
+
+  const AppStyled = styled.div`
+    width: 100%;
+    height: 100vh;
+  `;
+
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <AppStyled>
+          <VideoProvider>
+            <LocalThemeProvider>
+              <FavoritesProvider>
+                <SearchContext.Provider value={{ state, dispatch }}>
+                  <NavBar />
+                  <Switch>
+                    <Route exact path="/">
+                      <HomePage />
+                    </Route>
+                    <Route exact path="/video">
+                      <VideoDetail />
+                    </Route>
+                    <Route exact path="/login">
+                      <Login />
+                    </Route>
+                    <Private exact path="/favorites">
+                      <FavoriteVideos />
+                    </Private>
+                    <Private exact path="/favoritedetails">
+                      <FavoriteVideoDetail />
+                    </Private>
+                    <Route path="*">
+                      <NotFound />
+                    </Route>
+                  </Switch>
+                </SearchContext.Provider>
+              </FavoritesProvider>
+            </LocalThemeProvider>
+          </VideoProvider>
+        </AppStyled>
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}
+
+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,26 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { VideoContext } from '../../providers/Video/Video.provider';
+
+const InputSearchStyled = styled.div`
+  margin-left: 50px;
+`;
+
+export default function InputSearch() {
+  const { searchTerm, setSearchTerm } = useContext(VideoContext);
+
+  const handleChangeSearchInput = (value) => {
+    setSearchTerm(value);
+  };
+
+  return (
+    <InputSearchStyled>
+      <input
+        type="text"
+        placeholder="Search"
+        onChange={(event) => handleChangeSearchInput(event.target.value)}
+        value={searchTerm}
+      />
+    </InputSearchStyled>
+  );
+}

src/components/InputSearch/index.js

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

src/components/NavBar/NavBar.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Link, useHistory } from 'react-router-dom';
+import { FcManager, FcHome, FcLike } from 'react-icons/fc';
+import { GiExitDoor } from 'react-icons/gi';
+import InputSearch from '../InputSearch';
+import { useAuth } from '../../providers/Auth/Auth.provider';
+import { NavBarStyled, LinkText } from './NavBar.styles';
+
+function NavBar() {
+  const { authenticated, logout } = useAuth();
+  const history = useHistory();
+
+  function RemoveAuth(event) {
+    event.preventDefault();
+    logout();
+    history.push('/');
+  }
+
+  return (
+    <NavBarStyled>
+      <InputSearch />
+      <div>
+        {authenticated ? (
+          <>
+            <Link to="/">
+              <FcHome size="50" />
+            </Link>
+
+            <Link to="/favorites">
+              <LinkText>
+                <FcLike size="50" />
+              </LinkText>
+            </Link>
+            <Link to="/" onClick={RemoveAuth}>
+              <LinkText>
+                <GiExitDoor size="60" />
+              </LinkText>
+            </Link>
+          </>
+        ) : (
+          <div>
+            <Link to="/">
+              <FcHome size="50" />
+            </Link>
+            <Link to="/login">
+              <FcManager size="60" />
+            </Link>
+          </div>
+        )}
+      </div>
+    </NavBarStyled>
+  );
+}
+
+export default NavBar;

src/components/NavBar/NavBar.styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const NavBarStyled = styled.div`
+  background-color: ${(props) => props.theme.navBar};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+`;
+
+export const LinkText = styled.span`
+  cursor: hand;
+  color: ${(props) => props.theme.cardBg};
+`;

src/components/NavBar/index.js

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

src/components/VideoCard/VideoCard.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Container, Title } from './VideoCard.styles';
+
+const VideoCard = ({ video, handleVideoSelected, isFavorite }) => {
+  if (!video) {
+    return <div>No video </div>;
+  }
+
+  return (
+    <Container>
+      <Link
+        to={isFavorite ? '/favoritedetails' : '/video'}
+        onClick={() => handleVideoSelected(video)}
+      >
+        <div>
+          <img alt="" src={video.snippet.thumbnails.default.url} />
+          <div>
+            <Title>{video.snippet.title}</Title>
+          </div>
+        </div>
+      </Link>
+    </Container>
+  );
+};
+
+export default VideoCard;

src/components/VideoCard/VideoCard.styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid #cccccc;
+  border-radius: 5px;
+  padding: 20px;
+  max-width: 320px;
+  min-width: 320px;
+  margin: 20px;
+  background-color: ${(props) => props.theme.cardBg};
+  a {
+    text-decoration: none;
+  }
+
+  :hover {
+    background-color: ${(props) => props.theme.overBg};
+  }
+  box-shadow: 0px 0px 5px 1px black;
+`;
+
+export const Title = styled.p`
+  color: ${(props) => props.theme.textcolor};
+  text-decoration: none;
+  font-style: normal;
+  font-size: 20px;
+  align-items: left;
+  color: ${(props) => props.theme.text};
+  font-weight: bold;
+`;

src/components/VideoCard/index.js

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