Pokedex

semana10-projeto/Labex/labex/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "labex",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.23.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "4.0.3",
+    "styled-components": "^5.3.1",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "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"
+    ]
+  }
+}

semana10-projeto/Labex/labex/src/App.js

@@ -0,0 +1,74 @@
+import React, {useState} from "react";
+import {BrowserRouter, Switch, Route} from "react-router-dom"
+import { createGlobalStyle } from "styled-components";
+import { AdminHomePage } from "./Telas/AdminHomePage";
+import { ApplicationFormPage } from "./Telas/ApplicationFormPage";
+import { CreateTripPage } from "./Telas/CreateTripPage";
+import { HomePage } from "./Telas/HomePage";
+import { ListTripsPage } from "./Telas/ListTripsPage";
+import { LoginPage } from "./Telas/LoginPage";
+import { TripDetailsPage } from "./Telas/TripDetailsPage";
+
+
+function App() {
+
+
+   const [paginaAtual, setPaginaAtual] = useState("home")
+
+   const escolherPagina = () => {
+     switch(paginaAtual){
+       case "home":
+         return <HomePage />
+       case "list": 
+         return < ListTripsPage />
+       case "form": 
+         return < CreateTripPage />
+       case "cart":
+         return < AdminHomePage />
+       case "detail":
+         return < TripDetailsPage />
+       case "login": 
+        return <LoginPage />
+       case "inscricao":
+        return <ApplicationFormPage />
+       default:
+        return < HomePage />
+     }
+   }
+
+  return (
+    <BrowserRouter>
+     <Switch>
+       <Route exact path={"/"}>
+         <HomePage />
+       </Route>
+
+       <Route exact path={"/trips/list"}>
+         <ListTripsPage />
+       </Route>
+
+       <Route exact path = {"/trips/application"}>
+         <ApplicationFormPage />
+       </Route>
+
+       <Route exact path={"/login"}>
+         <LoginPage />
+       </Route>
+
+       <Route exact path={"/admin/trips/list"}>
+         <AdminHomePage />
+       </Route>
+
+       <Route exact path={"/admin/trips/create"}>
+         <CreateTripPage />
+       </Route>
+
+       <Route exact path={"/admin/trips/:id"}>
+         <TripDetailsPage />
+       </Route>
+     </Switch>
+    </BrowserRouter>
+  );
+}
+
+export default App;

semana10-projeto/Labex/labex/src/Telas/AdminHomePage.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+
+export function AdminHomePage() {
+
+    const history = useHistory()
+
+    const Voltar = () => {
+        history.replace("/")
+    }
+    const Criar = () => {
+        history.push("/admin/trips/create")
+    }
+    const Logout = () => {
+        history.push("/login")
+    }
+
+    return(
+        <div>
+            AdminHomePage
+            <button onClick={Voltar}>Voltar</button>
+            <button onClick={Criar}>Criar Viagem</button>
+            <button onClick={Logout}>Logout</button>
+        </div>
+    )
+}

semana10-projeto/Labex/labex/src/Telas/ApplicationFormPage.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+
+export function ApplicationFormPage () {
+
+    const history = useHistory()
+
+    const Voltar = () => {
+        history.push("/trips/list")
+    }
+
+    const Enviar = () => {
+        history.replace('/admin/trips/create')
+    }
+
+    return(
+        <div>
+            ApplicationFormPage
+            <button onClick={Voltar}>Voltar</button>
+            <button onClick={Enviar}>Enviar</button>
+        </div>
+    )
+}

semana10-projeto/Labex/labex/src/Telas/CreateTripPage.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+
+export function CreateTripPage () {
+
+    const history = useHistory()
+
+    const Voltar = () => {
+        history.push("/admin/trips/list")
+    }
+    const Criar = () => {
+        history.push("/admin/trips/:id")
+    }
+
+    return (
+        <div>
+            CreateTripPage
+            <button onClick={Voltar}>Voltar</button>
+            <button onClick={Criar}>Criar</button>
+        </div>
+    )
+}

