Busca por itinerários consome dados do backend
This commit is contained in:
@@ -7,7 +7,7 @@ const transportsRoutes = {
|
|||||||
url: `${transportsRoutesDefault}`
|
url: `${transportsRoutesDefault}`
|
||||||
},
|
},
|
||||||
search: {
|
search: {
|
||||||
url: `${transportsRoutesDefault}/search`
|
url: `${transportsRoutesDefault}/search/inradius`
|
||||||
},
|
},
|
||||||
update: {
|
update: {
|
||||||
url: `${transportsRoutesDefault}`
|
url: `${transportsRoutesDefault}`
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ import {
|
|||||||
IonPage,
|
IonPage,
|
||||||
IonRow,
|
IonRow,
|
||||||
IonTitle,
|
IonTitle,
|
||||||
|
IonToast,
|
||||||
IonToolbar,
|
IonToolbar,
|
||||||
} from "@ionic/react";
|
} from "@ionic/react";
|
||||||
import {
|
import {
|
||||||
@@ -40,9 +41,17 @@ import GooglePlacesAutocomplete, {
|
|||||||
} from "react-google-places-autocomplete";
|
} from "react-google-places-autocomplete";
|
||||||
import { Itinerary } from "../models/itinerary.model";
|
import { Itinerary } from "../models/itinerary.model";
|
||||||
import { PageHeader } from "../components/PageHeader";
|
import { PageHeader } from "../components/PageHeader";
|
||||||
|
import { closeToast } from "../services/utils";
|
||||||
|
|
||||||
|
import { Color } from "@ionic/core";
|
||||||
|
|
||||||
const BuscarItinerario: React.FC = () => {
|
const BuscarItinerario: React.FC = () => {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
|
||||||
|
const [showToast, setShowToast] = useState(false);
|
||||||
|
const [messageToast, setMessageToast] = useState("");
|
||||||
|
const [toastColor, setToastColor] = useState<Color>("primary");
|
||||||
|
|
||||||
const [addressFrom, setAddressFrom] = useState<any>("");
|
const [addressFrom, setAddressFrom] = useState<any>("");
|
||||||
const [coordinatesFrom, setCoordinatesFrom] = useState<any>("");
|
const [coordinatesFrom, setCoordinatesFrom] = useState<any>("");
|
||||||
const [addressTo, setAddressTo] = useState<any>("");
|
const [addressTo, setAddressTo] = useState<any>("");
|
||||||
@@ -107,9 +116,27 @@ const BuscarItinerario: React.FC = () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const itinerariesList = await itinerariesService.getAllItineraries();
|
await itinerariesService
|
||||||
|
.searchItineraries({
|
||||||
|
coordinatesFrom,
|
||||||
|
coordinatesTo,
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
// if (response.status === "error") {
|
||||||
|
// setToastColor("danger");
|
||||||
|
// setMessageToast(response.message);
|
||||||
|
// setShowToast(true);
|
||||||
|
|
||||||
setItinerariesList(itinerariesList);
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
setItinerariesList(response);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setToastColor("danger");
|
||||||
|
setMessageToast(err);
|
||||||
|
setShowToast(true);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -252,7 +279,13 @@ const BuscarItinerario: React.FC = () => {
|
|||||||
<IonItemDivider color="secondary">Resultados</IonItemDivider>
|
<IonItemDivider color="secondary">Resultados</IonItemDivider>
|
||||||
{itinerariesList.map((itinerary, index) => {
|
{itinerariesList.map((itinerary, index) => {
|
||||||
return (
|
return (
|
||||||
<IonCard button key={index} onClick={() => { history.push(`/itinerary/${itinerary.id_itinerary}`) }}>
|
<IonCard
|
||||||
|
button
|
||||||
|
key={index}
|
||||||
|
onClick={() => {
|
||||||
|
history.push(`/itinerary/${itinerary.id_itinerary}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<IonCardHeader>
|
<IonCardHeader>
|
||||||
<IonCardTitle>{itinerary.itinerary_nickname}</IonCardTitle>
|
<IonCardTitle>{itinerary.itinerary_nickname}</IonCardTitle>
|
||||||
<IonCardSubtitle>
|
<IonCardSubtitle>
|
||||||
@@ -277,6 +310,14 @@ const BuscarItinerario: React.FC = () => {
|
|||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<IonToast
|
||||||
|
color={toastColor}
|
||||||
|
isOpen={showToast}
|
||||||
|
onDidDismiss={() => closeToast(setShowToast)}
|
||||||
|
message={messageToast}
|
||||||
|
duration={2500}
|
||||||
|
/>
|
||||||
</IonContent>
|
</IonContent>
|
||||||
</IonPage>
|
</IonPage>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -86,8 +86,6 @@ const PerfilEditar: React.FC = () => {
|
|||||||
birth_date: userData.birth_date,
|
birth_date: userData.birth_date,
|
||||||
bio: userData.bio,
|
bio: userData.bio,
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(inputValues);
|
|
||||||
}, [userData]);
|
}, [userData]);
|
||||||
|
|
||||||
const handleUpdateUserData = () => {
|
const handleUpdateUserData = () => {
|
||||||
|
|||||||
@@ -19,15 +19,9 @@ function updateHeader() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface GetItinerariesRequest {
|
export interface Coordinates {
|
||||||
coordinatesFrom: {
|
lat: number,
|
||||||
lat: number,
|
lng: number
|
||||||
lng: number
|
|
||||||
},
|
|
||||||
coordinatesTo: {
|
|
||||||
lat: number,
|
|
||||||
lng: number
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function get() {
|
export async function get() {
|
||||||
@@ -37,9 +31,9 @@ export async function get() {
|
|||||||
return response.data;
|
return response.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function search(coordinates: GetItinerariesRequest) {
|
export async function search(coordinatesOrigin: Coordinates, coordinatesDestination: Coordinates) {
|
||||||
updateHeader();
|
updateHeader();
|
||||||
|
|
||||||
const response = await instance.get(transportsRoutes.get.url + `/${coordinates}`, { headers: header });
|
const response = await instance.post(transportsRoutes.search.url, { coordinatesOrigin, coordinatesDestination }, { headers: header });
|
||||||
return response.data;
|
return response.data;
|
||||||
}
|
}
|
||||||
@@ -1,17 +1,17 @@
|
|||||||
import * as itinerariesRoutes from '../api/itineraries';
|
import * as itinerariesRoutes from '../api/itineraries';
|
||||||
|
|
||||||
interface CoordinatesRequest {
|
interface CoordinatesRequest {
|
||||||
coordinatesFrom:{
|
coordinatesFrom: {
|
||||||
lat: number,
|
lat: number,
|
||||||
lng: number
|
lng: number
|
||||||
},
|
},
|
||||||
coordinatesTo:{
|
coordinatesTo: {
|
||||||
lat: number,
|
lat: number,
|
||||||
lng: number
|
lng: number
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getAllItineraries() : Promise<any> {
|
export async function getAllItineraries(): Promise<any> {
|
||||||
let res: any;
|
let res: any;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -24,13 +24,15 @@ export async function getAllItineraries() : Promise<any> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export async function searchItineraries(request: CoordinatesRequest) : Promise<any> {
|
export async function searchItineraries({ coordinatesFrom, coordinatesTo }: CoordinatesRequest): Promise<any> {
|
||||||
let res
|
let res: any
|
||||||
try {
|
try {
|
||||||
let res : any = await itinerariesRoutes.search(request);
|
res = await itinerariesRoutes.search(coordinatesFrom, coordinatesTo);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// TODO
|
// TODO
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return res.data
|
||||||
}
|
}
|
||||||
|
|
||||||
export default { getAllItineraries, searchItineraries }
|
export default { getAllItineraries, searchItineraries }
|
||||||
|
|||||||
Reference in New Issue
Block a user