feat: FRON-51

world-travel map

package.json

@@ -34,10 +34,12 @@
     "jotai-cache": "latest",
     "jotai-effect": "latest",
     "lucide-react": "latest",
+    "mapbox-gl": "^3.6.0",
     "moment": "latest",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest",
+    "react-map-gl": "^7.1.7",
     "tailwind-merge": "latest",
     "tailwindcss-animate": "latest"
   },

src/app/api/fetch.ts

@@ -1,44 +1,44 @@
-import { bearerToken, serverUrl } from '@/lib/constants';
-
-export const fetchAPI = async (endpoint: string) => {
-  // Headers for authorization
-  const options = {
-    headers: {
-      Authorization: `Bearer ${bearerToken}`,
-    },
-  };
-
-  // Check if any fetching is in queue
-
-  // If so add to queue
-
-  // Need mechanism to tell code to go to next fetch
-
-  // Fetch from server
-  const data = await fetch(`${serverUrl}/${endpoint}`, { ...options })
-    .then(
-      (res) => {
-        // Response is not successful
-        if (!res.ok) {
-          throw new Error('Not 2xx response', { cause: res });
-        }
-
-        // Success parse data
-        return res.json();
-      },
-      // Catch initial fetch error
-      (err) => {
-        throw new Error('Server not connecting', { cause: err });
-      },
-    )
-    // Return parsed data
-    .then((data) => data)
-    // Catch and handle errors from above
-    .catch((err) => {
-      if (typeof err.cause.json === 'function') return err.cause.json();
-
-      return err.cause;
-    });
-
-  return data;
-};
+import { bearerToken, serverUrl } from '@/lib/constants';
+
+export const fetchAPI = async (endpoint: string) => {
+  // Headers for authorization
+  const options = {
+    headers: {
+      Authorization: `Bearer ${bearerToken}`,
+    },
+  };
+
+  // Check if any fetching is in queue
+
+  // If so add to queue
+
+  // Need mechanism to tell code to go to next fetch
+
+  // Fetch from server
+  const data = await fetch(`${serverUrl}/${endpoint}`, { ...options })
+    .then(
+      (res) => {
+        // Response is not successful
+        if (!res.ok) {
+          throw new Error('Not 2xx response', { cause: res });
+        }
+
+        // Success parse data
+        return res.json();
+      },
+      // Catch initial fetch error
+      (err) => {
+        throw new Error('Server not connecting', { cause: err });
+      },
+    )
+    // Return parsed data
+    .then((data) => data)
+    // Catch and handle errors from above
+    .catch((err) => {
+      if (typeof err.cause.json === 'function') return err.cause.json();
+
+      return err.cause;
+    });
+
+  return data;
+};

src/app/api/fetchMap.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { fetchEvents } from '@/app/api/fetchEvents';
+
+const CircuitMap = () => {
+  const [firstEvent, setFirstEvent] = useState(null);
+
+  useEffect(() => {
+    const getFirstEvent = async () => {
+      const events = await fetchEvents();
+      if (events.length > 0) {
+        setFirstEvent(events[0]);
+      }
+    };
+
+    getFirstEvent();
+  }, []);
+  return (
+    <div>
+      {firstEvent ? (
+        <div>
+          <h2>First Event</h2>
+          <p>{JSON.stringify(firstEvent, null, 2)}</p>
+        </div>
+      ) : (
+        <p>No events available.</p>
+      )}
+    </div>
+  );
+};
+
+export default CircuitMap;

src/app/mapbox/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useState } from 'react';
+import Map from 'react-map-gl';
+
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+const GlobeMap = () => {
+  return (
+    <div className='container'>
+      <h1 className='mb-10 text-center text-lg'>Formula 1 Map</h1>
+      <Map
+        mapboxAccessToken='pk.eyJ1Ijoiam9lbC1hbmdlbCIsImEiOiJjbTBiMWV3Y3YwM29zMmpzOGYwMzRnczJrIn0.Xe5m-NphtlcPF6WKdovTGQ'
+        initialViewState={{
+          longitude: -122.4,
+          latitude: 37.8,
+          zoom: 14,
+        }}
+        style={{ width: 1200, height: 650, borderRadius: '15px' }}
+        mapStyle='mapbox://styles/joel-angel/cm0mcld6300b901qy5715btg6'
+        projection={{ name: 'globe' }}
+      />
+    </div>
+  );
+};
+
+export default GlobeMap;

src/components/TopNav/MainNav.tsx

@@ -1,20 +1,26 @@
-import Link from 'next/link';
-
-export const MainNav = () => {
-  return (
-    <nav className='mx-8 flex items-center space-x-4 lg:mx-8 lg:space-x-6'>
-      <Link
-        className='font-medium transition-colors hover:text-primary'
-        href='/dashboard'
-      >
-        Dashboard
-      </Link>
-      <Link
-        className='font-medium transition-colors hover:text-primary'
-        href='/schedule'
-      >
-        Schedule
-      </Link>
-    </nav>
-  );
-};
+import Link from 'next/link';
+
+export const MainNav = () => {
+  return (
+    <nav className='mx-8 flex items-center space-x-4 lg:mx-8 lg:space-x-6'>
+      <Link
+        className='font-medium transition-colors hover:text-primary'
+        href='/dashboard'
+      >
+        Dashboard
+      </Link>
+      <Link
+        className='font-medium transition-colors hover:text-primary'
+        href='/schedule'
+      >
+        Schedule
+      </Link>
+      <Link
+        className='font-medium transition-colors hover:text-primary'
+        href='/mapbox'
+      >
+        Map
+      </Link>
+    </nav>
+  );
+};