Mini challenge 4

.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,15 @@
     "@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-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 +61,8 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

src/components/App/App.component.jsx

@@ -5,11 +5,10 @@ import AuthProvider from '../../providers/Auth';
 import HomePage from '../../pages/Home';
 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';
 
 function App() {
   useLayoutEffect(() => {
@@ -32,25 +31,25 @@ 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>
-      </AuthProvider>
+      <YouTubeProvider>
+        <AuthProvider>
+          <MyThemeProvider>
+            <Layout>
+              <Switch>
+                <Route exact path="/">
+                  <HomePage />
+                </Route>
+                <Route exact path="/login">
+                  <LoginPage />
+                </Route>
+                <Route path="*">
+                  <NotFound />
+                </Route>
+              </Switch>
+            </Layout>
+          </MyThemeProvider>
+        </AuthProvider>
+      </YouTubeProvider>
     </BrowserRouter>
   );
 }

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/Layout/Header/Header.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useYouTube } from '../../YouTube/YouTubeProvider';
+import { Col, HeaderContainer, Search, Space, Switch } from './Header.styled';
+
+const Header = () => {
+  const { state, dispatch } = useYouTube();
+  const { search = '', theme } = state;
+
+  const setSearch = (event) => {
+    dispatch({ type: 'search', payload: event.target.value });
+  };
+
+  return (
+    <HeaderContainer>
+      <Col>React Bootcamp</Col>
+      <Col>
+        <Search placeholder="Search" value={search} onChange={setSearch} />
+      </Col>
+      <Space />
+      <Col>
+        <Switch
+          onClick={() => {
+            dispatch({ type: 'switchTheme' });
+          }}
+        >
+          {theme === 'dark' ? 'Default' : 'Dark'}
+        </Switch>
+      </Col>
+    </HeaderContainer>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+const Col = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+`;
+
+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, 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';

src/components/Layout/Layout.component.jsx

@@ -1,9 +1,21 @@
 import React from 'react';
-
-import './Layout.styles.css';
+import VideoDetail from '../YouTube/Detail/VideoDetail';
+import { useYouTube } from '../YouTube/YouTubeProvider';
+import Header from './Header';
+import { Content, MainContainer } from './Layout.styled';
 
 function Layout({ children }) {
-  return <main className="container">{children}</main>;
+  const { state } = useYouTube();
+  const { currentVideo } = state;
+  return (
+    <>
+      <MainContainer>
+        <Header>This is the header</Header>
+        <Content>{children}</Content>
+      </MainContainer>
+      {currentVideo && <VideoDetail />}
+    </>
+  );
 }
 
 export default Layout;

src/components/Layout/Layout.styled.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  ${({ theme }) => (theme.secondary ? `background-color: ${theme.secondary}` : '')};
+  ${({ theme }) => (theme.color ? `color: ${theme.color}` : '')};
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  overflow-y: scroll;
+`;
+
+export { MainContainer, Content };

src/components/Layout/Layout.test.js

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

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

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