cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refatora página de lista de itinerários da busca

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-09-09 21:36:05 -03:00
parent f99ea6f24a
commit 46768cb941
5 changed files with 109 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/pages/BuscarItinerario.tsx
View File

@@ -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<any>("");
const [addressTo, setAddressTo] = useState<any>("");
const [coordinatesTo, setCoordinatesTo] = useState<any>("");
const [showModalEnd, setShowModalEnd] = useState(false);
const [addressResults, setAddressResults] = useState<any[]>([]);
const [inputActive, setInputActive] = useState("");
const [recentSearches, setRecentSearches] = useState<any[]>([]);
const [itinerariesList, setItinerariesList] = useState<Itinerary[]>();
// 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 (
<>
<div>
<IonRow key={index}
<IonRow
key={index}
class="latest-searches"
onClick={() => {
fillSearchBars(search.addressFrom, search.addressTo);
@@ -258,102 +223,6 @@ const BuscarItinerario: React.FC = () => {
) : (
<></>
)}
{/* <IonRow class="latest-searches">
<IonIcon
className="icon-align-vcenter"
size="large"
icon={timeOutline}
/>
<div className="div_from_to">
<span>Taquaral</span>
<IonIcon icon={arrowForwardOutline}></IonIcon>
<span>PUC-Campinas</span>
<br />
<small>Há 2 hora</small>
</div>
<IonIcon
className="icon-forward icon-align-vcenter"
size="large"
icon={chevronForwardOutline}
/>
</IonRow> */}
{/* <IonModal isOpen={showModalEnd}>
<IonContent>
<div className="header-search-modal">
<IonIcon
className="icon-return-modal"
icon={arrowBack}
onClick={() => setShowModalEnd(false)}
/>
<IonInput
onIonChange={(e) => optionsAddress(e.detail.value)}
placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001"
className="search-modal"
/>
</div>
{addressResults.length > 0 ? (
addressResults.map((item: any) => {
return (
<div
key={item.value}
className="modal-search-results"
data-value={item.value}
data-label={item.label}
onClick={(e) => setAddress(e)}
>
{item.label}
<IonIcon
className="icon-results-modal"
icon={chevronForwardOutline}
/>
</div>
);
})
) : (
<>
<IonProgressBar type="indeterminate" />
<br />
</>
)}
</IonContent>
</IonModal> */}
{itinerariesList && itinerariesList.length !== 0 ? (
<>
<IonItemDivider color="secondary">Resultados</IonItemDivider>
{itinerariesList.map((itinerary, index) => {
return (
<IonCard
button
key={index}
onClick={() => {
history.push(`/itinerary/${itinerary.id_itinerary}`);
}}
>
<IonCardHeader>
<IonCardTitle>{itinerary.itinerary_nickname}</IonCardTitle>
<IonCardSubtitle>
<p>
<IonIcon icon={personOutline} /> Vagas disponíveis:{" "}
{itinerary.available_seats}
</p>
<p>
<IonIcon icon={starOutline} /> Motorista:{" "}
{itinerary.price}
</p>
<p>
<IonIcon icon={cashOutline} /> Valor:{" "}
{itinerary.vehicle_plate}
</p>
</IonCardSubtitle>
</IonCardHeader>
</IonCard>
);
})}
</>
) : (
<></>
)}
<IonToast
color={toastColor}