page sucess

AdrienneMota · Oct 10, 2022 · 9887f2f · 9887f2f
1 parent a9b1462
commit 9887f2f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/src/Components/Seats.js b/src/Components/Seats.js
@@ -3,7 +3,7 @@ import selecionado from "../assets/img/selecionado.png";
 import disponivel from "../assets/img/disponivel.png";
 import indisponivel from "../assets/img/indisponivel.png";
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import axios from "axios";
 import Seat from "./Seat";
 
@@ -14,13 +14,19 @@ export default function Seats() {
     const [nameSeat, SetNameseat] = useState([])
     const [nameClient, setNameclient] = useState("")
     const [cpf, setCpf] = useState("")
+    const [title, setTitle] = useState("")
+    const [day, setDay] = useState("")
+    const [time, setTime] = useState("")
+    const navegate = useNavigate()
 
     useEffect(() => {
         const promisse = axios.get(`https://mock-api.driven.com.br/api/v5/cineflex/showtimes/${sessionId}/seats`)
 
         promisse.then((res) => {
             setSeats(res.data)
-            console.log(seat)
+            setTitle(res.data.movie.title)
+            setDay(res.data.day.date)
+            setTime(res.data.name)
         })
 
         promisse.catch((error) => {
@@ -31,7 +37,8 @@ export default function Seats() {
 
     function SubmitForm(e){
         e.preventDefault()
-
+
+
         const body = {
             ids: places,
             name: nameClient,
@@ -42,7 +49,11 @@ export default function Seats() {
 
         const promisse = axios.post("https://mock-api.driven.com.br/api/v5/cineflex/seats/book-many", body)
 
-        promisse.then(() => console.log('deu certo') )
+        promisse.then(() => {
+            navegate("/sucess", {state: nameClient, cpf, title, time, day, nameSeat}) 
+        })
+
+
     }
 
     return (
@@ -90,14 +101,14 @@ export default function Seats() {
                         value={cpf}
                         required    
                     />
+                    <button>Reservar assento</button>
                 </form>
-                <button>Reservar assento</button>
             </InfostoBuy>
             <Footer>
                 <img src={seat?.movie?.posterURL} alt="img do filme" />
                 <div>
                     <p>{seat?.movie?.title}</p>
-                    <p>{seat?.day?.weekday} - {seat?.day?.date}</p>
+                    <p>{seat?.day?.weekday} - {seat?.name}</p>
                 </div>
             </Footer>
         </>

diff --git a/src/Components/Sucess.js b/src/Components/Sucess.js
@@ -1,6 +1,9 @@
+import { useLocation } from "react-router-dom"
 import styled from "styled-components"
+import { Link } from "react-router-dom"
 
 export default function Sucess(){
+    const {nameClient, cpf, title, time, day, nameSeat} = useLocation().state
     return(
         <>
         <SucessMsg>
@@ -9,22 +12,24 @@ export default function Sucess(){
         <DefaultSucess>
             <div>
                 <p>Filme e Sessão</p>
-                <p>Filme escolhido</p>
-                <p>DD/MM/AAAA 00:00</p>
+                <p>{title}</p>
+                <p>{day} - {time}</p>
             </div>
             <div>
                 <p>Ingressos</p>
-                <p>Assento 00</p>
+                {nameSeat?.map((s, i) => (
+                    <p key={i}>Assento {s}</p>
+                ))}
             </div>
             <div>
                 <p>Comprador</p>
-                <p>Nome: </p>
-                <p>Cpf: </p>
+                <p >Nome: {nameClient}</p>
+                <p >CPF: {cpf}</p>
             </div>            
         </DefaultSucess>
-        <Button>
-            Volta para home 
-        </Button>
+        <Link to="/">
+                <button>Voltar para o início</button>
+        </Link>
         </>
     )
 }
@@ -52,6 +57,3 @@ const DefaultSucess = styled.p`
         margin-bottom: 8px;
     }
 `
-const Button = styled.button`
-
-`