WPD-MobileApp/src/app/components/map/OpenStreetMap.js

import React, { useState, useEffect } from "react";
import { View } from "react-native";
import WebView from "react-native-webview";
import {
  setViewCode,
  handleEvent,
  insertMarker,
  deleteAllMarkers,
} from "./LeafLetMap";
import MapModal from "../MapModal";
import html_content from "./Map.js";
import MapDataMenu from "../MapDataMenu";
import { MapMarkerList } from "../MapMarkerList";

function bindEventsToListeners(
  event,
  clickListener,
  setMarkerListener,
  moveEndListener
) {
  switch (event.object) {
    case "click":
      clickListener && clickListener(event.cords);
      break;
    case "marker":
      setMarkerListener(event.id);
      break;
    case "moveend":
      moveEndListener && moveEndListener(event.id);
      break;
    default:
      break;
  }
}

function notEmpy(lista) {
  return lista && lista.length > 0;
}

export default function OpenStreetMap({
  markers,
  clickListener,
  moveEndListener,
  isForm = false,
}) {
  const [dataOptionsToShow, setDataOptionsToShow] = useState({
    oficial: {
      automaticPluviometer: false,
      susceptibilityAreas: false,
    },
    citzen: {
      floodRisk: true,
      pluviometer: true,
      rain: false,
      floodZones: true,
      riverFlood: true,
    },
  });

  const [mapRef, setMapRef] = useState(null);
  const webviewContent = html_content;
  const [markerListener, setMarkerListener] = useState(null);
  const viewFunction = setViewCode(global.location.lat, global.location.long);

  const markersList = MapMarkerList({
    markers: markers,
    renderOptions: dataOptionsToShow,
  });
  // console.log(markersList)

  // markersList &&
  //   mapRef &&
  //   notEmpy(markersList) &&
  //   markersList.forEach((val, _) => {
  //     // console.log(val);
  //     insertMarker(mapRef, val.ID, val.coordinate, val.image);
  //   });

  useEffect(() => {
    if (markersList && mapRef && notEmpy(markersList)) {
      deleteAllMarkers(mapRef);

      markersList.forEach((val, k) => {
        insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
      });
    }
  }, [markersList, dataOptionsToShow]);

  return (
    <View flex={1}>
      {webviewContent && (
        <WebView
          ref={(webViewRef) => {
            setMapRef(webViewRef);
          }}
          onMessage={(event) => {
            bindEventsToListeners(
              handleEvent(event),
              clickListener,
              setMarkerListener,
              moveEndListener
            );
          }}
          javaScriptEnabled={true}
          source={{ html: webviewContent }}
          injectedJavaScript={viewFunction}
        />
      )}
      {!isForm && (
        <View>
          <MapModal
            showModal={markerListener}
            setShowModal={setMarkerListener}
            markers={markers.markers}
          />

          <MapDataMenu
            dataOptionsToShow={dataOptionsToShow}
            setDataOptionsToShow={setDataOptionsToShow}
          />
        </View>
      )}
    </View>
  );
}