Fix queries

astro/src/components/App.tsx

@@ -5,18 +5,8 @@ import { KiosMap } from "@/components/KiosMap"
 export const queryClient = new QueryClient({
   defaultOptions: {
       queries: {
-          refetchOnWindowFocus: false,
-          retry: false,
           staleTime: 30000,
-          refetchOnReconnect: true,
-          refetchOnMount: true,
-          networkMode: "online",
       },
-      mutations: {
-          networkMode: "offlineFirst",
-          retry: 1,
-      },
-      
   },
 });
 
@@ -27,10 +17,10 @@ interface AppProps {
 export const App: React.FC<AppProps> = (props) => {
   return (
     <div className="app">
-    <QueryClientProvider client={queryClient}>
-      {props.children}
-      <KiosMap></KiosMap>
-    </QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        {props.children}
+        <KiosMap/>
+      </QueryClientProvider>
     </div>
   );
 }

astro/src/components/KiosMap.tsx

@@ -1,8 +1,13 @@
 import React, { useEffect } from 'react';
-import { MapContainer, TileLayer, Marker, Popup, Polyline, LayerGroup, GeoJSON } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, CircleMarker, Popup, Polyline, LayerGroup, GeoJSON, } from 'react-leaflet';
 // import 'leaflet/dist/leaflet.css';
+
+import L from 'leaflet';
+
 import { useQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query";
-import { queryClient } from "@/components/App"
+import axios from "axios";
+
+
 
 //Todo: Move types to own file
 type Product = {
@@ -35,113 +40,182 @@ type Retailer = {
   updatedAt: string;
 };
 
+interface Courier {
+  id: string;
+  name: string;
+  startingPoint: string;
+  destination: string;
+  departureDate: string;
+  arrivalDate: string;
+  weightAllowance: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface Dispatch {
+  id: string;
+  dispatchesCode: string;
+  products: Product[];
+  typeOfTransportation: string[];
+  courier: Courier;
+  timeSensitive: boolean;
+  status: string[];
+  createdAt: string;
+  updatedAt: string;
+}
+
 
 //Todo: update fetch url endpoints
 //Todo: Move queryclient and hooks to own file
+const ROOT_URL = "http://localhost:3001"
+
 const getMakers = async () => {
-  const response = await fetch("https://kios-admin.lumbung.space/api/makers");
-  const makers: Maker[] = (await response.json()).docs;
-  console.log(makers)
+  const url = `${ROOT_URL}/api/makers`
+  console.log("Fetching url:", url)
+  const response = await axios.get(url);
+
+  const makers = response.data.docs;
+  console.log(`Fetch result from ${url}`, makers)
   return makers;
+
 }
 
 const useGetMakers = () => {
   return useQuery<Maker[]>({
     queryFn: () => getMakers(),
-    queryKey: ['makers']
+    queryKey: ['makers'],
+    enabled: true
   })
 }
 
 const getRetailers = async () => {
-  const response = await fetch("https://kios-admin.lumbung.space/api/makers");
-  const makers: Maker[] = (await response.json()).docs;
-  return makers;
+  const url = `${ROOT_URL}/api/retailers`
+  console.log("Fetching url:", url)
+  const response = await axios.get(url);
+
+  const retailers = response.data.docs;
+  console.log(`Fetch result from ${url}`, retailers)
+  return retailers;
+
+}
+
+const useGetRetailers = () => {
+  return useQuery<Dispatch[]>({
+    queryFn: () => getRetailers(),
+    queryKey: ['retailers'],
+    enabled: true
+  })
+}
+
+const getDispatches = async () => {
+  const url = `${ROOT_URL}/api/dispatches`
+  console.log("Fetching url:", url)
+  const response = await axios.get(url);
+
+  const dispatches = response.data.docs;
+  console.log(`Fetch result from ${url}`, dispatches)
+  return dispatches;
+
+}
+
+const useGetDispatches = () => {
+  return useQuery<Dispatch[]>({
+    queryFn: () => getRetailers(),
+    queryKey: ['retailers'],
+    enabled: true
+  })
 }
 
 export const KiosMap = () => {
 
-  const { data: makers, isLoading: isLoadingMakers, isError } = useGetMakers();
-  const retailers = false
+  const { data: makers, isLoading: isLoadingMakers } = useGetMakers();
+  const { data: retailers, isLoading: isLoadingRetailers } = useGetRetailers();
+  const { data: dispatches, isLoading: isLoadingDispatches } = useGetDispatches();
 
 
-  // const blackDotIcon = L.divIcon({
-  //   className: 'black-dot',
-  //   iconSize: [20, 20],
-  //   iconAnchor: [10, 10]
-  // });
+  const blackDotIcon = L.divIcon({
+    className: 'black-dot',
+    iconSize: [20, 20],
+    iconAnchor: [10, 10]
+  });
 
   return (
     <MapContainer
       id="map"
-      // center={[-6.1815, 106.8228]}
+      center={[-6.1815, 106.8228]}
       //zoom={3}
-      style={{ width: '100%', paddingBottom: '70%', marginBottom: '80px' }}
+      className="w-full"
     >
       <TileLayer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
-      // maxZoom={19}
-      // attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
+        maxZoom={19}
+        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
       />
 
       {makers &&
         <LayerGroup>
           {makers.map((maker: any, index: number) => (
-            <Marker
+            <CircleMarker
               key={index}
-              position={[maker.location[0], maker.location[1]]}
-            //icon={blackDotIcon}
+              center={[maker.location[0], maker.location[1]]}
+              fillColor='black'
             >
               <Popup>{maker.name}</Popup>
-            </Marker>
+            </CircleMarker>
           ))}
         </LayerGroup>
       }
 
-      {/* {retailers
+      {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>
-      } */}
+          {retailers.map((retailer: any, index: number) => (
+            <CircleMarker
+              key={index}
+              center={[retailer.location[0], retailer.location[1]]}
+              fillColor='black'
+            >
+              <Popup>{retailer.name}</Popup>
+            </CircleMarker>
+          ))}
+        </LayerGroup>
+      }
 
+      {dispatches &&
+        <LayerGroup>
+          {dispatches.map((dispatch: any, index: number) => {
+            const start = dispatch.startingPoint.location;
+            const end = dispatch.endPoint.location;
 
-{/* <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 ? ', ' : '');
+            });
 
-    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';
 
-    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> */}
+            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 >
   );
 };