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

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 = (
     <Route exact path="/buscas" component={Buscas}></Route>
     <Route exact path="/buscar/itinerario" component={BuscarItinerario}></Route>
     <Route exact path="/buscar/passageiro" component={BuscarPassageiro}></Route>
-    <Route exact path="/transportes" component={Transportes}></Route>
+    <Route exact path="/buscar/itinerario/lista" component={ListaItinerarios}></Route>
 
     <Route exact path="/">
       <Redirect to="/home" />

src/pages/BuscarItinerario.css

@@ -6,6 +6,8 @@
 .button-search{
     display: flex;
     justify-content: center;
+
+    margin-top: 50%;
 }
 
 .latest-searches{

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<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}

src/pages/ListaItinerarios.tsx

@@ -5,100 +5,94 @@ import {
   IonFabButton,
   IonIcon,
   IonCard,
-  IonInput,
-  IonRow,
-  IonCol,
-  IonCardContent,
   IonButton,
   IonHeader,
   IonToolbar,
-  IonButtons,
-  IonBackButton,
-  IonTabs,
-  IonTabBar,
-  IonTabButton,
   IonLabel,
-  IonBadge,
-  IonRouterOutlet,
-  IonSlides,
-  IonSlide,
   IonModal,
-  IonList,
   IonRadioGroup,
-  IonListHeader,
   IonItem,
   IonRadio,
   IonCheckbox,
   IonFooter,
   IonToast,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonItemDivider,
 } from "@ionic/react";
 import {
-  arrowBack,
-  arrowBackOutline,
   arrowForwardOutline,
-  chevronBackOutline,
-  chevronForwardOutline,
+  cashOutline,
   closeOutline,
-  locateOutline,
-  locationOutline,
-  timeOutline,
+  personOutline,
+  starOutline,
 } from "ionicons/icons";
 import { useEffect, useState } from "react";
 import { useHistory, useLocation } from "react-router";
-import itinerariesService from "../../services/functions/itinerariesService";
-import { createUserSearch } from "../../services/api/users";
-import "./Transportes.css";
-import { closeToast } from "../../services/utils";
+import { createUserSearch } from "../services/api/users";
+import "./ListaItinerarios.css";
+import { closeToast } from "../services/utils";
+import { Itinerary } from "../models/itinerary.model";
+import { PageHeader } from "../components/PageHeader";
 
 interface InfoBusca {
   addressFrom: any;
   addressTo: any;
   coordinatesFrom: any;
   coordinatesTo: any;
+
+  itineraries: Itinerary[];
 }
 
-const Transportes: React.FC = () => {
+const ListaItinerarios: React.FC = () => {
   const history = useHistory();
   const location = useLocation();
   const props = location.state as InfoBusca;
-  const [itinerarios, setItinerarios] = useState([]);
+  const [itinerariesList, setItinerariesList] = useState<Itinerary[]>([]);
   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 (
     <IonPage>
-      {/* TODO, componentizar Header */}
+      <PageHeader pageName="Itinerários" backButtonPageUrl="" />
       <IonHeader>
         <div className="header-page">
           {/* <IonButtons slot="start">
             <IonBackButton text={'aaaa'} icon={arrowBack} defaultHref='buscar-transporte' />
           </IonButtons> */}
-          <span className="span-info-back" onClick={history.goBack}>
-            <IonIcon className="icon-return" icon={chevronBackOutline} />
+          <span className="span-info-back">
             <div className="address-from-to">
               <span>{props.addressFrom.label}</span>
               <IonIcon icon={arrowForwardOutline} />
@@ -109,39 +103,44 @@ const Transportes: React.FC = () => {
         </div>
       </IonHeader>
       <IonContent fullscreen>
-        {itinerarios && itinerarios.length > 0? (
-          <div className="header-tabs">
-            <IonSlides>
-              <IonSlide>
-                <h5>Mais barata</h5>
-                <IonCard className="card-transporte">
-                  <IonCardContent>Seu João</IonCardContent>
+        {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>
-              </IonSlide>
-              <IonSlide>
-                <h5>Melhor avaliação</h5>
-                <IonCard className="card-transporte">
-                  <IonCardContent>Seu Zé</IonCardContent>
-                </IonCard>
-              </IonSlide>
-            </IonSlides>
-          </div>
-        ) 
-        : 
-        (<h1 className="msg-not-found">Não foi encontrado nenhum transporte que atenda essa rota.</h1>)}
-        {itinerarios &&
-          itinerarios.map((record: any, index: any) => {
-            return (
-              <IonCard className="card-transporte" key={index}>
-                <IonCardContent>
-                  <h1>Motorista: {record.motorista}</h1>
-                  <div>Avaliação: {record.avaliacao}</div>
-                  <div>Valor: {record.valor}</div>
-                  <div>Lugares disponíveis: {record.lugares}</div>
-                </IonCardContent>
-              </IonCard>
-            );
-        })}
+              );
+            })}
+          </>
+        ) : (
+          <h1 className="msg-not-found">
+            Não foi encontrado nenhum itinerário que atenda essa rota.
+          </h1>
+        )}
 
         <div className="button-criar-alerta">
           <IonButton onClick={() => criaAlerta()}>Criar Alerta</IonButton>
@@ -221,4 +220,4 @@ const Transportes: React.FC = () => {
   );
 };
 
-export default Transportes;
+export default ListaItinerarios;