Start kios map vanilla -> react conversion

astro/package.json

@@ -17,12 +17,14 @@
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@tanstack/react-query": "^5.28.14",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.23",
     "astro": "^4.5.13",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "css-select": "5.1.0",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.364.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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>

astro/yarn.lock

@@ -775,6 +775,18 @@
   resolved "https://registry.yarnpkg.com/@shikijs/core/-/core-1.2.3.tgz#551c257b6e1575ef0b87635c515dec134b32f611"
   integrity sha512-SM+aiQVaEK2P53dEcsvhq9+LJPr0rzwezHbMQhHaSrPN4OlOB4vp1qTdhVEKfMg6atdq8s9ZotWW/CSCzWftwg==
 
+"@tanstack/query-core@5.28.13":
+  version "5.28.13"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.28.13.tgz#15c187c23b87a393e91d0fd2ea6dfc22b8a85b75"
+  integrity sha512-C3+CCOcza+mrZ7LglQbjeYEOTEC3LV0VN0eYaIN6GvqAZ8Foegdgch7n6QYPtT4FuLae5ALy+m+ZMEKpD6tMCQ==
+
+"@tanstack/react-query@^5.28.14":
+  version "5.28.14"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.28.14.tgz#9585b6300eb8f167ed374e2748043dc8d6476709"
+  integrity sha512-cZqt03Igb3I9tM72qNX5TAAmeYl75Z+k4Mv92VkXIXc2hCrv0fIywd7GN3JV1BBJl4mr7Cc+OOKKOPy8sNVOkA==
+  dependencies:
+    "@tanstack/query-core" "5.28.13"
+
 "@testing-library/dom@^9.0.0":
   version "9.3.4"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
@@ -2583,6 +2595,11 @@ kleur@^4.1.4, kleur@^4.1.5:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
+leaflet@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
 lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"

node_modules/.yarn-integrity

@@ -0,0 +1,10 @@
+{
+  "systemParams": "linux-x64-108",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}

sampleResponses/makers.json

@@ -0,0 +1,88 @@
+{
+  "docs": [
+    {
+      "id": "66028ec901275c2f8eb87e76",
+      "name": "Display Distribute",
+      "location": [114.19163986185993, 22.31656075733971],
+      "products": [
+        {
+          "id": "65b0cefaafcaf765bddf4527",
+          "productTitle": "Product one",
+          "createdAt": "2024-01-24T08:48:58.369Z",
+          "updatedAt": "2024-01-24T08:48:58.369Z"
+        }
+      ],
+      "createdAt": "2024-03-26T09:00:57.371Z",
+      "updatedAt": "2024-03-26T09:00:57.371Z"
+    },
+    {
+      "id": "65b0d00dafcaf765bddf45ba",
+      "name": "Fahad the Artist",
+      "location": [-6.84, 33.9],
+      "products": [
+        {
+          "id": "65b0cefaafcaf765bddf4527",
+          "productTitle": "Product one",
+          "createdAt": "2024-01-24T08:48:58.369Z",
+          "updatedAt": "2024-01-24T08:48:58.369Z"
+        }
+      ],
+      "createdAt": "2024-01-24T08:53:33.106Z",
+      "updatedAt": "2024-01-24T08:53:33.106Z"
+    },
+    {
+      "id": "65b0cff2afcaf765bddf45a8",
+      "name": "Maker 3",
+      "location": [106, -6.2],
+      "products": [
+        {
+          "id": "65b0cefaafcaf765bddf4527",
+          "productTitle": "Product one",
+          "createdAt": "2024-01-24T08:48:58.369Z",
+          "updatedAt": "2024-01-24T08:48:58.369Z"
+        }
+      ],
+      "createdAt": "2024-01-24T08:53:06.945Z",
+      "updatedAt": "2024-01-24T08:53:06.945Z"
+    },
+    {
+      "id": "65b0cfd9afcaf765bddf4596",
+      "name": "Maker Two",
+      "location": [0.128, 51.5],
+      "products": [
+        {
+          "id": "65b0cefaafcaf765bddf4527",
+          "productTitle": "Product one",
+          "createdAt": "2024-01-24T08:48:58.369Z",
+          "updatedAt": "2024-01-24T08:48:58.369Z"
+        }
+      ],
+      "createdAt": "2024-01-24T08:52:41.057Z",
+      "updatedAt": "2024-01-24T08:52:41.057Z"
+    },
+    {
+      "id": "65b0cfbbafcaf765bddf4584",
+      "name": "Maker one",
+      "location": [67, 24.86],
+      "products": [
+        {
+          "id": "65b0cefaafcaf765bddf4527",
+          "productTitle": "Product one",
+          "createdAt": "2024-01-24T08:48:58.369Z",
+          "updatedAt": "2024-01-24T08:48:58.369Z"
+        }
+      ],
+      "createdAt": "2024-01-24T08:52:11.469Z",
+      "updatedAt": "2024-01-24T08:52:11.469Z"
+    }
+  ],
+  "totalDocs": 5,
+  "limit": 10,
+  "totalPages": 1,
+  "page": 1,
+  "pagingCounter": 1,
+  "hasPrevPage": false,
+  "hasNextPage": false,
+  "prevPage": null,
+  "nextPage": null
+}

