ruangrupa/kios-webapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Start kios map vanilla -> react conversion

Browse Source
This commit is contained in:
toqvist
2024-04-03 15:31:56 +02:00
parent d8438e2d84
commit 4a95f6e2d1
10 changed files with 368 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
astro/package.json
View File

@ -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
View 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='&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 >
);
};

10
astro/src/pages/Map.astro Normal file
View 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
View File

17
astro/yarn.lock
View 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"