From 27d2c900cda36fb0e5242baee1a4599059380866 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <jin.igarashi@undp.org>
Date: Mon, 23 Dec 2024 21:02:36 +0900
Subject: [PATCH] Refactor/for svelte5 (#4671)

* refactor: moved activestorymap chapter store to stores folder

* rafactor: fixed table html

* rafactor: fixed table html

* add changeset
---
 .changeset/little-otters-swim.md                 |  5 +++++
 .../pages/storymap/StorymapChapterEdit.svelte    | 12 +-----------
 .../StorymapChapterLayerEventEditor.svelte       |  5 +----
 .../storymap/StorymapChapterMiniPreview.svelte   |  7 ++-----
 .../components/util/stac/StacCatalogItem.svelte  | 12 ++++++++----
 .../components/util/stac/StacCatalogMap.svelte   | 12 +++++++-----
 .../pgtileserv/PgtileserveTable.svelte           | 16 +++++++++-------
 .../(app)/management/stac/api/[id]/+page.svelte  | 10 ++++++----
 .../(app)/storymaps/[[id]]/edit/+page.svelte     | 12 +++++++-----
 sites/geohub/src/stores/activeStorymapChapter.ts | 15 +++++++++++++++
 sites/geohub/src/stores/index.ts                 |  1 +
 11 files changed, 62 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/little-otters-swim.md
 create mode 100644 sites/geohub/src/stores/activeStorymapChapter.ts

diff --git a/.changeset/little-otters-swim.md b/.changeset/little-otters-swim.md
new file mode 100644
index 0000000000..482f664b81
--- /dev/null
+++ b/.changeset/little-otters-swim.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+refactor: fixed some codes and html for svelte 5 migration
diff --git a/sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte b/sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte
index dff941e2b5..bd29b25921 100644
--- a/sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte
+++ b/sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte
@@ -1,16 +1,6 @@
-<script context="module" lang="ts">
-	import { writable, type Writable } from 'svelte/store';
-
-	export const ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY = 'active-storymap-chapter-store';
-	export type ActiveStorymapChapterStore = Writable<StoryMapChapter | undefined>;
-	export const createActiveStorymapChapterStore = () => {
-		return writable(<StoryMapChapter | undefined>undefined);
-	};
-</script>
-
 <script lang="ts">
 	import { page } from '$app/stores';
-	import type { StoryMapChapter } from '$lib/types';
+	import { ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY, type ActiveStorymapChapterStore } from '$stores';
 	import {
 		STORYMAP_CONFIG_STORE_CONTEXT_KEY,
 		type StoryMapConfigStore
diff --git a/sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte b/sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte
index fd572dd2bf..a8cbae0c9c 100644
--- a/sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte
+++ b/sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
 	import type { DashboardMapStyle } from '$lib/types';
+	import { ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY, type ActiveStorymapChapterStore } from '$stores';
 	import { layerTypes, type StoryMapChapterLayerEvent } from '@undp-data/svelte-maplibre-storymap';
 	import { FieldControl, initTooltipTippy, OpacityEditor } from '@undp-data/svelte-undp-components';
 	import { Loader, Switch } from '@undp-data/svelte-undp-design';
 	import { debounce } from 'lodash-es';
 	import type { LayerSpecification, StyleSpecification } from 'maplibre-gl';
 	import { createEventDispatcher, getContext, onMount } from 'svelte';
-	import {
-		ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY,
-		type ActiveStorymapChapterStore
-	} from './StorymapChapterEdit.svelte';
 
 	const tippyTooltip = initTooltipTippy();
 	const dipatch = createEventDispatcher();
diff --git a/sites/geohub/src/components/pages/storymap/StorymapChapterMiniPreview.svelte b/sites/geohub/src/components/pages/storymap/StorymapChapterMiniPreview.svelte
index 766ddcf28b..1746cfed69 100644
--- a/sites/geohub/src/components/pages/storymap/StorymapChapterMiniPreview.svelte
+++ b/sites/geohub/src/components/pages/storymap/StorymapChapterMiniPreview.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { getMapImageFromStyle } from '$lib/helper';
-	import type { StoryMapChapterType, StoryMapConfig } from '$lib/types';
+	import type { StoryMapChapter as StoryMapChapterType, StoryMapConfig } from '$lib/types';
+	import { ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY, type ActiveStorymapChapterStore } from '$stores';
 	import {
 		layerTypes,
 		STORYMAP_CONFIG_STORE_CONTEXT_KEY,
@@ -14,10 +15,6 @@
 	import { debounce, isEqual } from 'lodash-es';
 	import { type StyleSpecification } from 'maplibre-gl';
 	import { createEventDispatcher, getContext, onMount } from 'svelte';
-	import {
-		ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY,
-		type ActiveStorymapChapterStore
-	} from './StorymapChapterEdit.svelte';
 
 	const dispatch = createEventDispatcher();
 
diff --git a/sites/geohub/src/components/util/stac/StacCatalogItem.svelte b/sites/geohub/src/components/util/stac/StacCatalogItem.svelte
index 7da0d1e7f3..45e2037bab 100644
--- a/sites/geohub/src/components/util/stac/StacCatalogItem.svelte
+++ b/sites/geohub/src/components/util/stac/StacCatalogItem.svelte
@@ -313,8 +313,10 @@
 				<div class="p-4" slot="content">
 					<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
 						<thead>
-							<th>Parameter</th>
-							<th>Value</th>
+							<tr>
+								<th>Parameter</th>
+								<th>Value</th>
+							</tr>
 						</thead>
 						<tbody>
 							{#each metadataProps as prop}
@@ -345,8 +347,10 @@
 				<div class="p-4" slot="content">
 					<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
 						<thead>
-							<th>Parameter</th>
-							<th>Value</th>
+							<tr>
+								<th>Parameter</th>
+								<th>Value</th>
+							</tr>
 						</thead>
 						<tbody>
 							{#each viewgeometryProps as prop}
diff --git a/sites/geohub/src/components/util/stac/StacCatalogMap.svelte b/sites/geohub/src/components/util/stac/StacCatalogMap.svelte
index cdee1e9441..c53ae6b263 100644
--- a/sites/geohub/src/components/util/stac/StacCatalogMap.svelte
+++ b/sites/geohub/src/components/util/stac/StacCatalogMap.svelte
@@ -39,11 +39,13 @@
 	<Accordion title="metadata" isExpanded={isMetadataExpanded}>
 		<div slot="content">
 			<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
-				<tr><th>STAC version</th><td>{stacCatalog.stac_version}</td></tr>
-				<tr><th>Description</th><td>{stacCatalog.description}</td></tr>
-				{#if stacCatalog.license}
-					<tr><th>License</th><td>{stacCatalog.license}</td></tr>
-				{/if}
+				<tbody>
+					<tr><th>STAC version</th><td>{stacCatalog.stac_version}</td></tr>
+					<tr><th>Description</th><td>{stacCatalog.description}</td></tr>
+					{#if stacCatalog.license}
+						<tr><th>License</th><td>{stacCatalog.license}</td></tr>
+					{/if}
+				</tbody>
 			</table>
 		</div>
 	</Accordion>
diff --git a/sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte b/sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte
index 65a0845c52..cd20f8d506 100644
--- a/sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte
+++ b/sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte
@@ -75,13 +75,15 @@
 			{/each}
 		</tbody>
 		<tfoot>
-			<th>No.</th>
-			{#each Object.keys(layers[0]) as col}
-				{#if !skipCols.includes(col)}
-					<th>{col}</th>
-				{/if}
-			{/each}
-			<th>registered</th>
+			<tr>
+				<th>No.</th>
+				{#each Object.keys(layers[0]) as col}
+					{#if !skipCols.includes(col)}
+						<th>{col}</th>
+					{/if}
+				{/each}
+				<th>registered</th>
+			</tr>
 		</tfoot>
 	</table>
 </div>
diff --git a/sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte b/sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte
index 5e01d11187..f9751c9bc0 100644
--- a/sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte
+++ b/sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte
@@ -287,10 +287,12 @@
 							{/if}
 						</tbody>
 						<tfoot>
-							<th>No.</th>
-							<th>Title</th>
-							<th>STAC page</th>
-							<th>Operation</th>
+							<tr>
+								<th>No.</th>
+								<th>Title</th>
+								<th>STAC page</th>
+								<th>Operation</th>
+							</tr>
 						</tfoot>
 					</table>
 				</div>
diff --git a/sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte b/sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte
index 339266f00e..72f04b0a44 100644
--- a/sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte
+++ b/sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import StorymapChapterEdit, {
-		ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY,
-		createActiveStorymapChapterStore
-	} from '$components/pages/storymap/StorymapChapterEdit.svelte';
+	import StorymapChapterEdit from '$components/pages/storymap/StorymapChapterEdit.svelte';
 	import StorymapChapterMiniPreview from '$components/pages/storymap/StorymapChapterMiniPreview.svelte';
 	import StorymapEditPreview from '$components/pages/storymap/StorymapEditPreview.svelte';
 	import StorymapFooterEdit from '$components/pages/storymap/StorymapFooterEdit.svelte';
@@ -18,7 +15,12 @@
 	import { AccessLevel, getAttribution, MapStyles } from '$lib/config/AppConfig';
 	import { imageUrlToBase64 } from '$lib/helper';
 	import type { StoryMapChapter, StoryMapConfig } from '$lib/types';
-	import { HEADER_HEIGHT_CONTEXT_KEY, type HeaderHeightStore } from '$stores';
+	import {
+		ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY,
+		createActiveStorymapChapterStore,
+		HEADER_HEIGHT_CONTEXT_KEY,
+		type HeaderHeightStore
+	} from '$stores';
 	import {
 		createStoryMapConfigStore,
 		StoryMap,
diff --git a/sites/geohub/src/stores/activeStorymapChapter.ts b/sites/geohub/src/stores/activeStorymapChapter.ts
new file mode 100644
index 0000000000..05800a46c5
--- /dev/null
+++ b/sites/geohub/src/stores/activeStorymapChapter.ts
@@ -0,0 +1,15 @@
+import type { StoryMapChapter } from '$lib/types';
+import { writable } from 'svelte/store';
+
+export const ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY = 'active-storymap-chapter-store';
+export type ActiveStorymapChapterStore = ReturnType<typeof createActiveStorymapChapterStore>;
+
+export function createActiveStorymapChapterStore() {
+	const { set, update, subscribe } = writable<StoryMapChapter | undefined>(undefined);
+
+	return {
+		subscribe,
+		update,
+		set
+	};
+}
diff --git a/sites/geohub/src/stores/index.ts b/sites/geohub/src/stores/index.ts
index fa8de43d6a..f7e78ca149 100644
--- a/sites/geohub/src/stores/index.ts
+++ b/sites/geohub/src/stores/index.ts
@@ -10,3 +10,4 @@ export * from './progressBar';
 export * from './editingLayer';
 export * from './editingMenuShown';
 export * from './sidebarWidth';
+export * from './activeStorymapChapter';