Subindo o projeto teste Front Mastertech

.gitignore

@@ -0,0 +1 @@
+node_modules

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

README.md

@@ -1,83 +1,10 @@
-# Teste Front-end Mastertech
-> Teste para ingressar como Front-end Developer na Mastertech
+# Projeto
 
-# Pré-requisitos
-- React
-- Functional components
-- React router
-- Hooks
-- Redux (useContext)
-- Consumo de APIs REST e protocolo HTTP
-- JS (ES6+)
-- Testes de snapshot com jest
-- Html5, CSS3 e Sass
-- Git
-- node/npm
+Teste de frontend realizado pela empresa Mastertech, onde foi criado uma tela de login e perfil de usuário batendo na API solicitada, o usuário permanecerá logado enquanto não acontecer um Logout e a Home o redirecionará à tela de perfil, e enquanto o usuário estiver deslogado, ele será redirecionado à Home.
 
-#### O que é permitido:
-- ES6+
-- Linters no geral tanto para JS como para CSS
-- SASS
-- React
+# Como executar
 
-
-#### O que não é permitido:
-- Frameworks/Bibliotecas CSS (Bootstrap, Foundation, Materializecss e afins) . Você pode utilizar qualquer metodologia de arquitetura de código.
-- Task runners como Webpack, Gulp, Grunt e afins.
-
-
-O uso de ferramentas de teste é liberado (jest, jasmine, mocha, chai, sinon, supertest).
-
-O objetivo desse teste é avaliar:
-- organização;
-- semântica;
-- funcionamento e usabilidade
-- uso e abuso das features das linguagens (React, CSS/SASS, JS);
-- uso de patterns;
-- performance do código;
-- testes de JavaScript.
-
-
-## Pronto para começar o teste?
-
-- Faça um "fork" desse repositório na sua conta do Github
-- Crie uma branch com o seu nome e sobrenome ex: `patrick-santos`
-- Após completar o desafio, crie um "pull request" nesse repositório comparando a sua branch com a master
-- Receberemos uma notificação do seu pull request, faremos a avaliação da sua solução e entraremos em contato.
-
-
-# Teste
-Crie as telas de login e de usuário que estão na pasta de imagens no arquivo de template, para fazer o login utilize 
-a api http://jrwee.mocklab.io
-
-
-#### Endpoint: POST /user/login
-**Request Body**
-
- ``` json 
- {
-    "email": "teste@front.com",
-    "password": "teste123"
-}
-```
-
-**Response 200**
-```json
-{
-  "birthday": "1996-04-10",
-  "email": "teste@front.com",
-  "gender": "FEMALE",
-  "id": 1,
-  "name": "Grace Hopper",
-  "state": "SP",
-  "avatar": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Commodore_Grace_M._Hopper%2C_USN_%28covered%29.jpg/1200px-Commodore_Grace_M._Hopper%2C_USN_%28covered%29.jpg"
-}
-```
-
-**Response 404**
-```
-Request was not matched 
-Neste caso considerar a resposta como 400 com o usuário enviando credenciais inválidas
-```
-
-Bom teste!
+- Clone o repositório
+- Instale as dependências com yarn ou npm
+- Inicie a aplicação com yarn/npm install
+- Agora você pode acessar localhost:3000 do seu navegador.

