Mini challenge 1

package.json

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

src/components/App/App.component.jsx

@@ -5,9 +5,6 @@ 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';
 
@@ -41,14 +38,10 @@ function App() {
             <Route exact path="/login">
               <LoginPage />
             </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
             <Route path="*">
               <NotFound />
             </Route>
           </Switch>
-          <Fortune />
         </Layout>
       </AuthProvider>
     </BrowserRouter>

src/components/Layout/Header/Header.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Col, HeaderContainer, Search, Space, Switch, User } from './Header.styled';
+
+const Header = () => {
+  return (
+    <HeaderContainer>
+      <Col>Header</Col>
+      <Col>
+        <Search placeholder="Search" />
+      </Col>
+      <Space />
+      <Col>
+        <Switch>theme switch placeholder</Switch>
+      </Col>
+      <Col>
+        <User>user login placeholder</User>
+      </Col>
+    </HeaderContainer>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,48 @@
+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;
+`;
+
+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;
+  background-color: springgreen;
+  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/index.js

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

src/components/Layout/Layout.component.jsx

@@ -1,9 +1,14 @@
 import React from 'react';
-
-import './Layout.styles.css';
+import Header from './Header';
+import { Content, MainContainer } from './Layout.styled';
 
 function Layout({ children }) {
-  return <main className="container">{children}</main>;
+  return (
+    <MainContainer>
+      <Header>This is the header</Header>
+      <Content>{children}</Content>
+    </MainContainer>
+  );
 }
 
 export default Layout;

src/components/Layout/Layout.styled.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: stretch;
+`;
+
+export { MainContainer, Content };

src/global.css

@@ -3,51 +3,6 @@ html {
   line-height: 1.6;
   font-weight: 400;
   font-family: sans-serif;
-  box-sizing: border-box;
   scroll-behavior: smooth;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  text-rendering: optimizeLegibility;
-  background-image: linear-gradient(
-    120deg,
-    #eea2a2 0,
-    #bbc1bf 19%,
-    #57c6e1 42%,
-    #b49fda 79%,
-    #7ac5d8 100%
-  );
-  background-size: 400% 400%;
-  background-position: var(--bg-position);
-  transition: background-position 2s ease;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.separator::before {
-  content: '•';
-  color: white;
-  padding: 0.4rem;
-}
-
-a {
-  text-decoration: none;
-  font-weight: bold;
-  color: white;
-}
-
-a:active {
-  color: blueviolet;
-}
-
-hr {
-}

src/index.js

@@ -2,11 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from './components/App';
+import 'sanitize.css';
 import './global.css';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+const app = React.createElement(App);
+ReactDOM.render(app, document.getElementById('root'));

src/pages/Home/Home.page.jsx

@@ -1,38 +1,34 @@
-import React, { useRef } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import React from 'react';
 
-import { useAuth } from '../../providers/Auth';
-import './Home.styles.css';
+import {
+  Title,
+  VideosContainer,
+  VideoCard,
+  VideoPreview,
+  VideoDescription,
+  VideoTitle,
+  VideoContent,
+} from './Home.styled';
+import mockData from './youtube-videos-mock.json';
 
 function HomePage() {
-  const history = useHistory();
-  const sectionRef = useRef(null);
-  const { authenticated, logout } = useAuth();
-
-  function deAuthenticate(event) {
-    event.preventDefault();
-    logout();
-    history.push('/');
-  }
-
   return (
-    <section className="homepage" ref={sectionRef}>
-      <h1>Hello stranger!</h1>
-      {authenticated ? (
-        <>
-          <h2>Good to have you back</h2>
-          <span>
-            <Link to="/" onClick={deAuthenticate}>
-              ← logout
-            </Link>
-            <span className="separator" />
-            <Link to="/secret">show me something cool →</Link>
-          </span>
-        </>
-      ) : (
-        <Link to="/login">let me in →</Link>
-      )}
-    </section>
+    <>
+      <Title>Mini-Challenge 1</Title>
+      <VideosContainer>
+        {mockData.items
+          .filter((item) => item.id.kind === 'youtube#video')
+          .map((item) => (
+            <VideoCard key={item.id.videoId}>
+              <VideoPreview src={item.snippet.thumbnails.medium.url} />
+              <VideoContent>
+                <VideoTitle>{item.snippet.title}</VideoTitle>
+                <VideoDescription>{item.snippet.description}</VideoDescription>
+              </VideoContent>
+            </VideoCard>
+          ))}
+      </VideosContainer>
+    </>
   );
 }
 

src/pages/Home/Home.styled.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+const Title = styled.h1`
+  text-align: center;
+  font-size: 30px;
+`;
+const VideosContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-self: center;
+  max-width: 1400px;
+`;
+
+const VideoCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 250px;
+  margin: 10px;
+  border: 1px solid lightgray;
+`;
+
+const VideoPreview = styled.img``;
+
+const VideoContent = styled.div`
+  padding: 10px;
+`;
+
+const VideoTitle = styled.h2`
+  font-size: 15px;
+  margin: 5px 0;
+`;
+
+const VideoDescription = styled.p`
+  font-size: 11px;
+  margin: 0;
+`;
+
+export {
+  Title,
+  VideosContainer,
+  VideoCard,
+  VideoPreview,
+  VideoContent,
+  VideoTitle,
+  VideoDescription,
+};