erickwize · EduGlzC · Mar 19, 2021 · Mar 20, 2021 · Mar 26, 2021 · Mar 26, 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/resultTest_1.txt b/resultTest_1.txt
@@ -0,0 +1,65 @@
+ PASS  src/components/HomeHello/index.test.jsx
+  ✓ Greeting in Home Page (44 ms)
+
+-----------------------------|---------|----------|---------|---------|-------------------
+File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
+-----------------------------|---------|----------|---------|---------|-------------------
+All files                    |   10.47 |    66.67 |    6.06 |   10.47 |                   
+ src                         |       0 |      100 |     100 |       0 |                   
+  index.jsx                  |       0 |      100 |     100 |       0 | 7                 
+ src/components/App          |       0 |      100 |       0 |       0 |                   
+  App.component.jsx          |       0 |      100 |       0 |       0 | 10                
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/components/Fortune      |       0 |      100 |       0 |       0 |                   
+  Fortune.component.jsx      |       0 |      100 |       0 |       0 | 7-9               
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/components/Header       |       0 |      100 |       0 |       0 |                   
+  index.jsx                  |       0 |      100 |       0 |       0 | 7-18              
+ src/components/HeaderLogin  |       0 |      100 |       0 |       0 |                   
+  index.jsx                  |       0 |      100 |       0 |       0 | 3-4               
+ src/components/HeaderNav    |       0 |      100 |       0 |       0 |                   
+  index.jsx                  |       0 |      100 |       0 |       0 | 3-4               
+ src/components/HeaderSearch |       0 |      100 |       0 |       0 |                   
+  index.jsx                  |       0 |      100 |       0 |       0 | 3-4               
+ src/components/HeaderToggle |       0 |      100 |       0 |       0 |                   
+  index.jsx                  |       0 |      100 |       0 |       0 | 3-4               
+ src/components/HomeHello    |     100 |      100 |     100 |     100 |                   
+  index.jsx                  |     100 |      100 |     100 |     100 |                   
+ src/components/Layout       |       0 |      100 |       0 |       0 |                   
+  Layout.component.jsx       |       0 |      100 |       0 |       0 | 4                 
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/components/Private      |       0 |        0 |       0 |       0 |                   
+  Private.component.jsx      |       0 |        0 |       0 |       0 | 7-10              
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/components/VideoCard    |       0 |      100 |       0 |       0 |                   
+  index.jsx                  |       0 |      100 |       0 |       0 | 3-4               
+ src/components/VideosHome   |       0 |      100 |       0 |       0 |                   
+  index.jsx                  |       0 |      100 |       0 |       0 | 4-13              
+ src/pages/Home              |       0 |      100 |       0 |       0 |                   
+  Home.page.jsx              |       0 |      100 |       0 |       0 | 20-24             
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/pages/Login             |       0 |      100 |       0 |       0 |                   
+  Login.page.jsx             |       0 |      100 |       0 |       0 | 8-17              
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/pages/NotFound          |       0 |      100 |       0 |       0 |                   
+  NotFound.page.jsx          |       0 |      100 |       0 |       0 | 7                 
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/pages/Secret            |       0 |      100 |       0 |       0 |                   
+  Secret.page.jsx            |       0 |      100 |       0 |       0 | 5                 
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/providers/Auth          |       0 |        0 |       0 |       0 |                   
+  Auth.provider.jsx          |       0 |        0 |       0 |       0 | 6-36              
+  index.js                   |       0 |        0 |       0 |       0 |                   
+ src/utils                   |       0 |      100 |       0 |       0 |                   
+  constants.js               |       0 |      100 |     100 |       0 | 1                 
+  fns.js                     |       0 |      100 |       0 |       0 | 2                 
+  storage.js                 |       0 |      100 |       0 |       0 | 1-13              
+ src/utils/hooks             |       0 |      100 |       0 |       0 |                   
+  useFortune.js              |       0 |      100 |       0 |       0 | 5-28              
+-----------------------------|---------|----------|---------|---------|-------------------
+Test Suites: 1 passed, 1 total
+Tests:       1 passed, 1 total
+Snapshots:   0 total
+Time:        6.657 s
+Ran all test suites.
+
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/Fortune/Fortune.component.jsx b/src/components/Fortune/Fortune.component.jsx
diff --git a/src/components/Fortune/Fortune.styles.css b/src/components/Fortune/Fortune.styles.css
diff --git a/src/components/Fortune/index.js b/src/components/Fortune/index.js
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -0,0 +1,26 @@
+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',
+];
+
+function getRand(max) {
+  return Math.round(Math.random() * max);
+}
+
+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={msgPlaceholder[getRand(msgPlaceholder.length - 1)]} />
+    <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 = (props) => (
+  <div className="w-1/6">
+    <div className="rounded-full h-12 w-12 flex items-center bg-white justify-center p-1">
+      <img src={props.photo} alt="" title={props.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 = (props) => (
+  <div className="w-1/6">
+    <div className=" h-10 w-10 flex items-cente  justify-center p-1">
+      <img src={props.icon} alt="" title={props.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/HomeHello/index.jsx b/src/components/HomeHello/index.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+function greeting(h) {
+  let result = '';
+  if (h.hour > -1 && h.hour < 12) {
+    result = 'Good morning';
+  } else if (h.hour > 11 && h.hour < 19) {
+    result = 'Good afternoon';
+  } else {
+    result = 'Good night';
+  }
+  return result;
+}
+
+const Hello = ({ hour }) => (
+  <h1 className="text-center">Howdy, {greeting({ hour })} Wizeliner!</h1>
+);
+
+export default Hello;
diff --git a/src/components/HomeHello/index.test.jsx b/src/components/HomeHello/index.test.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+
+import Hello from './index';
+
+let container = null;
+beforeEach(() => {
+  // Setting DOM for the render
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // Cleanning
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+it('Greeting in Home Page', () => {
+  // Case empty
+  act(() => {
+    render(<Hello />, container);
+  });
+  expect(container.textContent).toBe('Howdy, Good night Wizeliner!');
+
+  // Case morning
+  act(() => {
+    render(<Hello hour="10" />, container);
+  });
+  expect(container.textContent).toBe('Howdy, Good morning Wizeliner!');
+
+  // Case Afternoon
+  act(() => {
+    render(<Hello hour="12" />, container);
+  });
+  expect(container.textContent).toBe('Howdy, Good afternoon Wizeliner!');
+
+  // Case Night
+  act(() => {
+    render(<Hello hour="21" />, container);
+  });
+  expect(container.textContent).toBe('Howdy, Good night Wizeliner!');
+});
diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx
@@ -1,9 +1,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;