Testes com api externa

This commit is contained in:
Hugo Falcao
2022-05-15 23:12:48 -03:00
parent 6b7ebe046a
commit e654b6a6b0
6 changed files with 192 additions and 206 deletions

58
package-lock.json generated
View File

@@ -27,11 +27,14 @@
"@types/react-router-dom": "^5.1.7",
"axios": "^0.26.1",
"ionicons": "^5.4.0",
"pigeon-maps": "^0.21.0",
"pullstate": "^1.24.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^7.30.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reselect": "^4.1.5",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
@@ -7902,8 +7905,7 @@
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"node_modules/fast-glob": {
"version": "3.2.11",
@@ -8955,7 +8957,6 @@
"version": "9.0.12",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
"integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
@@ -11655,6 +11656,14 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/pigeon-maps": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/pigeon-maps/-/pigeon-maps-0.21.0.tgz",
"integrity": "sha512-p3GaGday5nmufHVGZW/36LnSXfYVh6qfzYisqcC87nqFr0eXIKkqQcDuPP9g4F1OXL1JeJe4x6JEnAE9HB+zWQ==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/pirates": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -13081,6 +13090,18 @@
"integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
"dev": true
},
"node_modules/pullstate": {
"version": "1.24.0",
"resolved": "https://registry.npmjs.org/pullstate/-/pullstate-1.24.0.tgz",
"integrity": "sha512-uKXQjGnZUNb3wg7STF3HvCDbGtYg7tju42QjVtaefMik6JpbadnmKgI8DgZL02SvtTNlFPosMQkAwuI/a9D8dg==",
"dependencies": {
"fast-deep-equal": "^3.1.3",
"immer": "^9.0.12"
},
"peerDependencies": {
"react": "^16.12.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -13661,6 +13682,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"node_modules/reselect": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
"integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
},
"node_modules/resolve": {
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -22491,8 +22517,7 @@
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"fast-glob": {
"version": "3.2.11",
@@ -23282,8 +23307,7 @@
"immer": {
"version": "9.0.12",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
"integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==",
"dev": true
"integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA=="
},
"import-fresh": {
"version": "3.3.0",
@@ -25307,6 +25331,12 @@
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true
},
"pigeon-maps": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/pigeon-maps/-/pigeon-maps-0.21.0.tgz",
"integrity": "sha512-p3GaGday5nmufHVGZW/36LnSXfYVh6qfzYisqcC87nqFr0eXIKkqQcDuPP9g4F1OXL1JeJe4x6JEnAE9HB+zWQ==",
"requires": {}
},
"pirates": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -26252,6 +26282,15 @@
"integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
"dev": true
},
"pullstate": {
"version": "1.24.0",
"resolved": "https://registry.npmjs.org/pullstate/-/pullstate-1.24.0.tgz",
"integrity": "sha512-uKXQjGnZUNb3wg7STF3HvCDbGtYg7tju42QjVtaefMik6JpbadnmKgI8DgZL02SvtTNlFPosMQkAwuI/a9D8dg==",
"requires": {
"fast-deep-equal": "^3.1.3",
"immer": "^9.0.12"
}
},
"punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -26699,6 +26738,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"reselect": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
"integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
},
"resolve": {
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",

View File

@@ -22,11 +22,14 @@
"@types/react-router-dom": "^5.1.7",
"axios": "^0.26.1",
"ionicons": "^5.4.0",
"pigeon-maps": "^0.21.0",
"pullstate": "^1.24.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^7.30.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reselect": "^4.1.5",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",

View File

@@ -1,215 +1,113 @@
import { IonToast, IonProgressBar, IonItem, IonLabel, IonInput, IonBackButton, IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonToolbar } from '@ionic/react';
import { arrowBack, logoFacebook, mail } from 'ionicons/icons';
import { Action } from '../../components/Action';
import { useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router';
import { IonContent, IonPage, IonFab, IonFabButton, IonIcon } from '@ionic/react';
import { search } from 'ionicons/icons';
import './BuscarPassageiro.css';
import ModalExample from '../../components/Email';
import * as UsersService from '../../services/users'
import { Map, Marker, Overlay } from "pigeon-maps";
import { maptiler } from 'pigeon-maps/providers';
import { useEffect, useState } from 'react';
import RecordsStore from '../../store/RecordsStore';
import { fetchRecords } from '../../store/Selectors';
import { getUsersSearching } from '../../services/users';
const maptilerProvider = maptiler('d5JQJPLLuap8TkJJlTdJ', 'streets');
const BuscarPassageiro: React.FC = () => {
const history = useHistory();
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast ] = useState('');
// UNCOMMENT THESE TO USE CURRENT LOCATION.
const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');
const [confirmPassword, setConfirmPassword] = useState<string>('');
const [firstName, setFirstName] = useState<string>('');
const [lastName, setLastName] = useState<string>('');
const [birthDate, setBirthDate] = useState<string>('');
const [lResult, setlResult] = useState({
error: '',
success: true
});
// const [ currentPoint, setCurrentPoint ] = useState(false);
const emailValidate = () => {
var usuario = email.substring(0, email.indexOf("@"));
var dominio = email.substring(email.indexOf("@") + 1, email.length);
// useEffect(() => {
if ((usuario.length >= 1) &&
(dominio.length >= 3) &&
(usuario.search("@") == -1) &&
(dominio.search("@") == -1) &&
(usuario.search(" ") == -1) &&
(dominio.search(" ") == -1) &&
(dominio.search(".") != -1) &&
(dominio.indexOf(".") >= 1) &&
(dominio.lastIndexOf(".") < dominio.length - 1))
{
return true;
} else {
return false;
}
};
// const getCurrentLocation = async () => {
const clearResult = () => {
lResult.error = '';
lResult.success = true;
// const fetchedLocation = await getLocation();
// setCurrentPoint(fetchedLocation.currentLocation);
// }
// getCurrentLocation();
// }, []);
// useIonViewWillEnter(() => {
// getUsersSearching(currentPoint);
// });
const [ currentPoint, setCurrentPoint ] = useState({ latitude: 40.8264691, longitude: -73.9549618 });
const records = RecordsStore.useState(fetchRecords);
const center = { latitude: 40.8264691, longitude: -73.9549618 };
const [ results, setResults ] = useState([]);
const [ zoom, setZoom ] = useState(14);
const [ moveMode, setMoveMode ] = useState(false);
// useEffect(() => {
// const getData = async () => {
// await getUsersSearching(currentPoint);
// }
// getData();
// }, [ currentPoint ]);
useEffect(() => {
setResults(records);
}, [ 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 fieldValidate = async () => {
clearResult();
if(!emailValidate()) {
lResult.error = 'O EMAIL é inválido!';
lResult.success = false;
return lResult;
} else if(password.length < 7 || password.length > 12) { //TODO: validar de acordo com a documentação
lResult.error = 'A senha deve ter de 7 a 12 caracteres!';
lResult.success = false;
return lResult;
const handleMap = (e:any) => {
console.log(e)
setCurrentPoint({ latitude: e.center[0], longitude: e.center[1] });
}
return lResult;
};
const handleSubmit = async () => {
if(name != '' && email != '' && birthDate != '' && password != '' && confirmPassword != '') {
if(password === confirmPassword){
const signUpForm = {
name: firstName +' '+ lastName,
email: email,
birth_date: birthDate,
password: password
const searchResults = async () => {
await getUsersSearching(currentPoint);
}
let result = fieldValidate();
if((await result).success) {
let retorno = await UsersService.create(signUpForm);
console.log(retorno);
if(retorno.token) {
// let signIn = await Api.signIn(email, passwordField);
// if(signIn.token) {
// await AsyncStorage.setItem('token', signIn.token);
// await AsyncStorage.setItem('cpf', retorno.cpf);
history.push('home');
} else {
setMessageToast(retorno.message);
setShowToast(true);
}
} else{
setMessageToast(lResult.error);
setShowToast(true);
}
} else {
setMessageToast('As senhas devem ser iguais!');
setShowToast(true);
}
} else {
setMessageToast('Nenhum campo pode ser nulo!');
setShowToast(true);
}
};
const { name } = useParams<{ name: string; }>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton text={''} icon={arrowBack} defaultHref='mainpages' />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonGrid className="ion-padding">
<IonRow>
<IonCol size="12">
{/* <IonCardTitle>Como você deseja se cadastrar?</IonCardTitle> */}
<IonCardTitle>BuscarPassageiro</IonCardTitle>
</IonCol>
</IonRow>
{/* <IonItem>
<IonIcon icon={logoFacebook} />
Continuar com Facebook
</IonItem>
<IonItem>
<IonIcon icon={mail} />
Continuar com e-mail
</IonItem> */}
<IonRow>
<IonCol size="12">
<div id='nome-sobrenome'>
<IonItem>
<IonLabel position='floating'>Nome</IonLabel>
<IonInput
type='text'
clearInput
onIonInput={(e: any) => setFirstName(e.target.value)}
// error={isError}
// onIonChange={(e: any) => setFirstName(e.detail.value)}
>
</IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Sobrenome</IonLabel>
<IonInput
clearInput
onIonInput={(e: any) => setLastName(e.target.value)}
>
</IonInput>
</IonItem>
</div>
{/* { results &&
<> */}
<Map onBoundsChanged={e => handleMap(e)} defaultCenter={ [center.latitude, center.longitude] } defaultZoom={ zoom } provider={ maptilerProvider } touchEvents={ true }>
<IonItem>
<IonLabel position='floating'>E-mail</IonLabel>
<IonInput
clearInput
type='email'
onIonInput={(e: any) => setEmail(e.target.value)}
>
</IonInput>
</IonItem>
{ results.map((record:{latitude:any, longitude:any}, index) => {
<IonItem>
<IonLabel position='stacked'>Data de nascimento</IonLabel>
<IonInput
type='date'
onIonInput={(e: any) => setBirthDate(e.target.value)}
>
</IonInput>
</IonItem>
return <Marker key={ index } color="#3578e5" width={ 50 } anchor={ [ record.latitude, record.longitude ] } />
})}
<IonItem>
<IonLabel position='floating'>Senha</IonLabel>
<IonInput
clearInput
type='password'
onIonInput={(e: any) => setPassword(e.target.value)}
></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Confirme a senha</IonLabel>
<IonInput
clearInput
type='password'
onIonInput={(e: any) => setConfirmPassword(e.target.value)}
></IonInput>
</IonItem>
{ results.map((record:{showInfo:boolean, latitude:any, longitude:any}, index) => {
<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>
{/* <IonProgressBar type="indeterminate"></IonProgressBar><br /> */}
<IonToast
// cssClass={"toast-notification"}
color='danger'
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={messageToast}
duration={2500}
/>
if (record.showInfo) {
return (
<Overlay key={ index } anchor={ [ record.latitude, record.longitude ] } offset={[95, 304]}>
{/* <MapOverlay record={ record } /> */}
</Overlay>
);
}
})}
</Map>
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton>
<IonIcon onClick={searchResults} icon={search} />
</IonFabButton>
</IonFab>
{/* </> */}
{/* } */}
</IonContent>
</IonPage>
);

View File

@@ -1,4 +1,5 @@
import instance from '../services/api';
import { setStore } from "../store/RecordsStore";
// import LocalStorage from '../LocalStorage';
// let token:string;
@@ -43,3 +44,13 @@ export async function create(CadastroRequest: any) {
const response = await instance.post("http://localhost:3333/users/", CadastroRequest);
return response.data;
}
export async function getUsersSearching(currentPoint: any) {
// Replace lat/long with values from get current location.
// Allow choosing of radius?
// Offset could = amount loaded in an infinite scroll?
var latitude = currentPoint.latitude, longitude = currentPoint.longitude, radius = 5000, offset = 0;
const response = await fetch(`http://localhost:4000/get-records?latitude=${ latitude }&longitude=${ longitude }&radius=${ radius }&offset=${ offset }`);
const data = await response.json();
setStore(data);
}

15
src/store/RecordsStore.js Normal file
View File

@@ -0,0 +1,15 @@
import { Store } from 'pullstate';
const RecordsStore = new Store({
records: [],
center : []
});
export default RecordsStore;
export const setStore = records => {
RecordsStore.update(state => { state.records = records.allRecords });
RecordsStore.update(state => { state.center = records.center });
}

15
src/store/Selectors.js Normal file
View File

@@ -0,0 +1,15 @@
import { createSelector } from 'reselect';
const getState = state => state;
// General getters
export const fetchRecords = createSelector(getState, state => state.records);
// More specific getters
export const fetchRecord = recordId => createSelector(getState, state => {
return state.records.filter(record => record.id === recordId)[0];
});
// export const getPoll = pollId => createSelector(getState, state => state.polls.filter(poll => poll.id === parseInt(pollId))[0]);
// export const getChat = contactId => createSelector(getState, state => state.chats.filter(c => parseInt(c.contact_id) === parseInt(contactId))[0].chats);
// export const getContact = contactId => createSelector(getState, state => state.contacts.filter(c => parseInt(c.id) === parseInt(contactId))[0]);