Merge pull request #10 from CloudAlb:develop

Develop

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -23,12 +23,12 @@
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.26.1",
     "ionicons": "^5.4.0",
+    "lodash.isequal": "^4.5.0",
     "pigeon-maps": "^0.21.0",
     "pullstate": "^1.24.0",
-    "lodash.isequal": "^4.5.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-google-places-autocomplete": "^3.3.4",
+    "react-google-places-autocomplete": "^3.4.0",
     "react-hook-form": "^7.30.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
@@ -51,7 +51,6 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "start:mock": "json-server --port 8080 --watch ./mock/db.json",
     "build": "react-scripts build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject"
@@ -80,5 +79,5 @@
     "@types/lodash.isequal": "^4.5.6",
     "react-scripts": "5.0.1"
   },
-  "description": "An Ionic project"
+  "description": "Projeto de conclusão de curso a fim de resolver a dificuldade de alunos universitários ao buscar vans para suas universidades"
 }

src/App.tsx

@@ -49,6 +49,8 @@ import { search, home, person } from 'ionicons/icons';
 import { useState, useContext } from 'react';
 import React from 'react';
 import MinhasVans from './pages/MinhasVans';
+import MeusItinerarios from './pages/MeusItinerarios/MeusItinerarios';
+import CadastrarItinerario from './pages/CadastrarItinerario/CadastrarItinerario';
 
 setupIonicReact();
 
