cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Hugo Falcao
2022-09-06 20:49:00 -03:00
parent 33fd007755
commit e8209762c0
19 changed files with 1500 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -11,8 +11,8 @@
"@craco/craco": "^6.4.5", "@craco/craco": "^6.4.5",
"@hookform/error-message": "^2.0.0", "@hookform/error-message": "^2.0.0",
"@ionic-selectable/core": "^5.0.0-alpha.13", "@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/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5", "@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.6.3", "@testing-library/user-event": "^12.6.3",

28
src/App.tsx
View File

@@ -11,20 +11,6 @@ import {
import { IonReactRouter } from "@ionic/react-router"; import { IonReactRouter } from "@ionic/react-router";
import { Redirect, Route } from "react-router-dom"; 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 */ /* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css"; import "@ionic/react/css/core.css";
@@ -49,9 +35,23 @@ import "./theme/tailwind.css";
import { home, person, search } from "ionicons/icons"; import { home, person, search } from "ionicons/icons";
import React, { useContext, useState } from "react"; 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 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 MeusItinerarios from "./pages/MeusItinerarios/MeusItinerarios";
import MinhasVans from "./pages/MinhasVans"; import MinhasVans from "./pages/MinhasVans";
import Perfil from "./pages/Perfil";
import PerfilEditar from "./pages/PerfilEditar";
import Transportes from "./pages/Transportes/Transportes";
setupIonicReact(); setupIonicReact();

37
src/LocalStorage.ts
View File

@@ -1,24 +1,21 @@
const tokenId = 'token';
const productDetails = '@productDetails';
const LocalStorage = { 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;

10
src/components/UserSearchInfos/UserSearchInfos.tsx
View File

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

205
src/pages/BuscarPassageiro/BuscarPassageiro.tsx
View File

@@ -1,127 +1,158 @@
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 { 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 = () => { 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] }); setCurrentPoint({ latitude: e.center[0], longitude: e.center[1] });
} };
const searchResults = async () => { const searchResults = async () => {
await getUsersSearching(currentPoint); 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 ( return (
<IonPage> <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>
); );
}; };
export default BuscarPassageiro; export default BuscarPassageiro;

679
src/pages/CadastrarItinerario/CadastrarItinerario.tsx
View File

@@ -1,18 +1,185 @@
import { Color } from "@ionic/core";
import { import {
IonBackButton, IonBackButton,
IonButton, IonButton,
IonButtons, IonButtons,
IonCheckbox,
IonContent, IonContent,
IonDatetime,
IonHeader, IonHeader,
IonIcon, IonIcon,
IonInput,
IonItem,
IonLabel,
IonList,
IonPage, IonPage,
IonRange,
IonSelect,
IonSelectOption,
IonSlide,
IonSlides,
IonTitle, IonTitle,
IonToast,
IonToolbar, IonToolbar,
} from "@ionic/react"; } 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() { 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 ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
@@ -24,34 +191,486 @@ export default function CadastrarItinerario() {
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent fullscreen> <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> </IonContent>
</IonPage> </IonPage>
); );

338
src/pages/Cadastro/Cadastro.tsx
View File

@@ -1,215 +1,245 @@
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 Cadastro: React.FC = () => {
const history = useHistory(); const history = useHistory();
const user = useContext(UserContext); const user = useContext(UserContext);
const [showToast, setShowToast] = useState(false); const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState(''); const [messageToast, setMessageToast] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary"); 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({ const [lResult, setlResult] = useState({
error: '', error: "",
success: true success: true,
}); });
const emailValidate = () => { const emailValidate = () => {
var usuario = email.substring(0, email.indexOf("@")); var usuario = email.substring(0, email.indexOf("@"));
var dominio = email.substring(email.indexOf("@") + 1, email.length); 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 { } else {
return false; return false;
} }
}; };
const clearResult = () => { const clearResult = () => {
lResult.error = ''; lResult.error = "";
lResult.success = true; lResult.success = true;
} };
const fieldValidate = async () => { const fieldValidate = async () => {
clearResult(); clearResult();
if(!emailValidate()) { if (!emailValidate()) {
lResult.error = 'E-mail inválido!'; lResult.error = "E-mail inválido!";
lResult.success = false; 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; 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 () => { 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); 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); setShowToast(true);
return return;
} }
const signUpForm = { const signUpForm = {
name: firstName, name: firstName,
lastname: lastName, lastname: lastName,
email: email, email: email,
birth_date: birthDate, birth_date: birthDate,
password: password password: password,
} };
let result = fieldValidate(); let result = fieldValidate();
if(!(await result).success) { if (!(await result).success) {
setToastColor("warning") setToastColor("warning");
setMessageToast(lResult.error); setMessageToast(lResult.error);
setShowToast(true); setShowToast(true);
return return;
} }
let retorno = await UsersService.create(signUpForm); let retorno = await UsersService.create(signUpForm);
if(!retorno.token) { if (!retorno.token) {
setToastColor('danger') setToastColor("danger");
setMessageToast(retorno.message); setMessageToast(retorno.message);
setShowToast(true); setShowToast(true);
return return;
} }
LocalStorage.setToken(retorno.token.token); LocalStorage.setToken(retorno.token.token);
user.setIsLoggedIn(true); 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 ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
<IonToolbar> <IonToolbar>
<IonButtons slot="start"> <IonButtons slot="start">
<IonBackButton text={''} icon={arrowBack} defaultHref='login' /> <IonBackButton text={""} icon={arrowBack} defaultHref="login" />
</IonButtons> </IonButtons>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent fullscreen> <IonContent fullscreen>
<IonGrid className="ion-padding"> <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>
<IonLabel position='floating'>E-mail</IonLabel>
<IonInput
clearInput
type='email'
onIonChange={(e: any) => setEmail(e.target.value)}
>
</IonInput>
</IonItem>
<IonItem> <IonItem>
<IonLabel position='stacked'>Data de nascimento</IonLabel> <IonLabel position="floating">E-mail</IonLabel>
<IonInput <IonInput
type='date' clearInput
onIonChange={(e: any) => setBirthDate(e.target.value)} type="email"
> onIonChange={(e: any) => setEmail(e.target.value)}
</IonInput> ></IonInput>
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel position='floating'>Senha</IonLabel> <IonLabel position="stacked">Data de nascimento</IonLabel>
<IonInput <IonInput
clearInput type="date"
type='password' onIonChange={(e: any) => setBirthDate(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">Senha</IonLabel>
<IonInput <IonInput
clearInput clearInput
type='password' type="password"
onIonChange={(e: any) => setConfirmPassword(e.target.value)} onIonChange={(e: any) => setPassword(e.target.value)}
></IonInput> ></IonInput>
</IonItem> </IonItem>
<IonItem>
<IonButton className="ion-margin-top" expand="block" onClick={ handleSubmit }>Cadastrar-se</IonButton> <IonLabel position="floating">Confirme a senha</IonLabel>
</IonCol> <IonInput
</IonRow> clearInput
<small className='ion-margin-top'> type="password"
Ao se cadastrar, você aceita nossos <a href="">Termos e Condições</a> e nossa <a href=""> Política de Privacidade</a>. onIonChange={(e: any) => setConfirmPassword(e.target.value)}
</small> ></IonInput>
<Action message="Já tem conta?" text="Login" link="/login" /> </IonItem>
<IonButton
className="ion-margin-top"
expand="block"
onClick={handleSubmit}
>
Cadastrar-se
</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> </IonGrid>
{/* <IonProgressBar type="indeterminate"></IonProgressBar><br /> */} {/* <IonProgressBar type="indeterminate"></IonProgressBar><br /> */}
@@ -220,9 +250,9 @@ const Cadastro: React.FC = () => {
message={messageToast} message={messageToast}
duration={2500} duration={2500}
/> />
</IonContent> </IonContent>
</IonPage> </IonPage>
); );
}; };
export default Cadastro; export default Cadastro;

