astro-payload-template/astro/src/components/KiosMap.tsx

import React, { useEffect } from 'react';
import { MapContainer, TileLayer, Marker, CircleMarker, Popup, Polyline, LayerGroup, GeoJSON, } from 'react-leaflet';
// import 'leaflet/dist/leaflet.css';

import L from 'leaflet';

import { useQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query";
import axios from "axios";



//Todo: Move types to own file
type Product = {
  id: string;
  productTitle: string;
  createdAt: string;
  updatedAt: string;
};

// type Location = {
//   latitude: number;
//   longitude: number;
// }

type Maker = {
  id: string;
  name: string;
  location: [number, number];
  products: Product[];
  createdAt: string;
  updatedAt: string;
};

type Retailer = {
  id: string;
  name: string;
  location: [number, number];
  products: Product[];
  createdAt: string;
  updatedAt: string;
};

interface Courier {
  id: string;
  name: string;
  startingPoint: string;
  destination: string;
  departureDate: string;
  arrivalDate: string;
  weightAllowance: number;
  createdAt: string;
  updatedAt: string;
}

interface Dispatch {
  id: string;
  dispatchesCode: string;
  products: Product[];
  typeOfTransportation: string[];
  courier: Courier;
  timeSensitive: boolean;
  status: string[];
  createdAt: string;
  updatedAt: string;
}


//Todo: update fetch url endpoints
//Todo: Move queryclient and hooks to own file
const ROOT_URL = "http://localhost:3001"

const getMakers = async () => {
  const url = `${ROOT_URL}/api/makers`
  console.log("Fetching url:", url)
  const response = await axios.get(url);

  const makers = response.data.docs;
  console.log(`Fetch result from ${url}`, makers)
  return makers;

}

const useGetMakers = () => {
  return useQuery<Maker[]>({
    queryFn: () => getMakers(),
    queryKey: ['makers'],
    enabled: true
  })
}

const getRetailers = async () => {
  const url = `${ROOT_URL}/api/retailers`
  console.log("Fetching url:", url)
  const response = await axios.get(url);

  const retailers = response.data.docs;
  console.log(`Fetch result from ${url}`, retailers)
  return retailers;

}

const useGetRetailers = () => {
  return useQuery<Dispatch[]>({
    queryFn: () => getRetailers(),
    queryKey: ['retailers'],
    enabled: true
  })
}

const getDispatches = async () => {
  const url = `${ROOT_URL}/api/dispatches`
  console.log("Fetching url:", url)
  const response = await axios.get(url);

  const dispatches = response.data.docs;
  console.log(`Fetch result from ${url}`, dispatches)
  return dispatches;

}

const useGetDispatches = () => {
  return useQuery<Dispatch[]>({
    queryFn: () => getRetailers(),
    queryKey: ['retailers'],
    enabled: true
  })
}

export const KiosMap = () => {

  const { data: makers, isLoading: isLoadingMakers } = useGetMakers();
  const { data: retailers, isLoading: isLoadingRetailers } = useGetRetailers();
  const { data: dispatches, isLoading: isLoadingDispatches } = useGetDispatches();


  const blackDotIcon = L.divIcon({
    className: 'black-dot',
    iconSize: [20, 20],
    iconAnchor: [10, 10]
  });

  return (
    <MapContainer
      id="map"
      center={[-6.1815, 106.8228]}
      //zoom={3}
      className="w-full"
    >
      <TileLayer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
        maxZoom={19}
        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      />

      {makers &&
        <LayerGroup>
          {makers.map((maker: any, index: number) => (
            <CircleMarker
              key={index}
              center={[maker.location[0], maker.location[1]]}
              fillColor='black'
            >
              <Popup>{maker.name}</Popup>
            </CircleMarker>
          ))}
        </LayerGroup>
      }

      {retailers &&
        <LayerGroup>
          {retailers.map((retailer: any, index: number) => (
            <CircleMarker
              key={index}
              center={[retailer.location[0], retailer.location[1]]}
              fillColor='black'
            >
              <Popup>{retailer.name}</Popup>
            </CircleMarker>
          ))}
        </LayerGroup>
      }

      {dispatches &&
        <LayerGroup>
          {dispatches.map((dispatch: any, index: number) => {
            const start = dispatch.startingPoint.location;
            const end = dispatch.endPoint.location;

            let productsString = '';
            dispatch.products.forEach((product: any, i: number) => {
              productsString += product.productTitle + (i + 1 < dispatch.products.length ? ', ' : '');
            });

            const myDashArray =
              dispatch.status === 'routeRequested' ? '20, 10' :
                dispatch.status === 'completed' ? '1, 5' :
                  '0, 0';

            return (
              <div key={index}>
                <Marker position={[start[0], start[1]]}
                //icon={blackDotIcon}
                >
                  <Popup>{dispatch.startingPoint.name}</Popup>
                </Marker>
                <Marker position={[end[0], end[1]]}
                //icon={blackDotIcon}
                >
                  <Popup>{dispatch.endPoint.name}</Popup>
                </Marker>
                <Polyline
                  positions={[[start[0], start[1]], [end[0], end[1]]]}
                  color="#000"
                  dashArray={myDashArray} />
              </div>
            );
          })}
        </LayerGroup>
      }
    </MapContainer >
  );
};