fix: fix changelog dialog fetching update forever

by force fetching update when new version detected

src/routes/(components)/layout/ChangelogDialog.svelte

@@ -7,15 +7,17 @@
 	import { onMount } from 'svelte';
 	import LoaderCircle from 'virtual:icons/lucide/loader-circle';
 	import ReloadIcon from 'virtual:icons/lucide/refresh-ccw';
-	import { needRefresh, updateDataLossDialog } from './PWAFunctions.svelte';
+	import { checkForUpdates, needRefresh, updateDataLossDialog } from './PWAFunctions.svelte';
 
 	let open = $state(false);
+	let checkingForUpdate = $state(false);
 	let dialogText = $state<string>();
-	let latestRelease = $state<{ tag_name: string; body: string }>();
+	let releases = $state<{ tag_name: string; body: string }[]>([]);
 
 	onMount(async () => {
-		const response = await fetch('https://api.github.com/repos/WhyAsh5114/MyFit/releases/latest');
-		latestRelease = await response.json();
+		const response = await fetch('https://api.github.com/repos/WhyAsh5114/MyFit/releases');
+		releases = await response.json();
+		const latestRelease = releases[0];
 
 		const ls = window.localStorage;
 		const changelogShownOf = ls.getItem('changelogShownOf');
@@ -24,13 +26,24 @@
 			changelogShownOf.localeCompare(latestRelease!.tag_name, undefined, { numeric: true }) === -1
 		) {
 			open = true;
-			loadChangelog();
+			checkingForUpdate = true;
+			await checkForUpdates!();
+			checkingForUpdate = false;
+			loadChangelog(changelogShownOf);
 		}
 		ls.setItem('changelogShownOf', latestRelease!.tag_name);
 	});
 
-	async function loadChangelog() {
-		dialogText = DOMPurify.sanitize(await marked.parse(latestRelease!.body));
+	async function loadChangelog(lastRelease: string) {
+		const notShownReleases = releases.filter(
+			(release) => release.tag_name.localeCompare(lastRelease, undefined, { numeric: true }) === 1
+		);
+
+		dialogText = '';
+		for (const release of notShownReleases) {
+			dialogText += DOMPurify.sanitize(await marked.parse(release.body));
+			dialogText += '<hr>';
+		}
 	}
 </script>
 
@@ -41,11 +54,20 @@
 				{@html dialogText}
 			</article>
 		</ScrollArea>
-		<Button disabled={!$needRefresh} class="gap-2" onclick={() => (updateDataLossDialog.open = true)}>
-			{#if !$needRefresh}
+		<Button
+			disabled={checkingForUpdate}
+			class="gap-2"
+			onclick={() => {
+				if ($needRefresh) updateDataLossDialog.open = true;
+				else open = false;
+			}}
+		>
+			{#if checkingForUpdate}
 				Fetching update <LoaderCircle class="animate-spin" />
-			{:else}
+			{:else if $needRefresh}
 				Update & reload <ReloadIcon />
+			{:else}
+				Already at the latest version 🎉
 			{/if}
 		</Button>
 	{:else}

src/routes/(components)/layout/PWAFunctions.svelte.ts

@@ -1,24 +1,27 @@
 import { browser } from '$app/environment';
 import { useRegisterSW } from 'virtual:pwa-register/svelte';
 
+let checkForUpdates: (() => Promise<void>) | null = null;
+
 const sw = browser
 	? useRegisterSW({
 			onRegisteredSW(swUrl, r) {
-				if (r) {
-					setInterval(async () => {
-						if (!navigator || r.installing) return;
-						if ('connection' in navigator && !navigator.onLine) return;
+				checkForUpdates = async () => {
+					if (!r) return;
+					if (!navigator || r.installing) return;
+					if ('connection' in navigator && !navigator.onLine) return;
 
-						const resp = await fetch(swUrl, {
+					const resp = await fetch(swUrl, {
+						cache: 'no-store',
+						headers: {
 							cache: 'no-store',
-							headers: {
-								cache: 'no-store',
-								'cache-control': 'no-cache'
-							}
-						});
-						if (resp.status === 200) await r.update();
-					}, 3600000);
-				}
+							'cache-control': 'no-cache'
+						}
+					});
+					if (resp.status === 200) await r.update();
+				};
+
+				if (r) setInterval(checkForUpdates, 3600000);
 				console.log(`SW Registered: ${r}`);
 			},
 			onRegisterError(error) {
@@ -31,3 +34,5 @@ export const needRefresh = sw?.needRefresh;
 export const updateServiceWorker = sw?.updateServiceWorker;
 export const offlineReady = sw?.offlineReady;
 export const updateDataLossDialog = $state({ open: false });
+
+export { checkForUpdates };