Exemplos tópico 08.

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

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

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

@@ -3,9 +3,9 @@ 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';
+import HomePage from '../pages/HomePage';
+import TarefasPage from '../pages/TarefasPage';
+import SobrePage from '../pages/SobrePage';
 
 const { Content } = Layout;
 
@@ -18,11 +18,11 @@ export default class ContentRoutes extends Component {
             <Content style={{ margin: '24px 16px 0' }}>
                 <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
 
-                    {/* <Route path="/" exact component={HomePage} />
+                    <Route path="/" exact component={HomePage} />
 
                     <Route path="/tarefas" component={TarefasPage} />
 
-                    <Route path="/sobre" component={SobrePage} /> */}
+                    <Route path="/sobre" component={SobrePage} />
 
                 </div>
             </Content>

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

@@ -4,10 +4,10 @@ import axios from 'axios';
 import moment from 'moment';
 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';
+import './style.css';
+import InputForm from '../../components/InputForm';
+import * as Validators from '../../utils/Validators';
+import * as Maskers from '../../utils/Maskers';
 
 const FormItem = Form.Item;
 const { Content } = Layout;

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+export default class HomePage extends Component {
+    state = {}
+    render() {
+        return (
+            <div>Home</div>
+        );
+    }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+export default class SobrePage extends Component {
+    state = {}
+    render() {
+        return (
+            <div>Sobre</div>
+        );
+    }
+}

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

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+
+import moment from 'moment';
+import axios from 'axios';
+import { Table, Switch, Button } from 'antd';
+
+const { Column } = Table;
+
+export default class TarefasPage extends Component {
+
+    state = {
+        tarefas: []
+    }
+
+    componentDidMount() {
+        this.getTarefas();
+    }
+
+    getTarefas = () => {
+        axios.get('/tarefas')
+            .then(response => {
+                const { data } = response;
+                this.setState({
+                    tarefas: data
+                })
+            }).catch(ex => {
+                console.warn(ex);
+            })
+    }
+
+    render() {
+        const { tarefas } = this.state;
+        return (
+            <div>
+                <Table dataSource={tarefas} >
+                    <Column
+                        key="id"
+                        title="#"
+                        dataIndex="id"
+                        render={(text) => (
+                            <strong>{text}</strong>
+                        )}
+                    />
+                    <Column
+                        key="titulo"
+                        title="Título"
+                        dataIndex="titulo"
+                    />
+                    <Column
+                        key="createdAt"
+                        title="Data"
+                        dataIndex="createdAt"
+                        render={(text) => moment(text).format('DD/MM/YYYY [às] HH:mm')}
+                    />
+                    <Column
+                        key="concluida"
+                        title="Concluída"
+                        dataIndex="concluida"
+                        render={(text) => (
+                            <Switch checked={text} />
+                        )}
+                    />
+                    <Column
+                        key="acoes"
+                        title="Ações"
+                        render={() => (
+                            <Button.Group size="small">
+                                <Button icon="edit">Editar</Button>
+                                <Button type="danger" icon="delete">Excluir</Button>
+                            </Button.Group>
+                        )}
+                    />
+                </Table>
+            </div>
+        );
+    }
+}