149 lines
3.6 KiB
TypeScript
149 lines
3.6 KiB
TypeScript
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 >
|
|
);
|
|
};
|
|
|