sampleResponses/products.json

@@ -0,0 +1,31 @@
+{
+  "docs": [
+    {
+      "id": "660a87b201275c2f8eb88302",
+      "productTitle": "Tote Bags",
+      "createdAt": "2024-04-01T10:08:50.417Z",
+      "updatedAt": "2024-04-01T10:08:50.417Z"
+    },
+    {
+      "id": "66028ee601275c2f8eb87e93",
+      "productTitle": "Acts of Departure: Dispatches from The Last Emporium",
+      "createdAt": "2024-03-26T09:01:26.239Z",
+      "updatedAt": "2024-03-26T09:01:26.239Z"
+    },
+    {
+      "id": "65b0cefaafcaf765bddf4527",
+      "productTitle": "Product one",
+      "createdAt": "2024-01-24T08:48:58.369Z",
+      "updatedAt": "2024-01-24T08:48:58.369Z"
+    }
+  ],
+  "totalDocs": 3,
+  "limit": 10,
+  "totalPages": 1,
+  "page": 1,
+  "pagingCounter": 1,
+  "hasPrevPage": false,
+  "hasNextPage": false,
+  "prevPage": null,
+  "nextPage": null
+}

sampleResponses/retailers.json

@@ -0,0 +1,58 @@
+{
+  "docs": [
+    {
+      "id": "65b0cf7eafcaf765bddf4564",
+      "name": "Retailer 3",
+      "location": [9.19, 45.5],
+      "products": [
+        {
+          "id": "65b0cefaafcaf765bddf4527",
+          "productTitle": "Product one",
+          "createdAt": "2024-01-24T08:48:58.369Z",
+          "updatedAt": "2024-01-24T08:48:58.369Z"
+        }
+      ],
+      "createdAt": "2024-01-24T08:51:10.008Z",
+      "updatedAt": "2024-01-24T08:51:10.008Z"
+    },
+    {
+      "id": "65b0cf6bafcaf765bddf4552",
+      "name": "Retailer two",
+      "location": [-74, 40.7],
+      "products": [
+        {
+          "id": "65b0cefaafcaf765bddf4527",
+          "productTitle": "Product one",
+          "createdAt": "2024-01-24T08:48:58.369Z",
+          "updatedAt": "2024-01-24T08:48:58.369Z"
+        }
+      ],
+      "createdAt": "2024-01-24T08:50:51.876Z",
+      "updatedAt": "2024-01-24T08:50:51.876Z"
+    },
+    {
+      "id": "65b0cf25afcaf765bddf4540",
+      "name": "Retailer one",
+      "location": [2.45, 48.9],
+      "products": [
+        {
+          "id": "65b0cefaafcaf765bddf4527",
+          "productTitle": "Product one",
+          "createdAt": "2024-01-24T08:48:58.369Z",
+          "updatedAt": "2024-01-24T08:48:58.369Z"
+        }
+      ],
+      "createdAt": "2024-01-24T08:49:41.635Z",
+      "updatedAt": "2024-01-24T08:49:41.635Z"
+    }
+  ],
+  "totalDocs": 3,
+  "limit": 10,
+  "totalPages": 1,
+  "page": 1,
+  "pagingCounter": 1,
+  "hasPrevPage": false,
+  "hasNextPage": false,
+  "prevPage": null,
+  "nextPage": null
+}

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+