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

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==",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA=="
-      "dev": true
     },
     "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",

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

src/App.tsx

@@ -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>
         

src/pages/BuscarPassageiro/BuscarPassageiro.css

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

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 (
+    <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;

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 = () => {
         <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">

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);
 }

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 });
+}

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]);