erickwize · EduGlzC · Mar 19, 2021 · Mar 20, 2021 · Apr 7, 2021
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+src/index.js
diff --git a/craco.config.js b/craco.config.js
@@ -0,0 +1,11 @@
+// craco.config.js
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+      ],
+    },
+  },
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,24 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
     "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": "4.0.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
   },
   "devDependencies": {
+    "@tailwindcss/postcss7-compat": "^2.0.4",
+    "autoprefixer": "^9.8.6",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -31,8 +34,10 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.13",
+    "postcss": "^7.0.35",
     "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
   },
   "browserslist": {
     "production": [
@@ -49,8 +54,7 @@
   "lint-staged": {
     "*.{js, jsx, css, json}": [
       "yarn run lint:fix",
-      "pretty-quick --staged",
-      "git add"
+      "pretty-quick --staged"
     ]
   },
   "husky": {

diff --git a/public/index.html b/public/index.html
@@ -26,6 +26,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script> if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer </script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/public/login-icon.png b/public/login-icon.png
diff --git a/public/nav-icon.png b/public/nav-icon.png
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
@@ -1,56 +1,25 @@
-import React, { useLayoutEffect } from 'react';
+import React from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
-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 Header from '../Header';
 
 function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
-
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
-
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
-
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
-
   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>
+      <Header />
+      <Layout>
+        <Switch>
+          <Route exact path="/">
+            <HomePage />
+          </Route>
+          <Route path="*">
+            <NotFound />
+          </Route>
+        </Switch>
+      </Layout>
     </BrowserRouter>
   );
 }

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import HeaderLogin from '../HeaderLogin';
+import HeaderToggle from '../HeaderToggle';
+import HeaderSearch from '../HeaderSearch';
+import HeaderNav from '../HeaderNav';
+
+const msgPlaceholder = [
+  'What can we help you find?',
+  'Today, you are wanna watch...',
+  'If you think about it, just look it up',
+];
+
+const getRandomPlaceHolder = () => {
+  const indexForText = Math.round(Math.random() * (msgPlaceholder.length - 1));
+  return msgPlaceholder[indexForText];
+};
+
+const Header = () => (
+  <header className="flex flex-row bg-red-600 w-full justify-between p-2">
+    <HeaderNav icon="nav-icon.png" message="Click to open menu" />
+    <HeaderSearch textPlaceholder={getRandomPlaceHolder()} />
+    <HeaderToggle />
+    <HeaderLogin photo="login-icon.png" message="Click to login" />
+  </header>
+);
+
+export default Header;
diff --git a/src/components/HeaderLogin/index.jsx b/src/components/HeaderLogin/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const HeaderLogin = ({ photo, message }) => (
+  <div className="w-1/6">
+    <div className="rounded-full h-12 w-12 flex items-center bg-white justify-center p-1">
+      <img src={photo} alt="" title={message} />
+    </div>
+  </div>
+);
+
+export default HeaderLogin;
diff --git a/src/components/HeaderNav/index.jsx b/src/components/HeaderNav/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const HeaderNav = ({ icon, message }) => (
+  <div className="w-1/6">
+    <div className=" h-10 w-10 flex items-center  justify-center p-1">
+      <img src={icon} alt="" title={message} />
+    </div>
+  </div>
+);
+
+export default HeaderNav;
diff --git a/src/components/HeaderSearch/index.jsx b/src/components/HeaderSearch/index.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const HeaderSearch = (props) => (
+  <div id="search" className="w-4/6 md:w-3/6 inline">
+    <input
+      className="w-4/6 md:w-5/6 rounded-l-lg p-2"
+      type="text"
+      placeholder={props.textPlaceholder}
+    />
+    <div className="w-2/6 md:w-1/6 inline rounded-r-lg bg-gray-600 text-white p-3">
+      Go!
+    </div>
+  </div>
+);
+
+export default HeaderSearch;
diff --git a/src/components/HeaderToggle/index.jsx b/src/components/HeaderToggle/index.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const HeaderToggle = () => (
+  <div className="w-1/6 hidden md:block">
+    <select className="rounded p-1 text-center bg-white">
+      <option>Theme Wize</option>
+      <option>Theme Dark</option>
+      <option>Theme Light</option>
+    </select>
+  </div>
+);
+
+export default HeaderToggle;
diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import './Layout.styles.css';
 
 function Layout({ children }) {
-  return <main className="container">{children}</main>;
+  return <main>{children}</main>;
 }
 
 export default Layout;
diff --git a/src/components/Layout/Layout.styles.css b/src/components/Layout/Layout.styles.css
@@ -1,9 +0,0 @@
-.container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: -3rem;
-}

diff --git a/src/components/VideoCard/index.jsx b/src/components/VideoCard/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const VideoCard = (props) => (
+  <div id="{props.key}" className="max-w-sm rounded overflow-hidden shadow-lg">
+    <img src={props.urlImage} alt="" className="w-full" />
+    <div className="px-2 py-4">
+      <div className="font-bold text-black text-left font-sans mb-2">{props.title}</div>
+      <div className="text-sm text-left font-sans">{props.description}</div>
+      <div className="flex justify-between bg-gray-400">
+        <div className="flex-shrink md:flex-shrink-0 text-xs self-start p-1">
+          {props.publishedDate}
+        </div>
+        <div className="md:flex-shrink-0 bg-red-500 font-serif text-xs italic text-white p-1 self-end">
+          {props.channel}
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default VideoCard;
diff --git a/src/components/VideosHome/index.jsx b/src/components/VideosHome/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import VideoCard from '../VideoCard';
+
+const KIND_FOR_CHANNEL = 'youtube#channel';
+
+const VideosHome = ({ videos }) => (
+  <div className="grid md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 p-5 gap-4">
+    {videos
+      .filter((item) => {
+        return item.id.kind !== KIND_FOR_CHANNEL;
+      })
+      .map((item) => (
+        <VideoCard
+          key={item.id.videoId}
+          urlImage={item.snippet.thumbnails.medium.url}
+          title={item.snippet.title}
+          description={item.snippet.description}
+          publishedDate={item.snippet.publishTime}
+          channel={item.snippet.channelTitle}
+        />
+      ))}
+  </div>
+);
+
+export default VideosHome;
diff --git a/src/global.css b/src/global.css
@@ -1,53 +1,4 @@
-html {
-  font-size: 1.125rem;
-  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 {
-}
+/* Directives for TailWind */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx