wip

package.json

@@ -11,8 +11,8 @@
     "@craco/craco": "^6.4.5",
     "@hookform/error-message": "^2.0.0",
     "@ionic-selectable/core": "^5.0.0-alpha.13",
-    "@ionic/react": "^6.0.0",
+    "@ionic/react": "^6.2.5",
-    "@ionic/react-router": "^6.0.0",
+    "@ionic/react-router": "^6.2.5",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",

src/App.tsx

@@ -11,20 +11,6 @@ import {
 import { IonReactRouter } from "@ionic/react-router";
 import { Redirect, Route } from "react-router-dom";
 
-// importação das páginas
-import BuscarPassageiro from "./pages/BuscarPassageiro/BuscarPassageiro";
-import BuscarTransporte from "./pages/BuscarTransporte/BuscarTransporte";
-import Cadastro from "./pages/Cadastro/Cadastro";
-import CadastroCompletar from "./pages/CadastroCompletar/CadastroCompletar";
-import CompletarDocumento from "./pages/CadastroCompletar/CompletarDocumento";
-import CompletarTelefone from "./pages/CadastroCompletar/CompletarTelefone";
-import CadastroVan from "./pages/CadastroVan";
-import Home from "./pages/Home";
-import Login from "./pages/Login";
-import Perfil from "./pages/Perfil";
-import PerfilEditar from "./pages/PerfilEditar";
-import Transportes from "./pages/Transportes/Transportes";
-
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/react/css/core.css";
 
@@ -49,9 +35,23 @@ import "./theme/tailwind.css";
 
 import { home, person, search } from "ionicons/icons";
 import React, { useContext, useState } from "react";
+
+/* Importação das páginas */
+import BuscarPassageiro from "./pages/BuscarPassageiro/BuscarPassageiro";
+import BuscarTransporte from "./pages/BuscarTransporte/BuscarTransporte";
 import CadastrarItinerario from "./pages/CadastrarItinerario/CadastrarItinerario";
+import Cadastro from "./pages/Cadastro/Cadastro";
+import CadastroCompletar from "./pages/CadastroCompletar/CadastroCompletar";
+import CompletarDocumento from "./pages/CadastroCompletar/CompletarDocumento";
+import CompletarTelefone from "./pages/CadastroCompletar/CompletarTelefone";
+import CadastroVan from "./pages/CadastroVan";
+import Home from "./pages/Home";
+import Login from "./pages/Login";
 import MeusItinerarios from "./pages/MeusItinerarios/MeusItinerarios";
 import MinhasVans from "./pages/MinhasVans";
+import Perfil from "./pages/Perfil";
+import PerfilEditar from "./pages/PerfilEditar";
+import Transportes from "./pages/Transportes/Transportes";
 
 setupIonicReact();
 

src/LocalStorage.ts

@@ -1,24 +1,21 @@
-const tokenId = 'token';
-const productDetails = '@productDetails';
-
 const LocalStorage = {
-    getToken: (): string => {
+  getToken: (): string => {
-        const tokenId =  localStorage.getItem('tokenId')
+    const tokenId = localStorage.getItem("tokenId");
 
-        if (!tokenId) {
+    if (!tokenId) {
-            return ''
+      return "";
-        }
-
-        return tokenId
-    },
-
-    setToken: (token: string) => {
-        localStorage.setItem('tokenId', token)
-    },
-
-    clearToken: () => {
-        localStorage.removeItem('tokenId')
     }
-}
 
-export default LocalStorage
+    return tokenId;
+  },
+
+  setToken: (token: string) => {
+    localStorage.setItem("tokenId", token);
+  },
+
+  clearToken: () => {
+    localStorage.removeItem("tokenId");
+  },
+};
+
+export default LocalStorage;

src/components/UserSearchInfos/UserSearchInfos.tsx

@@ -4,15 +4,9 @@ import {
   IonCardSubtitle,
   IonCol,
   IonIcon,
-  IonNote,
   IonRow,
 } from "@ionic/react";
-import {
+import { call, callOutline, navigateOutline } from "ionicons/icons";
-  arrowForward,
-  call,
-  callOutline,
-  navigateOutline,
-} from "ionicons/icons";
 import "./UserSearchInfos.css";
 
 export const UserSearchInfos = (record: any) => {
@@ -28,7 +22,7 @@ export const UserSearchInfos = (record: any) => {
       </IonBadge>
 
       <p>
-        <IonIcon icon={navigateOutline} size='large' />
+        <IonIcon icon={navigateOutline} size="large" />
         &nbsp;{record.record.address_to}
       </p>
 

src/pages/BuscarPassageiro/BuscarPassageiro.tsx

@@ -1,126 +1,157 @@
-import { IonContent, IonPage, IonFab, IonFabButton, IonIcon } from '@ionic/react';
+import {
-import { search } from 'ionicons/icons';
+  IonContent,
-import './BuscarPassageiro.css';
+  IonFab,
+  IonFabButton,
+  IonIcon,
+  IonPage,
+} from "@ionic/react";
+import { search } from "ionicons/icons";
+import "./BuscarPassageiro.css";
 
 import { Map, Marker, Overlay } from "pigeon-maps";
-import { maptiler } from 'pigeon-maps/providers';
+import { maptiler } from "pigeon-maps/providers";
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
-import RecordsStore from '../../store/RecordsStore';
+import { UserSearchInfos } from "../../components/UserSearchInfos/UserSearchInfos";
-import { fetchRecords } from '../../store/Selectors';
+import { getUsersSearching } from "../../services/api/users";
-import { getUsersSearching } from '../../services/api/users';
+import RecordsStore from "../../store/RecordsStore";
-import { UserSearchInfos } from '../../components/UserSearchInfos/UserSearchInfos';
+import { fetchRecords } from "../../store/Selectors";
 
-const maptilerProvider = maptiler('d5JQJPLLuap8TkJJlTdJ', 'streets');
+const maptilerProvider = maptiler("d5JQJPLLuap8TkJJlTdJ", "streets");
 
 const BuscarPassageiro: React.FC = () => {
+  //	UNCOMMENT THESE TO USE CURRENT LOCATION.
 
-	//	UNCOMMENT THESE TO USE CURRENT LOCATION.
+  // const [ currentPoint, setCurrentPoint ] = useState(false);
 
-	// const [ currentPoint, setCurrentPoint ] = useState(false);
+  // useEffect(() => {
 
-	// useEffect(() => {
+  // 	const getCurrentLocation = async () => {
 
-	// 	const getCurrentLocation = async () => {
+  // 		const fetchedLocation = await getLocation();
+  // 		setCurrentPoint(fetchedLocation.currentLocation);
+  // 	}
 
-	// 		const fetchedLocation = await getLocation();
+  // 	getCurrentLocation();
-	// 		setCurrentPoint(fetchedLocation.currentLocation);
+  // }, []);
-	// 	}
 
-	// 	getCurrentLocation();
+  // useIonViewWillEnter(() => {
-	// }, []);
 
-	// useIonViewWillEnter(() => {
+  // 	getUsersSearching(currentPoint);
+  // });
 
-	// 	getUsersSearching(currentPoint);
+  const [currentPoint, setCurrentPoint] = useState({
-	// });
+    latitude: -22.907829,
+    longitude: -47.062943,
+  });
 
-	const [ currentPoint, setCurrentPoint ] = useState({ latitude: -22.907829, longitude: -47.062943 });
+  const records = RecordsStore.useState(fetchRecords);
+  const center = { latitude: -22.907829, longitude: -47.062943 };
 
-	const records = RecordsStore.useState(fetchRecords);
+  const [results, setResults] = useState([]);
-	const center = { latitude: -22.907829, longitude: -47.062943 };
+  const [zoom, setZoom] = useState(14);
 
-	const [ results, setResults ] = useState([]);
+  // const [ moveMode, setMoveMode ] = useState(false);
-	const [ zoom, setZoom ] = useState(14);
 
-	const [ moveMode, setMoveMode ] = useState(false);
+  // useEffect(() => {
 
-	// useEffect(() => {
+  // 	const getData = async () => {
 
-	// 	const getData = async () => {
+  // 		await getUsersSearching(currentPoint);
+  // 	}
 
-	// 		await getUsersSearching(currentPoint);
+  // 	getData();
-	// 	}
+  // }, [ currentPoint ]);
 
-	// 	getData();
+  useEffect(() => {
-	// }, [ currentPoint ]);
+    setResults(records);
+  }, [records]);
 
-	useEffect(() => {
+  const hideMarkers = () => {
+    console.log("entrou");
+    const tempRecords = JSON.parse(JSON.stringify(results));
+    tempRecords.forEach((tempRecord: any) => (tempRecord.showInfo = false));
+    console.log(tempRecords);
+    setResults(tempRecords);
+  };
 
-		setResults(records);
+  const handleMap = (e: any) => {
-	}, [ records ]);
-
-	const hideMarkers = () => {
-    console.log('entrou')
-		const tempRecords = JSON.parse(JSON.stringify(results));
-		tempRecords.forEach((tempRecord:any) => tempRecord.showInfo = false);
-    console.log(tempRecords)
-		setResults(tempRecords);
-	}
-
-  const handleMap = (e:any) => {
     setCurrentPoint({ latitude: e.center[0], longitude: e.center[1] });
-	}
+  };
 
   const searchResults = async () => {
     await getUsersSearching(currentPoint);
-  }
+  };
 
-	const showMarkerInfo = (e:any, index:any) => {
+  const showMarkerInfo = (e: any, index: any) => {
+    const tempRecords = JSON.parse(JSON.stringify(results));
 
-		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;
 
-		//	Hide all current marker infos
+    console.log(tempRecords);
-		!tempRecords[index].showInfo && tempRecords.forEach((tempRecord:any) => tempRecord.showInfo = false);
+    setResults(tempRecords);
-		tempRecords[index].showInfo = !tempRecords[index].showInfo;
+  };
-
-		console.log(tempRecords)
-		setResults(tempRecords);
-	}
 
   return (
     <IonPage>
-			<IonContent fullscreen>
+      <IonContent fullscreen>
-				{/* { results &&
+        {/* { results &&
 					<> */}
-						<Map onBoundsChanged={e => handleMap(e)} defaultCenter={ [center.latitude, center.longitude] } defaultZoom={ zoom } provider={ maptilerProvider } touchEvents={ true }>
+        <Map
+          onBoundsChanged={(e) => handleMap(e)}
+          defaultCenter={[center.latitude, center.longitude]}
+          defaultZoom={zoom}
+          provider={maptilerProvider}
+          touchEvents={true}
+        >
+          {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 && results.map((record:{latitude_from:any, longitude_from:any}, index) => {
+          {results.map((record: any, index) => {
-								return <Marker onClick={ e => showMarkerInfo(e, index) } key={ index } color="#3578e5" width={ 50 } anchor={ [ parseFloat(record.latitude_from), parseFloat(record.longitude_from) ] } />
+            if (record.showInfo) {
-							})}
+              return (
+                <Overlay
+                  key={index}
+                  anchor={[
+                    parseFloat(record.latitude_from),
+                    parseFloat(record.longitude_from),
+                  ]}
+                  offset={[95, 304]}
+                >
+                  <UserSearchInfos record={record} />
+                </Overlay>
+              );
+            }
+          })}
+        </Map>
 
-							{ results.map((record:any, index) => {
+        <IonFab vertical="bottom" horizontal="end" slot="fixed">
-
+          <IonFabButton>
-								if (record.showInfo) {
+            <IonIcon onClick={searchResults} icon={search} />
-									
+          </IonFabButton>
-									return (
+        </IonFab>
-										<Overlay key={ index } anchor={ [ parseFloat(record.latitude_from), parseFloat(record.longitude_from) ] } offset={[95, 304]}>
+        {/* </> */}
-											<UserSearchInfos record={ record } />
+        {/* } */}
-										</Overlay>
+      </IonContent>
-									)
+    </IonPage>
-								}
-							})}
-						</Map>
-
-            <IonFab vertical="bottom" horizontal="end" slot="fixed">
-              <IonFabButton>
-                <IonIcon onClick={searchResults} icon={search} />
-              </IonFabButton>
-            </IonFab>
-					{/* </> */}
-				{/* } */}
-			</IonContent>
-		</IonPage>
   );
 };
 

src/pages/CadastrarItinerario/CadastrarItinerario.tsx

@@ -1,18 +1,185 @@
+import { Color } from "@ionic/core";
 import {
   IonBackButton,
   IonButton,
   IonButtons,
+  IonCheckbox,
   IonContent,
+  IonDatetime,
   IonHeader,
   IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
   IonPage,
+  IonRange,
+  IonSelect,
+  IonSelectOption,
+  IonSlide,
+  IonSlides,
   IonTitle,
+  IonToast,
   IonToolbar,
 } from "@ionic/react";
-import { close, locateOutline, locationOutline } from "ionicons/icons";
+import {
-import GooglePlacesAutocomplete from "react-google-places-autocomplete";
+  add,
+  addCircleOutline,
+  arrowBack,
+  arrowForward,
+  checkmark,
+  close,
+  informationCircle,
+  locateOutline,
+  locationOutline,
+  removeCircleOutline,
+} from "ionicons/icons";
+import { useEffect, useRef, useState } from "react";
+import GooglePlacesAutocomplete, {
+  geocodeByAddress,
+  getLatLng,
+} from "react-google-places-autocomplete";
+import { useHistory } from "react-router";
+import * as vansRoutes from "../../services/api/vans";
+import sessionsService from "../../services/functions/sessionsService";
+
+const slideOpts = {
+  initialSlide: 0,
+  allowTouchMove: false,
+};
+
+interface VanInfo {
+  plate: string;
+  brand: string;
+  model: string;
+  seats_number: string;
+  document_status: boolean;
+  locator_name: string;
+  locator_address: string;
+  locator_complement: string;
+  locator_city: string;
+  locator_state: string;
+}
+
+interface Coords {
+  lat: number;
+  lng: number;
+}
 
 export default function CadastrarItinerario() {
+  const minDate = new Date();
+
+  const history = useHistory();
+
+  const mySlides = useRef<any>(null);
+  const nextButton1 = useRef<HTMLIonButtonElement>(null);
+  const nextButton2 = useRef<HTMLIonButtonElement>(null);
+
+  const [specificDate, setSpecificDate] = useState<boolean>(false);
+  const [singleVacancy, setSingleVacancy] = useState<boolean>(false);
+  const [vans, setVans] = useState<VanInfo[]>();
+  const [showToast, setShowToast] = useState<boolean>(false);
+  const [toastMessage, setToastMessage] = useState<string>("");
+  const [toastColor, setToastColor] = useState<Color>("primary");
+  //Infos
+  const [initialAddress, setInitialAddress] = useState<any>("");
+  const [initialCoords, setInitialCoords] = useState<Coords>();
+  const [neighborhoods, setNeighborhoods] = useState<Array<string>>([]);
+  const [finalAddress, setFinalAddress] = useState<string>("");
+  const [destinations, setDestinations] = useState<Array<string>>([]);
+  const [daysOfWeek, setDaysOfWeek] = useState<number>();
+  const [specificDay, setSpecificDay] = useState<Date>();
+  const [departureTime, setDepartureTime] = useState<Date>();
+  const [arrivalTime, setArrivalTime] = useState<Date>();
+  const [monthlyPrice, setMonthlyPrice] = useState<number>(0);
+  const [dailyPrice, setDailyPrice] = useState<number>(0);
+  const [van, setVan] = useState<string>("");
+  const [nickname, setNickname] = useState<string>("");
+
+  const redirectUserToLogin = () => {
+    history.push({ pathname: "/login" });
+  };
+
+  const onBtnClicked = async (direction: string) => {
+    const swiper = await mySlides.current.getSwiper();
+    if (direction === "next") {
+      swiper.slideNext();
+    } else if (direction === "prev") {
+      swiper.slidePrev();
+    }
+  };
+
+  function formatRange(rangeValue: number) {
+    switch (rangeValue) {
+      case 1:
+        return "Segunda";
+      case 2:
+        return "Terça";
+      case 3:
+        return "Quarta";
+      case 4:
+        return "Quinta";
+      case 5:
+        return "Sexta";
+      case 6:
+        return "Sabádo";
+      case 7:
+        return "Domingo";
+
+      default:
+        return "";
+    }
+  }
+
+  useEffect(() => {
+    const getUserVans = async () => {
+      let userId = "";
+
+      const refreshSessionRes = await sessionsService.refreshSession();
+
+      if (refreshSessionRes.error) {
+        redirectUserToLogin();
+        return;
+      }
+
+      if (refreshSessionRes.userId) {
+        userId = refreshSessionRes.userId;
+      }
+
+      vansRoutes
+        .getByUserId(userId)
+        .then((response) => {
+          if (response.status === "error") {
+            setToastColor("danger");
+            setToastMessage(response.message);
+            setShowToast(true);
+
+            return;
+          }
+
+          setVans(response.data);
+        })
+        .catch((err) => {
+          setToastColor("danger");
+          setToastMessage(err);
+          setShowToast(true);
+        });
+    };
+
+    getUserVans();
+  }, []);
+
+  useEffect(() => {
+    console.log(initialAddress);
+    if (initialAddress.label && initialAddress.label.length > 0) {
+      geocodeByAddress(initialAddress.label)
+        .then((results) => getLatLng(results[0]))
+        .then(({ lat, lng }) => setInitialCoords({ lat, lng }));
+    }
+  }, [initialAddress]);
+
+  function addNeighborhoodToList() {}
+
   return (
     <IonPage>
       <IonHeader>
@@ -24,34 +191,486 @@ export default function CadastrarItinerario() {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <div className="m-3">
+        <IonSlides ref={mySlides} options={slideOpts}>
-          <h1>Digite o endereço de onde você iniciará a rota do itinerário</h1>
+          <IonSlide>
-          <div className="inputs-from-to">
+            <div className="m-3">
-            <IonIcon icon={locateOutline}></IonIcon>
+              <h1 className="mb-3 text-xl">
-            <GooglePlacesAutocomplete
+                Digite o endereço de onde você iniciará a rota do itinerário
-              apiKey={process.env.REACT_APP_KEY_API}
+              </h1>
-              apiOptions={{ language: "pt-br", region: "br" }}
+              <div className="flex items-center mb-3">
-              selectProps={{
+                <IonIcon icon={locateOutline}></IonIcon>
-                className: "input-autocomplete",
+                {/* <GooglePlacesAutocomplete
-                placeholder: "R. José Paulino, 1234",
+                  apiKey={process.env.REACT_APP_KEY_API}
-              }}
+                  apiOptions={{ language: "pt-br", region: "br" }}
-            />
+                  selectProps={{
-          </div>
+                    value: initialAddress,
-          <div className="inputs-from-to">
+                    onChange: setInitialAddress,
-            <IonIcon icon={locationOutline}></IonIcon>
+                    className: "input-autocomplete",
-            <GooglePlacesAutocomplete
+                    placeholder: "R. José Paulino, 1234",
-              apiKey={process.env.REACT_APP_KEY_API}
+                  }}
-              apiOptions={{ language: "pt-br", region: "br" }}
+                /> */}
-              selectProps={{
+                <GooglePlacesAutocomplete
-                className: "input-autocomplete",
+                  apiKey={process.env.REACT_APP_KEY_API}
-                placeholder: "PUC Campinas",
+                  apiOptions={{ language: "pt-br", region: "br" }}
-              }}
+                  selectProps={{
-            />
+                    value: initialAddress,
-          </div>
+                    onChange: setInitialAddress,
-          <div className="button-search">
+                    className: "input-autocomplete",
-            <IonButton color="primary">Cadastrar</IonButton>
+                    placeholder: "R. José Paulino, 1234",
-          </div>
+                  }}
-        </div>
+                />
+              </div>
+              <div className="flex justify-end mb-3">
+                <IonButton
+                  ref={nextButton1}
+                  disabled
+                  onClick={() => onBtnClicked("next")}
+                  color="primary"
+                >
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+              <div className="flex items-center">
+                <IonIcon
+                  icon={informationCircle}
+                  size="large"
+                  className="mr-4"
+                />
+                <small className="text-gray-500">
+                  Essa informação é importante para que possamos informar aos
+                  passageiros um horário aproximado que você passará para
+                  pegá-lo.
+                </small>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Adicione os bairros que você atenderá
+              </h1>
+              <div className="flex items-center mb-3">
+                <IonIcon icon={locationOutline}></IonIcon>
+                <GooglePlacesAutocomplete
+                  apiKey={process.env.REACT_APP_KEY_API}
+                  apiOptions={{ language: "pt-br", region: "br" }}
+                  selectProps={{
+                    className: "input-autocomplete",
+                    placeholder: "PUC Campinas",
+                    onChange: () => {
+                      addNeighborhoodToList();
+                    },
+                  }}
+                />
+              </div>
+              <div className="flex justify-end mb-3">
+                <IonButton>
+                  <IonIcon icon={add} />
+                </IonButton>
+              </div>
+              <div className="mb-3">
+                <IonList>
+                  <IonItem>
+                    <IonCheckbox slot="end"></IonCheckbox>
+                    <IonLabel>Taquaral</IonLabel>
+                  </IonItem>
+                  <IonItem>
+                    <IonCheckbox slot="end"></IonCheckbox>
+                    <IonLabel>Barão Geraldo</IonLabel>
+                  </IonItem>
+                </IonList>
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton onClick={() => onBtnClicked("next")} color="primary">
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+              <div className="flex items-center">
+                <IonIcon
+                  icon={informationCircle}
+                  size="large"
+                  className="mr-4"
+                />
+                <small className="text-gray-500">
+                  Não se preocupe, você poderá adicionar ou remover bairros
+                  posteriormente caso precise editando o itinerário.
+                </small>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Digite o endereço de destino final do itinerário
+              </h1>
+              <div className="flex items-center mb-3">
+                <IonIcon icon={locationOutline}></IonIcon>
+                <GooglePlacesAutocomplete
+                  apiKey={process.env.REACT_APP_KEY_API}
+                  apiOptions={{ language: "pt-br", region: "br" }}
+                  selectProps={{
+                    className: "input-autocomplete",
+                    placeholder: "PUC Campinas",
+                    onChange: () => {
+                      nextButton2.current!.disabled = false;
+                    },
+                  }}
+                />
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton
+                  ref={nextButton2}
+                  // disabled
+                  onClick={() => onBtnClicked("next")}
+                  color="primary"
+                >
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+              <div className="flex items-center">
+                <IonIcon
+                  icon={informationCircle}
+                  size="large"
+                  className="mr-4"
+                />
+                <small className="text-gray-500">
+                  Não se preocupe, você poderá adicionar paradas.
+                </small>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Adicione paradas durante o trajeto do itinerário para encontrar
+                mais passageiros
+              </h1>
+              <div className="flex items-center mb-3">
+                <IonIcon icon={locationOutline}></IonIcon>
+                <GooglePlacesAutocomplete
+                  apiKey={process.env.REACT_APP_KEY_API}
+                  apiOptions={{ language: "pt-br", region: "br" }}
+                  selectProps={{
+                    className: "input-autocomplete",
+                    placeholder: "PUC Campinas",
+                  }}
+                />
+              </div>
+              <div className="flex justify-end mb-3">
+                <IonButton>
+                  <IonIcon icon={add} />
+                </IonButton>
+              </div>
+              <div className="mb-3">
+                <IonList>
+                  <IonItem>
+                    <IonCheckbox slot="end"></IonCheckbox>
+                    <IonLabel>Unicamp</IonLabel>
+                  </IonItem>
+                  <IonItem>
+                    <IonCheckbox slot="end"></IonCheckbox>
+                    <IonLabel>CPFL</IonLabel>
+                  </IonItem>
+                </IonList>
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton onClick={() => onBtnClicked("next")} color="primary">
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+              <div className="flex items-center">
+                <IonIcon
+                  icon={informationCircle}
+                  size="large"
+                  className="mr-4"
+                />
+                <small className="text-gray-500">
+                  Não se preocupe, você poderá adicionar ou remover paradas
+                  posteriormente caso precise editando o itinerário.
+                </small>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Escolha o(s) dia(s) da semana ou um dia específico que o
+                itinerário será realizado
+              </h1>
+              <div hidden={specificDate} className="flex items-center mb-3">
+                <IonRange
+                  dualKnobs
+                  pin
+                  pinFormatter={(value: number) => formatRange(value)}
+                  ticks
+                  snaps
+                  min={1}
+                  max={7}
+                >
+                  <IonLabel slot="start">Seg</IonLabel>
+                  <IonLabel slot="end">Dom</IonLabel>
+                </IonRange>
+              </div>
+              <div className="mb-3">
+                <IonItem className="mb-3">
+                  <IonLabel>Dia Específico ?</IonLabel>
+                  <IonCheckbox
+                    onIonChange={(event) =>
+                      event.detail.checked
+                        ? setSpecificDate(true)
+                        : setSpecificDate(false)
+                    }
+                  ></IonCheckbox>
+                </IonItem>
+                <IonDatetime
+                  min={minDate.toISOString()}
+                  presentation="date"
+                  hidden={!specificDate}
+                ></IonDatetime>
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton onClick={() => onBtnClicked("next")} color="primary">
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Qual o horário estimado de ínicio do itinerário ?
+              </h1>
+              <div className="mb-3">
+                <IonDatetime presentation="time"></IonDatetime>
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton
+                  ref={nextButton2}
+                  // disabled
+                  onClick={() => onBtnClicked("next")}
+                  color="primary"
+                >
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+              <div className="flex items-center">
+                <IonIcon
+                  icon={informationCircle}
+                  size="large"
+                  className="mr-4"
+                />
+                <small className="text-gray-500">
+                  Não se preocupe, é apenas um horário estimado.
+                </small>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Qual o horário estimado de chegado no último destino do
+                itinerário ?
+              </h1>
+              <div className="mb-3">
+                <IonDatetime presentation="time"></IonDatetime>
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton
+                  ref={nextButton2}
+                  // disabled
+                  onClick={() => onBtnClicked("next")}
+                  color="primary"
+                >
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+              <div className="flex items-center">
+                <IonIcon
+                  icon={informationCircle}
+                  size="large"
+                  className="mr-4"
+                />
+                <small className="text-gray-500">
+                  Não se preocupe, é apenas um horário estimado.
+                </small>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Preencha as informações de pagamento
+              </h1>
+              <IonLabel>Valor cobrado mensalmente</IonLabel>
+              <div className="flex justify-between items-center mb-3">
+                <IonIcon
+                  size="large"
+                  onClick={() => setMonthlyPrice(monthlyPrice - 1)}
+                  icon={removeCircleOutline}
+                />
+                <h1 className="text-xl">R$ {monthlyPrice}</h1>
+                <IonIcon
+                  className="text-4xl"
+                  size="large"
+                  onClick={() => setMonthlyPrice(monthlyPrice + 1)}
+                  icon={addCircleOutline}
+                />
+              </div>
+              <div className="mb-3">
+                <IonItem className="mb-3">
+                  <IonLabel>Aceitar pedidos para vagas avulsa ?</IonLabel>
+                  <IonCheckbox
+                    onIonChange={(event) =>
+                      setSingleVacancy(event.detail.checked)
+                    }
+                  ></IonCheckbox>
+                </IonItem>
+                <div hidden={!singleVacancy}>
+                  <IonLabel>Valor cobrado por dia (vaga avulsa)</IonLabel>
+                  <div className="flex justify-between items-center">
+                    <IonIcon
+                      size="large"
+                      onClick={() => setDailyPrice(dailyPrice - 1)}
+                      icon={removeCircleOutline}
+                    />
+                    <h1 className="text-xl">R$ {dailyPrice}</h1>
+                    <IonIcon
+                      className="text-4xl"
+                      size="large"
+                      onClick={() => setDailyPrice(dailyPrice + 1)}
+                      icon={addCircleOutline}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton
+                  ref={nextButton2}
+                  // disabled
+                  onClick={() => onBtnClicked("next")}
+                  color="primary"
+                >
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+              <div className="flex items-center">
+                <IonIcon
+                  icon={informationCircle}
+                  size="large"
+                  className="mr-4"
+                />
+                <small className="text-gray-500">
+                  Lembre-se esse valor será cobrado independente do destino do
+                  passageiro.
+                  <br />
+                  <b>
+                    Em breve será possível cobrar valores diferentes para cada
+                    destino.
+                  </b>
+                </small>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Escolha o veículo que será utilizado no itinerário
+              </h1>
+              <div className="mb-3">
+                <IonSelect
+                  interface="action-sheet"
+                  placeholder="Selecione o veículo"
+                >
+                  {vans ? (
+                    vans.map((van, index) => {
+                      return (
+                        <IonSelectOption key={index} value={van.plate}>
+                          {van.brand +
+                            " - " +
+                            van.model +
+                            " | Placa: " +
+                            van.plate}
+                        </IonSelectOption>
+                      );
+                    })
+                  ) : (
+                    <></>
+                  )}
+                </IonSelect>
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton
+                  ref={nextButton2}
+                  // disabled
+                  onClick={() => onBtnClicked("next")}
+                  color="primary"
+                >
+                  <IonIcon icon={arrowForward} />
+                </IonButton>
+              </div>
+            </div>
+          </IonSlide>
+          <IonSlide>
+            <div className="m-3">
+              <h1 className="mb-3 text-xl">
+                Escolha um apelido para o itinerário
+              </h1>
+              <div className="mb-3">
+                <IonInput
+                  value={nickname}
+                  onIonChange={(event) => setNickname(event.detail.value!)}
+                  placeholder="Manhã - Centro"
+                ></IonInput>
+              </div>
+              <div className="flex justify-between mb-3">
+                <IonButton onClick={() => onBtnClicked("prev")} color="primary">
+                  <IonIcon icon={arrowBack} />
+                </IonButton>
+                <IonButton
+                  ref={nextButton2}
+                  // disabled
+                  onClick={() => onBtnClicked("next")}
+                  color="primary"
+                >
+                  <IonIcon icon={checkmark} />
+                  Cadastrar
+                </IonButton>
+              </div>
+            </div>
+          </IonSlide>
+        </IonSlides>
+        <IonToast
+          position="top"
+          color={toastColor}
+          isOpen={showToast}
+          onDidDismiss={() => setShowToast(false)}
+          message={toastMessage}
+          duration={2500}
+        />
       </IonContent>
     </IonPage>
   );

src/pages/Cadastro/Cadastro.tsx

@@ -1,14 +1,29 @@
-import { IonToast, IonProgressBar, IonItem, IonLabel, IonInput, IonBackButton, IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonToolbar } from '@ionic/react';
+import { Color } from "@ionic/core";
-import { arrowBack, logoFacebook, mail } from 'ionicons/icons';
+import {
-import { Action } from '../../components/Action';
+  IonBackButton,
-import { useContext, useEffect, useState } from 'react';
+  IonButton,
-import { useHistory, useParams } from 'react-router';
+  IonButtons,
-import './Cadastro.css';
+  IonCardTitle,
-import ModalExample from '../../components/Email';
+  IonCol,
-import * as UsersService from '../../services/api/users'
+  IonContent,
-import LocalStorage from '../../LocalStorage';
+  IonGrid,
-import { UserContext } from '../../App';
+  IonHeader,
-import { Color } from '@ionic/core';
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonRow,
+  IonToast,
+  IonToolbar,
+} from "@ionic/react";
+import { arrowBack } from "ionicons/icons";
+import { useContext, useState } from "react";
+import { useHistory, useParams } from "react-router";
+import { UserContext } from "../../App";
+import { Action } from "../../components/Action";
+import LocalStorage from "../../LocalStorage";
+import * as UsersService from "../../services/api/users";
+import "./Cadastro.css";
 
 const Cadastro: React.FC = () => {
   const history = useHistory();
@@ -16,74 +31,82 @@ const Cadastro: React.FC = () => {
   const user = useContext(UserContext);
 
   const [showToast, setShowToast] = useState(false);
-  const [messageToast, setMessageToast] = useState('');
+  const [messageToast, setMessageToast] = useState("");
   const [toastColor, setToastColor] = useState<Color>("primary");
 
-  const [email, setEmail] = useState<string>('');
+  const [email, setEmail] = useState<string>("");
-  const [password, setPassword] = useState<string>('');
+  const [password, setPassword] = useState<string>("");
-  const [confirmPassword, setConfirmPassword] = useState<string>('');
+  const [confirmPassword, setConfirmPassword] = useState<string>("");
-  const [firstName, setFirstName] = useState<string>('');
+  const [firstName, setFirstName] = useState<string>("");
-  const [lastName, setLastName] = useState<string>('');
+  const [lastName, setLastName] = useState<string>("");
-  const [birthDate, setBirthDate] = useState<string>('');
+  const [birthDate, setBirthDate] = useState<string>("");
   const [lResult, setlResult] = useState({
-    error: '',
+    error: "",
-    success: true
+    success: true,
   });
 
   const emailValidate = () => {
     var usuario = email.substring(0, email.indexOf("@"));
     var dominio = email.substring(email.indexOf("@") + 1, email.length);
 
-    if ((usuario.length >= 1) &&
+    if (
-        (dominio.length >= 3) &&
+      usuario.length >= 1 &&
-        (usuario.search("@") == -1) &&
+      dominio.length >= 3 &&
-        (dominio.search("@") == -1) &&
+      usuario.search("@") === -1 &&
-        (usuario.search(" ") == -1) &&
+      dominio.search("@") === -1 &&
-        (dominio.search(" ") == -1) &&
+      usuario.search(" ") === -1 &&
-        (dominio.search(".") != -1) &&
+      dominio.search(" ") === -1 &&
-        (dominio.indexOf(".") >= 1) &&
+      dominio.search(".") !== -1 &&
-        (dominio.lastIndexOf(".") < dominio.length - 1)) 
+      dominio.indexOf(".") >= 1 &&
-    {
+      dominio.lastIndexOf(".") < dominio.length - 1
-        return true;
+    ) {
+      return true;
     } else {
-        return false;
+      return false;
     }
   };
 
   const clearResult = () => {
-      lResult.error = '';
+    lResult.error = "";
-      lResult.success = true;
+    lResult.success = true;
-  }
+  };
 
   const fieldValidate = async () => {
-      clearResult();
+    clearResult();
-
-      if(!emailValidate()) {
-          lResult.error = 'E-mail inválido!';
-          lResult.success = false;
-          return lResult;
-      } else if(password.length < 7 || password.length > 12) { //TODO: validar de acordo com a documentação
-          lResult.error = 'A senha deve ter de 7 a 12 caracteres!';
-          lResult.success = false;
-          return lResult;
-      }
 
+    if (!emailValidate()) {
+      lResult.error = "E-mail inválido!";
+      lResult.success = false;
       return lResult;
+    } else if (password.length < 7 || password.length > 12) {
+      //TODO: validar de acordo com a documentação
+      lResult.error = "A senha deve ter de 7 a 12 caracteres!";
+      lResult.success = false;
+      return lResult;
+    }
+
+    return lResult;
   };
 
   const handleSubmit = async () => {
-    if(name === '' || email === '' || birthDate === '' || password === '' || confirmPassword === '') {
+    if (
-      setToastColor("warning")
+      name === "" ||
-      setMessageToast('Nenhum campo pode estar vazio!');
+      email === "" ||
+      birthDate === "" ||
+      password === "" ||
+      confirmPassword === ""
+    ) {
+      setToastColor("warning");
+      setMessageToast("Nenhum campo pode estar vazio!");
       setShowToast(true);
-      return
+      return;
     }
 
-    if(password !== confirmPassword) {
+    if (password !== confirmPassword) {
-      setToastColor("warning")
+      setToastColor("warning");
-      setMessageToast('As senhas devem ser iguais!');
+      setMessageToast("As senhas devem ser iguais!");
       setShowToast(true);
-      return
+      return;
     }
 
     const signUpForm = {
@@ -91,125 +114,132 @@ const Cadastro: React.FC = () => {
       lastname: lastName,
       email: email,
       birth_date: birthDate,
-      password: password
+      password: password,
-    }
+    };
 
     let result = fieldValidate();
-    if(!(await result).success) {
+    if (!(await result).success) {
-      setToastColor("warning")
+      setToastColor("warning");
       setMessageToast(lResult.error);
       setShowToast(true);
-      return
+      return;
     }
 
     let retorno = await UsersService.create(signUpForm);
 
-    if(!retorno.token) {
+    if (!retorno.token) {
-      setToastColor('danger')
+      setToastColor("danger");
       setMessageToast(retorno.message);
       setShowToast(true);
-      return
+      return;
     }
 
     LocalStorage.setToken(retorno.token.token);
 
     user.setIsLoggedIn(true);
 
-    history.push({ pathname: '/home', state: {
+    history.push({
-      redirectData: {
+      pathname: "/home",
-        showToastMessage: true,
+      state: {
-        toastColor: "success",
+        redirectData: {
-        toastMessage: "Usuário cadastrado com sucesso!",
+          showToastMessage: true,
-      }
+          toastColor: "success",
-    }})
+          toastMessage: "Usuário cadastrado com sucesso!",
+        },
+      },
+    });
   };
 
-  const { name } = useParams<{ name: string; }>();
+  const { name } = useParams<{ name: string }>();
 
   return (
     <IonPage>
-			<IonHeader>
+      <IonHeader>
-				<IonToolbar>
+        <IonToolbar>
           <IonButtons slot="start">
-            <IonBackButton text={''} icon={arrowBack} defaultHref='login' />
+            <IonBackButton text={""} icon={arrowBack} defaultHref="login" />
           </IonButtons>
-				</IonToolbar>
+        </IonToolbar>
-			</IonHeader>
+      </IonHeader>
-			<IonContent fullscreen>
+      <IonContent fullscreen>
         <IonGrid className="ion-padding">
-            <IonRow>
+          <IonRow>
-              <IonCol size="12">
+            <IonCol size="12">
-                {/* <IonCardTitle>Como você deseja se cadastrar?</IonCardTitle> */}
+              {/* <IonCardTitle>Como você deseja se cadastrar?</IonCardTitle> */}
-                <IonCardTitle>Cadastro</IonCardTitle>
+              <IonCardTitle>Cadastro</IonCardTitle>
-              </IonCol>
+            </IonCol>
-            </IonRow>
+          </IonRow>
-            <IonRow>
+          <IonRow>
-                <IonCol size="12">
+            <IonCol size="12">
-                  <div id='nome-sobrenome'>
+              <div id="nome-sobrenome">
-                    <IonItem>
+                <IonItem>
-                      <IonLabel position='floating'>Nome</IonLabel>
+                  <IonLabel position="floating">Nome</IonLabel>
-                      <IonInput 
+                  <IonInput
-                        type='text'
+                    type="text"
-                        clearInput
+                    clearInput
-                        onIonInput={(e: any) => setFirstName(e.target.value)}
+                    onIonInput={(e: any) => setFirstName(e.target.value)}
-                        // error={isError}
+                    // error={isError}
-                        // onIonChange={(e: any) => setFirstName(e.detail.value)}
+                    // onIonChange={(e: any) => setFirstName(e.detail.value)}
-                      >
+                  ></IonInput>
-                      </IonInput>
+                </IonItem>
-                    </IonItem>
+                <IonItem>
-                    <IonItem>
+                  <IonLabel position="floating">Sobrenome</IonLabel>
-                      <IonLabel position='floating'>Sobrenome</IonLabel>
+                  <IonInput
-                      <IonInput 
+                    clearInput
-                        clearInput
+                    onIonChange={(e: any) => setLastName(e.target.value)}
-                        onIonChange={(e: any) => setLastName(e.target.value)}
+                  ></IonInput>
-                      >
+                </IonItem>
-                      </IonInput>
+              </div>
-                    </IonItem>
-                  </div>
 
-                  <IonItem>
+              <IonItem>
-                    <IonLabel position='floating'>E-mail</IonLabel>
+                <IonLabel position="floating">E-mail</IonLabel>
-                    <IonInput 
+                <IonInput
-                      clearInput 
+                  clearInput
-                      type='email'
+                  type="email"
-                      onIonChange={(e: any) => setEmail(e.target.value)}
+                  onIonChange={(e: any) => setEmail(e.target.value)}
-                    >
+                ></IonInput>
-                    </IonInput>
+              </IonItem>
-                  </IonItem>
 
-                  <IonItem>
+              <IonItem>
-                    <IonLabel position='stacked'>Data de nascimento</IonLabel>
+                <IonLabel position="stacked">Data de nascimento</IonLabel>
-                    <IonInput 
+                <IonInput
-                      type='date'
+                  type="date"
-                      onIonChange={(e: any) => setBirthDate(e.target.value)}
+                  onIonChange={(e: any) => setBirthDate(e.target.value)}
-                    >
+                ></IonInput>
-                    </IonInput>
+              </IonItem>
-                  </IonItem>
 
-                  <IonItem>
+              <IonItem>
-                    <IonLabel position='floating'>Senha</IonLabel>
+                <IonLabel position="floating">Senha</IonLabel>
-                    <IonInput 
+                <IonInput
-                      clearInput 
+                  clearInput
-                      type='password'
+                  type="password"
-                      onIonChange={(e: any) => setPassword(e.target.value)}
+                  onIonChange={(e: any) => setPassword(e.target.value)}
-                    ></IonInput>
+                ></IonInput>
-                  </IonItem>
+              </IonItem>
-                  <IonItem>
+              <IonItem>
-                    <IonLabel position='floating'>Confirme a senha</IonLabel>
+                <IonLabel position="floating">Confirme a senha</IonLabel>
-                    <IonInput 
+                <IonInput
-                      clearInput 
+                  clearInput
-                      type='password'
+                  type="password"
-                      onIonChange={(e: any) => setConfirmPassword(e.target.value)}
+                  onIonChange={(e: any) => setConfirmPassword(e.target.value)}
-                    ></IonInput>
+                ></IonInput>
-                  </IonItem>
+              </IonItem>
 
-                  <IonButton className="ion-margin-top" expand="block" onClick={ handleSubmit }>Cadastrar-se</IonButton>
+              <IonButton
-                </IonCol>
+                className="ion-margin-top"
-            </IonRow>
+                expand="block"
-            <small className='ion-margin-top'>
+                onClick={handleSubmit}
-              Ao se cadastrar, você aceita nossos <a href="">Termos e Condições</a> e nossa <a href=""> Política de Privacidade</a>.
+              >
-            </small>
+                Cadastrar-se
-            <Action message="Já tem conta?" text="Login" link="/login" />
+              </IonButton>
+            </IonCol>
+          </IonRow>
+          <small className="ion-margin-top">
+            Ao se cadastrar, você aceita nossos{" "}
+            <a href="">Termos e Condições</a> e nossa{" "}
+            <a href=""> Política de Privacidade</a>.
+          </small>
+          <Action message="Já tem conta?" text="Login" link="/login" />
         </IonGrid>
         {/* <IonProgressBar type="indeterminate"></IonProgressBar><br /> */}
 
@@ -220,8 +250,8 @@ const Cadastro: React.FC = () => {
           message={messageToast}
           duration={2500}
         />
-			</IonContent>
+      </IonContent>
-		</IonPage>
+    </IonPage>
   );
 };
 

src/pages/CadastroCompletar/CadastroCompletar.tsx

@@ -1,26 +1,26 @@
 import {
-IonBackButton,
+  IonBackButton,
-IonButtons,
+  IonButtons,
-IonCard,
+  IonCard,
-IonCardContent,
+  IonCardContent,
-IonContent,
+  IonContent,
-IonHeader,
+  IonHeader,
-IonIcon,
+  IonIcon,
-IonItem,
+  IonItem,
-IonLabel,
+  IonLabel,
-IonPage,
+  IonPage,
-IonTitle,
+  IonTitle,
-IonToast,
+  IonToast,
-IonToolbar
+  IonToolbar,
 } from "@ionic/react";
-import React, { useEffect, useReducer, useState } from "react";
+import React, { useEffect, useState } from "react";
 
-import '../Perfil.css'
-import { useHistory, useLocation } from "react-router";
 import { callOutline, documentTextOutline } from "ionicons/icons";
+import { useHistory, useLocation } from "react-router";
+import "../Perfil.css";
 
-import '../Cadastro/Cadastro.css'
 import { Color } from "@ionic/core";
+import "../Cadastro/Cadastro.css";
 
 interface cardItem {
   icon: string;
@@ -48,57 +48,62 @@ interface LocationState {
     showToastMessage: boolean;
     toastColor: Color;
     toastMessage: string;
-  }
+  };
 }
 
 let items: cardItem[] = [
   {
     icon: documentTextOutline,
-    label: 'Documento',
+    label: "Documento",
-    description: 'Cadastre seu documento para que seu perfil possa ser verificado',
+    description:
-    url: '/perfil/completar/documento',
+      "Cadastre seu documento para que seu perfil possa ser verificado",
-    required: false
+    url: "/perfil/completar/documento",
+    required: false,
   },
   {
     icon: callOutline,
-    label: 'Informações de contato',
+    label: "Informações de contato",
-    description: 'Cadastre seu número de telefone celular que para possam contatar você',
+    description:
-    url: '/perfil/completar/telefone',
+      "Cadastre seu número de telefone celular que para possam contatar você",
-    required: false
+    url: "/perfil/completar/telefone",
-  }
+    required: false,
-]
+  },
+];
 
 const CadastroCompletar: React.FC = () => {
   const history = useHistory();
   const location = useLocation<LocationState>();
 
   const [showToast, setShowToast] = useState(false);
-  const [toastMessage, setToastMessage] = useState('');
+  const [toastMessage, setToastMessage] = useState("");
   const [toastColor, setToastColor] = useState<Color>("primary");
 
   const handleCardClick = (item: cardItem) => {
-    if (!item.required) return
+    if (!item.required) return;
 
-    history.push({ pathname: item.url, state: { userData: location.state.userData } }); 
+    history.push({
-  }
+      pathname: item.url,
+      state: { userData: location.state.userData },
+    });
+  };
 
   useEffect(() => {
     if (!location.state || !location.state.userData) {
-      history.push({ pathname: '/perfil' })
+      history.push({ pathname: "/perfil" });
     }
 
     if (location.state && location.state.redirectData) {
-      const redirectData = location.state.redirectData
+      const redirectData = location.state.redirectData;
 
       if (redirectData.showToastMessage) {
-        setToastColor(redirectData.toastColor)
+        setToastColor(redirectData.toastColor);
-        setToastMessage(redirectData.toastMessage)
+        setToastMessage(redirectData.toastMessage);
-        setShowToast(true)
+        setShowToast(true);
       }
     }
 
-    if (!location.state.userData.document) items[0].required = true
+    if (!location.state.userData.document) items[0].required = true;
-    if (!location.state.userData.phone_number) items[1].required = true
+    if (!location.state.userData.phone_number) items[1].required = true;
   }, []);
 
   return (
@@ -113,9 +118,15 @@ const CadastroCompletar: React.FC = () => {
       </IonHeader>
 
       <IonContent>
-        { items.map((item, index) => {
+        {items.map((item, index) => {
           return (
-            <IonCard button={item.required} key={index} onClick={() => { handleCardClick(item) }}>
+            <IonCard
+              button={item.required}
+              key={index}
+              onClick={() => {
+                handleCardClick(item);
+              }}
+            >
               <IonItem>
                 <IonIcon icon={item.icon} slot="start" />
                 <IonLabel>{item.label}</IonLabel>
@@ -123,7 +134,7 @@ const CadastroCompletar: React.FC = () => {
 
               <IonCardContent>{item.description}</IonCardContent>
             </IonCard>
-          )
+          );
         })}
 
         <IonToast

src/pages/CadastroVan.tsx

@@ -1,21 +1,21 @@
 import {
-  IonToast,
-  IonItem,
-  IonLabel,
-  IonInput,
   IonBackButton,
   IonButton,
   IonButtons,
+  IonCheckbox,
   IonContent,
   IonHeader,
-  IonPage,
+  IonInput,
-  IonToolbar,
+  IonItem,
-  IonTitle,
+  IonLabel,
   IonList,
-  IonCheckbox,
   IonListHeader,
+  IonPage,
   IonSelect,
   IonSelectOption,
+  IonTitle,
+  IonToast,
+  IonToolbar,
 } from "@ionic/react";
 
 import React, { useEffect, useReducer, useState } from "react";
@@ -23,12 +23,12 @@ import { useHistory } from "react-router-dom";
 
 // import * as yup from 'yup';
 
-import carsService from '../services/functions/carsService'
+import carsService from "../services/functions/carsService";
 
-import * as vansRoutes from '../services/api/vans';
+import * as vansRoutes from "../services/api/vans";
 
-import "./CadastroVan.css";
 import { Color } from "@ionic/core";
+import "./CadastroVan.css";
 
 const CadastroVan: React.FC = () => {
   const history = useHistory();
@@ -37,34 +37,36 @@ const CadastroVan: React.FC = () => {
   const [toastMessage, setToastMessage] = useState<string>("");
   const [toastColor, setToastColor] = useState<Color>("primary");
 
-  const [carModels, setCarModels] = useState([{
+  const [carModels, setCarModels] = useState([
-    id_model: '',
+    {
-    name: ''
+      id_model: "",
-  }]);
+      name: "",
+    },
+  ]);
 
   const [inputValues, setInputValues] = useReducer(
     (state: any, newState: any) => ({ ...state, ...newState }),
     {
-      carPlate: '',
+      carPlate: "",
-      carBrand: '',
+      carBrand: "",
-      carModel: '',
+      carModel: "",
       seats_number: 1,
       isRented: false,
-      locator_name: '',
+      locator_name: "",
-      locator_address: '',
+      locator_address: "",
-      locator_complement: '',
+      locator_complement: "",
-      locator_city: '',
+      locator_city: "",
-      locator_state: '',
+      locator_state: "",
     }
   );
 
   const clearRentalData = () => {
     setInputValues({
-      carRentalName: '',
+      carRentalName: "",
-      complement: '',
+      complement: "",
-      city: '',
+      city: "",
-      state: '',
+      state: "",
-    })
+    });
   };
 
   const validateForm = (): boolean => {
@@ -104,7 +106,7 @@ const CadastroVan: React.FC = () => {
       return false;
     }
 
-    if ((Number)(vanForm.seats_number) < 1) {
+    if (Number(vanForm.seats_number) < 1) {
       setToastMessage("Número de passageiros deve ser positivo!");
       setShowToast(true);
       return false;
@@ -126,7 +128,7 @@ const CadastroVan: React.FC = () => {
       locator_complement: inputValues.locator_complement,
       locator_city: inputValues.locator_city,
       locator_state: inputValues.locator_state,
-    }
+    };
 
     if (!locatorForm.locator_name) {
       setToastMessage("Nome do Locador é obrigatório");
@@ -157,74 +159,82 @@ const CadastroVan: React.FC = () => {
 
   const handleSubmit = async () => {
     if (!validateForm()) {
-      return
+      return;
     }
 
     // cria registro da van
-    await vansRoutes.create({
+    await vansRoutes
-      plate: inputValues.carPlate,
+      .create({
-      brand: inputValues.carBrand,
+        plate: inputValues.carPlate,
-      model: inputValues.carModel,
+        brand: inputValues.carBrand,
-      seats_number: inputValues.seats_number,
+        model: inputValues.carModel,
-      locator_name: inputValues.locator_name,
+        seats_number: inputValues.seats_number,
-      locator_address: inputValues.locator_address,
+        locator_name: inputValues.locator_name,
-      locator_complement: inputValues.locator_complement,
+        locator_address: inputValues.locator_address,
-      locator_city: inputValues.locator_city,
+        locator_complement: inputValues.locator_complement,
-      locator_state: inputValues.locator_state
+        locator_city: inputValues.locator_city,
-    }).then(response => {
+        locator_state: inputValues.locator_state,
-      if (response.status === 'error') {
+      })
-        setToastMessage(response.message);
+      .then((response) => {
+        if (response.status === "error") {
+          setToastMessage(response.message);
+          setShowToast(true);
+
+          return;
+        }
+
+        history.push({
+          pathname: "/minhas-vans",
+          state: {
+            redirectData: {
+              showToastMessage: true,
+              toastColor: "success",
+              toastMessage: response.message,
+            },
+          },
+        });
+      })
+      .catch((err) => {
+        setToastColor("danger");
+        setToastMessage(err);
         setShowToast(true);
-
+      });
-        return
-      }
-
-      history.push({ pathname: '/minhas-vans', state: {
-        redirectData: {
-          showToastMessage: true,
-          toastColor: "success",
-          toastMessage: response.message,
-        },
-      }})
-    }).catch((err) => {
-      setToastColor("danger")
-      setToastMessage(err);
-      setShowToast(true);
-    })
   };
 
   useEffect(() => {
-    let isMounted = true
+    let isMounted = true;
 
     const getCarsModels = async () => {
-      const carModelsRes = await carsService.getAllCarModels()
+      const carModelsRes = await carsService.getAllCarModels();
 
       if (carModelsRes.error) {
-        setToastColor("danger")
+        setToastColor("danger");
         setToastMessage(carModelsRes.error.errorMessage);
         setShowToast(true);
-        return
+        return;
       }
 
       if (carModelsRes.data) {
         if (isMounted) {
-          setCarModels(carModelsRes.data)
+          setCarModels(carModelsRes.data);
         }
       }
-    }
+    };
 
-    getCarsModels()
+    getCarsModels();
 
-    return () => { isMounted = false }
+    return () => {
-  }, [])
+      isMounted = false;
+    };
+  }, []);
 
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Cadastro de veículo</IonTitle>
-          <IonButtons slot='start'>
+          <IonButtons slot="start">
-            <IonBackButton defaultHref='/perfil' />
+            <IonBackButton defaultHref="/perfil" />
           </IonButtons>
         </IonToolbar>
       </IonHeader>
@@ -235,46 +245,62 @@ const CadastroVan: React.FC = () => {
             <IonLabel>Informações do veículo</IonLabel>
           </IonListHeader>
           <IonItem>
-            <IonLabel position='floating'>Placa </IonLabel>
+            <IonLabel position="floating">Placa </IonLabel>
             <IonInput
-              type='text'
+              type="text"
               clearInput
               maxlength={7}
-              placeholder='Digite a Placa do Veículo'
+              placeholder="Digite a Placa do Veículo"
-              onIonChange={(e: any) => setInputValues({ carPlate: e.target.value })}
+              onIonChange={(e: any) =>
+                setInputValues({ carPlate: e.target.value })
+              }
             />
           </IonItem>
 
           {/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */}
           <IonItem>
             <IonLabel>Marca</IonLabel>
-            <IonSelect onIonChange={(e: any) => { setInputValues({ carBrand: e.detail.value }) }}>
+            <IonSelect
-              { carModels ? carModels.map((carModel, index) => {
+              onIonChange={(e: any) => {
-                return (<IonSelectOption key={index} value={carModel.name}>{carModel.name}</IonSelectOption>)
+                setInputValues({ carBrand: e.detail.value });
-              }) : <></> }
+              }}
+            >
+              {carModels ? (
+                carModels.map((carModel, index) => {
+                  return (
+                    <IonSelectOption key={index} value={carModel.name}>
+                      {carModel.name}
+                    </IonSelectOption>
+                  );
+                })
+              ) : (
+                <></>
+              )}
             </IonSelect>
           </IonItem>
 
           <IonItem>
-            <IonLabel position='floating'>Modelo </IonLabel>
+            <IonLabel position="floating">Modelo </IonLabel>
             <IonInput
-              type='text'
+              type="text"
               clearInput
-              placeholder='Digite o Modelo do Veículo'
+              placeholder="Digite o Modelo do Veículo"
-              onIonChange={(e: any) => setInputValues({ carModel: e.target.value })}
+              onIonChange={(e: any) =>
+                setInputValues({ carModel: e.target.value })
+              }
             />
           </IonItem>
 
           <IonItem>
-            <IonLabel position='floating'>
+            <IonLabel position="floating">Número de assentos</IonLabel>
-              Número de assentos
-            </IonLabel>
             <IonInput
-              type='number'
+              type="number"
               min={1}
               clearInput
-              placeholder='podem ser ocupados por passageiros'
+              placeholder="podem ser ocupados por passageiros"
-              onIonChange={(e: any) => setInputValues({ seats_number: e.target.value })}
+              onIonChange={(e: any) =>
+                setInputValues({ seats_number: e.target.value })
+              }
             />
           </IonItem>
         </IonList>
@@ -286,52 +312,67 @@ const CadastroVan: React.FC = () => {
 
           <IonItem>
             <IonLabel>O veículo é alugado?</IonLabel>
-            <IonCheckbox checked={inputValues.isRented} onIonChange={e => setInputValues({ isRented: e.detail.checked })} />
+            <IonCheckbox
+              checked={inputValues.isRented}
+              onIonChange={(e) =>
+                setInputValues({ isRented: e.detail.checked })
+              }
+            />
           </IonItem>
 
           {inputValues.isRented && (
             <div>
-            <IonItem>
+              <IonItem>
-              <IonLabel position="stacked" />
+                <IonLabel position="stacked" />
-              <IonInput
+                <IonInput
-                type='text'
+                  type="text"
-                clearInput
+                  clearInput
-                placeholder='Nome completo do Locador'
+                  placeholder="Nome completo do Locador"
-                onIonChange={(e: any) => setInputValues({ locator_name: e.target.value })}
+                  onIonChange={(e: any) =>
-              />
+                    setInputValues({ locator_name: e.target.value })
+                  }
+                />
 
-              <IonInput
+                <IonInput
-                type='text'
+                  type="text"
-                clearInput
+                  clearInput
-                placeholder='Endereço do locador'
+                  placeholder="Endereço do locador"
-                onIonChange={(e: any) => setInputValues({ locator_address: e.target.value })}
+                  onIonChange={(e: any) =>
-              />
+                    setInputValues({ locator_address: e.target.value })
-              <IonInput
+                  }
-                type='text'
+                />
-                clearInput
+                <IonInput
-                placeholder='Complemento'
+                  type="text"
-                onIonChange={(e: any) => setInputValues({ locator_complement: e.target.value })}
+                  clearInput
-              />
+                  placeholder="Complemento"
-              <IonInput
+                  onIonChange={(e: any) =>
-                type='text'
+                    setInputValues({ locator_complement: e.target.value })
-                clearInput
+                  }
-                placeholder='Cidade'
+                />
-                onIonChange={(e: any) => setInputValues({ locator_city: e.target.value })}
+                <IonInput
-              />
+                  type="text"
-              <IonInput
+                  clearInput
-                type='text'
+                  placeholder="Cidade"
-                clearInput
+                  onIonChange={(e: any) =>
-                placeholder='Estado'
+                    setInputValues({ locator_city: e.target.value })
-                onIonChange={(e: any) => setInputValues({ locator_state: e.target.value })}
+                  }
-              />
+                />
-            </IonItem>
+                <IonInput
+                  type="text"
+                  clearInput
+                  placeholder="Estado"
+                  onIonChange={(e: any) =>
+                    setInputValues({ locator_state: e.target.value })
+                  }
+                />
+              </IonItem>
             </div>
           )}
 
           <div>
             <IonButton
-              className='ion-margin-top'
+              className="ion-margin-top"
-              expand='block'
+              expand="block"
               onClick={handleSubmit}
             >
               Salvar
@@ -346,7 +387,7 @@ const CadastroVan: React.FC = () => {
           onDidDismiss={() => setShowToast(false)}
           message={toastMessage}
           duration={2500}
-      />
+        />
       </IonContent>
     </IonPage>
   );

src/pages/MinhasVans.tsx

@@ -1,21 +1,32 @@
-import { IonBackButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToast, IonToolbar } from '@ionic/react';
+import { Color } from "@ionic/core";
-import { Color } from '@ionic/core';
+import {
-import { carOutline } from 'ionicons/icons';
+  IonBackButton,
-import { useContext, useEffect, useState } from 'react';
+  IonButtons,
-import { useHistory, useLocation } from 'react-router';
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToast,
+  IonToolbar,
+} from "@ionic/react";
+import { useEffect, useState } from "react";
+import { useHistory } from "react-router";
 
-import { UserContext } from '../App';
+import * as vansRoutes from "../services/api/vans";
 
-import * as vansRoutes from '../services/api/vans';
+import sessionsService from "../services/functions/sessionsService";
-
-import sessionsService from '../services/functions/sessionsService'
 
 interface VanInfo {
   plate: string;
   brand: string;
   model: string;
   seats_number: string;
-  document_status: boolean,
+  document_status: boolean;
   locator_name: string;
   locator_address: string;
   locator_complement: string;
@@ -27,90 +38,104 @@ const MinhasVans: React.FC = () => {
   const history = useHistory();
 
   const [showToast, setShowToast] = useState(false);
-  const [toastMessage, setToastMessage] = useState('');
+  const [toastMessage, setToastMessage] = useState("");
   const [toastColor, setToastColor] = useState<Color>("primary");
 
   const [userVans, setUserVans] = useState<VanInfo[]>();
 
   const redirectUserToLogin = () => {
-    history.push({ pathname: '/login' });
+    history.push({ pathname: "/login" });
-  }
+  };
 
   useEffect(() => {
     const getUserVans = async () => {
-      let userId = ''
+      let userId = "";
 
-      const refreshSessionRes = await sessionsService.refreshSession()
+      const refreshSessionRes = await sessionsService.refreshSession();
 
       if (refreshSessionRes.error) {
-        redirectUserToLogin()
+        redirectUserToLogin();
-        return
+        return;
       }
 
       if (refreshSessionRes.userId) {
-        userId = refreshSessionRes.userId
+        userId = refreshSessionRes.userId;
       }
 
-      vansRoutes.getByUserId(userId).then(response => {
+      vansRoutes
-        if (response.status === 'error') {
+        .getByUserId(userId)
-          setToastColor("danger")
+        .then((response) => {
-          setToastMessage(response.message);
+          if (response.status === "error") {
+            setToastColor("danger");
+            setToastMessage(response.message);
+            setShowToast(true);
+
+            return;
+          }
+
+          setUserVans(response.data);
+        })
+        .catch((err) => {
+          setToastColor("danger");
+          setToastMessage(err);
           setShowToast(true);
+        });
+    };
 
-          return
+    getUserVans();
-        }
+  }, []);
-  
-        setUserVans(response.data)
-      }).catch((err) => {
-        setToastColor("danger")
-        setToastMessage(err);
-        setShowToast(true);
-      })
-    }
-
-    getUserVans()
-  }, [])
 
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Minhas vans</IonTitle>
-            <IonButtons slot="start">
+          <IonButtons slot="start">
-              <IonBackButton defaultHref="/perfil" />
+            <IonBackButton defaultHref="/perfil" />
-            </IonButtons>
+          </IonButtons>
-          </IonToolbar>
+        </IonToolbar>
-        </IonHeader>
+      </IonHeader>
 
-        <IonContent>
+      <IonContent>
-          { userVans ? userVans.map((van, index) => {
+        {userVans ? (
+          userVans.map((van, index) => {
             return (
               <IonCard key={index}>
-              <IonCardHeader>
+                <IonCardHeader>
-                <IonCardTitle>{van.plate}</IonCardTitle>
+                  <IonCardTitle>{van.plate}</IonCardTitle>
-                <IonCardSubtitle>{van.brand} - {van.model}</IonCardSubtitle>
+                  <IonCardSubtitle>
-              </IonCardHeader>
+                    {van.brand} - {van.model}
-                { van.locator_name ?
+                  </IonCardSubtitle>
+                </IonCardHeader>
+                {van.locator_name ? (
                   <>
-                    <IonCardContent>{van.seats_number} assentos - Locador: {van.locator_name}</IonCardContent>
+                    <IonCardContent>
-                  </> :
+                      {van.seats_number} assentos - Locador: {van.locator_name}
-                  <>
+                    </IonCardContent>
-                    <IonCardContent>{van.seats_number} assentos - Não é alugado</IonCardContent>
                   </>
-                }
+                ) : (
+                  <>
+                    <IonCardContent>
+                      {van.seats_number} assentos - Não é alugado
+                    </IonCardContent>
+                  </>
+                )}
               </IonCard>
-            )
+            );
-          }) : <></>}
+          })
+        ) : (
+          <></>
+        )}
 
-          <IonToast
+        <IonToast
-            position="top"
+          position="top"
-            color={toastColor}
+          color={toastColor}
-            isOpen={showToast}
+          isOpen={showToast}
-            onDidDismiss={() => setShowToast(false)}
+          onDidDismiss={() => setShowToast(false)}
-            message={toastMessage}
+          message={toastMessage}
-            duration={2500}
+          duration={2500}
-          />
+        />
-        </IonContent>
+      </IonContent>
     </IonPage>
   );
 };

src/pages/Perfil.tsx

@@ -19,8 +19,6 @@ import {
   IonToast,
   IonToolbar,
 } from "@ionic/react";
-import { useHistory, useLocation } from "react-router-dom";
-import React, { useState, useEffect, useReducer, useContext } from "react";
 import {
   callOutline,
   cardOutline,
@@ -32,14 +30,19 @@ import {
   shieldCheckmarkOutline,
   starOutline,
 } from "ionicons/icons";
+import React, { useContext, useEffect, useReducer, useState } from "react";
+import { useHistory, useLocation } from "react-router-dom";
 
-import "./Perfil.css";
 import LocalStorage from "../LocalStorage";
+import "./Perfil.css";
 
-import sessionsService from "../services/functions/sessionsService";
-import usersService from "../services/functions/usersService";
-import { UserContext } from "../App";
 import { Color } from "@ionic/core";
+import { UserContext } from "../App";
+import sessionsService from "../services/functions/sessionsService";
+import {
+  checkIfUserIsDriver,
+  getById,
+} from "../services/functions/usersService";
 
 interface ScanNewProps {
   match: {
@@ -131,7 +134,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
       }
 
       // get user info by ID
-      const getByIdRes = await usersService.getById(userId);
+      const getByIdRes = await getById(userId);
 
       if (getByIdRes.error) {
         if (isVisitor && props.match.params.id) {
@@ -147,7 +150,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
       }
 
       // check if user is driver (if they have vans)
-      const userIsDriverRes = await usersService.checkIfUserIsDriver(userId);
+      const userIsDriverRes = await checkIfUserIsDriver(userId);
 
       // if (userIsDriverRes.error) {
       //   setToastColor('warning')
@@ -358,6 +361,15 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
                   <IonIcon icon={personOutline} slot="start" />
                   <IonLabel>Buscar passageiros</IonLabel>
                 </IonItem>
+                <IonItem
+                  button
+                  onClick={() =>
+                    history.push({ pathname: "/cadastrar-itinerario" })
+                  }
+                >
+                  <IonIcon icon={mapOutline} slot="start" />
+                  <IonLabel>Cadastrar itinerário</IonLabel>
+                </IonItem>
                 <IonItem
                   button
                   onClick={() =>

src/pages/Transportes/Transportes.tsx

@@ -1,52 +1,34 @@
 import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCheckbox,
   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,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonModal,
+  IonPage,
+  IonRadio,
+  IonRadioGroup,
+  IonSlide,
+  IonSlides,
   IonToast,
+  IonToolbar,
 } 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/functions/transportsService";
 import { createUserSearch } from "../../services/api/users";
+import { getTransportes } from "../../services/functions/transportsService";
 import "./Transportes.css";
 
 interface InfoBusca {
@@ -63,8 +45,8 @@ const Transportes: React.FC = () => {
   const [transportes, setTransportes] = useState([]);
   const [showModalFilters, setShowModalFilters] = useState(false);
   const [showToast, setShowToast] = useState(false);
-  const [messageToast, setMessageToast ] = useState('');
+  const [messageToast, setMessageToast] = useState("");
-  const [toastColor, setToastColor] = useState('success');
+  const [toastColor, setToastColor] = useState("success");
 
   useEffect(() => {
     if (props) {
@@ -77,15 +59,21 @@ const Transportes: React.FC = () => {
     setTransportes(data);
   }
 
-  function criaAlerta(){
+  function criaAlerta() {
-    createUserSearch(props.coordinatesFrom.lat, props.coordinatesFrom.lng, props.addressTo.label).then(() => {
+    createUserSearch(
-      setMessageToast('Alerta criado com sucesso!');
+      props.coordinatesFrom.lat,
-      setShowToast(true);
+      props.coordinatesFrom.lng,
-    }).catch((err:any) => {
+      props.addressTo.label
-      setMessageToast('Não foi possível criar o alerta!');
+    )
-      setToastColor('danger');
+      .then(() => {
-      setShowToast(true);
+        setMessageToast("Alerta criado com sucesso!");
-    })
+        setShowToast(true);
+      })
+      .catch((err: any) => {
+        setMessageToast("Não foi possível criar o alerta!");
+        setToastColor("danger");
+        setShowToast(true);
+      });
   }
 
   return (
@@ -107,7 +95,7 @@ const Transportes: React.FC = () => {
         </div>
       </IonHeader>
       <IonContent fullscreen>
-        {transportes && transportes.length > 0? (
+        {transportes && transportes.length > 0 ? (
           <div className="header-tabs">
             <IonSlides>
               <IonSlide>
@@ -124,9 +112,11 @@ const Transportes: React.FC = () => {
               </IonSlide>
             </IonSlides>
           </div>
-        ) 
+        ) : (
-        : 
+          <h1 className="msg-not-found">
-        (<h1 className="msg-not-found">Não foi encontrado nenhum transporte que atenda essa rota.</h1>)}
+            Não foi encontrado nenhum transporte que atenda essa rota.
+          </h1>
+        )}
         {transportes &&
           transportes.map((record: any, index: any) => {
             return (
@@ -139,7 +129,7 @@ const Transportes: React.FC = () => {
                 </IonCardContent>
               </IonCard>
             );
-        })}
+          })}
 
         <div className="button-criar-alerta">
           <IonButton onClick={() => criaAlerta()}>Criar Alerta</IonButton>

src/services/api/transports.ts

@@ -1,10 +1,9 @@
-import instance from './api';
+import instance from "./api";
 // import LocalStorage from '../LocalStorage';
 
-import transportsRoutes from '../../constants/routes/transportsRoutes';
+import { AxiosRequestHeaders } from "axios";
-import { AxiosRequestHeaders } from 'axios';
+import transportsRoutes from "../../constants/routes/transportsRoutes";
-import LocalStorage from '../../LocalStorage';
+import LocalStorage from "../../LocalStorage";
-import { setStore } from '../../store/RecordsStore';
 
 let token: string;
 let header: AxiosRequestHeaders;
@@ -13,26 +12,29 @@ function updateHeader() {
   token = LocalStorage.getToken();
 
   header = {
-    "Accept": 'application/json',
+    Accept: "application/json",
-    "Content-Type": 'application/json',
+    "Content-Type": "application/json",
-    "Authorization": 'Bearer ' + token
+    Authorization: "Bearer " + token,
-  }
+  };
 }
 
 export interface getTransportsRequest {
   coordinatesFrom: {
-    lat: number,
+    lat: number;
-    lng: number
+    lng: number;
-  },
+  };
   coordinatesTo: {
-    lat: number,
+    lat: number;
-    lng: number
+    lng: number;
-  }
+  };
 }
 
 export async function get(coordinates: getTransportsRequest) {
   updateHeader();
 
-  const response = await instance.get(transportsRoutes.get.url + `/${coordinates}`, { headers: header });
+  const response = await instance.get(
+    transportsRoutes.get.url + `/${coordinates}`,
+    { headers: header }
+  );
   return response.data;
 }

src/services/api/users.ts

@@ -1,10 +1,10 @@
-import instance from './api';
+import instance from "./api";
 // import LocalStorage from '../LocalStorage';
 
-import userRoutes from '../../constants/routes/usersRoutes';
+import { AxiosRequestHeaders } from "axios";
-import { AxiosRequestHeaders } from 'axios';
+import userRoutes from "../../constants/routes/usersRoutes";
-import LocalStorage from '../../LocalStorage';
+import LocalStorage from "../../LocalStorage";
-import { setStore } from '../../store/RecordsStore';
+import { setStore } from "../../store/RecordsStore";
 
 let token: string;
 let header: AxiosRequestHeaders;
@@ -13,20 +13,20 @@ function updateHeader() {
   token = LocalStorage.getToken();
 
   header = {
-    "Accept": 'application/json',
+    Accept: "application/json",
-    "Content-Type": 'application/json',
+    "Content-Type": "application/json",
-    "Authorization": 'Bearer ' + token
+    Authorization: "Bearer " + token,
-  }
+  };
 }
 
 export interface CadastroResponse {
-    message?: string;
+  message?: string;
 
-    token?: {
+  token?: {
-      token: string;
+    token: string;
-    };
+  };
 
-    error?: string;
+  error?: string;
 }
 
 export interface CadastroRequest {
@@ -63,21 +63,28 @@ export async function create(CadastroRequest: any) {
 export async function getById(userId: string) {
   updateHeader();
 
-  const response = await instance.get(userRoutes.get.url + `/${userId}`, { headers: header });
+  const response = await instance.get(userRoutes.get.url + `/${userId}`, {
+    headers: header,
+  });
   return response.data;
 }
 
 export async function update(userData: UpdateUserRequest) {
   updateHeader();
 
-  const response = await instance.patch(userRoutes.update.url, userData, { headers: header });
+  const response = await instance.patch(userRoutes.update.url, userData, {
+    headers: header,
+  });
   return response.data;
 }
 
 export async function checkIfUserIsDriver(id_user: string) {
   updateHeader();
 
-  const response = await instance.get(userRoutes.checkIfUserIsDriver.url + `/${id_user}`, { headers: header });
+  const response = await instance.get(
+    userRoutes.checkIfUserIsDriver.url + `/${id_user}`,
+    { headers: header }
+  );
   return response.data;
 }
 
@@ -85,25 +92,39 @@ export async function checkIfUserIsDriver(id_user: string) {
 export async function getSocialInfo(userId: string) {
   updateHeader();
 
-  const response = await instance.get(userRoutes.getSocialInfo.url + `/${userId}`, { headers: header });
+  const response = await instance.get(
+    userRoutes.getSocialInfo.url + `/${userId}`,
+    { headers: header }
+  );
   return response.data;
 }
 
 export async function getUsersSearching(currentPoint: any) {
   //	Replace lat/long with values from get current location.
-	//	Allow choosing of radius?
+  //	Allow choosing of radius?
-	//	Offset could = amount loaded in an infinite scroll?
+  //	Offset could = amount loaded in an infinite scroll?
-	var latitude = currentPoint.latitude, longitude = currentPoint.longitude, radius = 3000, offset = 0;
+  // var latitude = currentPoint.latitude, longitude = currentPoint.longitude, radius = 3000, offset = 0;
-	// const response = await fetch(`http://localhost:4000/get-records?latitude=${ latitude }&longitude=${ longitude }&radius=${ radius }&offset=${ offset }`);
+  // const response = await fetch(`http://localhost:4000/get-records?latitude=${ latitude }&longitude=${ longitude }&radius=${ radius }&offset=${ offset }`);
-  const response = await instance.post(`${userRoutes.getUsersSearching.url}`, currentPoint)
+  const response = await instance.post(
-	// const data = await response.json();
+    `${userRoutes.getUsersSearching.url}`,
-  console.log(response.data)
+    currentPoint
-	setStore(response.data);
+  );
+  // const data = await response.json();
+  console.log(response.data);
+  setStore(response.data);
 }
 
-export async function createUserSearch(latitude_from: any, longitude_from: any, addres_to: any) {
+export async function createUserSearch(
-  const response = await instance.post(`${userRoutes.createUserSearch.url}`, { latitude_from, longitude_from, addres_to });
+  latitude_from: any,
+  longitude_from: any,
+  addres_to: any
+) {
+  const response = await instance.post(`${userRoutes.createUserSearch.url}`, {
+    latitude_from,
+    longitude_from,
+    addres_to,
+  });
 
-  console.log(response)
+  console.log(response);
-	setStore(response);
+  setStore(response);
 }

src/services/functions/carsService.ts

@@ -8,20 +8,18 @@ interface getAllCarModelsReturn {
 
   error?: {
     errorMessage: string;
-  }
+  };
 }
 
 interface getAllCarModelsRes {
   status?: string;
 
-  message: string
+  message: string;
 
   data?: {
     id_model: string;
     name: string;
   }[];
-
-  
 }
 
 const getAllCarModels = async (): Promise<getAllCarModelsReturn> => {
@@ -48,4 +46,8 @@ const getAllCarModels = async (): Promise<getAllCarModelsReturn> => {
   }
 };
 
-export default { getAllCarModels };
+const method = {
+  getAllCarModels,
+};
+
+export default method;

src/services/functions/sessionsService.ts

@@ -14,7 +14,7 @@ interface refreshSessionResponse {
 
 const refreshSession = async (): Promise<refreshSessionReturn> => {
   try {
-    let res: refreshSessionResponse = await sessionRoutes.refresh()
+    let res: refreshSessionResponse = await sessionRoutes.refresh();
 
     if (res.status === "error") {
       return {
@@ -26,7 +26,7 @@ const refreshSession = async (): Promise<refreshSessionReturn> => {
     return {
       userId: res.userId,
     };
-  } catch(err) {
+  } catch (err) {
     return {
       error: true,
       errorMessage: "Por favor, autentique-se.",
@@ -40,7 +40,11 @@ const refreshSession = async (): Promise<refreshSessionReturn> => {
   //   } else {
   //       // Anything else
   //   }
-// }
+  // }
 };
 
-export default { refreshSession }
+const method = {
+  refreshSession,
+};
+
+export default method;

src/services/functions/transportsService.ts

@@ -1,20 +1,18 @@
-import * as transportsRoutes from '../api/transports';
-
 interface CoordinatesRequest {
-  coordinatesFrom:{
+  coordinatesFrom: {
-    lat: number,
+    lat: number;
-    lng: number
+    lng: number;
-  },
+  };
-  coordinatesTo:{
+  coordinatesTo: {
-    lat: number,
+    lat: number;
-    lng: number
+    lng: number;
-  }
+  };
 }
 
-export async function getTransportes(request: CoordinatesRequest) : Promise<any> {
+export async function getTransportes(
+  request: CoordinatesRequest
+): Promise<any> {
   try {
-    let res : any = await transportsRoutes.get(request);
+    // let res : any = await transportsRoutes.get(request);
-  } catch (error) {
+  } catch (error) {}
-    
-  }
 }

src/services/functions/usersService.ts

@@ -10,10 +10,10 @@ interface getByIdReturn {
     bio: string;
     document_type: string;
     document: string;
-  },
+  };
   error?: {
     errorMessage: string;
-  }
+  };
 }
 
 interface getByIdRes {
@@ -29,65 +29,67 @@ interface getByIdRes {
     bio: string;
     document_type: string;
     document: string;
-  },
+  };
 }
 
-const getById = async (userId: string): Promise<getByIdReturn> => {
+export const getById = async (userId: string): Promise<getByIdReturn> => {
   try {
-    let res: getByIdRes = await usersRoutes.getById(userId)
+    let res: getByIdRes = await usersRoutes.getById(userId);
 
     if (res.status === "error") {
       return {
         error: {
           errorMessage: res.message,
-        }
+        },
       };
     }
 
     return {
       userData: res.data,
     };
-  } catch(err) {
+  } catch (err) {
     return {
       error: {
         errorMessage: "Por favor, autentique-se.",
-      }
+      },
     };
   }
 };
 
 interface getByIdReturn {
   data?: {
-    phone: '',
+    phone: "";
-    whatsapp: '',
+    whatsapp: "";
-    facebook: '',
+    facebook: "";
-    telegram: '',
+    telegram: "";
-  },
+  };
   error?: {
     errorMessage: string;
-  }
+  };
 }
 
-const getUserSocialInfo = async (userId: string): Promise<getByIdReturn> => {
+export const getUserSocialInfo = async (
+  userId: string
+): Promise<getByIdReturn> => {
   try {
-    let res: getByIdRes = await usersRoutes.getSocialInfo(userId)
+    let res: getByIdRes = await usersRoutes.getSocialInfo(userId);
 
     if (res.status === "error") {
       return {
         error: {
           errorMessage: res.message,
-        }
+        },
       };
     }
 
     return {
       userData: res.data,
     };
-  } catch(err) {
+  } catch (err) {
     return {
       error: {
         errorMessage: "Por favor, autentique-se.",
-      }
+      },
     };
   }
 };
@@ -96,7 +98,7 @@ interface checkIfUserIsDriverReturn {
   result?: boolean;
   error?: {
     errorMessage: string;
-  }
+  };
 }
 
 interface checkIfUserIsDriverResponse {
@@ -105,31 +107,32 @@ interface checkIfUserIsDriverResponse {
   result?: boolean;
   error?: {
     errorMessage: string;
-  }
+  };
 }
 
-const checkIfUserIsDriver = async (id_user: string): Promise<checkIfUserIsDriverReturn> => {
+export const checkIfUserIsDriver = async (
+  id_user: string
+): Promise<checkIfUserIsDriverReturn> => {
   try {
-    let res: checkIfUserIsDriverResponse = await usersRoutes.checkIfUserIsDriver(id_user)
+    let res: checkIfUserIsDriverResponse =
+      await usersRoutes.checkIfUserIsDriver(id_user);
 
     if (res.status === "error") {
       return {
         error: {
           errorMessage: res.message,
-        }
+        },
       };
     }
 
     return {
       result: res.result,
     };
-  } catch(err) {
+  } catch (err) {
     return {
       error: {
         errorMessage: "Por favor, autentique-se.",
-      }
+      },
     };
   }
 };
-
-export default { getById, getUserSocialInfo, checkIfUserIsDriver }

yarn.lock

@@ -1377,7 +1377,7 @@
     ionicons "^6.0.3"
     tslib "^2.1.0"
 
-"@ionic/react-router@^6.0.0":
+"@ionic/react-router@^6.2.5":
   version "6.2.5"
   resolved "https://registry.yarnpkg.com/@ionic/react-router/-/react-router-6.2.5.tgz#b10041b0edc7ca67a5e95b2184dcc10cac9a6459"
   integrity sha512-56KygdYv/KExvZLlCKTJp84l+4/5Y5TY9G8eIENo75Wunr8CA+a1CFFbR75ov4pckJGcVKkpAgJPDQGndrEBzg==
@@ -1385,7 +1385,7 @@
     "@ionic/react" "^6.2.5"
     tslib "*"
 
-"@ionic/react@^6.0.0", "@ionic/react@^6.2.5":
+"@ionic/react@^6.2.5":
   version "6.2.5"
   resolved "https://registry.yarnpkg.com/@ionic/react/-/react-6.2.5.tgz#6a9815c3cdbf8a8d48972bcdb9cf82cdccb9c50c"
   integrity sha512-dvne9iY97uCb7+Wen0cRAY0nxL+ecKAMVBK6CLWMLec6Eh8NVE3BU2tG/4ZjheNrclWCPAv20us8zLbJVIht0g==