Start kios map vanilla -> react conversion

astro/src/components/KiosMap.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect } from 'react';
+import { MapContainer, TileLayer, Marker, Popup, Polyline, LayerGroup, GeoJSON } from 'react-leaflet';
+// import 'leaflet/dist/leaflet.css';
+import { useQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query";
+
+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;
+};
+
+
+//Todo: update fetch url endpoints
+const getMakers = async () => {
+  const response = await fetch("https://kios-admin.lumbung.space/api/makers");
+  const makers: Maker[] = (await response.json()).docs;
+  console.log(makers)
+  return makers;
+}
+
+const useGetMakers = () => {
+  return useQuery<Maker[]>({
+    queryFn: () => getMakers(),
+    queryKey: ['makers']
+  })
+}
+
+const getRetailers = async () => {
+  const response = await fetch("https://kios-admin.lumbung.space/api/makers");
+  const makers: Maker[] = (await response.json()).docs;
+  return makers;
+}
+
+
+
+
+export const KiosMap: React.FC = () => {
+
+  const { data: makers, isLoading: isLoadingMakers, isError } = useGetMakers();
+
+
+  const retailers = false
+  // const blackDotIcon = L.divIcon({
+  //   className: 'black-dot',
+  //   iconSize: [20, 20],
+  //   iconAnchor: [10, 10]
+  // });
+
+  return (
+    <MapContainer
+      id="map"
+      // center={[-6.1815, 106.8228]}
+      //zoom={3}
+      style={{ width: '100%', paddingBottom: '70%', marginBottom: '80px' }}
+    >
+      <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) => (
+            <Marker
+              key={index}
+              position={[maker.location[0], maker.location[1]]}
+            //icon={blackDotIcon}
+            >
+              <Popup>{maker.name}</Popup>
+            </Marker>
+          ))}
+        </LayerGroup>
+      }
+
+      {/* {retailers
+        <LayerGroup>
+        {data.retailers.map((retailer: any, index: number) => (
+          <Marker key={index} position={[retailer.location[0], retailer.location[1]]} icon={blackDotIcon}>
+            <Popup>{retailer.name}</Popup>
+          </Marker>
+        ))}
+    </LayerGroup>
+      } */}
+
+
+{/* <LayerGroup>
+  {data.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 >
+  );
+};
+

astro/src/pages/Map.astro

@@ -0,0 +1,10 @@
+---
+import { AddRetailerForm } from "@/components/AddRetailerForm";
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import { KiosMap } from "@/components/KiosMap"
+---
+
+<BaseLayout title="Kios">
+  <KiosMap></KiosMap>
+
+</BaseLayout>