Start kios map vanilla -> react conversion
This commit is contained in:
parent
d8438e2d84
commit
4a95f6e2d1
@ -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",
|
||||
|
||||
148
astro/src/components/KiosMap.tsx
Normal file
148
astro/src/components/KiosMap.tsx
Normal file
@ -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='© <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 >
|
||||
);
|
||||
};
|
||||
|
||||
10
astro/src/pages/Map.astro
Normal file
10
astro/src/pages/Map.astro
Normal file
@ -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>
|
||||
0
astro/src/utils/hooks.ts
Normal file
0
astro/src/utils/hooks.ts
Normal file
@ -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"
|
||||
|
||||
10
node_modules/.yarn-integrity
generated
vendored
Normal file
10
node_modules/.yarn-integrity
generated
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"systemParams": "linux-x64-108",
|
||||
"modulesFolders": [],
|
||||
"flags": [],
|
||||
"linkedModules": [],
|
||||
"topLevelPatterns": [],
|
||||
"lockfileEntries": {},
|
||||
"files": [],
|
||||
"artifacts": {}
|
||||
}
|
||||
88
sampleResponses/makers.json
Normal file
88
sampleResponses/makers.json
Normal file
@ -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
|
||||
}
|
||||
31
sampleResponses/products.json
Normal file
31
sampleResponses/products.json
Normal file
@ -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
|
||||
}
|
||||
58
sampleResponses/retailers.json
Normal file
58
sampleResponses/retailers.json
Normal file
@ -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
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user