Ajustes Busca Itinerários

src/App.tsx

@@ -24,8 +24,6 @@ import CompletarDocumento from './pages/CadastroCompletar/CompletarDocumento';
 import CompletarTelefone from './pages/CadastroCompletar/CompletarTelefone';
 import Transportes from './pages/Transportes/Transportes';
 import BuscarPassageiro from './pages/BuscarPassageiro/BuscarPassageiro';
-import BuscarItinerarioList from './pages/BuscarItinerarioList';
-import Debug from './pages/Debug';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';

src/pages/BuscarItinerario.tsx

@@ -57,9 +57,11 @@ const BuscarItinerario: React.FC = () => {
   const [addressTo, setAddressTo] = useState<any>("");
   const [coordinatesTo, setCoordinatesTo] = useState<any>("");
   const [showModalEnd, setShowModalEnd] = useState(false);
-  const [addressResults, setAddressResults] = useState<any>([]);
+  const [addressResults, setAddressResults] = useState<any[]>([]);
   const [inputActive, setInputActive] = useState("");
 
+  const [recentSearches, setRecentSearches] = useState<any[]>([]);
+
   const [itinerariesList, setItinerariesList] = useState<Itinerary[]>();
 
   // const optionsAddress = async (inputValue: any) => {
@@ -116,6 +118,21 @@ const BuscarItinerario: React.FC = () => {
       return;
     }
 
+    const maxRecentSearchesLength = 0
+
+    if (recentSearches.length >= maxRecentSearchesLength) {
+      setRecentSearches(recentSearches.slice(recentSearches.length - maxRecentSearchesLength));
+    }
+
+    setRecentSearches((arr) => [
+      ...arr,
+      {
+        addressFrom: addressFrom.label,
+        addressTo: addressTo.label,
+        time: Date.now(),
+      },
+    ]);
+
     await itinerariesService
       .searchItineraries({
         coordinatesFrom,
@@ -139,6 +156,11 @@ const BuscarItinerario: React.FC = () => {
       });
   }
 
+  function fillSearchBars(addressFrom: string, addressTo: string) {
+    // setAddressFrom(addressFrom);
+    // setAddressTo(addressTo);
+  }
+
   return (
     <IonPage>
       <PageHeader
@@ -194,19 +216,32 @@ const BuscarItinerario: React.FC = () => {
             </div>
           </IonCardContent>
         </IonCard>
+
+        {recentSearches && recentSearches.length !== 0 ? (
+          <>
             <IonItemDivider color="dark">Pesquisas recentes</IonItemDivider>
             <IonRow class="latest-searches">
+              {recentSearches.map((search, index) => {
+                return (
+                  <>
+                    <div key={index}>
+                      <IonRow
+                        class="latest-searches"
+                        onClick={() => {
+                          fillSearchBars(search.addressFrom, search.addressTo);
+                        }}
+                      >
                         <IonIcon
                           className="icon-align-vcenter"
                           size="large"
                           icon={timeOutline}
                         ></IonIcon>
                         <div className="div_from_to">
-            <span>Rua Tal Tal, 154, São Paulo - SP</span>
+                          <span>{search.addressFrom}</span>
                           <IonIcon icon={arrowForwardOutline}></IonIcon>
-            <span>USP</span>
+                          <span>{search.addressTo}</span>
                           <br />
-            <small>Há 1 hora</small>
+                          <small>{search.time}</small>
                         </div>
                         <IonIcon
                           className="icon-forward icon-align-vcenter"
@@ -214,7 +249,16 @@ const BuscarItinerario: React.FC = () => {
                           icon={chevronForwardOutline}
                         ></IonIcon>
                       </IonRow>
-        <IonRow class="latest-searches">
+                    </div>
+                  </>
+                );
+              })}
+            </IonRow>
+          </>
+        ) : (
+          <></>
+        )}
+        {/* <IonRow class="latest-searches">
           <IonIcon
             className="icon-align-vcenter"
             size="large"
@@ -232,7 +276,7 @@ const BuscarItinerario: React.FC = () => {
             size="large"
             icon={chevronForwardOutline}
           />
-        </IonRow>
+        </IonRow> */}
         {/* <IonModal isOpen={showModalEnd}>
           <IonContent>
             <div className="header-search-modal">
@@ -274,7 +318,7 @@ const BuscarItinerario: React.FC = () => {
           </IonContent>
         </IonModal> */}
 
-        {itinerariesList ? (
+        {itinerariesList && itinerariesList.length !== 0 ? (
           <>
             <IonItemDivider color="secondary">Resultados</IonItemDivider>
             {itinerariesList.map((itinerary, index) => {

src/pages/BuscarItinerarioList.tsx

@@ -1,190 +0,0 @@
-import {
-  IonBackButton,
-  IonButtons,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardSubtitle,
-  IonCardTitle,
-  IonContent,
-  IonGrid,
-  IonHeader,
-  IonIcon,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonListHeader,
-  IonPage,
-  IonRow,
-  IonSelect,
-  IonSelectOption,
-  IonTitle,
-  IonToolbar,
-} from "@ionic/react";
-import { cashOutline, personOutline, starOutline } from "ionicons/icons";
-
-import { useEffect, useState } from "react";
-import { useHistory } from "react-router";
-import { PageHeader } from "../components/PageHeader";
-
-interface coordinates {
-  lat: number;
-  lgn: number;
-}
-
-interface Itinerario {
-  motorista: string;
-  valor: string;
-  lugares: string;
-  avaliacao: string;
-  bairros_atendidos: coordinates[];
-  destinos: coordinates[];
-}
-
-const BuscarItinerario: React.FC = () => {
-  const [selectedBairro, setSelectedBairro] = useState("");
-  const [selectedFaculdade, setSelectedFaculdade] = useState("");
-
-  const [itinerarios, setItinerarios] = useState<Itinerario[]>();
-
-  useEffect(() => {
-    setItinerarios([
-      {
-        motorista: "João",
-        valor: "R$ 150,00",
-        lugares: "2",
-        avaliacao: "4.5",
-        bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }],
-        destinos: [{ lat: -22.833645, lgn: -47.048905 }],
-      },
-      {
-        motorista: "Ricardo",
-        valor: "R$ 180,00",
-        lugares: "5",
-        avaliacao: "4.0",
-        bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }],
-        destinos: [{ lat: -22.833645, lgn: -47.048905 }],
-      },
-      {
-        motorista: "Luiz",
-        valor: "R$ 200,00",
-        lugares: "1",
-        avaliacao: "4.3",
-        bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }],
-        destinos: [{ lat: -22.833645, lgn: -47.048905 }],
-      },
-      {
-        motorista: "Marcos",
-        valor: "R$ 199,00",
-        lugares: "6",
-        avaliacao: "4.9",
-        bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }],
-        destinos: [{ lat: -22.833645, lgn: -47.048905 }],
-      },
-      {
-        motorista: "Orandi",
-        valor: "R$ 210,00",
-        lugares: "8",
-        avaliacao: "5.0",
-        bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }],
-        destinos: [{ lat: -22.833645, lgn: -47.048905 }],
-      },
-      {
-        motorista: "Pedro",
-        valor: "R$ 189,00",
-        lugares: "4",
-        avaliacao: "4.1",
-        bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }],
-        destinos: [{ lat: -22.833645, lgn: -47.048905 }],
-      },
-      {
-        motorista: "Pericles",
-        valor: "R$ 220,00",
-        lugares: "19",
-        avaliacao: "4.5",
-        bairros_atendidos: [{ lat: -23.873432, lgn: -47.142274 }],
-        destinos: [{ lat: -22.833645, lgn: -47.048905 }],
-      },
-    ]);
-  }, []);
-
-  return (
-    <IonPage>
-      <PageHeader
-        pageName="Buscar itinerários"
-        backButtonPageUrl="/buscas"
-      ></PageHeader>
-
-      <IonContent fullscreen>
-        {/* <IonGrid>
-          <IonRow> */}
-            <IonList>
-              <IonListHeader>Filtros de busca</IonListHeader>
-              <IonItem>
-                <IonLabel>Bairro de origem</IonLabel>
-                <IonSelect
-                  // placeholder="Selecione o bairro de origem"
-                  onIonChange={(e) => {
-                    setSelectedBairro(e.detail.value!);
-                  }}
-                >
-                  <IonSelectOption value="1">Vila Marieta</IonSelectOption>
-                  <IonSelectOption value="2">Botafogo</IonSelectOption>
-                  <IonSelectOption value="3">Cambuí</IonSelectOption>
-                </IonSelect>
-              </IonItem>
-
-              <IonItem>
-                <IonLabel>Instituição de ensino de destino</IonLabel>
-                <IonSelect
-                  // placeholder="Selecione a instituição de ensino de destino"
-                  onIonChange={(e) => {
-                    setSelectedFaculdade(e.detail.value!);
-                  }}
-                >
-                  <IonSelectOption value="1">
-                    PUC Campinas (campus 1)
-                  </IonSelectOption>
-                  <IonSelectOption value="2">Unicamp</IonSelectOption>
-                  <IonSelectOption value="3">UNIP</IonSelectOption>
-                </IonSelect>
-              </IonItem>
-            </IonList>
-          {/* </IonRow> */}
-
-          {/* <IonRow> */}
-            {selectedBairro && selectedFaculdade ? (
-              <>
-                {itinerarios ? (
-                  itinerarios.map((itinerario, index) => {
-                    return (
-                      <IonCard key={index}>
-                        <IonCardHeader>
-                          <IonCardTitle>
-                            {/* <p>Bairros atendidos: {itinerario.bairros_atendidos[0].lat},{itinerario.bairros_atendidos[0].lgn}</p> */}
-                            {/* <p>Instituições de ensino atendidas: {itinerario.destinos[0].lat},{itinerario.destinos[0].lgn}</p> */}
-                          </IonCardTitle>
-                          <IonCardSubtitle>
-                            <p><IonIcon icon={personOutline} /> Vagas disponíveis: {itinerario.lugares}</p>
-                            <p><IonIcon icon={starOutline} /> Motorista: {itinerario.motorista}</p>
-                            <p><IonIcon icon={cashOutline} /> Valor: {itinerario.valor}</p>
-                          </IonCardSubtitle>
-                        </IonCardHeader>
-                      </IonCard>
-                    );
-                  })
-                ) : (
-                  <></>
-                )}
-              </>
-            ) : (
-              <></>
-            )}
-          {/* </IonRow>
-        </IonGrid> */}
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default BuscarItinerario;