Start kios map vanilla -> react conversion

Add sample form
Update react/ts version
2024-04-03 15:31:56 +02:00 · 2024-04-03 14:23:08 +02:00 · 2024-04-03 14:22:56 +02:00
12 changed files with 448 additions and 45 deletions
--- a/astro/package.json
+++ b/astro/package.json
@ -11,22 +11,25 @@
  "dependencies": {
    "@astrojs/image": "0.18.0",
    "@astrojs/prefetch": "0.4.1",
-    "@astrojs/react": "^3.1.0",
+    "@astrojs/react": "^3.1.1",
    "@astrojs/sitemap": "3.1.2",
    "@astrojs/tailwind": "5.1.0",
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@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.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.2",
+    "react-leaflet": "^4.2.1",
    "sharp": "^0.32.6",
    "slate-serializers": "0.4.1",
    "tailwind-merge": "^2.2.2",
--- a/astro/src/components/AddRetailerForm.tsx
+++ b/astro/src/components/AddRetailerForm.tsx
@ -22,46 +22,46 @@ export function AddRetailerForm() {
      message: "Username must be at least 2 characters.",
    }),
  })
-  
-  
+
+
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
    },
  })
- 
+
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated according to z schema.
    console.log(values)
  }
-
+  
  return (
    <div className="flex justify-center">
-    <div>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <FormField
-            control={form.control}
-            name="username"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Username</FormLabel>
-                <FormControl>
-                  <Input placeholder="" {...field} />
-                </FormControl>
-                <FormDescription>
-                  This is your public display name.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button variant={"default"} type="submit">Submit</Button>
-        </form>
-      </Form>
-    </div>
+      <div>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Username</FormLabel>
+                  <FormControl>
+                    <Input placeholder="" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    This is your public display name.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button variant={"default"} type="submit">Submit</Button>
+          </form>
+        </Form>
+      </div>
    </div>
  )
 }
--- a/astro/src/components/KiosMap.tsx
+++ b/astro/src/components/KiosMap.tsx
@ -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 >
+  );
+};
+
--- a/astro/src/pages/Map.astro
+++ b/astro/src/pages/Map.astro
@ -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>
--- a/astro/src/utils/hooks.ts
+++ b/astro/src/utils/hooks.ts
--- a/astro/tailwind.config.cjs
+++ b/astro/tailwind.config.cjs
@ -3,7 +3,7 @@ module.exports = {
  darkMode: ["class"],
  content: [
    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
-    './styles/**/*.{css}',
+    './styles/**/*.css',
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
--- a/astro/yarn.lock
+++ b/astro/yarn.lock
@ -85,10 +85,10 @@
  dependencies:
    prismjs "^1.29.0"

-"@astrojs/react@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@astrojs/react/-/react-3.1.0.tgz#8a1742ad840a1f3b485ac64786cd6e296495dc93"
-  integrity sha512-KZhZyV+sUDZEjlrmPWNiPGeYowG9uq6/aMbCgVaeKEBlWT4Kg32TNwBOhZk6AcE4LY1l3mIwt3orUGE2JV96/g==
+"@astrojs/react@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@astrojs/react/-/react-3.1.1.tgz#bfe0d5f47e7b17f1467718b288c3f851dc547599"
+  integrity sha512-Uc4zY8UxkZrSKmiFGPyy+0uUKGgVETJSra5c/65Z2ZckJEHtgLYW0ZqGUoItGr0wJFMv+h1g3Z4OJGapGgcUyA==
  dependencies:
    "@vitejs/plugin-react" "^4.2.0"
    ultrahtml "^1.3.0"
@ -690,6 +690,11 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "1.0.1"

+"@react-leaflet/core@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
+  integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
+
 "@rollup/rollup-android-arm-eabi@4.13.2":
  version "4.13.2"
  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.2.tgz#fbf098f49d96a8cac9056f22f5fd80906ef3af85"
@ -770,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"
@ -886,14 +903,14 @@
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==

-"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.6":
+"@types/react-dom@^18.0.0", "@types/react-dom@^18.2.23":
  version "18.2.23"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.23.tgz#112338760f622a16d64271b408355f2f27f6302c"
  integrity sha512-ZQ71wgGOTmDYpnav2knkjr3qXdAFu0vsk8Ci5w3pGAIdj7/kKAyn+VsQDhXsmzzzepAiI9leWMmubXz690AI/A==
  dependencies:
    "@types/react" "*"

-"@types/react@*", "@types/react@^18.0.21":
+"@types/react@*":
  version "18.2.73"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.73.tgz#0579548ad122660d99e00499d22e33b81e73ed94"
  integrity sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==
@ -901,6 +918,14 @@
    "@types/prop-types" "*"
    csstype "^3.0.2"

+"@types/react@^18.2.74":
+  version "18.2.74"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.74.tgz#2d52eb80e4e7c4ea8812c89181d6d590b53f958c"
+  integrity sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/sax@^1.2.1":
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/@types/sax/-/sax-1.2.7.tgz#ba5fe7df9aa9c89b6dff7688a19023dd2963091d"
@ -2570,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"
@ -3601,7 +3631,7 @@ rc@^1.2.7:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

-react-dom@^18.0.0:
+react-dom@^18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@ -3619,12 +3649,19 @@ react-is@^17.0.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

+react-leaflet@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.2.1.tgz#c300e9eccaf15cb40757552e181200aa10b94780"
+  integrity sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==
+  dependencies:
+    "@react-leaflet/core" "^2.1.0"
+
 react-refresh@^0.14.0:
  version "0.14.0"
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==

-react@^18.0.0:
+react@^18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@ -4080,8 +4117,16 @@ streamx@^2.13.0, streamx@^2.15.0:
  optionalDependencies:
    bare-events "^2.2.0"

-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -4132,8 +4177,14 @@ stringify-entities@^4.0.0:
    character-entities-html4 "^2.0.0"
    character-entities-legacy "^3.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
--- a/node_modules/.yarn-integrity
+++ b/node_modules/.yarn-integrity
@ -0,0 +1,10 @@
+{
+  "systemParams": "linux-x64-108",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
--- a/sampleResponses/makers.json
+++ b/sampleResponses/makers.json
@ -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
+}
--- a/sampleResponses/products.json
+++ b/sampleResponses/products.json
@ -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
+}
--- a/sampleResponses/retailers.json
+++ b/sampleResponses/retailers.json
@ -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
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
Author	SHA1	Message	Date
toqvist	4a95f6e2d1	Start kios map vanilla -> react conversion	2024-04-03 15:31:56 +02:00
toqvist	d8438e2d84	Add sample form	2024-04-03 14:23:08 +02:00
toqvist	95243557c6	Update react/ts version	2024-04-03 14:22:56 +02:00