Merge pull request #8 from CloudAlb/feature/buscar-passageiro

Feature/buscar-passageiro

package.json

@@ -23,12 +23,15 @@
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.26.1",
     "ionicons": "^5.4.0",
+    "pigeon-maps": "^0.21.0",
+    "pullstate": "^1.24.0",
     "lodash.isequal": "^4.5.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

@@ -44,6 +44,7 @@ import { search, home, person } from 'ionicons/icons';
 import { useState, useContext } from 'react';
 import React from 'react';
 import MinhasVans from './pages/MinhasVans';
+import BuscarPassageiro from './pages/BuscarPassageiro/BuscarPassageiro';
 
 setupIonicReact();
 
@@ -60,6 +61,8 @@ const routes = (
   <Route exact path="/perfil/completar/documento" component={CompletarDocumento}></Route>
   <Route exact path="/perfil/completar/telefone" component={CompletarTelefone}></Route>
 
+  <Route exact path="/buscar-passageiro" component={BuscarPassageiro}></Route>
+
   <Route exact path="/usuario/:id" component={Perfil}></Route>
 
   <Route exact path="/cadastro-van" component={CadastroVan}></Route>

src/constants/routes/usersRoutes.ts

@@ -14,6 +14,10 @@ const usersRoutes = {
   },
   getSocialInfo: {
     url: `${usersRoutesDefault}/social`
+  },
+  // TODO, depois corrigir
+  getUsersSearching: {
+    url: `/search/inraio`
   }
 }
 

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,11 @@ 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="/mainpages" render={() => <Redirect to="/buscar
+        " />} />
       </IonRouterOutlet>
 
       <IonTabBar slot="bottom">

src/services/users.ts

@@ -0,0 +1,60 @@
+import instance from '../services/api/api';
+import { setStore } from "../store/RecordsStore";
+// import LocalStorage from '../LocalStorage';
+
+import userRoutes from '../constants/routes/usersRoutes';
+
+// let token:string;
+let header:string;
+
+function updateHeader() {
+//   token = LocalStorage.getToken();
+  header = `{
+    "Accept": 'application/json',
+    "Content-Type": 'application/json',
+    "Authorization": 'Bearer ' + token
+  }`
+}
+
+export interface CadastroResponse {
+    message?: string;
+  
+    token?: {
+      token: string;
+    };
+  
+    error?: string;
+}
+
+export interface CadastroRequest {
+    name: string;
+    email: string;
+    birth_date: string;
+    password: string;
+}
+
+// export async function get(cpf) {
+//   updateHeader();
+
+//   const response = await instance.get(userRoutes.get.url + `/${cpf}`, { headers: header });
+//   return response.data;
+// }
+
+export async function create(CadastroRequest: any) {
+  updateHeader();
+
+  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(`${userRoutes.getUsersSearching.url}`, 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]);