map-app finished

chechoreyes · Jun 8, 2022 · 9aba27c · 9aba27c
1 parent c217cd7
commit 9aba27c
Show file tree

Hide file tree

Showing 33 changed files with 1,057 additions and 99 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,9 @@
     "@types/node": "^16.11.38",
     "@types/react": "^18.0.10",
     "@types/react-dom": "^18.0.5",
+    "axios": "^0.27.2",
+    "bootstrap": "^5.2.0-beta1",
+    "mapbox-gl": "^2.8.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
@@ -39,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/mapbox-gl": "^2.7.2"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta
+            name="description"
+            content="Web site created using create-react-app"
+        />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,17 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+        <title>React App</title>
+
+        <link
+            href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css"
+            rel="stylesheet"
+        />
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +43,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+    --></body>
 </html>
diff --git a/src/API/directionsAPI.ts b/src/API/directionsAPI.ts
@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+const directionsApi = axios.create({
+    baseURL: 'https://api.mapbox.com/directions/v5/mapbox/driving',
+    params: {
+        alternatives: false,
+        geometries: 'geojson',
+        overview: 'simplified',
+        steps: false,
+        language: 'es',
+        access_token:
+            'pk.eyJ1IjoiY2hlY2hvcmV5ZXMiLCJhIjoiY2w0MnJpd2N6MDJqdjNpcXg2ZWl0bGNmeCJ9.3xcJBowECq6wnZ4xxYCUPg',
+    },
+});
+
+export default directionsApi;
diff --git a/src/API/index.ts b/src/API/index.ts
@@ -0,0 +1,3 @@
+export { default as searchApi } from "./searchAPI";
+export { default as directionsApi } from "./directionsAPI";
+
diff --git a/src/API/searchAPI.ts b/src/API/searchAPI.ts
@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+const searchApi = axios.create({
+    baseURL: 'https://api.mapbox.com/geocoding/v5/mapbox.places',
+    params: {
+        limit: 5,
+        language: 'es',
+        access_token:
+            'pk.eyJ1IjoiY2hlY2hvcmV5ZXMiLCJhIjoiY2w0MnJpd2N6MDJqdjNpcXg2ZWl0bGNmeCJ9.3xcJBowECq6wnZ4xxYCUPg',
+    },
+});
+
+
+export default searchApi;
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/MapApp.tsx b/src/MapApp.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { PlacesProvider, MapProvider } from './context';
+import { HomeSceen } from './screens';
+import './styles.css';
+
+export const MapApp = () => {
+    return (
+        <PlacesProvider>
+            <MapProvider>
+                <HomeSceen />
+            </MapProvider>
+        </PlacesProvider>
+    );
+};
diff --git a/src/components/BtnMyLocation.tsx b/src/components/BtnMyLocation.tsx
@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import { MapContext, PlacesContext } from '../context';
+
+export const BtnMyLocation = () => {
+    const { isMapReady, map } = useContext(MapContext);
+    const { userLocation } = useContext(PlacesContext);
+
+    const onClick = () => {
+        if(!isMapReady) throw new Error('Mapa no está listo');
+        if(!userLocation) throw new Error('No hay ubicación de usuario');
+
+        map?.flyTo({
+            zoom: 14,
+            center: userLocation
+        })
+    };
+
+    return (
+        <button
+            className='btn btn-primary'
+            onClick={onClick}
+            style={{
+                position: 'fixed',
+                top: '20px',
+                right: '20px',
+                zIndex: 999,
+            }}
+        >
+            Mi ubicación
+        </button>
+    );
+};
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
@@ -0,0 +1,10 @@
+export const Loading = () => {
+    return (
+        <div className="loading-map d-flex justify-content-center align-items-center">
+            <div className="text-center">
+                <h3>Espere por favor</h3>
+                <span>Localizando...</span>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/LoadingPlaces.tsx b/src/components/LoadingPlaces.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const LoadingPlaces = () => {
+  return (
+      <div className='alert alert-primary mt-2 text-center '>
+          <h6>Buscando</h6>
+          <p>Espere por favor</p>
+      </div>
+  );
+}
diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx
@@ -0,0 +1,43 @@
+import React, { useContext, useLayoutEffect, useRef } from 'react';
+import { PlacesContext, MapContext } from '../context';
+import { Loading } from './';
+import mapboxgl from 'mapbox-gl';
+
+export const MapView = () => {
+    const { isLoading, userLocation } = useContext(PlacesContext);
+    const {setMap } = useContext(MapContext)
+    const mapDiv = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+      if (!isLoading){
+        const map = new mapboxgl.Map({
+          container: mapDiv.current!,
+          style: 'mapbox://styles/mapbox/streets-v11',
+          center: userLocation,
+          zoom: 14
+        });
+
+        setMap(map)
+      }
+    }, [isLoading])
+
+    if (isLoading) {
+        return <Loading />;
+    }
+
+    return (
+        <div
+            ref={mapDiv}
+            style={{
+                backgroundColor: 'red',
+                height: '100vh',
+                left: 0,
+                position: 'fixed',
+                top: 0,
+                width: '100vw',
+            }}
+        >
+            {userLocation?.join(',')}
+        </div>
+    );
+};
diff --git a/src/components/ReactLogo.tsx b/src/components/ReactLogo.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import reactlogo from '../logo.svg';
+
+export const ReactLogo = () => {
+    return (
+        <img
+            src={reactlogo}
+            alt='React Logo'
+            style={{
+                position: 'fixed',
+                bottom: '20px',
+                right: '20px',
+                width: '130px',
+            }}
+        />
+    );
+};
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -0,0 +1,30 @@
+import React, { ChangeEvent, useContext, useRef } from 'react';
+import { PlacesContext } from '../context/places/PlacesContext';
+import { SearchResults } from './SearchResults';
+
+export const SearchBar = () => {
+    const { searchPlacesByTerm } = useContext(PlacesContext);
+
+    const debounceRef = useRef<NodeJS.Timeout>();
+
+    const onQueryChanged = (event: ChangeEvent<HTMLInputElement>) => {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+
+        debounceRef.current = setTimeout(() => {
+            console.log(event.target.value);
+            searchPlacesByTerm(event.target.value);
+        }, 350);
+    };
+
+    return (
+        <div className='search-container'>
+            <input
+                type='text'
+                className='form-control'
+                placeholder='Buscar lugar...'
+                onChange={onQueryChanged}
+            />
+            <SearchResults />
+        </div>
+    );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export { default as searchApi } from "./searchAPI";
		export { default as directionsApi } from "./directionsAPI";