- Criado primeira versão do projeto completo do tópico 08.

- Implementado Login.
douglasjunior · Feb 7, 2018 · 6b27ad9 · 6b27ad9
1 parent 6eb8c67
commit 6b27ad9
Show file tree

Hide file tree

Showing 36 changed files with 10,921 additions and 0 deletions.
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/.gitignore b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/README.md b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/README.md
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/package.json b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "gerenciador-de-tarefas",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "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-icons": "2.2.7",
+    "react-router-dom": "4.2.2",
+    "react-scripts": "1.1.0",
+    "universal-cookie": "2.1.2"
+  }
+}
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/public/favicon.ico b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/public/favicon.ico
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/public/index.html b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/public/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/public/manifest.json b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/App.css b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/App.css
@@ -0,0 +1,3 @@
+html body #root {
+    height: 100%;
+}
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/App.js b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/App.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import './App.css';
+
+import { Switch, Route } from 'react-router-dom';
+import { LocaleProvider } from 'antd';
+import ptBR from 'antd/lib/locale-provider/pt_BR'
+
+import MainLayout from './layouts/MainLayout';
+
+// import PrivateRoute from './components/PrivateRoute';
+// import NavBar from './components/NavBar';
+// import SideBar from './components/SideBar';
+// import Content from './components/Content';
+
+// import LoginPage from './pages/LoginPage';
+// import UsuarioPage from './pages/UsuarioPage';
+
+
+class App extends Component {
+
+    render() {
+        return (
+            <LocaleProvider locale={ptBR}>
+                <MainLayout />
+            </LocaleProvider>
+        )
+    }
+}
+
+export default App;
diff --git a/...Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/Container.js b/...Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/Container.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default ({ style, ...props }) => (
+    <div
+        style={{
+            padding: 24,
+            background: '#fff',
+            minHeight: 360,
+            ...style
+        }}
+        {...props}
+    />
+)
diff --git a/... Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/Content.css b/... Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/Content.css
@@ -0,0 +1,6 @@
+#content {
+    padding: 20px;
+    min-height: 100vh;
+    transition: all 0.3s;
+    margin-top: 40px;
+}
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/Content.js b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/Content.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import "./Content.css";
+
+import { Container } from 'reactstrap';
+
+import { Route } from 'react-router-dom';
+
+import HomePage from '../pages/HomePage';
+import TarefasPage from '../pages/TarefasPage';
+
+/**
+ * Referência: https://bootstrapious.com/p/bootstrap-sidebar
+ */
+export default class Content extends Component {
+    render() {
+        return (
+            <Container id="content">
+                <Route path="/" exact component={HomePage} />
+                <Route path="/tarefas" component={TarefasPage} />
+            </Container>
+        );
+    }
+}
diff --git a/...Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/InputForm.js b/...Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/InputForm.js
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+
+// import {
+//     FormGroup, Label,
+//     Col, Input,
+//     FormFeedback
+// } from 'reactstrap';
+// import DatePicker from 'react-datepicker';
+
+import { Form, Input } from 'antd';
+
+const FormItem = Form.Item;
+
+export default class InputForm extends Component {
+
+    state = { valid: null };
+
+    onChange = (event) => {
+        const { validator, onChange } = this.props;
+        onChange(event);
+        if (validator) {
+            this.setState({ valid: validator(event.target.value) })
+        }
+    }
+
+    onDateChange = (date) => {
+        const { validator, id, onChange } = this.props;
+        onChange({
+            target: {
+                value: date,
+                id: id,
+            }
+        });
+        if (validator) {
+            this.setState({ valid: !!validator(date) })
+        }
+    }
+
+    isValid = () => {
+        if (!this.props.required)
+            return true;
+
+        if (this.state.valid !== null)
+            return this.state.valid;
+
+        const { validator, value } = this.props;
+        let valid = false;
+        if (validator) valid = !!validator(value);
+        this.setState({ valid });
+
+        return valid;
+    }
+
+    render() {
+        const { label, id, errorMessage, type, dateFormat, validator, value, required, onChange, ...others } = this.props;
+        const { valid } = this.state;
+
+        let CustomInput;
+        if (type === 'date') {
+            // CustomInput = (
+            //     <Col sm={10}>
+            //         {/* <DatePicker
+            //             customInput={<Input id={id} valid={valid} style={{ display: 'inline' }} {...others} />}
+            //             dateFormat={dateFormat}
+            //             selected={value}
+            //             useWeekdaysShort={true}
+            //             showMonthDropdown={true}
+            //             showYearDropdown={true}
+            //             isClearable={true}
+            //             onChangeRaw={this.onChange}
+            //             onChange={this.onDateChange} /> */}
+            //         <FormFeedback style={{ display: valid === false ? 'inline' : 'none' }}>{errorMessage}</FormFeedback>
+            //     </Col>
+            // )
+        } else {
+            CustomInput = (
+                <Input id={id} valid={valid} value={value} type={type} {...others} onChange={this.onChange} />
+            )
+        }
+
+        return (
+            <FormItem
+                validateStatus={valid === null ? null : valid ? "success" : "error"}
+                help={valid === false ? errorMessage : null}
+                label={label}
+            >
+                {CustomInput}
+            </FormItem>
+        )
+    }
+}
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/NavBar.css b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/NavBar.css
@@ -0,0 +1,52 @@
+#navbar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 40px;
+    background: #6d7fcc;
+    color: #fff;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    transition: all 0.3s;
+}
+
+#navbar-title {
+    display: none;
+    margin: 0px 0px 0px 16px;
+    flex: 1
+}
+
+#navbar.active #navbar-title {
+    display: inline;
+}
+
+#sidebarCollapse {
+    background-color: transparent;
+    border-color: #fff;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#sidebarCollapse span {
+    margin-left: 4px
+}
+
+#sidebarCollapse:focus {
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
+}
+
+/* ---------------------------------------------------
+    MEDIAQUERIES
+----------------------------------------------------- */
+@media (max-width: 768px) {
+    #sidebarCollapse span {
+        display: none;
+    }
+    #navbar-title {
+        display: inline
+    }
+}
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/NavBar.js b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/NavBar.js
@@ -0,0 +1,27 @@
+
+import React, { Component } from 'react';
+import './NavBar.css';
+
+import { Button } from 'reactstrap';
+import { MdMenu } from 'react-icons/lib/md';
+
+/**
+ * Referência: https://bootstrapious.com/p/bootstrap-sidebar
+ */
+export default class NavBar extends Component {
+
+    render() {
+        const { active, toggleSideBar } = this.props;
+        return (
+            <nav id="navbar" className={active ? "active" : null}>
+                <Button type="button" id="sidebarCollapse" onClick={toggleSideBar}>
+                    <MdMenu />
+                    <span>Menu</span>
+                </Button>
+
+                <h4 id="navbar-title">Projeto React</h4>
+            </nav>
+        );
+    }
+
+}
diff --git a/...egrando frontend e backend/gerenciador-de-tarefas-completo/src/components/PrivateRoute.js b/...egrando frontend e backend/gerenciador-de-tarefas-completo/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 }
+            }} />
+        )
+    } />
+)