semana10-projeto/Labex/labex/src/Telas/HomePage.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import Header from "./components/Header.js";
+import styled from "styled-components";
+
+const ButtonContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    justify-content: center;
+    align-items:  center;
+    margin: 12px;
+
+`
+
+
+
+export function HomePage () {
+
+
+    const history = useHistory()
+
+    const ListaViagem = () => {
+        history.push("/trips/list")
+    }
+    const Admin = () => {
+        history.push("/login")
+    }
+
+    return(
+        <div>
+            < Header /> 
+
+            <ButtonContainer>
+            <button onClick={ListaViagem}>Ver Viagens</button>
+            < hr />
+            <button onClick={Admin}>Área de Admin</button>
+            </ButtonContainer>
+        </div>
+    )
+}

semana10-projeto/Labex/labex/src/Telas/ListTripsPage.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+
+export function ListTripsPage () {
+
+    const history = useHistory()
+
+    const Voltar = () => {
+        history.push("/")
+    }
+
+    const Inscrever = () => {
+        history.push("/trips/application")
+    }
+
+    return (
+        <div>ListTripsPage 
+
+            <button onClick={Voltar}>Voltar</button>
+            <button onClick={Inscrever}>Inscrever-se</button>
+        </div>
+    )
+}

semana10-projeto/Labex/labex/src/Telas/LoginPage.js

@@ -0,0 +1,77 @@
+import React, {useState} from "react";
+import { useHistory} from "react-router-dom";
+import axios from "axios";
+
+export function LoginPage () {
+
+    const history = useHistory()
+
+    const [email, setEmail] = useState("");
+    const [senha, setSenha] = useState("");
+
+
+    const Enviar = () => {
+        history.push("/")
+    };
+
+    const Entrar = () => {
+        history.push("/admin/trips/list")
+    };
+
+    const onEmail = (ev) => {
+        setEmail(ev.target.value)
+    };
+
+    const onSenha = (ev) => {
+        setSenha(ev.target.value)
+    };
+
+    const onLogin = (ev) => {
+
+        ev.preventDeFault()
+
+        const body ={
+            email: email,
+	        password: senha
+        }
+        axios.post("https://us-central1-labenu-apis.cloudfunctions.net/labeX/darvas/login", body)
+        .then((res) => {
+           console.log('Deu certo', res.data)        
+        })
+        .catch((err) => {
+            console.log('Deu errado', err.response)
+
+        })
+    };
+
+
+
+    return (
+        <div>
+            <h1>LoginPage</h1>
+
+           <form onSubmit={onLogin}>
+               <input
+               required
+               placeholder="Email"
+               value={email}
+               onChange={onEmail}
+               type="email"
+               />
+               <input 
+               required
+               placeholder="Senha"
+               type="password"
+               value={senha}
+               onChange={onSenha}
+               pattern={"^.{3,}"}
+               title={"Sua senha deve ter no mínimo 3 caracteres"}
+               />
+               <button >Voltar</button>
+               <button >Entrar</button>
+            </form>
+
+
+        </div>
+    )
+}

semana10-projeto/Labex/labex/src/Telas/TripDetailsPage.js

@@ -0,0 +1,25 @@
+import axios from "axios";
+import React, { useEffect } from "react";
+
+export function TripDetailsPage () {
+
+   useEffect(() => {
+    axios.get('https://us-central1-labenu-apis.cloudfunctions.net/labeX/ytalo/trip/F5Xq3C5qca7ffkn0eiaz', {
+        headers: {
+            auth:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Im93T…2OTV9.r0iGKfyw99j3By89xV6MgDI-lILjug-SijU85FaPekY'
+        }  
+      })
+      .then((res) => {
+          console.log('Deu certo', res.data)
+      }).catch((err) => {
+          console.log('Deu errado' , err.response)
+      })
+   }, [])
+
+
+    return (
+        <div>Detalhe da Viagem
+
+        </div>
+    )
+}

semana10-projeto/Labex/labex/src/Telas/components/Header.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const HeaderContainer = styled.div`
+   border: 1px solid black;
+   border-radius: 6px;
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   justify-content: space-between ;
+   padding: 6px;
+   background-color: black;
+   color: white;
+
+`
+
+
+
+const Header = () => {
+    return(
+        <HeaderContainer>
+            <h1>LabeNinjas</h1>
+        </HeaderContainer>
+
+    )
+}
+
+export default Header;