map.js

import { useMap } from 'react-leaflet';
import L from 'leaflet';
import { get, find } from 'lodash';
import React, { useRef, useState } from 'react';

import {
  streamingAPI,
  readCardata,
  dataMarker,
  getFleetInfo,
  templatePopup,
} from '../../../../services/map.service';
import { Api } from '../../../../services/config/request';

const API_URL = process.env.REACT_APP_API_ENDPOINT;

const defaultMarkColor = '#888888';

export const Map = (props) => {
  const map = useMap();
  const sse = useRef(null);
  const [markers, setMarker] = useState({});
  const [markerInfo, setMarkerInfo] = useState(null);
  const [markerDetail, setMarkerDetail] = useState(null);

  const markerOnClick = async (data) => {
    const result = await getFleetInfo(data.deviceID, data.orderID);
    await setMarkerDetail(data);
    await setMarkerInfo(() => result);
  };

  React.useEffect(() => {
    if (markerInfo !== null) {
      markers[markerDetail.vehicleNo]
        .bindPopup(templatePopup(markerInfo, markerDetail), {
          autoPanPadding: [100, 220],
        })
        .openPopup();
    }
  }, [markerInfo]);

  const setMarkers = (data) => {
    data.forEach((obj) => {
      if (!Object.prototype.hasOwnProperty.call(markers, obj.vehicleNo)) {
        markers[obj.vehicleNo] = L.circleMarker([obj.lat, obj.long], {
          radius: 4,
          fillColor: get(
            find(dataMarker, (o) => o.key === obj.status),
            'primaryColor',
            defaultMarkColor,
          ),
          color: get(
            find(dataMarker, (o) => o.key === obj.status),
            'secondaryColor',
            defaultMarkColor,
          ),
          weight: 2,
          opacity: 1,
          fillOpacity: 0.8,
        })
          .on('click', () => {
            markerOnClick(obj);
          })
          .addTo(map);
        markers[obj.vehicleNo].previousLatLngs = [];
        markers[obj.vehicleNo].data = obj;
      } else {
        markers[obj.vehicleNo].previousLatLngs.push(markers[obj.vehicleNo].getLatLng());
        markers[obj.vehicleNo].data = obj;
        markers[obj.vehicleNo].setLatLng([obj.lat, obj.long]);
      }
    });

    setMarker(markers);
    props.parentCallback(markers);
  };

  const loadData = async () => {
    sse.current = await streamingAPI('/fleettrack/pushrealevents/');

    let trackTime = 0;

    sse.current.onmessage = async (e) => {
      if (e.data.includes('/realtime/') || e.data.includes('/resource/')) {
        trackTime += 1;
        const urlString = API_URL + e.data;
        const url = new URL(urlString);
        const seq = url.searchParams.get('seq');
        const urlParam = e.data.replace(`&seq=${seq}`, `&seq=${trackTime}`);

        const arraybuffer = await Api.getStreamRequest(urlParam);

        if (arraybuffer) {
          const perfstat = performance.now();
          const result = readCardata(arraybuffer);

          const resultMarkers = get(result, 'markers', []) || [];

          setMarkers(resultMarkers);
          console.log('%d items processed in %d (ms) ', result?.cnt, performance.now() - perfstat);
        } else {
          sse.current.close();
        }
      }
    };
  };

  React.useEffect(() => {
    loadData();
    return () => {
      if (sse.current) {
        sse.current.close();
      }
    };
  }, []);

  return null;
};

Map.propTypes = {};

Map.defaultProps = {};

export default Map;