From dcfec1e2db7bbad63b920e22974222244b0f239f Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sat, 18 May 2024 18:33:04 +0100
Subject: [PATCH] Fix map not rendering correctly when div starts as hidden

---
 front/src/pages/Checkout.svelte | 37 +++++++++++++++++++--------------
 front/src/pages/Index.svelte    | 15 +++++++------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/front/src/pages/Checkout.svelte b/front/src/pages/Checkout.svelte
index 3aca1e3..0ac5a7a 100644
--- a/front/src/pages/Checkout.svelte
+++ b/front/src/pages/Checkout.svelte
@@ -2,7 +2,7 @@
     import { onMount } from "svelte";
     import { link } from "svelte-spa-router";
     import { ArrowLeft, SealWarning, ArrowRight } from "phosphor-svelte";
-    import L from "leaflet";
+    import L, { type Map } from "leaflet";
 
     import { type CartItem, type Checkout } from '../lib/types';
     import { expandOnTyping } from "../lib/utils";
@@ -14,7 +14,7 @@
             email: "",
         },
         message: "",
-        delivery: false,
+        delivery: true,
         address: {
             line1: "",
             line2: "",
@@ -30,28 +30,33 @@
 
     let items: [string, CartItem][];
     let totalPrice: number;
-    let unavailableItems = false;
-
+    let unavailableItems: boolean;
     Cart.subscribe(() => {
         items = Cart.getEntries();
         totalPrice = Cart.getTotalPrice();
-        Cart.getEntries().forEach(([_, item]) => {
-            if (!item.data.availability) unavailableItems = true;
-        });
+        unavailableItems = Cart.getEntries().some(([_, item]) => item.data.availability === false);
     });
 
+    let leafletMap: Map;
+    onMount(() => {
+        leafletMap = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
+        L.tileLayer(
+            'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+            {
+                maxZoom: 20,
+                attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+            },
+        ).addTo(leafletMap);
+        L.marker([50.82304922105467, -0.432780150496344]).addTo(leafletMap);
+    });
+    $: if (!CheckoutData.delivery) {
+        // Rendering maybe off-centered since map was initialized when div was hidden
+        setTimeout(() => { leafletMap.invalidateSize() }, 1);
+    }
+
     function onSubmit() {
         console.log(CheckoutData);
     }
-
-    onMount(() => {
-        const maxZoom = 20;
-        const attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>";
-        const map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
-
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom, attribution}).addTo(map);
-        L.marker([50.82304922105467, -0.432780150496344]).addTo(map);
-    });
 </script>
 
 <a href="/cart" use:link id="cancel-button"><ArrowLeft />&nbsp;Cancel</a>
diff --git a/front/src/pages/Index.svelte b/front/src/pages/Index.svelte
index b031c73..8e22317 100644
--- a/front/src/pages/Index.svelte
+++ b/front/src/pages/Index.svelte
@@ -12,12 +12,15 @@
     let items = getPopularToday();
 
     onMount(() => {
-        const maxZoom = 20;
-        const attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>";
-        const map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
-
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom, attribution}).addTo(map);
-        L.marker([50.82304922105467, -0.432780150496344]).addTo(map);
+        const leafletMap = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
+        L.tileLayer(
+            'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+            {
+                maxZoom: 20,
+                attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+            },
+        ).addTo(leafletMap);
+        L.marker([50.82304922105467, -0.432780150496344]).addTo(leafletMap);
 
     });
 </script>