99
src/pages/CadastroCompletar/CadastroCompletar.tsx
View File

@@ -1,26 +1,26 @@
import { 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"; } 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 { callOutline, documentTextOutline } from "ionicons/icons";
import { useHistory, useLocation } from "react-router";
import "../Perfil.css";
import '../Cadastro/Cadastro.css'
import { Color } from "@ionic/core"; import { Color } from "@ionic/core";
import "../Cadastro/Cadastro.css";
interface cardItem { interface cardItem {
icon: string; icon: string;
@@ -43,64 +43,69 @@ interface userData {
interface LocationState { interface LocationState {
userData: userData; userData: userData;
redirectData?: { redirectData?: {
showToastMessage: boolean; showToastMessage: boolean;
toastColor: Color; toastColor: Color;
toastMessage: string; toastMessage: string;
} };
} }
let items: cardItem[] = [ let items: cardItem[] = [
{ {
icon: documentTextOutline, 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, 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 CadastroCompletar: React.FC = () => {
const history = useHistory(); const history = useHistory();
const location = useLocation<LocationState>(); const location = useLocation<LocationState>();
const [showToast, setShowToast] = useState(false); const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState(''); const [toastMessage, setToastMessage] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary"); const [toastColor, setToastColor] = useState<Color>("primary");
const handleCardClick = (item: cardItem) => { 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(() => { useEffect(() => {
if (!location.state || !location.state.userData) { if (!location.state || !location.state.userData) {
history.push({ pathname: '/perfil' }) history.push({ pathname: "/perfil" });
} }
if (location.state && location.state.redirectData) { if (location.state && location.state.redirectData) {
const redirectData = location.state.redirectData const redirectData = location.state.redirectData;
if (redirectData.showToastMessage) { 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 ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
@@ -113,9 +118,15 @@ const CadastroCompletar: React.FC = () => {
</IonHeader> </IonHeader>
<IonContent> <IonContent>
{ items.map((item, index) => { {items.map((item, index) => {
return ( return (
<IonCard button={item.required} key={index} onClick={() => { handleCardClick(item) }}> <IonCard
button={item.required}
key={index}
onClick={() => {
handleCardClick(item);
}}
>
<IonItem> <IonItem>
<IonIcon icon={item.icon} slot="start" /> <IonIcon icon={item.icon} slot="start" />
<IonLabel>{item.label}</IonLabel> <IonLabel>{item.label}</IonLabel>
@@ -123,7 +134,7 @@ const CadastroCompletar: React.FC = () => {
<IonCardContent>{item.description}</IonCardContent> <IonCardContent>{item.description}</IonCardContent>
</IonCard> </IonCard>
) );
})} })}
<IonToast <IonToast

301
src/pages/CadastroVan.tsx
View File

@@ -1,21 +1,21 @@
import { import {
IonToast,
IonItem,
IonLabel,
IonInput,
IonBackButton, IonBackButton,
IonButton, IonButton,
IonButtons, IonButtons,
IonCheckbox,
IonContent, IonContent,
IonHeader, IonHeader,
IonPage, IonInput,
IonToolbar, IonItem,
IonTitle, IonLabel,
IonList, IonList,
IonCheckbox,
IonListHeader, IonListHeader,
IonPage,
IonSelect, IonSelect,
IonSelectOption, IonSelectOption,
IonTitle,
IonToast,
IonToolbar,
} from "@ionic/react"; } from "@ionic/react";
import React, { useEffect, useReducer, useState } from "react"; import React, { useEffect, useReducer, useState } from "react";
@@ -23,48 +23,50 @@ import { useHistory } from "react-router-dom";
// import * as yup from 'yup'; // 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 { Color } from "@ionic/core";
import "./CadastroVan.css";
const CadastroVan: React.FC = () => { const CadastroVan: React.FC = () => {
const history = useHistory(); const history = useHistory();
const [showToast, setShowToast] = useState<boolean>(false); const [showToast, setShowToast] = useState<boolean>(false);
const [toastMessage, setToastMessage] = useState<string>(""); const [toastMessage, setToastMessage] = useState<string>("");
const [toastColor, setToastColor] = useState<Color>("primary"); const [toastColor, setToastColor] = useState<Color>("primary");
const [carModels, setCarModels] = useState([{ const [carModels, setCarModels] = useState([
id_model: '', {
name: '' id_model: "",
}]); name: "",
},
]);
const [inputValues, setInputValues] = useReducer( const [inputValues, setInputValues] = useReducer(
(state: any, newState: any) => ({ ...state, ...newState }), (state: any, newState: any) => ({ ...state, ...newState }),
{ {
carPlate: '', carPlate: "",
carBrand: '', carBrand: "",
carModel: '', carModel: "",
seats_number: 1, seats_number: 1,
isRented: false, isRented: false,
locator_name: '', locator_name: "",
locator_address: '', locator_address: "",
locator_complement: '', locator_complement: "",
locator_city: '', locator_city: "",
locator_state: '', locator_state: "",
} }
); );
const clearRentalData = () => { const clearRentalData = () => {
setInputValues({ setInputValues({
carRentalName: '', carRentalName: "",
complement: '', complement: "",
city: '', city: "",
state: '', state: "",
}) });
}; };
const validateForm = (): boolean => { const validateForm = (): boolean => {
@@ -104,7 +106,7 @@ const CadastroVan: React.FC = () => {
return false; return false;
} }
if ((Number)(vanForm.seats_number) < 1) { if (Number(vanForm.seats_number) < 1) {
setToastMessage("Número de passageiros deve ser positivo!"); setToastMessage("Número de passageiros deve ser positivo!");
setShowToast(true); setShowToast(true);
return false; return false;
@@ -126,7 +128,7 @@ const CadastroVan: React.FC = () => {
locator_complement: inputValues.locator_complement, locator_complement: inputValues.locator_complement,
locator_city: inputValues.locator_city, locator_city: inputValues.locator_city,
locator_state: inputValues.locator_state, locator_state: inputValues.locator_state,
} };
if (!locatorForm.locator_name) { if (!locatorForm.locator_name) {
setToastMessage("Nome do Locador é obrigatório"); setToastMessage("Nome do Locador é obrigatório");
@@ -157,74 +159,82 @@ const CadastroVan: React.FC = () => {
const handleSubmit = async () => { const handleSubmit = async () => {
if (!validateForm()) { if (!validateForm()) {
return return;
} }
// cria registro da van // 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); 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(() => { useEffect(() => {
let isMounted = true let isMounted = true;
const getCarsModels = async () => { const getCarsModels = async () => {
const carModelsRes = await carsService.getAllCarModels() const carModelsRes = await carsService.getAllCarModels();
if (carModelsRes.error) { if (carModelsRes.error) {
setToastColor("danger") setToastColor("danger");
setToastMessage(carModelsRes.error.errorMessage); setToastMessage(carModelsRes.error.errorMessage);
setShowToast(true); setShowToast(true);
return return;
} }
if (carModelsRes.data) { if (carModelsRes.data) {
if (isMounted) { if (isMounted) {
setCarModels(carModelsRes.data) setCarModels(carModelsRes.data);
} }
} }
} };
getCarsModels() getCarsModels();
return () => { isMounted = false } return () => {
}, []) isMounted = false;
};
}, []);
return ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
<IonToolbar> <IonToolbar>
<IonTitle>Cadastro de veículo</IonTitle> <IonTitle>Cadastro de veículo</IonTitle>
<IonButtons slot='start'> <IonButtons slot="start">
<IonBackButton defaultHref='/perfil' /> <IonBackButton defaultHref="/perfil" />
</IonButtons> </IonButtons>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
@@ -235,46 +245,62 @@ const CadastroVan: React.FC = () => {
<IonLabel>Informações do veículo</IonLabel> <IonLabel>Informações do veículo</IonLabel>
</IonListHeader> </IonListHeader>
<IonItem> <IonItem>
<IonLabel position='floating'>Placa </IonLabel> <IonLabel position="floating">Placa </IonLabel>
<IonInput <IonInput
type='text' type="text"
clearInput clearInput
maxlength={7} 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> </IonItem>
{/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */} {/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */}
<IonItem> <IonItem>
<IonLabel>Marca</IonLabel> <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> </IonSelect>
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel position='floating'>Modelo </IonLabel> <IonLabel position="floating">Modelo </IonLabel>
<IonInput <IonInput
type='text' type="text"
clearInput 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>
<IonItem> <IonItem>
<IonLabel position='floating'> <IonLabel position="floating">Número de assentos</IonLabel>
Número de assentos
</IonLabel>
<IonInput <IonInput
type='number' type="number"
min={1} min={1}
clearInput 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> </IonItem>
</IonList> </IonList>
@@ -286,52 +312,67 @@ const CadastroVan: React.FC = () => {
<IonItem> <IonItem>
<IonLabel>O veículo é alugado?</IonLabel> <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> </IonItem>
{inputValues.isRented && ( {inputValues.isRented && (
<div> <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>
)} )}
<div> <div>
<IonButton <IonButton
className='ion-margin-top' className="ion-margin-top"
expand='block' expand="block"
onClick={handleSubmit} onClick={handleSubmit}
> >
Salvar Salvar
@@ -341,12 +382,12 @@ const CadastroVan: React.FC = () => {
<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> </IonPage>
); );

161
src/pages/MinhasVans.tsx
View File

@@ -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 { interface VanInfo {
plate: string; plate: string;
brand: string; brand: string;
model: string; model: string;
seats_number: string; seats_number: string;
document_status: boolean, document_status: boolean;
locator_name: string; locator_name: string;
locator_address: string; locator_address: string;
locator_complement: string; locator_complement: string;
@@ -27,90 +38,104 @@ const MinhasVans: React.FC = () => {
const history = useHistory(); const history = useHistory();
const [showToast, setShowToast] = useState(false); const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState(''); const [toastMessage, setToastMessage] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary"); const [toastColor, setToastColor] = useState<Color>("primary");
const [userVans, setUserVans] = useState<VanInfo[]>(); const [userVans, setUserVans] = useState<VanInfo[]>();
const redirectUserToLogin = () => { const redirectUserToLogin = () => {
history.push({ pathname: '/login' }); history.push({ pathname: "/login" });
} };
useEffect(() => { useEffect(() => {
const getUserVans = async () => { const getUserVans = async () => {
let userId = '' let userId = "";
const refreshSessionRes = await sessionsService.refreshSession();
const refreshSessionRes = await sessionsService.refreshSession()
if (refreshSessionRes.error) { if (refreshSessionRes.error) {
redirectUserToLogin() redirectUserToLogin();
return return;
} }
if (refreshSessionRes.userId) { 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") {
setShowToast(true); setToastColor("danger");
setToastMessage(response.message);
return setShowToast(true);
}
return;
setUserVans(response.data) }
}).catch((err) => {
setToastColor("danger") setUserVans(response.data);
setToastMessage(err); })
setShowToast(true); .catch((err) => {
}) setToastColor("danger");
} setToastMessage(err);
setShowToast(true);
});
};
getUserVans();
}, []);
getUserVans()
}, [])
return ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
<IonToolbar> <IonToolbar>
<IonTitle>Minhas vans</IonTitle> <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 ( return (
<IonCard key={index}> <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> </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> </IonPage>
); );
}; };

28
src/pages/Perfil.tsx
View File

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

92
src/pages/Transportes/Transportes.tsx
View File

@@ -1,52 +1,34 @@
import { import {
IonButton,
IonCard,
IonCardContent,
IonCheckbox,
IonContent, IonContent,
IonPage,
IonFab, IonFab,
IonFabButton, 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, IonFooter,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonModal,
IonPage,
IonRadio,
IonRadioGroup,
IonSlide,
IonSlides,
IonToast, IonToast,
IonToolbar,
} from "@ionic/react"; } from "@ionic/react";
import { import {
arrowBack,
arrowBackOutline,
arrowForwardOutline, arrowForwardOutline,
chevronBackOutline, chevronBackOutline,
chevronForwardOutline,
closeOutline, closeOutline,
locateOutline,
locationOutline,
timeOutline,
} from "ionicons/icons"; } from "ionicons/icons";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router"; import { useHistory, useLocation } from "react-router";
import { getTransportes } from "../../services/functions/transportsService";
import { createUserSearch } from "../../services/api/users"; import { createUserSearch } from "../../services/api/users";
import { getTransportes } from "../../services/functions/transportsService";
import "./Transportes.css"; import "./Transportes.css";
interface InfoBusca { interface InfoBusca {
@@ -63,8 +45,8 @@ const Transportes: React.FC = () => {
const [transportes, setTransportes] = useState([]); const [transportes, setTransportes] = useState([]);
const [showModalFilters, setShowModalFilters] = useState(false); const [showModalFilters, setShowModalFilters] = useState(false);
const [showToast, setShowToast] = 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(() => { useEffect(() => {
if (props) { if (props) {
@@ -77,15 +59,21 @@ const Transportes: React.FC = () => {
setTransportes(data); 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 ( return (
@@ -107,7 +95,7 @@ const Transportes: React.FC = () => {
</div> </div>
</IonHeader> </IonHeader>
<IonContent fullscreen> <IonContent fullscreen>
{transportes && transportes.length > 0? ( {transportes && transportes.length > 0 ? (
<div className="header-tabs"> <div className="header-tabs">
<IonSlides> <IonSlides>
<IonSlide> <IonSlide>
@@ -124,9 +112,11 @@ const Transportes: React.FC = () => {
</IonSlide> </IonSlide>
</IonSlides> </IonSlides>
</div> </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 &&
transportes.map((record: any, index: any) => { transportes.map((record: any, index: any) => {
return ( return (
@@ -139,7 +129,7 @@ const Transportes: React.FC = () => {
</IonCardContent> </IonCardContent>
</IonCard> </IonCard>
); );
})} })}
<div className="button-criar-alerta"> <div className="button-criar-alerta">
<IonButton onClick={() => criaAlerta()}>Criar Alerta</IonButton> <IonButton onClick={() => criaAlerta()}>Criar Alerta</IonButton>
@@ -208,7 +198,7 @@ const Transportes: React.FC = () => {
</IonModal> </IonModal>
<IonToast <IonToast
// cssClass={"toast-notification"} // cssClass={"toast-notification"}
color={toastColor} color={toastColor}
isOpen={showToast} isOpen={showToast}
onDidDismiss={() => setShowToast(false)} onDidDismiss={() => setShowToast(false)}
message={messageToast} message={messageToast}

36
src/services/api/transports.ts
View File

@@ -1,10 +1,9 @@
import instance from './api'; import instance from "./api";
// import LocalStorage from '../LocalStorage'; // 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 token: string;
let header: AxiosRequestHeaders; let header: AxiosRequestHeaders;
@@ -13,26 +12,29 @@ function updateHeader() {
token = LocalStorage.getToken(); token = LocalStorage.getToken();
header = { header = {
"Accept": 'application/json', Accept: "application/json",
"Content-Type": 'application/json', "Content-Type": "application/json",
"Authorization": 'Bearer ' + token Authorization: "Bearer " + token,
} };
} }
export interface getTransportsRequest { export interface getTransportsRequest {
coordinatesFrom: { coordinatesFrom: {
lat: number, lat: number;
lng: number lng: number;
}, };
coordinatesTo: { coordinatesTo: {
lat: number, lat: number;
lng: number lng: number;
} };
} }
export async function get(coordinates: getTransportsRequest) { export async function get(coordinates: getTransportsRequest) {
updateHeader(); 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; return response.data;
} }

87
src/services/api/users.ts
View File

@@ -1,10 +1,10 @@
import instance from './api'; import instance from "./api";
// import LocalStorage from '../LocalStorage'; // 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 token: string;
let header: AxiosRequestHeaders; let header: AxiosRequestHeaders;
@@ -13,20 +13,20 @@ function updateHeader() {
token = LocalStorage.getToken(); token = LocalStorage.getToken();
header = { header = {
"Accept": 'application/json', Accept: "application/json",
"Content-Type": 'application/json', "Content-Type": "application/json",
"Authorization": 'Bearer ' + token Authorization: "Bearer " + token,
} };
} }
export interface CadastroResponse { export interface CadastroResponse {
message?: string; message?: string;
token?: { token?: {
token: string; token: string;
}; };
error?: string; error?: string;
} }
export interface CadastroRequest { export interface CadastroRequest {
@@ -63,21 +63,28 @@ export async function create(CadastroRequest: any) {
export async function getById(userId: string) { export async function getById(userId: string) {
updateHeader(); 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; return response.data;
} }
export async function update(userData: UpdateUserRequest) { export async function update(userData: UpdateUserRequest) {
updateHeader(); 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; return response.data;
} }
export async function checkIfUserIsDriver(id_user: string) { export async function checkIfUserIsDriver(id_user: string) {
updateHeader(); 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; return response.data;
} }
@@ -85,25 +92,39 @@ export async function checkIfUserIsDriver(id_user: string) {
export async function getSocialInfo(userId: string) { export async function getSocialInfo(userId: string) {
updateHeader(); 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; return response.data;
} }
export async function getUsersSearching(currentPoint: any) { export async function getUsersSearching(currentPoint: any) {
// Replace lat/long with values from get current location. // 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);
} }

12
src/services/functions/carsService.ts
View File

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

12
src/services/functions/sessionsService.ts
View File

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

28
src/services/functions/transportsService.ts
View File

@@ -1,20 +1,18 @@
import * as transportsRoutes from '../api/transports';
interface CoordinatesRequest { 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 { try {
let res : any = await transportsRoutes.get(request); // let res : any = await transportsRoutes.get(request);
} catch (error) { } catch (error) {}
}
} }

59
src/services/functions/usersService.ts
View File

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

4
yarn.lock
View File

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