Frontend and api's

backend/src/controllers/IncidentController.js

@@ -1,9 +1,9 @@
-const connection = require("./database/connection");
+const connection = require("../database/connection");
 
 module.exports = {
   async create(req, res) {
-    const { title, description, value } = req.body;
-    const ong_id = request.headers.authorization;
+    const { title, description, value } = await req.body;
+    const ong_id = await req.headers.authorization;
 
     const [id] = await connection("incidents").insert({
       title,

backend/src/controllers/OngController.js

@@ -1,12 +1,12 @@
-const connection = require("./database/connection");
+const connection = require("../database/connection");
 const crypto = require("crypto");
 
 module.exports = {
   async create(req, res) {
     const { name, email, whatsapp, city, uf } = req.body;
     const id = crypto.randomBytes(4).toString("HEX");
 
-    connection("ongs").insert({
+    await connection("ongs").insert({
       id,
       name,
       email,
@@ -15,7 +15,7 @@ module.exports = {
       uf
     });
 
-    return res.json(id);
+    return res.json({ id });
   },
   async index(req, res) {
     const ongs = await connection("ongs").select("*");

backend/src/controllers/ProfileController.js

@@ -1,4 +1,4 @@
-const connection = require("./database/connection");
+const connection = require("../database/connection");
 
 module.exports = {
   async index(req, res) {

backend/src/controllers/SessionController.js

@@ -1,4 +1,4 @@
-const connection = require("./database/connection");
+const connection = require("../database/connection");
 
 module.exports = {
   async login(req, res) {

backend/src/database/migrations/20200324201452_create_ongs.js

@@ -1,5 +1,5 @@
 exports.up = function(knex) {
-  knex.schema.createTable("ongs", function(table) {
+  return knex.schema.createTable("ongs", function(table) {
     table.string("id").primary();
     table.string("name").notNullable();
     table.string("email").notNullable();
@@ -10,5 +10,5 @@ exports.up = function(knex) {
 };
 
 exports.down = function(knex) {
-  knex.schema.dropTable("ongs");
+  return knex.schema.dropTable("ongs");
 };

backend/src/database/migrations/20200324201936_create_incidents.js

@@ -1,6 +1,6 @@
 exports.up = function(knex) {
-  knex.schema.createTable("incidents", function(table) {
-    table.incremetns();
+  return knex.schema.createTable("incidents", function(table) {
+    table.increments();
     table.string("title").notNullable();
     table.string("description").notNullable();
     table.decimal("value").notNullable();
@@ -15,5 +15,5 @@ exports.up = function(knex) {
 };
 
 exports.down = function(knex) {
-  knex.schema.dropTable("incidents");
+  return knex.schema.dropTable("incidents");
 };

backend/src/routes.js

@@ -11,11 +11,11 @@ const routes = express.Router();
 routes.get("/ongs", OngController.index);
 routes.post("/ongs", OngController.create);
 
-routes.post("/incidents", IncidentsController.create);
+routes.post("/incidents", IncidentController.create);
 routes.get("incidents", IncidentController.index);
 routes.delete("/incidents/:id", IncidentController.delete);
 
-routes.get("profile", ProfileController.index);
+routes.get("/profile", ProfileController.index);
 
 routes.post("/sessions", SessionController.login);
 module.exports = routes;

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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*

frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-icons": "^3.9.0",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,15 @@
+<!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" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>Be The Hero</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

frontend/src/App.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+import Routes from "./routes";
+import "./global.css";
+
+function App() {
+  return <Routes></Routes>;
+}
+
+export default App;

frontend/src/global.css

@@ -0,0 +1,83 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font: 400 14px Roboto, sans-serif;
+  background: #f0f0f5;
+  -webkit-font-smoothing: antialised;
+}
+
+input,
+button,
+textarea {
+  font: 400 18px Roboto, sans-serif;
+}
+
+button {
+  cursor: pointer;
+}
+
+form input {
+  width: 100%;
+  height: 60px;
+  color: #333;
+  border: 1px solid #dcdce6;
+  border-radius: 4px;
+  padding: 0 24px;
+}
+
+form textarea {
+  width: 100%;
+  min-height: 140px;
+  height: 60px;
+  color: #333;
+  border: 1px solid #dcdce6;
+  border-radius: 4px;
+  padding: 16px 24px;
+  line-height: 24px;
+}
+
+.button {
+  width: 100%;
+  height: 60px;
+  background: #e02041;
+  border: 0;
+  border-radius: 8px;
+  color: #fff;
+  font-weight: 700;
+  margin-top: 16px;
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  font-size: 18px;
+  line-height: 60px;
+  transition: filter 0.2s;
+}
+
+.button:hover {
+  filter: brightness(90%);
+}
+
+.back-link {
+  display: flex;
+  align-items: center;
+  margin-top: 40px;
+  color: #41414d;
+  font-size: 18px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: opacity 0.2s;
+}
+
+.back-link svg {
+  margin-right: 8px;
+}
+.back-link:hover {
+  opacity: 0.8;
+}

frontend/src/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);

frontend/src/pages/Logon/index.js

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { Link, useHistory } from "react-router-dom";
+
+import { FiLogIn } from "react-icons/fi";
+import api from "../../services/api";
+import "./styles.css";
+
+import logoImg from "../../assets/logo.svg";
+import heroesImg from "../../assets/heroes.png";
+
+export default function Logon() {
+  const [id, setId] = useState("");
+  const history = useHistory();
+
+  async function handleLogin(e) {
+    e.preventDefault();
+
+    try {
+      const response = await api.post("sessions", { id });
+      localStorage.setItem("ongId", id);
+      localStorage.setItem("ongName", response.data.name);
+      history.push("/profile");
+    } catch (err) {
+      alert("Falha no login, tente novamente");
+    }
+  }
+  return (
+    <div className="logon-container">
+      <section className="form">
+        <img src={logoImg} alt="Be The Hero"></img>
+
+        <form onSubmit={handleLogin}>
+          <h1> Faça seu logon</h1>
+
+          <input
+            placeholder="Sua ID"
+            value={id}
+            onChange={e => setId(e.target.value)}
+          ></input>
+
+          <button className="button" type="submit">
+            Entrar
+          </button>
+          <Link className="back-link" to="/register">
+            <FiLogIn size={16} color="#e02041"></FiLogIn>
+            Não tenho cadastro
+          </Link>
+        </form>
+      </section>
+
+      <img src={heroesImg} alt="Heroes"></img>
+    </div>
+  );
+}

frontend/src/pages/Logon/styles.css

@@ -0,0 +1,24 @@
+.logon-container {
+  width: 100%;
+  max-width: 1120px;
+  height: 100vh;
+  margin: 0 auto;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logon-container section.form {
+  width: 100%;
+  max-width: 350px;
+  margin-right: 30px;
+}
+
+.logon-container section.form form {
+  margin-top: 100px;
+}
+.logon-container section.form form h1 {
+  font-size: 32px;
+  margin-bottom: 32px;
+}