Mini challenge 5

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vercel

coverage.txt

@@ -0,0 +1,11 @@
+yarn run v1.22.10
+$ react-scripts test --coverage
+No tests found related to files changed since last commit.
+----------|----------|----------|----------|----------|-------------------|
+File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
+----------|----------|----------|----------|----------|-------------------|
+All files |        0 |        0 |        0 |        0 |                   |
+----------|----------|----------|----------|----------|-------------------|
+
+
+Done in 7.95s.

package.json

@@ -6,11 +6,16 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-query": "^3.13.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "sanitize.css": "^12.0.1",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -57,5 +62,8 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

src/components/App/App.component.jsx

@@ -1,15 +1,21 @@
 import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Switch, Route, useRouteMatch } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
-import AuthProvider from '../../providers/Auth';
-import HomePage from '../../pages/Home';
+import AuthProvider, { useAuth } from '../../providers/Auth';
 import LoginPage from '../../pages/Login';
 import NotFound from '../../pages/NotFound';
-import SecretPage from '../../pages/Secret';
-import Private from '../Private';
-import Fortune from '../Fortune';
 import Layout from '../Layout';
 import { random } from '../../utils/fns';
+import { YouTubeProvider } from '../YouTube/YouTubeProvider';
+import MyThemeProvider from './MyThemeProvider';
+import VideoList from '../YouTube/List/VideoList';
+import VideoDetail from '../YouTube/Detail/VideoDetail';
+
+const ProtectedRoute = (props) => {
+  const { authenticated } = useAuth();
+  return authenticated ? <Route {...props} /> : <LoginPage />;
+};
 
 function App() {
   useLayoutEffect(() => {
@@ -33,26 +39,50 @@ function App() {
   return (
     <BrowserRouter>
       <AuthProvider>
-        <Layout>
-          <Switch>
-            <Route exact path="/">
-              <HomePage />
-            </Route>
-            <Route exact path="/login">
-              <LoginPage />
-            </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
-            <Route path="*">
-              <NotFound />
-            </Route>
-          </Switch>
-          <Fortune />
-        </Layout>
+        <YouTubeProvider>
+          <MyThemeProvider>
+            <Layout>
+              <Switch>
+                <ProtectedRoute path="/favorites">
+                  <VideosRoute />
+                </ProtectedRoute>
+                <Route exact path="/login">
+                  <LoginPage />
+                </Route>
+                <Route path="/">
+                  <VideosRoute />
+                </Route>
+                <Route path="*">
+                  <NotFound />
+                </Route>
+              </Switch>
+            </Layout>
+          </MyThemeProvider>
+        </YouTubeProvider>
       </AuthProvider>
     </BrowserRouter>
   );
 }
 
+export const queryClient = new QueryClient();
+function VideosRoute() {
+  const { path } = useRouteMatch();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Switch>
+        <Route exact path={path}>
+          <VideoList />
+        </Route>
+        <Route path="/favorites/:id">
+          <VideoDetail />
+        </Route>
+        <Route path="/:id">
+          <VideoDetail />
+        </Route>
+      </Switch>
+    </QueryClientProvider>
+  );
+}
+
 export default App;

src/components/App/MyThemeProvider.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { useYouTube } from '../YouTube/YouTubeProvider';
+
+const theme = {
+  dark: {
+    primary: '#4396f3',
+    secondary: '#4a4646',
+    color: '#f7f7f7',
+  },
+};
+
+function MyThemeProvider({ children }) {
+  const { state } = useYouTube();
+  const { theme: stateTheme } = state;
+  return <ThemeProvider theme={theme[stateTheme] || {}}>{children}</ThemeProvider>;
+}
+
+export default MyThemeProvider;

src/components/FavoritesButton/FavoritesButton.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { Loading, StyledFavoritesButton } from './FavoritesButton.styled';
+import useFavorites from './useFavorites';
+
+const FavoritesButton = ({ videoId }) => {
+  const { favorites, updateFavorites, isLoading } = useFavorites();
+  const [isFavorite, setIsFavorite] = useState(false);
+  const [label, setLabel] = useState();
+
+  useEffect(() => {
+    const found = favorites.some((id) => id === videoId);
+    setLabel(found ? 'Remove from Favorites' : 'Add to Favorites');
+    setIsFavorite(found);
+  }, [favorites, videoId]);
+
+  const handleClick = (event) => {
+    event.stopPropagation();
+
+    const newFavorites = isFavorite
+      ? favorites.filter((id) => id !== videoId)
+      : [...favorites, videoId];
+
+    updateFavorites(newFavorites);
+  };
+
+  if (isLoading || !label) return <Loading>Loading...</Loading>;
+
+  return <StyledFavoritesButton onClick={handleClick}>{label}</StyledFavoritesButton>;
+};
+
+export default FavoritesButton;

src/components/FavoritesButton/FavoritesButton.styled.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const StyledFavoritesButton = styled.button`
+  font-size: 12px;
+  max-width: 150px;
+`;
+
+const Loading = styled.span`
+  font-size: 12px;
+`;
+
+export { StyledFavoritesButton, Loading };

src/components/FavoritesButton/useFavorites.js

@@ -0,0 +1,12 @@
+import { useLocalStorage } from '../../utils/useLocalStorage';
+
+const useFavorites = () => {
+  const { data: favorites, mutation, isLoading } = useLocalStorage({
+    cacheKey: 'favorites',
+    initialData: [],
+  });
+
+  return { favorites, updateFavorites: mutation.mutate, isLoading };
+};
+
+export default useFavorites;

src/components/Layout/Header/Header.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { useAuth } from '../../../providers/Auth';
+import { useYouTube } from '../../YouTube/YouTubeProvider';
+import { Col, TitleLink, HeaderContainer, Search, Space, Switch } from './Header.styled';
+
+const Header = () => {
+  const { state, dispatch } = useYouTube();
+  const { search = '', theme } = state;
+
+  const { authenticated, logout } = useAuth();
+  const history = useHistory();
+
+  const setSearch = (event) => {
+    dispatch({ type: 'search', payload: event.target.value });
+  };
+
+  return (
+    <HeaderContainer>
+      <TitleLink to="/">
+        <Col>React Bootcamp</Col>
+      </TitleLink>
+      <Col>
+        <Search placeholder="Search" value={search} onChange={setSearch} />
+      </Col>
+      <Space />
+      <TitleLink to="/">
+        <Col>Videos</Col>
+      </TitleLink>
+      <TitleLink to="/favorites">
+        <Col>Favorites</Col>
+      </TitleLink>
+      <Col>
+        <Switch
+          onClick={() => {
+            dispatch({ type: 'switchTheme' });
+          }}
+        >
+          {theme === 'dark' ? 'Default' : 'Dark'}
+        </Switch>
+      </Col>
+
+      <Col>
+        <button
+          type="button"
+          onClick={() => {
+            if (authenticated) {
+              logout();
+            } else history.push('/login');
+          }}
+        >
+          {authenticated ? 'Logout' : 'Login'}
+        </button>
+      </Col>
+    </HeaderContainer>
+  );
+};
+
+export default Header;

src/components/Layout/Header/Header.styled.js

@@ -0,0 +1,56 @@
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Col = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+`;
+
+const TitleLink = styled(NavLink)`
+  text-decoration: none;
+  color: black;
+  ${({ theme }) => (theme.color ? `color: ${theme.color}` : '')};
+`;
+
+const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 70px;
+  align-items: center;
+  padding: 5px;
+  border-bottom: 3px solid darkgray;
+  background-color: lightgray;
+  ${({ theme }) => (theme.primary ? `background-color: ${theme.primary}` : '')};
+  ${({ theme }) => (theme.color ? `color: ${theme.color}` : '')};
+`;
+
+const Search = styled.input`
+  background-color: lightyellow;
+  border: 0;
+  display: flex;
+  height: 1.8rem;
+  padding: 5px;
+`;
+
+const Space = styled.div`
+  display: flex;
+  flex: 1;
+`;
+
+const Switch = styled.span`
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const User = styled.span`
+  height: 40px;
+  background-color: springgreen;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export { Col, TitleLink, HeaderContainer, Search, Space, Switch, User };

src/components/Layout/Header/Header.test.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+import { shallow } from 'enzyme';
+import Header from './Header';
+import { YouTubeProvider } from '../../YouTube/YouTubeProvider';
+
+describe('Header', () => {
+  it('should render Header component correctly', () => {
+    const wrapper = shallow(
+      <YouTubeProvider>
+        <Header />
+      </YouTubeProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/Layout/Header/__snapshots__/Header.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header should render Header component correctly 1`] = `ShallowWrapper {}`;

src/components/Layout/Header/index.js

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