diff --git a/src/App.tsx b/src/App.tsx index 83b47eb..5221350 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,7 +33,7 @@ import MeusItinerarios from "./pages/MeusItinerarios/MeusItinerarios"; import Buscas from "./pages/Buscas"; import BuscarItinerario from "./pages/BuscarItinerario"; import BuscarPassageiro from "./pages/BuscarPassageiro/BuscarPassageiro"; -import Transportes from "./pages/Transportes/Transportes"; +import ListaItinerarios from "./pages/ListaItinerarios"; /* Core CSS required for Ionic components to work properly */ import "@ionic/react/css/core.css"; @@ -93,7 +93,7 @@ const routes = ( - + diff --git a/src/pages/BuscarItinerario.css b/src/pages/BuscarItinerario.css index 7c5f206..3fc88fa 100644 --- a/src/pages/BuscarItinerario.css +++ b/src/pages/BuscarItinerario.css @@ -6,6 +6,8 @@ .button-search{ display: flex; justify-content: center; + + margin-top: 50%; } .latest-searches{ diff --git a/src/pages/BuscarItinerario.tsx b/src/pages/BuscarItinerario.tsx index a2f82c1..102f721 100644 --- a/src/pages/BuscarItinerario.tsx +++ b/src/pages/BuscarItinerario.tsx @@ -1,31 +1,19 @@ import { - IonBackButton, IonButton, - IonButtons, IonCard, IonCardContent, - IonCardHeader, - IonCardSubtitle, - IonCardTitle, IonContent, - IonHeader, IonIcon, - IonItem, IonItemDivider, IonPage, IonRow, - IonTitle, IonToast, - IonToolbar, } from "@ionic/react"; import { arrowForwardOutline, - cashOutline, chevronForwardOutline, locateOutline, locationOutline, - personOutline, - starOutline, timeOutline, } from "ionicons/icons"; import "./BuscarItinerario.css"; @@ -39,7 +27,6 @@ import GooglePlacesAutocomplete, { geocodeByAddress, getLatLng, } from "react-google-places-autocomplete"; -import { Itinerary } from "../models/itinerary.model"; import { PageHeader } from "../components/PageHeader"; import { closeToast } from "../services/utils"; @@ -56,47 +43,9 @@ const BuscarItinerario: React.FC = () => { const [coordinatesFrom, setCoordinatesFrom] = useState(""); const [addressTo, setAddressTo] = useState(""); const [coordinatesTo, setCoordinatesTo] = useState(""); - const [showModalEnd, setShowModalEnd] = useState(false); - const [addressResults, setAddressResults] = useState([]); - const [inputActive, setInputActive] = useState(""); const [recentSearches, setRecentSearches] = useState([]); - const [itinerariesList, setItinerariesList] = useState(); - - // const optionsAddress = async (inputValue: any) => { - // let results = await autoCompleteAddress(inputValue) - // .then((res) => { - // return res.map((item: any) => { - // return { - // value: - // item.geometry.coordinates[0] + "," + item.geometry.coordinates[1], - // label: item.properties.formatted, - // }; - // }); - // }) - // .catch((err) => { - // console.log("Erro ao buscar endereço:", err); - // }); - // setAddressResults(results); - // }; - - // function setInputActiveOpenModal(input: string) { - // setInputActive(input); - // setShowModalEnd(true); - // } - - // function setAddress(div: any) { - // if (inputActive === "from") { - // setAddressFrom(div.target.attributes[2].value); - // setCoordinatesFrom(div.target.attributes[1].value); - // } else { - // setAddressTo(div.target.attributes[2].value); - // setCoordinatesTo(div.target.attributes[1].value); - // } - // setShowModalEnd(false); - // } - useEffect(() => { if (addressFrom.label && addressFrom.label.length > 0) { geocodeByAddress(addressFrom.label) @@ -118,10 +67,12 @@ const BuscarItinerario: React.FC = () => { return; } - const maxRecentSearchesLength = 0 + const maxRecentSearchesLength = 0; if (recentSearches.length >= maxRecentSearchesLength) { - setRecentSearches(recentSearches.slice(recentSearches.length - maxRecentSearchesLength)); + setRecentSearches( + recentSearches.slice(recentSearches.length - maxRecentSearchesLength) + ); } setRecentSearches((arr) => [ @@ -134,10 +85,12 @@ const BuscarItinerario: React.FC = () => { ]); await itinerariesService - .searchItineraries({ - coordinatesFrom, - coordinatesTo, - }) + // TODO, desfazer + // .searchItineraries({ + // coordinatesFrom, + // coordinatesTo, + // }) + .getAllItineraries() .then((response) => { // if (response.status === "error") { // setToastColor("danger"); @@ -147,7 +100,18 @@ const BuscarItinerario: React.FC = () => { // return; // } - setItinerariesList(response); + history.push({ + pathname: "/buscar/itinerario/lista", + state: { + coordinatesFrom, + coordinatesTo, + addressFrom, + addressTo, + itineraries: response, + }, + }); + + // setItinerariesList(response); }) .catch((err) => { setToastColor("danger"); @@ -225,7 +189,8 @@ const BuscarItinerario: React.FC = () => { return ( <>
- { fillSearchBars(search.addressFrom, search.addressTo); @@ -258,102 +223,6 @@ const BuscarItinerario: React.FC = () => { ) : ( <> )} - {/* - -
- Taquaral - - PUC-Campinas -
- Há 2 hora -
- -
*/} - {/* - -
- setShowModalEnd(false)} - /> - optionsAddress(e.detail.value)} - placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001" - className="search-modal" - /> -
- {addressResults.length > 0 ? ( - addressResults.map((item: any) => { - return ( -
setAddress(e)} - > - {item.label} - -
- ); - }) - ) : ( - <> - -
- - )} -
-
*/} - - {itinerariesList && itinerariesList.length !== 0 ? ( - <> - Resultados - {itinerariesList.map((itinerary, index) => { - return ( - { - history.push(`/itinerary/${itinerary.id_itinerary}`); - }} - > - - {itinerary.itinerary_nickname} - -

- Vagas disponíveis:{" "} - {itinerary.available_seats} -

-

- Motorista:{" "} - {itinerary.price} -

-

- Valor:{" "} - {itinerary.vehicle_plate} -

-
-
-
- ); - })} - - ) : ( - <> - )} { +const ListaItinerarios: React.FC = () => { const history = useHistory(); const location = useLocation(); const props = location.state as InfoBusca; - const [itinerarios, setItinerarios] = useState([]); + const [itinerariesList, setItinerariesList] = useState([]); const [showModalFilters, setShowModalFilters] = useState(false); const [showToast, setShowToast] = useState(false); - const [messageToast, setMessageToast ] = useState(''); - const [toastColor, setToastColor] = useState('success'); + const [messageToast, setMessageToast] = useState(""); + const [toastColor, setToastColor] = useState("success"); useEffect(() => { - if (props) { - buscaItinerarios(); + if (props.itineraries) { + setItinerariesList(props.itineraries); } }, [props]); - async function buscaItinerarios() { - let data = (await itinerariesService.searchItineraries(props)) as any; - setItinerarios(data); - } + useEffect(() => { + if (props.itineraries) { + setItinerariesList(props.itineraries); + } + }, [props]); - function criaAlerta(){ - createUserSearch(props.coordinatesFrom.lat, props.coordinatesFrom.lng, props.addressTo.label).then(() => { - setMessageToast('Alerta criado com sucesso!'); - setShowToast(true); - }).catch((err:any) => { - setMessageToast('Não foi possível criar o alerta!'); - setToastColor('danger'); - setShowToast(true); - }) + function criaAlerta() { + createUserSearch( + props.coordinatesFrom.lat, + props.coordinatesFrom.lng, + props.addressTo.label + ) + .then(() => { + setMessageToast("Alerta criado com sucesso!"); + setShowToast(true); + }) + .catch((err: any) => { + setMessageToast("Não foi possível criar o alerta!"); + setToastColor("danger"); + setShowToast(true); + }); } return ( - {/* TODO, componentizar Header */} +
{/* */} - - +
{props.addressFrom.label} @@ -109,39 +103,44 @@ const Transportes: React.FC = () => {
- {itinerarios && itinerarios.length > 0? ( -
- - -
Mais barata
- - Seu João + {itinerariesList && itinerariesList.length !== 0 ? ( + <> + Resultados + {itinerariesList.map((itinerary, index) => { + return ( + { + history.push(`/itinerary/${itinerary.id_itinerary}`); + }} + > + + {itinerary.itinerary_nickname} + +

+ Vagas disponíveis:{" "} + {itinerary.available_seats} +

+

+ Motorista:{" "} + {itinerary.price} +

+

+ Valor:{" "} + {itinerary.vehicle_plate} +

+
+
-
- -
Melhor avaliação
- - Seu Zé - -
-
-
- ) - : - (

Não foi encontrado nenhum transporte que atenda essa rota.

)} - {itinerarios && - itinerarios.map((record: any, index: any) => { - return ( - - -

Motorista: {record.motorista}

-
Avaliação: {record.avaliacao}
-
Valor: {record.valor}
-
Lugares disponíveis: {record.lugares}
-
-
- ); - })} + ); + })} + + ) : ( +

+ Não foi encontrado nenhum itinerário que atenda essa rota. +

+ )}
criaAlerta()}>Criar Alerta @@ -210,7 +209,7 @@ const Transportes: React.FC = () => { closeToast(setShowToast)} message={messageToast} @@ -221,4 +220,4 @@ const Transportes: React.FC = () => { ); }; -export default Transportes; +export default ListaItinerarios;