Merge pull request #10 from Nwhacks-legends/katie/feature/the-feature

mappedin map added to MappedInPage

src/MappedInPage.js

@@ -1,13 +1,71 @@
-import React from "react";
-
-const MappedInPage = ()=>{
-    return (
-        <div>
-          <h1>This is the New Page</h1>
-          <p>Welcome to the new page!</p>
-        </div>
-      );
-
-}
+import React, { useEffect, useMemo } from "react";
+import {
+  TGetVenueMakerOptions,
+  TMapViewOptions,
+} from "@mappedin/mappedin-js";
+import "@mappedin/mappedin-js/lib/mappedin.css";
+import useMapView from "./hooks/useMapView";
+import useVenueMaker from "./hooks/useVenueMaker";
+
+const MappedInPage = () => {
+  const credentials = useMemo(
+    () => ({
+      mapId: "659efcf1040fcba69696e7b6",
+      key: "65a0422df128bbf7c7072349",
+      secret: "5f72653eba818842c16c4fdb9c874ae02100ffced413f638b7bd9c65fd5b92a4",
+    }),
+    []
+  );
+
+  const venue = useVenueMaker(credentials);
+
+  const mapOptions = useMemo(
+    () => ({
+      backgroundColor: "#CFCFCF",
+    }),
+    []
+  );
+
+  const { elementRef, mapView } = useMapView(venue, mapOptions);
+
+  useEffect(() => {
+    if (!mapView || !venue) {
+      return;
+    }
+
+    mapView.FloatingLabels.labelAllLocations();
+  }, [mapView, venue]);
+
+  return (
+    <div>
+      <h1>This is the New Page</h1>
+      <p>Welcome to the new page!</p>
+      <div id="ui">
+        {venue?.venue.name ?? "Loading..."}
+        {venue && (
+          <select
+            onChange={(e) => {
+              if (!mapView || !venue) {
+                return;
+              }
+
+              const floor = venue.maps.find((map) => map.id === e.target.value);
+              if (floor) {
+                mapView.setMap(floor);
+              }
+            }}
+          >
+            {venue?.maps.map((level, index) => (
+              <option value={level.id} key={index}>
+                {level.name}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+      <div id="map-container" ref={elementRef}></div>
+    </div>
+  );
+};
 
 export default MappedInPage;

src/hooks/useMapView.js

@@ -0,0 +1,57 @@
+import { showVenue } from "@mappedin/mappedin-js";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export default function useMapView(
+  venue,
+  options
+) {
+  const [mapView, setMapView] = useState();
+  const mapRef = useRef(null);
+  const isRendering = useRef(false);
+
+  const renderVenue = useCallback(
+    async (el, venue, options) => {
+      if (isRendering.current === true || mapView != null) {
+        return;
+      }
+
+      isRendering.current = true;
+
+      console.log(
+        `[useMapView] Rendering "${venue.venue.name}" to element "${el.id}".`
+      );
+      const _mapView = await showVenue(el, venue, options);
+      setMapView(_mapView);
+
+      isRendering.current = false;
+    },
+    [isRendering, mapView, setMapView]
+  );
+
+  const elementRef = useCallback(
+    (element) => {
+      if (element == null) {
+        return;
+      }
+
+      mapRef.current = element;
+
+      if (mapView == null && venue != null && isRendering.current == false) {
+        renderVenue(element, venue, options);
+      }
+    },
+    [renderVenue, mapView, isRendering, mapRef]
+  );
+
+  useEffect(() => {
+    if (mapView) {
+      return;
+    }
+
+    if (mapRef.current != null && venue != null) {
+      renderVenue(mapRef.current, venue, options);
+    }
+  }, [venue, mapRef.current, mapView, renderVenue]);
+
+  return { mapView, elementRef };
+}

src/hooks/useVenueMaker.js

@@ -0,0 +1,38 @@
+import { getVenueMaker } from "@mappedin/mappedin-js";
+import { useEffect, useState } from "react";
+
+/**
+ * Declarative API to fetch Mappedin data using getVenueMaker
+ */
+export default function useVenue(options) {
+  // Store the venue object in a state variable
+  const [venue, setVenue] = useState();
+
+  // Fetch data asynchronously whenever options are changed
+  useEffect(() => {
+    let ignore = false;
+    const fetchData = async () => {
+      try {
+        console.log(`[useVenueMaker] Fetching map with ID "${options.mapId}"`);
+        const data = await getVenueMaker(options);
+        // Update state variable after data is fetched
+        if (!ignore) {
+          console.log(`[useVenueMaker] Received map "${data.venue.name}"`);
+          setVenue(data);
+        }
+      } catch (e) {
+        // Handle error
+        console.log(e);
+        setVenue(undefined);
+      }
+    };
+    fetchData();
+
+    return () => {
+      ignore = true;
+    };
+  }, [options]);
+
+  // Return the venue object
+  return venue;
+}