QueryClient setup

astro/src/components/App.tsx

@@ -0,0 +1,36 @@
+import { useQuery, useMutation, useQueryClient, queryOptions, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+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,
+      },
+      
+  },
+});
+
+interface AppProps {
+  children?: ReactNode;
+}
+
+export const App: React.FC<AppProps> = (props) => {
+  return (
+    <div className="app">
+    <QueryClientProvider client={queryClient}>
+      {props.children}
+      <KiosMap></KiosMap>
+    </QueryClientProvider>
+    </div>
+  );
+}

astro/src/components/KiosMap.tsx

@@ -2,7 +2,9 @@ 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";
+import { queryClient } from "@/components/App"
 
+//Todo: Move types to own file
 type Product = {
   id: string;
   productTitle: string;
@@ -35,6 +37,7 @@ type Retailer = {
 
 
 //Todo: update fetch url endpoints
+//Todo: Move queryclient and hooks to own file
 const getMakers = async () => {
   const response = await fetch("https://kios-admin.lumbung.space/api/makers");
   const makers: Maker[] = (await response.json()).docs;
@@ -55,15 +58,12 @@ const getRetailers = async () => {
   return makers;
 }
 
-
-
-
-export const KiosMap: React.FC = () => {
+export const KiosMap = () => {
 
   const { data: makers, isLoading: isLoadingMakers, isError } = useGetMakers();
-
-
   const retailers = false
+
+
   // const blackDotIcon = L.divIcon({
   //   className: 'black-dot',
   //   iconSize: [20, 20],

astro/src/pages/Map.astro

@@ -1,10 +1,11 @@
 ---
-import { AddRetailerForm } from "@/components/AddRetailerForm";
 import BaseLayout from "@/layouts/BaseLayout.astro";
-import { KiosMap } from "@/components/KiosMap"
+import { App } from "@/components/App"
 ---
 
 <BaseLayout title="Kios">
-  <KiosMap></KiosMap>
-
+  <App
+  client:only
+  >
+  </App>
 </BaseLayout>