@@ -73,6 +75,8 @@ const routes = (
 
   <Route exact path="/cadastro-van" component={CadastroVan}></Route>
   <Route exact path="/minhas-vans" component={MinhasVans}></Route>
+  <Route exact path="/cadastrar-itinerario" component={CadastrarItinerario}></Route>
+  <Route exact path="/meus-itinerarios" component={MeusItinerarios}></Route>
   <Route exact path="/">
     <Redirect to="/login" />
   </Route>
@@ -103,7 +107,7 @@ const IonicApp: React.FC = () => {
             <IonRouterOutlet>{routes}</IonRouterOutlet>
             
             <IonTabBar slot="bottom">
-              <IonTabButton tab="buscar" href="/buscar">
+              <IonTabButton tab="buscar" href="/buscar-transporte">
                 <IonIcon icon={search} />
                 <IonLabel>Buscar</IonLabel>
               </IonTabButton>

src/constants/routes/transportsRoutes.ts

@@ -0,0 +1,14 @@
+const transportsRoutesDefault = '/transports';
+const transportsRoutes = {
+  create: {
+    url: `${transportsRoutesDefault}`
+  },
+  get: {
+    url: `${transportsRoutesDefault}`
+  },
+  update: {
+    url: `${transportsRoutesDefault}`
+  },
+}
+
+export default transportsRoutes;

src/pages/BuscarTransporte/BuscarTransporte.tsx

@@ -1,18 +1,13 @@
 import {
-  IonContent,
-  IonPage,
-  IonIcon,
-  IonCard,
-  IonInput,
-  IonRow,
-  IonCardContent,
   IonButton,
-  IonSearchbar,
+  IonCard,
-  IonModal,
+  IonCardContent,
-  IonProgressBar,
+  IonContent,
+  IonIcon,
+  IonPage,
+  IonRow,
 } from "@ionic/react";
 import {
-  arrowBack,
   arrowForwardOutline,
   chevronForwardOutline,
   locateOutline,
@@ -22,7 +17,6 @@ import {
 import "./BuscarTransporte.css";
 
 import { useEffect, useState } from "react";
-import { autoCompleteAddress } from "../../services/utils";
 import { useHistory } from "react-router";
 
 import GooglePlacesAutocomplete, {
@@ -89,7 +83,7 @@ const BuscarTransporte: React.FC = () => {
     }
   }, [addressTo]);
 
-  function buscaTransporte(){
+  function buscaTransporte() {
     if (coordinatesFrom && coordinatesTo && addressFrom && addressTo) {
       history.push({
         pathname: "/transportes",
@@ -117,7 +111,7 @@ const BuscarTransporte: React.FC = () => {
                 placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001"
               /> */}
               <GooglePlacesAutocomplete
-                apiKey="AIzaSyAGfCsaNwxwyj4Ajtfy7MTNADE6JwmnZvA"
+                apiKey={process.env.REACT_APP_KEY_API}
                 apiOptions={{ language: "pt-br", region: "br" }}
                 selectProps={{
                   value: addressFrom,
@@ -136,7 +130,7 @@ const BuscarTransporte: React.FC = () => {
                 placeholder="PUC Campinas"
               /> */}
               <GooglePlacesAutocomplete
-                apiKey="AIzaSyAGfCsaNwxwyj4Ajtfy7MTNADE6JwmnZvA"
+                apiKey={process.env.REACT_APP_KEY_API}
                 apiOptions={{ language: "pt-br", region: "br" }}
                 selectProps={{
                   value: addressTo,
@@ -147,10 +141,7 @@ const BuscarTransporte: React.FC = () => {
               />
             </div>
             <div className="button-search">
-              <IonButton
+              <IonButton color="primary" onClick={() => buscaTransporte()}>
-                color="primary"
-                onClick={() => buscaTransporte()}
-              >
                 Buscar
               </IonButton>
             </div>

src/pages/CadastrarItinerario/CadastrarItinerario.tsx

@@ -0,0 +1,99 @@
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonPage,
+  IonRadio,
+  IonRadioGroup,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { close, locateOutline, locationOutline } from "ionicons/icons";
+import { useState } from "react";
+import GooglePlacesAutocomplete from "react-google-places-autocomplete";
+
+export default function CadastrarItinerario() {
+  const [selected, setSelected] = useState<any>("");
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton icon={close} text="" defaultHref="/perfil" />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Cadastrar Itinerário</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonCard>
+          <IonCardContent>
+            <div className="inputs-from-to">
+              <IonIcon icon={locateOutline}></IonIcon>
+              <GooglePlacesAutocomplete
+                apiKey={process.env.REACT_APP_KEY_API}
+                apiOptions={{ language: "pt-br", region: "br" }}
+                selectProps={{
+                  className: "input-autocomplete",
+                  placeholder: "R. José Paulino, 1234",
+                }}
+              />
+            </div>
+            <div className="inputs-from-to">
+              <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>
+            <IonList>
+              <IonRadioGroup
+                value={selected}
+                onIonChange={(e) => setSelected(e.detail.value)}
+              >
+                <IonListHeader>
+                  <IonLabel>Name</IonLabel>
+                </IonListHeader>
+
+                <IonItem>
+                  <IonLabel>Biff</IonLabel>
+                  <IonRadio slot="start" value="biff" />
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel>Griff</IonLabel>
+                  <IonRadio slot="start" value="griff" />
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel>Buford</IonLabel>
+                  <IonRadio slot="start" value="buford" />
+                </IonItem>
+              </IonRadioGroup>
+            </IonList>
+            <div className="button-search">
+              <IonButton color="primary">Cadastrar</IonButton>
+            </div>
+          </IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+}

src/pages/CadastroVan.tsx

@@ -179,7 +179,7 @@ const CadastroVan: React.FC = () => {
         return
       }
 
-      history.push({ pathname: '/perfil', state: {
+      history.push({ pathname: '/minhas-vans', state: {
         redirectData: {
           showToastMessage: true,
           toastColor: "success",

src/pages/MeusItinerarios/MeusItinerarios.css

@@ -0,0 +1,10 @@
+.icons-location-divider{
+    margin-left: 0.33rem;
+    margin-bottom: 0.4rem;
+}
+
+.addresses-itinerary{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}

src/pages/MeusItinerarios/MeusItinerarios.tsx

@@ -0,0 +1,146 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { add, locateOutline, locationOutline } from "ionicons/icons";
+import { useState } from "react";
+import "./MeusItinerarios.css";
+
+interface ItineraryInfo {
+  id_itinerary: number;
+  van_plate: string;
+  days_of_week: number;
+  specific_day: string;
+  estimated_departure_time: string;
+  estimated_arrival_time: string;
+  available_seats: number;
+  price: number;
+  itinerary_nickname: string;
+}
+
+export default function MeusItinerarios() {
+  const [routes, setRoutes] = useState<ItineraryInfo[]>(
+    [
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste',
+    },
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste 2',
+    },
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste',
+    },
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste',
+    },
+    {
+      id_itinerary: 1,
+      van_plate: 'FSS1918',
+      days_of_week: 3,
+      specific_day: '24/08/2022',
+      estimated_departure_time: '10:00',
+      estimated_arrival_time: '12:00',
+      available_seats: 20,
+      price: 108.20,
+      itinerary_nickname: 'Itinerário teste',
+    },
+  ]
+  );
+
+  return (
+    <IonPage>
+      <IonHeader translucent>
+        <IonToolbar>
+          <IonTitle>Meus Itinerários</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton text={""} defaultHref="/perfil" />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Meus Itinerários</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        {routes ? (
+          routes.map((itinerary, index) => {
+            return (
+              <IonCard key={index}>
+                <IonCardHeader>
+                  <IonCardTitle>{itinerary.itinerary_nickname}</IonCardTitle>
+                </IonCardHeader>
+                <IonCardContent>
+                  <div className="addresses-itinerary">
+                    <IonIcon icon={locateOutline}></IonIcon>
+                    Rua Francisco Glicerio, nº 100, Vila Novam aaaaaaaaaaaaaaaaaaaaaaaaaaa
+                  </div>
+                  <div className="icons-location-divider">
+                    | 
+                  </div>
+                  <div className="addresses-itinerary">
+                    <IonIcon icon={locationOutline}></IonIcon>
+                    PUC Campinas H15 Campus 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+                  </div>
+                </IonCardContent>
+              </IonCard>
+            );
+          })
+        ) : (
+          <h1 className="msg-not-found">
+            Você ainda não possui nenhum itinerário cadastrado!
+          </h1>
+        )}
+        <IonFab vertical="bottom" horizontal="end" slot="fixed">
+          <IonFabButton size="small" href="/cadastrar-itinerario">
+            <IonIcon icon={add}></IonIcon>
+          </IonFabButton>
+        </IonFab>
+      </IonContent>
+    </IonPage>
+  );
+}

src/pages/Perfil.tsx

@@ -21,30 +21,40 @@ import {
 } from "@ionic/react";
 import { useHistory, useLocation } from "react-router-dom";
 import React, { useState, useEffect, useReducer, useContext } from "react";
-import { callOutline, cardOutline, carOutline, createOutline, exitOutline, logoFacebook, logoWhatsapp, personOutline, shieldCheckmarkOutline, starOutline } from "ionicons/icons";
+import {
+  callOutline,
+  cardOutline,
+  carOutline,
+  createOutline,
+  exitOutline,
+  mapOutline,
+  personOutline,
+  shieldCheckmarkOutline,
+  starOutline,
+} from "ionicons/icons";
 
-import './Perfil.css'
+import "./Perfil.css";
 import LocalStorage from "../LocalStorage";
 
-import sessionsService from '../services/functions/sessionsService'
+import sessionsService from "../services/functions/sessionsService";
-import usersService from '../services/functions/usersService'
+import usersService from "../services/functions/usersService";
 import { UserContext } from "../App";
 import { Color } from "@ionic/core";
 
 interface ScanNewProps {
-  match:  {
+  match: {
     params: {
       id: string;
-    }
+    };
-  }
+  };
 }
 
-interface LocationState { 
+interface LocationState {
   redirectData?: {
     showToastMessage: boolean;
     toastColor: Color;
     toastMessage: string;
-  }
+  };
 }
 
 const Perfil: React.FC<ScanNewProps> = (props) => {
@@ -53,92 +63,92 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
   const history = useHistory();
   const location = useLocation<LocationState>();
 
-  const [isVisitor, setIsVisitor] = useState(true)
+  const [isVisitor, setIsVisitor] = useState(true);
-  const [isDriver, setIsDriver] = useState(false)
+  const [isDriver, setIsDriver] = useState(false);
 
-  const [incompleteProfile, setIncompleteProfile] = useState(false)
+  const [incompleteProfile, setIncompleteProfile] = useState(false);
-  const [incompleteProfileCounter, setIncompleteProfileCounter] = useState(0)
+  const [incompleteProfileCounter, setIncompleteProfileCounter] = useState(0);
 
   const [showToast, setShowToast] = useState(false);
-  const [toastMessage, setToastMessage] = useState('');
+  const [toastMessage, setToastMessage] = useState("");
   const [toastColor, setToastColor] = useState<Color>("primary");
 
   const [inputValues, setInputValues] = useReducer(
     (state: any, newState: any) => ({ ...state, ...newState }),
     {
-      id: '',
+      id: "",
-      name: '',
+      name: "",
-      lastname: '',
+      lastname: "",
-      email: '',
+      email: "",
-      phone_number: '',
+      phone_number: "",
-      birth_date: '',
+      birth_date: "",
-      bio: '',
+      bio: "",
-      document_type: '',
+      document_type: "",
-      document: '',
+      document: "",
     }
   );
 
   const redirectUserToLogin = () => {
-    history.push({ pathname: '/login' });
+    history.push({ pathname: "/login" });
     setToastMessage("Por favor, autentique-se!");
     setShowToast(true);
-  }
+  };
 
   const logoff = () => {
-    LocalStorage.clearToken()
+    LocalStorage.clearToken();
     user.setIsLoggedIn(false);
-    history.push({ pathname: '/login' });
+    history.push({ pathname: "/login" });
-  }
+  };
 
   useEffect(() => {
     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);
       }
     }
 
     const loadUserData = async () => {
-      let userId = ''
+      let userId = "";
 
       // verify if user is authenticated
       if (props.match.params.id) {
-        userId = props.match.params.id
+        userId = props.match.params.id;
       } else {
-        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;
         }
       }
-      
+
       // get user info by ID
-      const getByIdRes = await usersService.getById(userId)
+      const getByIdRes = await usersService.getById(userId);
-  
+
       if (getByIdRes.error) {
         if (isVisitor && props.match.params.id) {
-          setToastMessage('Usuário não existe!')
+          setToastMessage("Usuário não existe!");
-          setShowToast(true)
+          setShowToast(true);
-          history.push({ pathname: '/home' })
+          history.push({ pathname: "/home" });
         } else {
-          setToastMessage(getByIdRes.error.errorMessage)
+          setToastMessage(getByIdRes.error.errorMessage);
-          setShowToast(true)
+          setShowToast(true);
         }
-  
+
-        return
+        return;
       }
 
       // check if user is driver (if they have vans)
-      const userIsDriverRes = await usersService.checkIfUserIsDriver(userId)
+      const userIsDriverRes = await usersService.checkIfUserIsDriver(userId);
-  
+
       // if (userIsDriverRes.error) {
       //   setToastColor('warning')
       //   setToastMessage(userIsDriverRes.error.errorMessage)
@@ -147,91 +157,102 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
       // }
 
       if (!userIsDriverRes.error && userIsDriverRes.result !== undefined) {
-        setIsDriver(userIsDriverRes.result)
+        setIsDriver(userIsDriverRes.result);
       }
-  
+
       if (getByIdRes.userData) {
-        const userData = getByIdRes.userData
+        const userData = getByIdRes.userData;
-  
+
         if (isMounted) {
           setInputValues({
-            'id': userId,
+            id: userId,
-            'name': userData.name,
+            name: userData.name,
-            'lastname': userData.lastname,
+            lastname: userData.lastname,
-            'email': userData.email,
+            email: userData.email,
-            'phone_number': userData.phone_number,
+            phone_number: userData.phone_number,
-            'birth_date': userData.birth_date,
+            birth_date: userData.birth_date,
-            'bio': userData.bio,
+            bio: userData.bio,
-            'document_type': userData.document_type,
+            document_type: userData.document_type,
-            'document': userData.document
+            document: userData.document,
           });
 
           if (!props.match.params.id) {
-            setIsVisitor(false)
+            setIsVisitor(false);
           }
-          
+
           if (!userData.document || !userData.phone_number) {
-            setIncompleteProfile(true)
+            setIncompleteProfile(true);
 
-            let counter = 0
+            let counter = 0;
 
-            if (!userData.document) counter++
+            if (!userData.document) counter++;
-            if (!userData.phone_number) counter++
+            if (!userData.phone_number) counter++;
 
-            setIncompleteProfileCounter(counter)
+            setIncompleteProfileCounter(counter);
           }
         }
       }
-    }
+    };
 
     let isMounted = true;
-    
+
-    const userToken = LocalStorage.getToken()
+    const userToken = LocalStorage.getToken();
 
     if (!userToken) {
-      redirectUserToLogin()
+      redirectUserToLogin();
     }
-    
-    loadUserData()
 
-    return () => { isMounted = false };
+    loadUserData();
+
+    return () => {
+      isMounted = false;
+    };
   }, []);
 
   return (
     <IonPage>
-      <IonHeader>
+      <IonHeader translucent>
         <IonToolbar>
           <IonTitle>Seu perfil</IonTitle>
           <IonButtons slot="start">
-            <IonBackButton defaultHref="/home" />
+            <IonBackButton text="" defaultHref="/home" />
           </IonButtons>
         </IonToolbar>
       </IonHeader>
 
-      <IonContent>
+      <IonContent fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar>
             <IonTitle size="large">Seu perfil</IonTitle>
           </IonToolbar>
         </IonHeader>
-        
+
         <IonCard>
           <IonCardContent>
-              <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/>
+            <img
-              {/* <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/> */}
+              src="https://static.generated.photos/vue-static/home/feed/adult.png"
+              alt="avatar"
+              className="avatar"
+              id="avatar"
+            />
+            {/* <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/> */}
             <IonCardHeader>
-              <IonCardTitle class="ion-text-center">{inputValues.name} {inputValues.lastname}</IonCardTitle>
+              <IonCardTitle class="ion-text-center">
+                {inputValues.name} {inputValues.lastname}
+              </IonCardTitle>
             </IonCardHeader>
 
-            <div id='profile-status'>
+            <div id="profile-status">
-              { isDriver ?
+              {isDriver ? (
                 <>
                   <IonChip>
                     <IonIcon icon={carOutline}></IonIcon>
                     <IonLabel color="primary">Motorista</IonLabel>
                   </IonChip>
-                </> : <></>
+                </>
-              }
+              ) : (
+                <></>
+              )}
               <IonChip>
                 <IonIcon icon={personOutline}></IonIcon>
                 <IonLabel color="primary">Passageiro</IonLabel>
@@ -245,7 +266,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
             <IonCardTitle>Biografia</IonCardTitle>
           </IonCardHeader>
           <IonCardContent>
-            {inputValues.bio ? inputValues.bio : 'Sem biografia.' }
+            {inputValues.bio ? inputValues.bio : "Sem biografia."}
           </IonCardContent>
         </IonCard>
 
@@ -254,67 +275,123 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
             <IonCardTitle>Informações de contato</IonCardTitle>
           </IonCardHeader>
           <IonCardContent>
-            { !inputValues.phone_number ?
+            {!inputValues.phone_number ? (
-                <>Sem informações de contato.</>
+              <>Sem informações de contato.</>
-            : <>
+            ) : (
-                {
+              <>
-                  inputValues.phone_number ?
+                {inputValues.phone_number ? (
                   <>
                     <IonChip>
                       <IonIcon icon={callOutline} />
                       <IonLabel>{inputValues.phone_number}</IonLabel>
                     </IonChip>
-                  </> : <></>
+                  </>
-                }
+                ) : (
+                  <></>
+                )}
               </>
-            }
+            )}
           </IonCardContent>
         </IonCard>
 
-        { !isVisitor ?
+        {!isVisitor ? (
           <IonList>
             <IonListHeader>Configurações</IonListHeader>
-              <IonItem button onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
+            <IonItem
-                <IonIcon icon={createOutline} slot="start" />
+              button
-                <IonLabel>Editar perfil</IonLabel>
+              onClick={() =>
-              </IonItem>
+                history.push({
+                  pathname: "/perfil/editar",
+                  state: { userData: inputValues },
+                })
+              }
+            >
+              <IonIcon icon={createOutline} slot="start" />
+              <IonLabel>Editar perfil</IonLabel>
+            </IonItem>
 
-              { incompleteProfile ?
+            {incompleteProfile ? (
-                <>
+              <>
-                  <IonItem button onClick={() => history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}>
+                <IonItem
-                    <IonIcon icon={shieldCheckmarkOutline} slot="start" />
+                  button
-                    <IonLabel>Completar cadastro</IonLabel>
+                  onClick={() =>
-                    <IonBadge color="primary">{incompleteProfileCounter}</IonBadge>
+                    history.push({
-                  </IonItem>
+                      pathname: "/perfil/completar",
-                </>
+                      state: { userData: inputValues },
-                : <></> }
+                    })
+                  }
+                >
+                  <IonIcon icon={shieldCheckmarkOutline} slot="start" />
+                  <IonLabel>Completar cadastro</IonLabel>
+                  <IonBadge color="primary">
+                    {incompleteProfileCounter}
+                  </IonBadge>
+                </IonItem>
+              </>
+            ) : (
+              <></>
+            )}
 
-              <IonItem button onClick={() => history.push({ pathname: '/cadastro-van'})}>
+            <IonItem
-                <IonIcon icon={carOutline} slot="start" />
+              button
-                <IonLabel>Cadastrar Van</IonLabel>
+              onClick={() => history.push({ pathname: "/cadastro-van" })}
-              </IonItem>
+            >
-              <IonItem button onClick={() => history.push({ pathname: '/minhas-vans'})}>
+              <IonIcon icon={carOutline} slot="start" />
-                <IonIcon icon={carOutline} slot="start" />
+              <IonLabel>Cadastrar van</IonLabel>
-                <IonLabel>Minhas Vans</IonLabel>
+            </IonItem>
-              </IonItem>
+
-              <IonItem>
+            {isDriver ? (
-                <IonIcon icon={cardOutline} slot="start" />
+              <>
-                <IonLabel>Pagamentos</IonLabel>
+                <IonItem
-              </IonItem>
+                  button
-              <IonItem>
+                  onClick={() => history.push({ pathname: "/minhas-vans" })}
-                <IonIcon icon={starOutline} slot="start" />
+                >
-                <IonLabel>Avaliações</IonLabel>
+                  <IonIcon icon={carOutline} slot="start" />
-              </IonItem>
+                  <IonLabel>Minhas vans</IonLabel>
-              <IonItem button onClick={logoff}>
+                </IonItem>
-                <IonIcon icon={exitOutline} slot="start" />
+                <IonItem
-                <IonLabel>Sair da conta</IonLabel>
+                  button
-              </IonItem>
+                  onClick={() =>
-          </IonList> : <></>
+                    history.push({ pathname: "/buscar-passageiro" })
-        }
+                  }
+                >
+                  <IonIcon icon={personOutline} slot="start" />
+                  <IonLabel>Buscar passageiros</IonLabel>
+                </IonItem>
+                <IonItem
+                  button
+                  onClick={() =>
+                    history.push({ pathname: "/meus-itinerarios" })
+                  }
+                >
+                  <IonIcon icon={mapOutline} slot="start" />
+                  <IonLabel>Meus itinerários</IonLabel>
+                </IonItem>
+              </>
+            ) : (
+              <></>
+            )}
+
+            <IonItem>
+              <IonIcon icon={cardOutline} slot="start" />
+              <IonLabel>Pagamentos</IonLabel>
+            </IonItem>
+            <IonItem>
+              <IonIcon icon={starOutline} slot="start" />
+              <IonLabel>Avaliações</IonLabel>
+            </IonItem>
+            <IonItem button onClick={logoff}>
+              <IonIcon icon={exitOutline} slot="start" />
+              <IonLabel>Sair da conta</IonLabel>
+            </IonItem>
+          </IonList>
+        ) : (
+          <></>
+        )}
 
         <IonToast
           position="top"
-          color={toastColor}      
+          color={toastColor}
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}
           message={toastMessage}

src/pages/Transportes/Transportes.tsx

@@ -45,7 +45,7 @@ import {
 } from "ionicons/icons";
 import { useEffect, useState } from "react";
 import { useHistory, useLocation } from "react-router";
-import { getTransportes } from "../../services/transportes";
+import { getTransportes } from "../../services/functions/transportsService";
 import { createUserSearch } from "../../services/api/users";
 import "./Transportes.css";
 

src/services/api-client.service.ts

@@ -1,18 +0,0 @@
-import axios from "axios";
-
-export class ApiClient{
-  private static api = axios.create({
-    baseURL: "http://localhost:8080"
-  });
-
-  public static async doPost (url: string, body: any): Promise<any> {
-    return await this.api
-      .post(url, body)
-      .then(res => {
-        console.log(res.data);
-      })
-      .catch(error => {
-        console.log(error);
-      });
-  };
-}

src/services/api/transports.ts

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

src/services/functions/transportsService.ts

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

src/services/transportes.ts

@@ -1,34 +0,0 @@
-import instance from "../services/api/api";
-import { setStore } from "../store/RecordsStore";
-// import LocalStorage from '../LocalStorage';
-
-// let token:string;
-let header: string;
-
-function updateHeader() {
-  //   token = LocalStorage.getToken();
-  header = `{
-    "Accept": 'application/json',
-    "Content-Type": 'application/json',
-    "Authorization": 'Bearer ' + token
-  }`;
-}
-
-interface CoordinatesRequest {
-  coordinatesFrom:{
-    lat: number,
-    lng: number
-  },
-  coordinatesTo:{
-    lat: number,
-    lng: number
-  }
-}
-
-export async function getTransportes(request: CoordinatesRequest) {
-  updateHeader();
-
-  console.log(request)
-  const response = await instance.post("http://localhost:3333/transportes/", request);
-  return response.data as [];
-}