Exemplos tópico 08.

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/package.json

@@ -5,11 +5,13 @@
   "dependencies": {
     "antd": "^3.2.0",
     "axios": "^0.17.1",
+    "jwt-decode": "^2.2.0",
     "moment": "^2.20.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.0",
+    "universal-cookie": "^2.1.2",
     "vanilla-masker": "^1.2.0"
   },
   "scripts": {

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/App.css

@@ -0,0 +1,3 @@
+html body #root {
+    height: 100%;
+}

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/components/PrivateRoute.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Route, Redirect } from 'react-router-dom';
+
+import { isLoggedIn } from '../utils/LoginManager';
+
+export default ({ render, ...others }) => (
+    <Route {...others} render={isLoggedIn()
+        ? render
+        : props => (
+            <Redirect to={{
+                pathname: '/login',
+                state: { from: props.location }
+            }} />
+        )
+    } />
+)

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/index.js

@@ -8,6 +8,7 @@ import { BrowserRouter } from 'react-router-dom';
 import axios from 'axios';
 
 axios.defaults.baseURL = "http://localhost:3001/api/";
+// axios.defaults.withCredentials = true;
 
 ReactDOM.render(
     <BrowserRouter>

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/layouts/ContentRoutes.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+
+import { Route } from 'react-router-dom';
+import { Layout } from 'antd';
+
+// import HomePage from '../pages/HomePage';
+// import TarefasPage from '../pages/TarefasPage';
+// import SobrePage from '../pages/SobrePage';
+
+const { Content } = Layout;
+
+export default class ContentRoutes extends Component {
+
+    state = {}
+
+    render() {
+        return (
+            <Content style={{ margin: '24px 16px 0' }}>
+                <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
+
+                    {/* <Route path="/" exact component={HomePage} />
+
+                    <Route path="/tarefas" component={TarefasPage} />
+
+                    <Route path="/sobre" component={SobrePage} /> */}
+
+                </div>
+            </Content>
+        );
+    }
+}

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/layouts/MainLayout.css

@@ -0,0 +1,3 @@
+.main-layout {
+    height: 100%;
+}

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/layouts/MainLayout.js

@@ -1,18 +1,36 @@
 import React, { Component } from 'react';
 
-import { Route, Switch } from 'react-router-dom';
+import { Layout, Icon } from 'antd';
+import { Switch, Route } from 'react-router-dom';
 
+import './MainLayout.css';
+import SideMenu from './SideMenu';
+import ContentRoutes from './ContentRoutes';
+import PrivateRoute from '../components/PrivateRoute';
 import LoginPage from '../pages/LoginPage';
 import CadastroPage from '../pages/CadastroPage';
+import { getUsuario } from '../utils/LoginManager';
+
+const { Header } = Layout;
 
 export default class MainLayout extends Component {
-    state = {}
 
-    renderContent = () => {
+    _renderContent = () => {
         return (
-            <div>
-                Olá
-            </div>
+            <Layout className="main-layout">
+                <SideMenu />
+                <Layout>
+                    <Header style={{ background: '#fff', paddingLeft: 16, fontSize: 18 }} >
+                        <Icon type="user" />
+                        <span style={{ marginLeft: 8 }}>
+                            {getUsuario().nome}
+                        </span>
+                    </Header>
+
+                    <ContentRoutes />
+
+                </Layout>
+            </Layout>
         )
     }
 
@@ -21,12 +39,13 @@ export default class MainLayout extends Component {
             <Switch>
 
                 <Route path="/login" component={LoginPage} />
+
                 <Route path="/cadastro" component={CadastroPage} />
 
-                <Route render={this.renderContent} />
+                <PrivateRoute path="/" render={this._renderContent} />
 
             </Switch>
         );
     }
 
-}
+}

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/layouts/SideMenu.css

