{matched.name}
\r\n \r\n {matchesOk}\r\n \r\n
\r\n )\r\n}\r\n\r\n","import axios from 'axios'\r\nimport {useState, useEffect} from 'react'\r\nimport Matches from './Matches'\r\nimport { AiFillFire } from \"react-icons/ai\";\r\nimport { AiFillHeart } from \"react-icons/ai\";\r\nimport { MdCancel } from \"react-icons/md\";\r\nimport { IoMdRefresh } from \"react-icons/io\";\r\nimport * as C from './styles'\r\n\r\n\r\n\r\nexport default function Home (){\r\nconst [profile, setProfile] = useState({})\r\nconst [matches, setMatches] = useState({})\r\nconst [page, setPage] = useState(1)\r\n\r\nuseEffect(()=>{\r\n getProfile()\r\n\r\n},[])\r\n\r\n\r\nconst getProfile = () =>{\r\n axios\r\n .get('https://us-central1-missao-newton.cloudfunctions.net/astroMatch/IgorMF/person')\r\n .then((response)=>{\r\n setProfile (response.data.profile)\r\n })\r\n .catch((error)=>{\r\n console.log(error.response)\r\n })\r\n}\r\n\r\n\r\n\r\n\r\nconst choosePerson = () =>{\r\n const url = ('https://us-central1-missao-newton.cloudfunctions.net/astroMatch/IgorMF/choose-person')\r\n const body ={\r\n id: profile.id,\r\n choice: true\r\n }\r\n axios\r\n .post(url,body)\r\n .then((response)=>{\r\n getProfile()\r\n console.log('person',response.data)\r\n })\r\n .catch((error)=>{\r\n console.log(error.response)\r\n })\r\n}\r\n\r\nconst reset = () =>{\r\n axios\r\n .put('https://us-central1-missao-newton.cloudfunctions.net/astroMatch/IgorMF/clear')\r\n .then((response)=>{\r\n console.log(response.data)\r\n alert('API Resetada')\r\n })\r\n .catch((error)=>{\r\n console.log(error.response.data)\r\n })\r\n}\r\n\r\n\r\nconst changePage = () =>{\r\n if(page === 1){\r\n return pickInfo\r\n } else if(page === 2){\r\n return AstroMatch
\r\n{profile.name }, {profile.age}
\r\n{profile.bio}
\r\n \r\n\r\n
\r\n\r\n \r\n
\r\n \r\n 
\r\n
\r\n\r\n\r\n return(\r\n {matches.name}
\r\n{matches.bio}
\r\n \r\n {changePage()}\r\n\r\n
\r\n )\r\n}","import {useState, useEffect} from 'react'\nimport Home from './components/Home';\n\nfunction App() {\n return (\n \n
\n );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\n\nReactDOM.render(\n
+
+ );
+}
+
+export default App;
diff --git a/modulo3/astromatch/astro-match/src/components/Home.js b/modulo3/astromatch/astro-match/src/components/Home.js
new file mode 100644
index 0000000..786c821
--- /dev/null
+++ b/modulo3/astromatch/astro-match/src/components/Home.js
@@ -0,0 +1,125 @@
+import axios from 'axios'
+import {useState, useEffect} from 'react'
+import Matches from './Matches'
+import { AiFillFire } from "react-icons/ai";
+import { AiFillHeart } from "react-icons/ai";
+import { MdCancel } from "react-icons/md";
+import { IoMdRefresh } from "react-icons/io";
+import * as C from './styles'
+
+
+
+export default function Home (){
+const [profile, setProfile] = useState({})
+const [matches, setMatches] = useState({})
+const [page, setPage] = useState(1)
+
+useEffect(()=>{
+ getProfile()
+
+},[])
+
+
+const getProfile = () =>{
+ axios
+ .get('https://us-central1-missao-newton.cloudfunctions.net/astroMatch/IgorMF/person')
+ .then((response)=>{
+ setProfile (response.data.profile)
+ })
+ .catch((error)=>{
+ console.log(error.response)
+ })
+}
+
+
+
+
+const choosePerson = () =>{
+ const url = ('https://us-central1-missao-newton.cloudfunctions.net/astroMatch/IgorMF/choose-person')
+ const body ={
+ id: profile.id,
+ choice: true
+ }
+ axios
+ .post(url,body)
+ .then((response)=>{
+ getProfile()
+ console.log('person',response.data)
+ })
+ .catch((error)=>{
+ console.log(error.response)
+ })
+}
+
+const reset = () =>{
+ axios
+ .put('https://us-central1-missao-newton.cloudfunctions.net/astroMatch/IgorMF/clear')
+ .then((response)=>{
+ console.log(response.data)
+ alert('API Resetada')
+ })
+ .catch((error)=>{
+ console.log(error.response.data)
+ })
+}
+
+
+const changePage = () =>{
+ if(page === 1){
+ return pickInfo
+ } else if(page === 2){
+ return AstroMatch
+{profile.name }, {profile.age}
+{profile.bio}
+ +
+
+
+
+
+
+
+
+
+
+ return(
+ {matches.name}
+{matches.bio}
+
+ {changePage()}
+
+
+ )
+}
\ No newline at end of file
diff --git a/modulo3/astromatch/astro-match/src/components/Matches.js b/modulo3/astromatch/astro-match/src/components/Matches.js
new file mode 100644
index 0000000..c8f81b5
--- /dev/null
+++ b/modulo3/astromatch/astro-match/src/components/Matches.js
@@ -0,0 +1,45 @@
+import axios from 'axios'
+import { BsBack } from "react-icons/bs"
+import {useState, useEffect} from 'react'
+import { IoMdRefresh } from "react-icons/io";
+import * as C from './styles'
+
+
+export default function Matches (props){
+ const [matches, setMatches] = useState([])
+
+ useEffect(()=>{
+ getMatches()
+ },[])
+
+
+ const getMatches = () =>{
+ axios
+ .get('https://us-central1-missao-newton.cloudfunctions.net/astroMatch/IgorMF/matches')
+ .then((response)=>{
+ setMatches(response.data.matches)
+ })
+ .catch((error)=>{
+ console.log(error.response)
+ })
+ }
+ const matchesOk = matches.map((matched)=>{
+ return(
+ {matched.name}
+
+ {matchesOk}
+
+
+ )
+}
+
diff --git a/modulo3/astromatch/astro-match/src/components/styles.js b/modulo3/astromatch/astro-match/src/components/styles.js
new file mode 100644
index 0000000..7f69c1b
--- /dev/null
+++ b/modulo3/astromatch/astro-match/src/components/styles.js
@@ -0,0 +1,113 @@
+import styled, { keyframes }from 'styled-components'
+import { createGlobalStyle } from 'styled-components';
+
+
+export const GlobalStyle = createGlobalStyle`
+ body {
+ margin: 0;
+ padding: 0;
+ background: #000;
+ font-family: Open-Sans, Helvetica, Sans-Serif;
+ margin-left: 85vh;
+ }
+`
+export const DivToda = styled.div`
+display: flex;
+border: 1px solid;
+margin-top: 20vh;
+flex-direction: column;
+width: 55vh;
+
+h3{
+ position: absolute;
+ top: 580px;
+ left: 875px;
+ color: white;
+ text-shadow: 0px 0px 5px black;
+ }
+ p{
+ position: absolute;
+ top: 610px;
+ left: 875px;
+ color: white;
+ text-shadow: 0px 0px 5px black;
+
+ }
+`
+
+export const Titulo = styled.div`
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ border-bottom: 1px solid #ff0204;
+ color: #AEAAAB;
+ button{
+ margin-left: 50px;
+ }
+ div{
+ margin-left: 40px;
+ }
+
+`
+
+export const Card = styled.div`
+p{
+ width: 39vh;
+ text-shadow: black 0.1em 0.1em 0.2em;
+}
+h3{
+ text-shadow: black 0.1em 0.1em 0.2em;
+}
+img {
+ width: 400px;
+ height: 400px;
+ border-radius: 10px;
+ margin-left: 6vh;
+ margin-top: 2vh;
+ box-shadow: rgba(89, 89, 89, 0.35) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}
+
+`
+
+export const Button = styled.div`
+display: flex;
+align-items: center;
+justify-content:space-between;
+width: 20vh;
+margin-left: 15vh;
+margin-top: 2vh;
+`
+
+
+export const Maches = styled.div`
+display: grid;
+grid-template-columns: repeat(3, 1fr);
+width: 40vh;
+gap: 3px;
+align-items: center;
+margin-top: 10px;
+padding: 2px;
+
+img{
+ border-radius: 50%;
+ border: 5px solid #ccc;
+ &:hover{
+ border: 5px solid red;
+ }
+
+}
+div{
+ font-family: Open-Sans, Helvetica, Sans-Serif;
+ color: #000;
+ margin-top: 5px;
+ font-weight: 800;
+}
+p{
+ border-left: 5px solid red;
+}
+`
+
diff --git a/modulo3/astromatch/astro-match/src/index.js b/modulo3/astromatch/astro-match/src/index.js
new file mode 100644
index 0000000..cf4a930
--- /dev/null
+++ b/modulo3/astromatch/astro-match/src/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+
+ReactDOM.render(
+ \r\n 
\r\n )}\r\n
\r\n );\r\n\r\n}","import axios from \"axios\";\nimport { useState, useEffect } from \"react\";\nimport PokeCard from \"./components/PokeCard\";\nimport './styles.css'\n\n\nfunction App() {\n const [pokeList, setPokeList] = useState([])\n const [pokeName, setPokeName] = useState('')\n\n useEffect(()=>{\n axios\n .get('https://pokeapi.co/api/v2/pokemon/?limit=151')\n .then((response)=>{\n setPokeList(response.data.results)\n })\n .catch((error)=>{\n console.log(error)\n })\n })\n\n const changePokeName = e =>{\n setPokeName (e.target.value)\n }\n\n return (\n {pokemon.name}
\r\n{pokemon.weight} Kg
\r\n {pokemon.types &&{pokemon.types[0].type.name}
}\r\n {pokemon.sprites && (\r\n\n \n {pokeName && }\n
\n );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\n\nReactDOM.render(\n