__tests__/SignIn.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import SignIn from '../src/pages/SignIn';
+
+describe('snapshot testing', () => {
+  test('snapshot for SignIn component', () => {
+    const renderedComponent = renderer.create(<SignIn />).toJSON();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

__tests__/UserProfile.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import UserProfile from '../src/pages/UserProfile';
+
+describe('snapshot testing', () => {
+  test('snapshot for UserProfile component', () => {
+    const renderedComponent = renderer.create(<UserProfile />).toJSON();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "test-front-mastertech",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
+    "sass": "^1.34.1",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "jest": {
+    "testMatch": [
+      "**/__tests__/**/*.test.js"
+    ],
+    "moduleNameMapper": {
+      "ˆ./(.*)": "<rootDir>/src"
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "react-test-renderer": "^17.0.2"
+  }
+}

public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app!</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/App.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import Routes from './routes';
+import './styles/global.scss';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes />
+    </BrowserRouter>
+  );
+}
+
+export default App;

src/components/Button/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import styles from './styles.module.scss';
+
+export default function Button({ title, onClick }) {
+  return (
+    <div className={styles.buttonContainer}>
+      <button type="submit" onClick={onClick}>
+        {title}
+      </button>
+    </div>
+  );
+}

src/components/Button/styles.module.scss

@@ -0,0 +1,19 @@
+.buttonContainer {
+  margin-top: 25px;
+  text-align: center;
+
+  button {
+    border: 0;
+    font-size: 18px;
+    padding: 15px 40px;
+    border-radius: 2px;
+    background: var(--lemon-green);
+    color: var(--dark-gray);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    transition: linear 0.15s;
+
+    &:hover {
+      filter: brightness(0.9);
+    }
+  }
+}

src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import { AuthProvider } from './providers/auth';
+
+ReactDOM.render(
+  <AuthProvider>
+    <App />
+  </AuthProvider>,
+  document.getElementById('root')
+);

src/pages/SignIn/index.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import Button from '../../components/Button';
+import { useAuth } from '../../providers/auth';
+import styles from './styles.module.scss';
+
+export default function SignIn() {
+  const { getUserData } = useAuth();
+  const history = useHistory();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    getUserData({ email, password });
+    history.push('/user-profile');
+  }
+
+  return (
+    <div className={styles.container}>
+      <form onSubmit={(e) => handleSubmit(e)}>
+        <h1>Login</h1>
+
+        <label>E-mail</label>
+        <input
+          name="email"
+          type="email"
+          placeholder="E-mail"
+          required
+          onChange={(e) => setEmail(e.target.value)}
+        />
+
+        <label>Senha</label>
+        <input
+          name="password"
+          type="password"
+          placeholder="Senha"
+          required
+          onChange={(e) => setPassword(e.target.value)}
+        />
+
+        <div className={styles.button}>
+          <Button title="Login" />
+        </div>
+      </form>
+    </div>
+  );
+}

src/pages/SignIn/styles.module.scss

@@ -0,0 +1,48 @@
+.container {
+  background: var(--white);
+  display: flex;
+  max-width: 500px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 80px auto;
+  border-radius: 5px;
+  padding: 50px 30px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 600px) {
+    margin: 40px auto;
+    max-width: 300px;
+  }
+
+  form {
+    h1 {
+      margin-bottom: 50px;
+      text-align: center;
+    }
+
+    input {
+      width: 100%;
+      margin: 20px 5px;
+      padding: 10px 10px;
+      color: var(--dark-gray);
+      border-bottom: 1px solid var(--normal-gray);
+
+      &:focus {
+        border-bottom: 1px solid var(--lemon-green);
+      }
+
+      &::placeholder {
+        color: var(--light-gray);
+      }
+    }
+
+    span {
+      color: red;
+    }
+
+    .button {
+      margin-top: 60px;
+    }
+  }
+}

src/pages/UserProfile/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from '../../components/Button';
+import { useAuth } from '../../providers/auth';
+import styles from './styles.module.scss';
+
+export default function UserProfile() {
+  const { userData, signOut } = useAuth();
+
+  function handleSignOut() {
+    signOut();
+  }
+
+  return (
+    <>
+      <div className={styles.container}>
+        <ul>
+          <li>
+            <h1>{userData.name}</h1>
+          </li>
+          <li>{userData.email}</li>
+          <li>{userData.state}</li>
+        </ul>
+
+        <img src={userData.avatar} width="136px" height="112px" alt="Avatar" />
+
+        <div className={styles.button}>
+          <Button title="Log out" onClick={handleSignOut} />
+        </div>
+      </div>
+    </>
+  );
+}