Grupo 6_SkylabFilms

00-TEAMS/06-TEAM/.eslintrc.js

@@ -3,28 +3,31 @@ module.exports = {
     browser: true,
     es2021: true,
     node: true,
-    jest: true,
+    jest: true
   },
   extends: [
     'plugin:react/recommended',
-    'airbnb',
+    'airbnb'
   ],
   parserOptions: {
     ecmaFeatures: {
-      jsx: true,
+      jsx: true
     },
     ecmaVersion: 12,
-    sourceType: 'module',
+    sourceType: 'module'
   },
   plugins: [
-    'react',
+    'react'
   ],
   rules: {
     'class-methods-use-this': 0,
     'comma-dangle': [2, 'never'],
     'linebreak-style': 0,
     'global-require': 0,
     'eslint linebreak-style': [0, 'error', 'windows'],
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-  },
+    'import/prefer-default-export': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }]
+  }
 };

00-TEAMS/06-TEAM/package.json

@@ -3,26 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^1.4.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "firebase": "^8.4.3",
     "prop-types": "^15.7.2",
+    "pure-react-carousel": "^1.27.6",
+    "query-string": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",
+    "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.2.3",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --watchAll --collect-coverage",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -49,6 +53,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.6"
   }
 }

00-TEAMS/06-TEAM/public/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <style>body{margin:0; padding:0;}</style>
     <meta
       name="description"
       content="Web site created using create-react-app"

00-TEAMS/06-TEAM/src/application/Application.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { Auth0Provider } from '@auth0/auth0-react';
+import { createStore } from './store';
+import HeaderLayout from './components/layout/Layout';
+import GlobalApp from './styles/GlobalStyles';
+
+function App() {
+  return (
+    <GlobalApp>
+      <Auth0Provider
+        domain="dev-skylab.eu.auth0.com"
+        clientId="NtRILJGUuayWtHP9G8fFFDWgTFNMubaY"
+        redirectUri={window.location.origin}
+      >
+        <Provider store={createStore()}>
+          <HeaderLayout />
+        </Provider>
+      </Auth0Provider>
+    </GlobalApp>
+  );
+}
+
+export default App;

00-TEAMS/06-TEAM/src/application/components/layout/Layout.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Header from './header/Header';
+import Footer from './footer/Footer';
+
+const Layout = () => (
+  <>
+    <Header />
+    <Footer />
+  </>
+);
+
+export default Layout;

00-TEAMS/06-TEAM/src/application/components/layout/Layout.test.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+import { unmountComponentAtNode } from 'react-dom';
+import { render, screen } from '../../../common/test';
+import Layout from './Layout';
+
+let container = null;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+describe('Footer Component', () => {
+  test('should contain text Films', () => {
+    render(<Layout />, container);
+    expect(screen.getByText(/Películas más vistas/i)).toBeInTheDocument();
+  });
+});

00-TEAMS/06-TEAM/src/application/components/layout/footer/Footer.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import './footer.css';
+import BrandLogo from '../assets/BrandLogo.svg';
+
+const Footer = () => (
+  <>
+    <div className="footer">
+      <div className="footer-logo">
+        <img className="footer-logo__img" src={BrandLogo} alt="" />
+      </div>
+      <div className="footer-info">
+        <p>Quiénes somos</p>
+        <p>Condiciones de uso</p>
+        <p>Política de privacidad y cookies</p>
+        <p>Trabaja con nosotros</p>
+      </div>
+      <div className="footer-films">
+        <p>Películas más vistas</p>
+        <p>Películas recomendadas</p>
+        <p>Películas populares</p>
+        <p>Películas de terror</p>
+      </div>
+    </div>
+  </>
+);
+
+export default Footer;

00-TEAMS/06-TEAM/src/application/components/layout/footer/Footer.test.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+import { unmountComponentAtNode } from 'react-dom';
+import { render, screen } from '../../../../common/test';
+import Footer from './Footer';
+
+let container = null;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+describe('Footer Component', () => {
+  test('should contain text Condiciones de uso', () => {
+    render(<Footer />, container);
+    expect(screen.getByText(/Condiciones de uso/i)).toBeInTheDocument();
+  });
+});

00-TEAMS/06-TEAM/src/application/components/layout/footer/footer.scss

@@ -0,0 +1,21 @@
+.footer {
+   background-color: #212121;
+   display: flex;
+   justify-content: space-around;
+   align-items: center;
+   height: 200px;
+
+   &-logo{
+       &__img {
+        width: 150px;
+        height: 150px;
+       }
+   }
+
+   &-info, &-films{
+       p{
+           margin-top: 20px;
+           font-size: 15px;
+       }
+   }
+}

00-TEAMS/06-TEAM/src/application/components/layout/header/Header.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import AppRouter from '../../../router/AppRouter';
+
+const Header = () => (
+  <AppRouter />
+);
+
+export default Header;

00-TEAMS/06-TEAM/src/application/components/layout/header/Header.test.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+import { unmountComponentAtNode } from 'react-dom';
+import { render, screen } from '../../../../common/test';
+import Header from './Header';
+
+let container = null;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+describe('Header Component', () => {
+  test('should contain text Tv Shows', () => {
+    render(<Header />, container);
+    expect(screen.getByText(/Tv Shows/i)).toBeInTheDocument();
+  });
+  test('should contain text peliculas', () => {
+    render(<Header />, container);
+    expect(screen.getByText(/Películas/i)).toBeInTheDocument();
+  });
+  test('should contain button', () => {
+    render(<Header />, container);
+    expect(screen.getByText(/Registrarse/i)).toBeTruthy();
+  });
+});

00-TEAMS/06-TEAM/src/application/components/layout/header/components/DropdownUser/index.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { withRouter } from 'react-router-dom';
+
+const UserMenu = (props) => {
+  const [openMenu, setOpenMenu] = useState(false);
+
+  return (
+    <div className="Menu">
+      <div className="m-item m-logo" onClick={() => setOpenMenu(!openMenu)}>
+        Menu
+      </div>
+      <div className={setClassNames(1)}>
+        Dashboard
+      </div>
+      <div className={setClassNames(2)}>
+        Settings
+      </div>
+      <div className={setClassNames(3)}>
+        Sign out
+      </div>
+    </div>
+  );
+};
+
+export default withRouter(UserMenu);