wip

2022-06-20 02:14:06 -03:00
parent 533f8e41e8
commit 94246cb8e3
13 changed files with 897 additions and 89 deletions
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
    "pullstate": "^1.24.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
+    "react-google-places-autocomplete": "^3.3.4",
    "react-hook-form": "^7.30.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,7 +45,7 @@ const App: React.FC = () => (
          <Route exact path="/cadastro" component={Cadastro}></Route>
          <Route exact path="/login" component={Login}></Route>
          <Route exact path="/buscar-passageiro" component={BuscarPassageiro}></Route>
-          <Route exact path="/buscar-transporte" component={BuscarTransporte}></Route>
+          {/* <Route exact path="/buscar-transporte" component={BuscarTransporte}></Route> */}
          <Route exact path="/transportes" component={Transportes}></Route>
          <Route exact path="/">
            <Redirect to="/mainpages" />
--- a/src/components/UserSearchInfos/UserSearchInfos.css
+++ b/src/components/UserSearchInfos/UserSearchInfos.css
@@ -0,0 +1,60 @@
+.overlayContainer {
+
+	display: flex;
+	flex-direction: column;
+	/* // align-items: center;
+	// align-content: center; */
+
+	padding: 1rem;
+
+	width: 12rem;
+	height: fit-content;
+	background-color: white;
+
+	border-radius: 5px;
+
+	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+
+.overlayContainer ion-card-subtitle {
+
+	font-size: 0.7rem;
+	color: black;
+}
+
+.overlayContainer ion-note {
+
+	font-size: 0.6rem;
+	margin-bottom: 0.5rem;
+}
+
+.overlayContainer ion-badge {
+
+	margin-bottom: 1.5rem;
+}
+
+.overlayContainer p {
+	color: black;
+	padding: 0;
+	margin: 0;
+	margin-bottom: 0.3rem;
+	font-size: 0.6rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	align-content: center;
+}
+
+.overlayContainer:after { 
+
+	content:'';
+    position: absolute;
+    top: 100%;
+    left: 70%;
+    margin-left: -50px;
+    width: 0;
+    height: 0;
+    border-top: solid 10px white;
+    border-left: solid 10px transparent;
+    border-right: solid 10px transparent;
+}
--- a/src/components/UserSearchInfos/UserSearchInfos.tsx
+++ b/src/components/UserSearchInfos/UserSearchInfos.tsx
@@ -0,0 +1,65 @@
+import {
+  IonBadge,
+  IonButton,
+  IonCardSubtitle,
+  IonCol,
+  IonIcon,
+  IonNote,
+  IonRow,
+} from "@ionic/react";
+import {
+  arrowForward,
+  call,
+  callOutline,
+  navigateOutline,
+} from "ionicons/icons";
+import "./UserSearchInfos.css";
+
+export const UserSearchInfos = (record: any) => {
+  console.log(record.record);
+  return (
+    <div className="overlayContainer">
+      <IonCardSubtitle>{record.record.user.name}</IonCardSubtitle>
+      {/* <IonNote color="medium">{ record.record.addressFrom }</IonNote> */}
+      <IonBadge color="dark">
+        {record.record.user.star_rating
+          ? `${record.record.user.star_rating} estrelas`
+          : "Sem avaliações"}
+      </IonBadge>
+
+      <p>
+        <IonIcon icon={navigateOutline} size='large' />
+        &nbsp;{record.record.address_to}
+      </p>
+
+      {record.record.user.phone_number && (
+        <p>
+          <IonIcon icon={call} />
+          &nbsp;{record.record.user.phone_number}
+        </p>
+      )}
+
+      <IonRow className="ion-no-padding ion-no-margin ion-margin-top">
+        <IonCol size="12" className="ion-no-padding ion-no-margin">
+          <IonButton
+            color="primary"
+            fill="solid"
+            size="small"
+            expand="block"
+            routerLink={`/perfil/${record.record.user.id_user}`}
+          >
+            Ver mais informações &rarr;
+          </IonButton>
+        </IonCol>
+      </IonRow>
+
+      <IonRow className="ion-no-padding ion-no-margin">
+        <IonCol size="12" className="ion-no-padding ion-no-margin">
+          <IonButton color="primary" fill="outline" size="small" expand="block">
+            <IonIcon icon={callOutline} />
+          </IonButton>
+        </IonCol>
+      </IonRow>
+    </div>
+  );
+};
--- a/src/pages/BuscarPassageiro/BuscarPassageiro.tsx
+++ b/src/pages/BuscarPassageiro/BuscarPassageiro.tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react';
 import RecordsStore from '../../store/RecordsStore';
 import { fetchRecords } from '../../store/Selectors';
 import { getUsersSearching } from '../../services/users';
+import { UserSearchInfos } from '../../components/UserSearchInfos/UserSearchInfos';

 const maptilerProvider = maptiler('d5JQJPLLuap8TkJJlTdJ', 'streets');

@@ -75,6 +76,18 @@ const BuscarPassageiro: React.FC = () => {
    await getUsersSearching(currentPoint);
  }

+	const showMarkerInfo = (e:any, index:any) => {
+
+		const tempRecords = JSON.parse(JSON.stringify(results));
+
+		//	Hide all current marker infos
+		!tempRecords[index].showInfo && tempRecords.forEach((tempRecord:any) => tempRecord.showInfo = false);
+		tempRecords[index].showInfo = !tempRecords[index].showInfo;
+
+		console.log(tempRecords)
+		setResults(tempRecords);
+	}
+
  return (
    <IonPage>
 			<IonContent fullscreen>
@@ -82,21 +95,21 @@ const BuscarPassageiro: React.FC = () => {
 					<> */}
 						<Map onBoundsChanged={e => handleMap(e)} defaultCenter={ [center.latitude, center.longitude] } defaultZoom={ zoom } provider={ maptilerProvider } touchEvents={ true }>

-							{ results.map((record:{latitude:any, longitude:any}, index) => {
-								return <Marker key={ index } color="#3578e5" width={ 50 } anchor={ [ parseFloat(record.latitude), parseFloat(record.longitude) ] } />
+							{results && results.map((record:{latitude_from:any, longitude_from:any}, index) => {
+								return <Marker onClick={ e => showMarkerInfo(e, index) } key={ index } color="#3578e5" width={ 50 } anchor={ [ parseFloat(record.latitude_from), parseFloat(record.longitude_from) ] } />
 							})}

-							{/* { results.map((record:{showInfo:boolean, latitude:any, longitude:any}, index) => {
+							{ results.map((record:any, index) => {

 								if (record.showInfo) {
 									
 									return (
-										<Overlay key={ index } anchor={ [ record.latitude, record.longitude ] } offset={[95, 304]}> */}
-											{/* <MapOverlay record={ record } /> */}
-										{/* </Overlay>
-									);
+										<Overlay key={ index } anchor={ [ parseFloat(record.latitude_from), parseFloat(record.longitude_from) ] } offset={[95, 304]}>
+											<UserSearchInfos record={ record } />
+										</Overlay>
+									)
 								}
-							})} */}
+							})}
 						</Map>

            <IonFab vertical="bottom" horizontal="end" slot="fixed">
--- a/src/pages/BuscarTransporte/BuscarTransporte
+++ b/src/pages/BuscarTransporte/BuscarTransporte
@@ -0,0 +1,182 @@
+import {
+  IonContent,
+  IonPage,
+  IonIcon,
+  IonCard,
+  IonInput,
+  IonRow,
+  IonCardContent,
+  IonButton,
+  IonSearchbar,
+  IonModal,
+  IonProgressBar,
+} from "@ionic/react";
+import {
+  arrowBack,
+  arrowForwardOutline,
+  chevronForwardOutline,
+  locateOutline,
+  locationOutline,
+  timeOutline,
+} from "ionicons/icons";
+import "./BuscarTransporte.css";
+
+import { useEffect, useState } from "react";
+import { autoCompleteAddress } from "../../services/utils";
+import { useHistory } from "react-router";
+
+const BuscarTransporte: React.FC = () => {
+	const history = useHistory();
+  const [addressFrom, setAddressFrom] = useState<any>("");
+  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 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)
+  }
+
+  return (
+    <IonPage>
+      <IonContent fullscreen>
+        <IonCard>
+          <IonCardContent>
+            <div className="inputs-from-to">
+              <IonIcon icon={locateOutline}></IonIcon>
+              <IonSearchbar
+                showClearButton="never"
+                onClick={() => setInputActiveOpenModal("from")}
+                value={addressFrom}
+                placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001"
+              />
+            </div>
+            <div className="inputs-from-to">
+              <IonIcon icon={locationOutline}></IonIcon>
+              <IonSearchbar
+                showClearButton="never"
+                onClick={() => setInputActiveOpenModal("to")}
+                value={addressTo}
+                placeholder="PUC Campinas"
+              />
+            </div>
+            <div className="button-search">
+              <IonButton color="primary" onClick={() => history.push("/transportes")}>Buscar</IonButton>
+            </div>
+          </IonCardContent>
+        </IonCard>
+        <IonRow class="latest-searches">
+          <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>
+            <IonIcon icon={arrowForwardOutline}></IonIcon>
+            <span>USP</span>
+            <br />
+            <small>Há 1 hora</small>
+          </div>
+          <IonIcon
+            className="icon-forward icon-align-vcenter"
+            size="large"
+            icon={chevronForwardOutline}
+          ></IonIcon>
+        </IonRow>
+        <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>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default BuscarTransporte;
--- a/src/pages/BuscarTransporte/BuscarTransporte.css
+++ b/src/pages/BuscarTransporte/BuscarTransporte.css
@@ -50,3 +50,8 @@
 .icon-results-modal{
    font-size: 2rem;
 }
+
+.input-autocomplete{
+    margin: 0.5rem 0 0.5rem 0.5rem;
+    width: 100%;
+}
--- a/src/pages/BuscarTransporte/BuscarTransporte.tsx
+++ b/src/pages/BuscarTransporte/BuscarTransporte.tsx
@@ -25,47 +25,82 @@ import { useEffect, useState } from "react";
 import { autoCompleteAddress } from "../../services/utils";
 import { useHistory } from "react-router";

+import GooglePlacesAutocomplete, {
+  geocodeByAddress,
+  getLatLng,
+} from "react-google-places-autocomplete";
+
 const BuscarTransporte: React.FC = () => {
  const history = useHistory();
  const [addressFrom, setAddressFrom] = useState<any>("");
-  const [coordinatesFrom, setCoordinatesFrom] = useState<any>("")
+  const [coordinatesFrom, setCoordinatesFrom] = useState<any>("");
  const [addressTo, setAddressTo] = useState<any>("");
-	const [coordinatesTo, setCoordinatesTo] = useState<any>("")
+  const [coordinatesTo, setCoordinatesTo] = useState<any>("");
  const [showModalEnd, setShowModalEnd] = useState(false);
  const [addressResults, setAddressResults] = useState<any>([]);
  const [inputActive, setInputActive] = useState("");

-  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);
-  };
+  // 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 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)
+  // 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)
+        .then((results) => getLatLng(results[0]))
+        .then(({ lat, lng }) => setCoordinatesFrom({ lat, lng }));
+    }
+  }, [addressFrom]);
+
+  useEffect(() => {
+    if (addressTo.label && addressTo.label.length > 0) {
+      geocodeByAddress(addressTo.label)
+        .then((results) => getLatLng(results[0]))
+        .then(({ lat, lng }) => setCoordinatesTo({ lat, lng }));
+    }
+  }, [addressTo]);
+
+  function buscaTransporte(){
+    if (coordinatesFrom && coordinatesTo && addressFrom && addressTo) {
+      history.push({
+        pathname: "/transportes",
+        state: {
+          coordinatesFrom,
+          coordinatesTo,
+          addressFrom,
+          addressTo,
+        },
+      });
    }
-		setShowModalEnd(false)
  }

  return (
@@ -75,24 +110,49 @@ const BuscarTransporte: React.FC = () => {
          <IonCardContent>
            <div className="inputs-from-to">
              <IonIcon icon={locateOutline}></IonIcon>
-              <IonSearchbar
+              {/* <IonSearchbar
                showClearButton="never"
                onClick={() => setInputActiveOpenModal("from")}
                value={addressFrom}
                placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001"
+              /> */}
+              <GooglePlacesAutocomplete
+                apiKey="AIzaSyAGfCsaNwxwyj4Ajtfy7MTNADE6JwmnZvA"
+                apiOptions={{ language: "pt-br", region: "br" }}
+                selectProps={{
+                  value: addressFrom,
+                  onChange: setAddressFrom,
+                  className: "input-autocomplete",
+                  placeholder: "R. José Paulino, 1234",
+                }}
              />
            </div>
            <div className="inputs-from-to">
              <IonIcon icon={locationOutline}></IonIcon>
-              <IonSearchbar
+              {/* <IonSearchbar
                showClearButton="never"
                onClick={() => setInputActiveOpenModal("to")}
                value={addressTo}
                placeholder="PUC Campinas"
+              /> */}
+              <GooglePlacesAutocomplete
+                apiKey="AIzaSyAGfCsaNwxwyj4Ajtfy7MTNADE6JwmnZvA"
+                apiOptions={{ language: "pt-br", region: "br" }}
+                selectProps={{
+                  value: addressTo,
+                  onChange: setAddressTo,
+                  className: "input-autocomplete",
+                  placeholder: "PUC Campinas",
+                }}
              />
            </div>
            <div className="button-search">
-              <IonButton color="primary" onClick={() => history.push("/transportes")}>Buscar</IonButton>
+              <IonButton
+                color="primary"
+                onClick={() => buscaTransporte()}
+              >
+                Buscar
+              </IonButton>
            </div>
          </IonCardContent>
        </IonCard>
@@ -134,7 +194,7 @@ const BuscarTransporte: React.FC = () => {
            icon={chevronForwardOutline}
          />
        </IonRow>
-        <IonModal isOpen={showModalEnd}>
+        {/* <IonModal isOpen={showModalEnd}>
          <IonContent>
            <div className="header-search-modal">
              <IonIcon
@@ -173,7 +233,7 @@ const BuscarTransporte: React.FC = () => {
              </>
            )}
          </IonContent>
-        </IonModal>
+        </IonModal> */}
      </IonContent>
    </IonPage>
  );
--- a/src/pages/MainPages.tsx
+++ b/src/pages/MainPages.tsx
@@ -1,15 +1,12 @@
-import React, { useState, useRef } from 'react';
 import {
  IonTabs,
  IonTabBar,
  IonTabButton,
  IonLabel,
-  IonPage,
  IonIcon,
  IonRouterOutlet
 } from '@ionic/react';
 import { Redirect, Route } from 'react-router-dom';
-import { IonReactRouter } from '@ionic/react-router';
 import { search, home, person } from 'ionicons/icons';

 import Home from './Home';
@@ -24,9 +21,9 @@ export const MainPages: React.FC = () => {
        <Route path="/home" exact={true}>
          <Home />
        </Route>
-        <Route path="/buscar-passageiro" exact={true}>
+        {/* <Route path="/buscar-passageiro" exact={true}>
          <BuscarPassageiro />
-        </Route>
+        </Route> */}
        <Route path="/buscar-transporte" exact={true}>
          <BuscarTransporte />
        </Route>
--- a/src/pages/Transportes/Transportes.css
+++ b/src/pages/Transportes/Transportes.css
@@ -1,9 +1,8 @@
 .header-page{
-  background-color: var(--ion-toolbar-background);
-  border-bottom: 1px solid var(--ion-toolbar-border-color);
+  background-color: var(--ion-item-background);
+  border-bottom: 1px solid var(--ion-color-step-150, #dadada);
  height: 3.5rem;
  display: flex;
-  justify-content: center;
  padding: 0.5rem;
 }

@@ -12,8 +11,57 @@
 }

 .span-info-back{
-  background-color: #4e4e4e;
+  background-color: var(--ion-color-step-150, #dadada);
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
+  width: 100%;
+}
+
+.address-from-to{
+  /* display: block; */
+  margin-top: -0.2rem;
+  font-size: 0.8rem;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+/* .address-from-to span{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 1rem!important;
+} */
+
+.address-from-to ion-icon{
+  margin-inline: 0.2rem;
+}
+
+.address-from-to small{
+  display: block;
+}
+
+.header-tabs{
+  background-color: var(--ion-color-step-150,#dadada);
+  height: 5.5rem;
+  padding: 0.5rem;
+}
+
+.header-tabs h5{
+  margin: 0;
+}
+
+.header-tabs .card-transporte{
+  margin: 0;
+}
+
+.content-filter-modal{
+  margin: 0.5rem;
+}
+
+.header-filter-modal{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
--- a/src/pages/Transportes/Transportes.tsx
+++ b/src/pages/Transportes/Transportes.tsx
@@ -1,35 +1,187 @@
-import { IonContent, IonPage, IonFab, IonFabButton, IonIcon, IonCard, IonInput, IonRow, IonCol, IonCardContent, IonButton, IonHeader, IonToolbar, IonButtons, IonBackButton } from '@ionic/react';
-import { arrowBack, arrowBackOutline, arrowForwardOutline, chevronBackOutline, chevronForwardOutline, locateOutline, locationOutline, timeOutline } from 'ionicons/icons';
-import { useHistory } from 'react-router';
-import './Transportes.css';
+import {
+  IonContent,
+  IonPage,
+  IonFab,
+  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,
+} from "@ionic/react";
+import {
+  arrowBack,
+  arrowBackOutline,
+  arrowForwardOutline,
+  chevronBackOutline,
+  chevronForwardOutline,
+  closeOutline,
+  locateOutline,
+  locationOutline,
+  timeOutline,
+} from "ionicons/icons";
+import { useEffect, useState } from "react";
+import { useHistory, useLocation } from "react-router";
+import { getTransportes } from "../../services/transportes";
+import "./Transportes.css";
+
+interface InfoBusca {
+  addressFrom: any;
+  addressTo: any;
+  coordinatesFrom: any;
+  coordinatesTo: any;
+}

 const Transportes: React.FC = () => {
  const history = useHistory();
+  const location = useLocation();
+  const props = location.state as InfoBusca;
+  const [transportes, setTransportes] = useState([]);
+  const [showModalFilters, setShowModalFilters] = useState(false);
+
+  useEffect(() => {
+    if (props) {
+      buscaTransportes();
+    }
+  }, [props]);
+
+  async function buscaTransportes() {
+    let data = (await getTransportes(props)) as any;
+    setTransportes(data);
+  }

  return (
    <IonPage>
      <IonHeader>
-				<div className='header-page'>
+        <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}/>
-						<div>
-							Vila Réggio 
+          <span className="span-info-back" onClick={history.goBack}>
+            <IonIcon className="icon-return" icon={chevronBackOutline} />
+            <div className="address-from-to">
+              <span>{props.addressFrom.label}</span>
              <IonIcon icon={arrowForwardOutline} />
-							PUC-Campinas
+              <span>{props.addressTo.label}</span>
+              <small>Hoje</small>
            </div>
          </span>
        </div>
      </IonHeader>
      <IonContent fullscreen>
+        <div className="header-tabs">
+          <IonSlides>
+            <IonSlide>
+              <h5>Mais barata</h5>
+              <IonCard className="card-transporte">
+                <IonCardContent>Seu João</IonCardContent>
+              </IonCard>
+            </IonSlide>
+            <IonSlide>
+              <h5>Melhor avaliação</h5>
+              <IonCard className="card-transporte">
+                <IonCardContent>Seu Zé</IonCardContent>
+              </IonCard>
+            </IonSlide>
+          </IonSlides>
+        </div>
+        {transportes &&
+          transportes.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>
+            );
+          })}

-				<IonFab vertical="bottom" horizontal="center" slot="fixed">
-					<IonFabButton>
-						Filtros
-					</IonFabButton>
+        <IonFab
+          onClick={() => setShowModalFilters(true)}
+          vertical="bottom"
+          horizontal="center"
+          slot="fixed"
+        >
+          <IonFabButton>Filtros</IonFabButton>
        </IonFab>
+        <IonModal isOpen={showModalFilters}>
+          <IonToolbar>
+            <div className="header-filter-modal">
+              <IonIcon
+                size="large"
+                icon={closeOutline}
+                onClick={() => setShowModalFilters(false)}
+              />
+              <h4>
+                <b>Limpar</b>
+              </h4>
+            </div>
+          </IonToolbar>
+          <IonContent>
+            <div className="content-filter-modal">
+              <h1>Filtrar</h1>
+              <h3>Ordernar por</h3>
+              <IonRadioGroup>
+                <IonItem>
+                  <IonLabel>Menor preço</IonLabel>
+                  <IonRadio value="menor_preco" />
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel>Avaliação</IonLabel>
+                  <IonRadio value="avaliacao" />
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel>Lugares disponíveis</IonLabel>
+                  <IonRadio value="lugares_disponiveis" />
+                </IonItem>
+              </IonRadioGroup>
+              <h3>Preferências</h3>
+              <IonItem>
+                <IonLabel>Vaga avulsa</IonLabel>
+                <IonCheckbox value="vaga_avulsa" />
+              </IonItem>
+              <IonItem>
+                <IonLabel>Ar condicionado</IonLabel>
+                <IonCheckbox value="ar_condicionado" />
+              </IonItem>
+            </div>
+          </IonContent>
+          <IonFooter>
+            <IonButton
+              expand="block"
+              onClick={() => setShowModalFilters(false)}
+            >
+              Aplicar Filtros
+            </IonButton>
+          </IonFooter>
+        </IonModal>
      </IonContent>
    </IonPage>
  );
--- a/src/services/transportes.ts
+++ b/src/services/transportes.ts
@@ -0,0 +1,34 @@
+import instance from "../services/api";
+import { setStore } from "../store/RecordsStore";
+// import LocalStorage from '../LocalStorage';
+
+// let token:string;
+let header: string;
+
+function updateHeader() {
+  //   token = LocalStorage.getToken();
+  header = `{
+    "Accept": 'application/json',
+    "Content-Type": 'application/json',
+    "Authorization": 'Bearer ' + token
+  }`;
+}
+
+interface CoordinatesRequest {
+  coordinatesFrom:{
+    lat: number,
+    lng: number
+  },
+  coordinatesTo:{
+    lat: number,
+    lng: number
+  }
+}
+
+export async function getTransportes(request: CoordinatesRequest) {
+  updateHeader();
+
+  console.log(request)
+  const response = await instance.post("http://localhost:3333/transportes/", request);
+  return response.data as [];
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -198,6 +198,11 @@
  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz"
  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==

+"@babel/helper-plugin-utils@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
+  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
+
 "@babel/helper-remap-async-to-generator@^7.16.8":
  version "7.16.8"
  resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz"
@@ -508,6 +513,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.8.0"

+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz#834035b45061983a491f60096f61a2e7c5674a47"
+  integrity sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-syntax-jsx@^7.16.7":
  version "7.16.7"
  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz"
@@ -1024,6 +1036,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7", "@babel/template@^7.3.3":
  version "7.16.7"
  resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz"
@@ -1175,6 +1194,89 @@
  dependencies:
    postcss-value-parser "^4.2.0"

+"@emotion/babel-plugin@^11.7.1":
+  version "11.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
+  integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
+"@emotion/cache@^11.4.0", "@emotion/cache@^11.9.3":
+  version "11.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.9.3.tgz#96638449f6929fd18062cfe04d79b29b44c0d6cb"
+  integrity sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.1"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
+
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.1.1":
+  version "11.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.3.tgz#f4f4f34444f6654a2e550f5dab4f2d360c101df9"
+  integrity sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.9.3"
+    "@emotion/serialize" "^1.0.4"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.4.tgz#ff31fd11bb07999611199c2229e152faadc21a3c"
+  integrity sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787"
+  integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@eslint/eslintrc@^1.2.1":
  version "1.2.1"
  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz"
@@ -1190,6 +1292,13 @@
    minimatch "^3.0.4"
    strip-json-comments "^3.1.1"

+"@googlemaps/js-api-loader@^1.12.3":
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.14.3.tgz#d7a161cd547be04ad46a1cb176e6c2647f6d74a7"
+  integrity sha512-6iIb+qpGgQpgIHmIFO44WhE1rDUxPVHuezNFL30wRJnkvhwFm94tD291UvNg9L05hLDSoL16jd0lbqqmdy4C5g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 "@hookform/error-message@^2.0.0":
  version "2.0.0"
  resolved "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.0.tgz"
@@ -1925,6 +2034,11 @@
    "@types/qs" "*"
    "@types/serve-static" "*"

+"@types/google.maps@^3.46.1":
+  version "3.49.2"
+  resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.49.2.tgz#9640491ec3aa96c9de1466894117ce81c02588df"
+  integrity sha512-ZO1qWciukqED9qcUNW7OaPXWnTlT+tO3WcYkmudZyQW2BqD7TlMFRrdqSCoqfwKhERCwBA5A/YZt/g5A3BqgLQ==
+
 "@types/graceful-fs@^4.1.2":
  version "4.1.5"
  resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
@@ -2729,6 +2843,15 @@ babel-plugin-jest-hoist@^27.5.1:
    "@types/babel__core" "^7.0.0"
    "@types/babel__traverse" "^7.0.6"

+babel-plugin-macros@^2.6.1:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
 babel-plugin-macros@^3.1.0:
  version "3.1.0"
  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
@@ -3272,7 +3395,7 @@ content-type@~1.0.4:
  resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==

-convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
  version "1.8.0"
  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -3777,6 +3900,14 @@ dom-converter@^0.2.0:
  dependencies:
    utila "~0.4"

+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
  version "0.2.2"
  resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz"
@@ -4467,6 +4598,11 @@ find-cache-dir@^3.3.1:
    make-dir "^3.0.2"
    pkg-dir "^4.1.0"

+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^2.1.0:
  version "2.1.0"
  resolved "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz"
@@ -4795,7 +4931,7 @@ history@^4.9.0:
    tiny-warning "^1.0.0"
    value-equal "^1.0.1"

-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1:
  version "3.3.2"
  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6107,6 +6243,11 @@ memfs@^3.1.2, memfs@^3.4.1:
  dependencies:
    fs-monkey "1.0.3"

+memoize-one@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 merge-descriptors@1.0.1:
  version "1.0.1"
  resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -7329,7 +7470,7 @@ prompts@^2.0.1, prompts@^2.3.2, prompts@^2.4.2:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7469,11 +7610,28 @@ react-error-overlay@^6.0.11:
  resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

+react-google-places-autocomplete@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/react-google-places-autocomplete/-/react-google-places-autocomplete-3.3.4.tgz#ae050271b38bc7d6f0c5811ff94ce3e246a05389"
+  integrity sha512-IeoBxUvwFYZ8gEXC7K9e9Az3QUO7A3fbc/ED0Px63dvY4fRtipdXbGK1nBCr7qJRpZbArOk2LMUgAi21lvjPOQ==
+  dependencies:
+    "@googlemaps/js-api-loader" "^1.12.3"
+    "@types/google.maps" "^3.46.1"
+    react-select "^4.3.1"
+    use-debounce "^3.4.3"
+
 react-hook-form@^7.30.0:
  version "7.30.0"
  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz"
  integrity sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==

+react-input-autosize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
+  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -7573,6 +7731,29 @@ react-scripts@5.0.1:
  optionalDependencies:
    fsevents "^2.3.2"

+react-select@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
+  integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.1.1"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-input-autosize "^3.0.0"
+    react-transition-group "^4.3.0"
+
+react-transition-group@^4.3.0:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.1:
  version "17.0.2"
  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
@@ -7765,7 +7946,7 @@ resolve.exports@^1.1.0:
  resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz"
  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==

-resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
  version "1.22.0"
  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz"
  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -8112,7 +8293,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

-source-map@^0.5.0:
+source-map@^0.5.0, source-map@^0.5.7:
  version "0.5.7"
  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -8333,6 +8514,11 @@ stylehacks@^5.1.0:
    browserslist "^4.16.6"
    postcss-selector-parser "^6.0.4"

+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 supports-color@^5.3.0:
  version "5.5.0"
  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -8756,6 +8942,11 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"

+use-debounce@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-3.4.3.tgz#5df9322322b3f1b1c263d46413f9facf6d8b56ab"
+  integrity sha512-nxy+opOxDccWfhMl36J5BSCTpvcj89iaQk2OZWLAtBJQj7ISCtx1gh+rFbdjGfMl6vtCZf6gke/kYvrkVfHMoA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"