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

Merge branch 'feature/buscar-passageiro' of https://github.com/CloudAlb/tcc-vamos-frontend into feature/buscar-transporte

Browse Source
This commit is contained in:
Hugo Falcao
2022-05-29 23:18:11 -03:00
parent c2a7085667 905d27484d
commit 8f3355c4d7
9 changed files with 228 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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",

3
package.json
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",

2
src/App.tsx
View File

@@ -42,7 +42,7 @@ const App: React.FC = () => (
<Route exact path="/cadastro" component={Cadastro}></Route>
<Route exact path="/login" component={Login}></Route>
<Route exact path="/">
<Redirect to="/cadastro" />
<Redirect to="/mainpages" />
</Route>
</IonRouterOutlet>

7
src/pages/BuscarPassageiro/BuscarPassageiro.css Normal file
View File

@@ -0,0 +1,7 @@
#nome-sobrenome{
display: flex;
}
.toast-notification{
--background: rgb(255, 0, 0);
}

114
src/pages/BuscarPassageiro/BuscarPassageiro.tsx Normal file
View File

@@ -0,0 +1,114 @@
import { IonContent, IonPage, IonFab, IonFabButton, IonIcon } from '@ionic/react';
import { search } from 'ionicons/icons';
import './BuscarPassageiro.css';
import { Map, Marker, Overlay } from "pigeon-maps";
import { maptiler } from 'pigeon-maps/providers';
import { 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 = () => {
// UNCOMMENT THESE TO USE CURRENT LOCATION.
// const [ currentPoint, setCurrentPoint ] = useState(false);
// useEffect(() => {
// const getCurrentLocation = async () => {
// const fetchedLocation = await getLocation();
// setCurrentPoint(fetchedLocation.currentLocation);
// }
// getCurrentLocation();
// }, []);
// useIonViewWillEnter(() => {
// getUsersSearching(currentPoint);
// });
const [ currentPoint, setCurrentPoint ] = useState({ latitude: -22.907829, longitude: -47.062943 });
const records = RecordsStore.useState(fetchRecords);
const center = { latitude: -22.907829, longitude: -47.062943 };
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 handleMap = (e:any) => {
setCurrentPoint({ latitude: e.center[0], longitude: e.center[1] });
}
const searchResults = async () => {
await getUsersSearching(currentPoint);
}
return (
<IonPage>
<IonContent fullscreen>
{/* { results &&
<> */}
<Map onBoundsChanged={e => handleMap(e)} defaultCenter={ [center.latitude, center.longitude] } defaultZoom={ zoom } provider={ maptilerProvider } touchEvents={ true }>
{ results.map((record:{latitude:any, longitude:any}, index) => {
return <Marker key={ index } color="#3578e5" width={ 50 } anchor={ [ parseFloat(record.latitude), parseFloat(record.longitude) ] } />
})}
{/* { results.map((record:{showInfo:boolean, latitude:any, longitude:any}, index) => {
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>
);
};
export default BuscarPassageiro;

10
src/pages/MainPages.tsx
View File

@@ -13,6 +13,7 @@ import { IonReactRouter } from '@ionic/react-router';
import { search, home, person } from 'ionicons/icons';
import Home from './Home';
import BuscarPassageiro from './BuscarPassageiro/BuscarPassageiro';
export const MainPages: React.FC = () => {
@@ -22,7 +23,14 @@ export const MainPages: React.FC = () => {
<Route path="/home" exact={true}>
<Home />
</Route>
<Route path="/mainpages" render={() => <Redirect to="/home" />} />
<Route path="/buscar" exact={true}>
<BuscarPassageiro />
</Route>
<Route path="/buscar" exact={true}>
<BuscarPassageiro />
</Route>
<Route path="/mainpages" render={() => <Redirect to="/buscar
" />} />
</IonRouterOutlet>
<IonTabBar slot="bottom">

15
src/services/users.ts
View File

@@ -1,7 +1,8 @@
import instance from '../services/api';
import { setStore } from "../store/RecordsStore";
// import LocalStorage from '../LocalStorage';
let token:string;
// let token:string;
let header:string;
function updateHeader() {
@@ -43,3 +44,15 @@ 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 = 3000, offset = 0;
// const response = await fetch(`http://localhost:4000/get-records?latitude=${ latitude }&longitude=${ longitude }&radius=${ radius }&offset=${ offset }`);
const response = await instance.post("http://localhost:3333/search/inraio", currentPoint)
// const data = await response.json();
console.log(response.data)
setStore(response.data);
}

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

@@ -0,0 +1,14 @@
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]);