@@ -0,0 +1,11 @@
+.side-menu-logo {
+    height: 32px;
+    line-height: 32px;
+    background: rgba(255,255,255,.2);
+    margin: 16px;
+    text-align: center;
+}
+
+.side-menu-logo, h1 {
+    color: white !important;
+}

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/layouts/SideMenu.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+
+import { Layout, Menu, Icon } from 'antd';
+import { Link, withRouter } from 'react-router-dom';
+
+import './SideMenu.css';
+import { removeToken } from '../utils/LoginManager';
+
+const { Sider } = Layout;
+
+const MENU_ITEMS = [
+    {
+        to: '/',
+        text: 'Home',
+        icon: 'home'
+    }, {
+        to: '/tarefas',
+        text: 'Tarefas',
+        icon: 'file-text'
+    }, {
+        to: '/sobre',
+        text: 'Sobre',
+        icon: "info-circle-o",
+    }
+];
+
+class SideMenu extends Component {
+
+    state = {
+        collapsed: false,
+    };
+
+    _onCollapse = (collapsed, type) => {
+        this.setState({ collapsed });
+    }
+
+    _logout = () => {
+        removeToken();
+        this.props.history.push('/');
+    }
+
+    render() {
+        const { collapsed } = this.state;
+
+        const menuItems = MENU_ITEMS.map(item => (
+            <Menu.Item key={item.to} >
+                <Link to={item.to}>
+                    <Icon type={item.icon} />
+                    <span className="nav-text">
+                        {item.text}
+                    </span>
+                </Link>
+            </Menu.Item >
+        ));
+
+        return (
+            <Sider
+                breakpoint="md"
+                collapsedWidth="0"
+                onCollapse={this._onCollapse}
+                collapsed={collapsed}
+            >
+
+                <div className="side-menu-logo" >
+                    <h1>Logotipo</h1>
+                </div>
+
+                <Menu theme="dark" mode="inline"
+                    selectedKeys={[this.props.location.pathname]}
+                    defaultSelectedKeys={['/']}>
+
+                    {menuItems}
+
+                    <Menu.Item >
+                        <a onClick={this._logout}>
+                            <Icon type="logout" />
+                            <span className="nav-text">
+                                Sair
+                            </span>
+                        </a>
+                    </Menu.Item >
+                </Menu>
+
+            </Sider>
+        );
+    }
+}
+
+export default withRouter(SideMenu);

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/pages/CadastroPage.css

@@ -0,0 +1,8 @@
+.cadastro-page-form {
+    max-width: 500px;
+    margin: 16px auto !important;
+    padding: 24px !important;
+    background: #fbfbfb;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+}

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/pages/CadastroPage.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 
 import axios from 'axios';
 import moment from 'moment';
-import VMasker from 'vanilla-masker';
 import { Layout, Form, Button } from 'antd';
 
+import './CadastroPage.css';
 import InputForm from '../components/InputForm';
 import * as Validators from '../utils/Validators';
 import * as Maskers from '../utils/Maskers';
@@ -46,6 +46,7 @@ export default class CadastroPage extends Component {
         }).then(response => {
             console.log('response', response);
             alert('Usuário cadastrado com sucesso.');
+            this.props.history.push('/login');
         }).catch((ex) => {
             console.error(ex);
             if (ex.response) {
@@ -68,7 +69,8 @@ export default class CadastroPage extends Component {
         return (
             <Content>
 
-                <Form onSubmit={this.onSubmitForm}>
+                <Form onSubmit={this.onSubmitForm}
+                    className="cadastro-page-form">
                     <h3>Informe os dados para cadastro.</h3>
 
                     <InputForm

08 - Integrando frontend e backend/gerenciador-tarefas-frontend/src/pages/LoginPage.css

@@ -0,0 +1,13 @@
+.login-page-form {
+    max-width: 332px;
+    margin: 16px auto !important;
+
+    padding: 24px !important;
+    background: #fbfbfb;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+}
+
+.login-page-form-button {
+    width: 100%;
+}