Inclui páginas base de Buscas e Buscar Itinerário

src/App.tsx

@@ -15,6 +15,7 @@ import { IonReactRouter } from '@ionic/react-router';
 import Cadastro from './pages/Cadastro/Cadastro';
 import Login from './pages/Login';
 import Home from './pages/Home';
+import Buscas from './pages/Buscas';
 import Perfil from './pages/Perfil';
 import PerfilEditar from './pages/PerfilEditar';
 import CadastroVan from './pages/CadastroVan';
@@ -52,6 +53,7 @@ import React from 'react';
 import MinhasVans from './pages/MinhasVans';
 import MeusItinerarios from './pages/MeusItinerarios/MeusItinerarios';
 import CadastrarItinerario from './pages/CadastrarItinerario/CadastrarItinerario';
+import BuscarItinerario from './pages/BuscarItinerario';
 
 setupIonicReact();
 
@@ -62,6 +64,8 @@ const routes = (
 
   <Route exact path="/home" component={Home}></Route>
 
+  <Route exact path="/buscas" component={Buscas}></Route>
+
   <Route exact path="/perfil" component={Perfil}></Route>
   <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
   <Route exact path="/perfil/completar" component={CadastroCompletar}></Route>
@@ -71,6 +75,8 @@ const routes = (
   <Route exact path="/transportes" component={Transportes}></Route>
   <Route exact path="/buscar-passageiro" component={BuscarPassageiro}></Route>
   <Route exact path="/buscar-transporte" component={BuscarTransporte}></Route>
+  <Route exact path="/buscar/passageiro" component={BuscarPassageiro}></Route>
+  <Route exact path="/buscar/itinerario" component={BuscarItinerario}></Route>
 
   <Route exact path="/usuario/:id" component={Perfil}></Route>
 
@@ -109,7 +115,7 @@ const IonicApp: React.FC = () => {
             <IonRouterOutlet>{routes}</IonRouterOutlet>
             
             <IonTabBar slot="bottom">
-              <IonTabButton tab="buscar" href="/buscar-transporte">
+              <IonTabButton tab="buscar" href="/buscas">
                 <IonIcon icon={search} />
                 <IonLabel>Buscar</IonLabel>
               </IonTabButton>

src/pages/BuscarItinerario.tsx

@@ -0,0 +1,191 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonPage,
+  IonRow,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+
+import { useEffect, useState } from "react";
+import { useHistory } from "react-router";
+
+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>
+      <IonHeader translucent>
+        <IonToolbar>
+          <IonTitle>Buscar itinerários</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton text="" defaultHref="/buscas" />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <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>Vagas disponíveis: {itinerario.lugares}</p>
+                            <p>Motorista: {itinerario.motorista}</p>
+                            <p>Valor: {itinerario.valor}</p>
+                          </IonCardSubtitle>
+                        </IonCardHeader>
+                      </IonCard>
+                    );
+                  })
+                ) : (
+                  <></>
+                )}
+              </>
+            ) : (
+              <></>
+            )}
+          {/* </IonRow>
+        </IonGrid> */}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default BuscarItinerario;

src/pages/Buscas.tsx

@@ -0,0 +1,59 @@
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonPage } from "@ionic/react";
+
+import { useEffect, useState } from "react";
+import { useHistory } from "react-router";
+
+const Buscas: React.FC = () => {
+  useEffect(() => {}, []);
+  const history = useHistory();
+
+  return (
+    <IonPage>
+      <IonContent fullscreen>
+        <IonCard button onClick={ () => history.push({ pathname: "/buscar/itinerario"}) }>
+          <img src="https://images.unsplash.com/photo-1561361513-2d000a50f0dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmFufGVufDB8fDB8fA%3D%3D&w=1000&q=80" />
+          <IonCardHeader>
+            <IonCardTitle>Buscar itinerários</IonCardTitle>
+          </IonCardHeader>
+
+          <IonCardContent>
+            Clique aqui para buscar por itinerários
+          </IonCardContent>
+        </IonCard>
+
+        <IonCard button onClick={ () => history.push({ pathname: "/buscar/passageiro"}) }>
+          <img src="https://media.istockphoto.com/photos/male-passenger-using-laptop-during-flight-picture-id926203958?k=20&m=926203958&s=612x612&w=0&h=o52_eychVRRum6U5Q8C3bVxpnyXzcueqo1I52bhI-KA=" />
+          <IonCardHeader>
+            <IonCardTitle>Buscar passageiros</IonCardTitle>
+          </IonCardHeader>
+
+          <IonCardContent>
+            Clique aqui para buscar por passageiros
+          </IonCardContent>
+        </IonCard>
+
+        <IonCard button onClick={ () => history.push({ pathname: "/buscar-transporte"}) }>
+          <IonCardHeader>
+            <IonCardTitle>/buscar-transporte</IonCardTitle>
+          </IonCardHeader>
+
+          <IonCardContent>
+            Clique aqui para buscar por transportes
+          </IonCardContent>
+        </IonCard>
+
+        <IonCard button onClick={ () => history.push({ pathname: "/buscar-passageiro"}) }>
+          <IonCardHeader>
+            <IonCardTitle>/buscar-passageiro</IonCardTitle>
+          </IonCardHeader>
+
+          <IonCardContent>
+            Clique aqui para buscar por passageiros
+          </IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Buscas;