diff --git a/package-lock.json b/package-lock.json index a1e3220..a88aa24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 39fd73e..6635922 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.tsx b/src/App.tsx index 1dc24c1..0b04991 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -42,7 +42,7 @@ const App: React.FC = () => ( - + diff --git a/src/pages/BuscarPassageiro/BuscarPassageiro.css b/src/pages/BuscarPassageiro/BuscarPassageiro.css new file mode 100644 index 0000000..80598b6 --- /dev/null +++ b/src/pages/BuscarPassageiro/BuscarPassageiro.css @@ -0,0 +1,7 @@ +#nome-sobrenome{ + display: flex; +} + +.toast-notification{ + --background: rgb(255, 0, 0); +} \ No newline at end of file diff --git a/src/pages/BuscarPassageiro/BuscarPassageiro.tsx b/src/pages/BuscarPassageiro/BuscarPassageiro.tsx new file mode 100644 index 0000000..0797394 --- /dev/null +++ b/src/pages/BuscarPassageiro/BuscarPassageiro.tsx @@ -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 ( + + + {/* { results && + <> */} + handleMap(e)} defaultCenter={ [center.latitude, center.longitude] } defaultZoom={ zoom } provider={ maptilerProvider } touchEvents={ true }> + + { results.map((record:{latitude:any, longitude:any}, index) => { + return + })} + + {/* { results.map((record:{showInfo:boolean, latitude:any, longitude:any}, index) => { + + if (record.showInfo) { + + return ( + */} + {/* */} + {/* + ); + } + })} */} + + + + + + + + {/* */} + {/* } */} + + + ); +}; + +export default BuscarPassageiro; \ No newline at end of file diff --git a/src/pages/MainPages.tsx b/src/pages/MainPages.tsx index 3803212..6879edc 100644 --- a/src/pages/MainPages.tsx +++ b/src/pages/MainPages.tsx @@ -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 = () => { - } /> + + + + + + + } /> diff --git a/src/services/users.ts b/src/services/users.ts index 73440e1..7654149 100644 --- a/src/services/users.ts +++ b/src/services/users.ts @@ -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() { @@ -42,4 +43,16 @@ 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); } \ No newline at end of file diff --git a/src/store/RecordsStore.js b/src/store/RecordsStore.js new file mode 100644 index 0000000..76a9ae9 --- /dev/null +++ b/src/store/RecordsStore.js @@ -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 }); +} \ No newline at end of file diff --git a/src/store/Selectors.js b/src/store/Selectors.js new file mode 100644 index 0000000..c83e9f6 --- /dev/null +++ b/src/store/Selectors.js @@ -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]);