From 2ffa3510ee989c7342ba73bc3df695ce6dccfb20 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Mon, 24 Jul 2023 11:35:27 +0100
Subject: [PATCH] Add sorting to Quick Links

---
 src/lib/islands/quick-link-island.svelte          |  4 ++--
 src/lib/islands/quick-link-set-island.svelte      | 14 +++++++-------
 src/lib/overlays/welcome.svelte                   |  9 +++------
 src/lib/stores/{quick-links.js => quick-links.ts} |  8 ++++----
 src/routes/{+layout.js => +layout.ts}             |  0
 5 files changed, 16 insertions(+), 19 deletions(-)
 rename src/lib/stores/{quick-links.js => quick-links.ts} (70%)
 rename src/routes/{+layout.js => +layout.ts} (100%)

diff --git a/src/lib/islands/quick-link-island.svelte b/src/lib/islands/quick-link-island.svelte
index e6358c4..44679ce 100644
--- a/src/lib/islands/quick-link-island.svelte
+++ b/src/lib/islands/quick-link-island.svelte
@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
   import Island from '$lib/islands/island.svelte';
-  import { ql } from '$lib/stores/quick-links.js';
+  import { ql } from '$lib/stores/quick-links';
   export let variables = {
     title: 'Quick Links'
   };
diff --git a/src/lib/islands/quick-link-set-island.svelte b/src/lib/islands/quick-link-set-island.svelte
index 4da98f8..09a4218 100644
--- a/src/lib/islands/quick-link-set-island.svelte
+++ b/src/lib/islands/quick-link-set-island.svelte
@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
   import Island from '$lib/islands/island.svelte';
-  import { ql } from '$lib/stores/quick-links.js';
+  import { ql } from '$lib/stores/quick-links';
   export let variables = {
     title: 'Quick Links'
   };
 
-  let qlData = [];
+  let qlData: string[] = [];
   $: {
     qlData = $ql;
     console.log(qlData);
@@ -13,16 +13,16 @@
 
   let saveButton = 'Save';
 
-  async function timeout(ms) {
+  async function timeout(ms: number): Promise<any> {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
   async function saveQl() {
     // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
     const inputs = document.getElementsByClassName('qlInput');
-    let inputLinks = [];
+    let inputLinks: string[] = [];
     for (let item of inputs) {
-      let text = item?.value;
+      let text = (<HTMLInputElement>item)?.value;
       if (text !== '') {
         inputLinks.push(text);
       }
@@ -46,7 +46,7 @@
     ql.set(updatedQl);
   }
 
-  function handleClick(event) {
+  function handleClick(event: any) {
     // Handle the click event here
     console.log('Island Clicked');
     // You can access the `variables` passed to the Island component here if needed
diff --git a/src/lib/overlays/welcome.svelte b/src/lib/overlays/welcome.svelte
index f780aa4..aafd8f2 100644
--- a/src/lib/overlays/welcome.svelte
+++ b/src/lib/overlays/welcome.svelte
@@ -1,12 +1,9 @@
-<script>
+<script lang="ts">
   import { welcome } from '$lib/stores/welcome';
   import { fade } from 'svelte/transition';
   import { version } from '$lib/stores/version';
 
-  const variables = {
-    title: 'Welcome to OwlBoard'
-  };
-  let pageNum = 0;
+  let pageNum: number = 0;
 
   function pageUp() {
     pageNum++;
@@ -22,7 +19,7 @@
     welcome.set(version);
   }
 
-  const pageText = [
+  const pageText: string[] = [
     '<h3>A brand new look</h3>' +
       "<p>OwlBoard has a brand new look, making it even faster for you to access the data - you won't have to register again.</p>" +
       "<p><strong>Live station data</strong> is still available right from the homepage.  If you are signed up, you'll get improved data from the <strong>Staff board</strong>.  Bus and Ferry services are still included</p>" +
diff --git a/src/lib/stores/quick-links.js b/src/lib/stores/quick-links.ts
similarity index 70%
rename from src/lib/stores/quick-links.js
rename to src/lib/stores/quick-links.ts
index 23ae01f..47ff599 100644
--- a/src/lib/stores/quick-links.js
+++ b/src/lib/stores/quick-links.ts
@@ -1,10 +1,10 @@
-import { writable } from 'svelte/store';
+import { writable, type Writable } from 'svelte/store';
 import { browser } from '$app/environment';
 
 export const ql = writable(fromLocalStorage('ql', []));
 toLocalStorage(ql, 'ql');
 
-function fromLocalStorage(storageKey, fallback) {
+function fromLocalStorage(storageKey: string, fallback: string[]): string[] {
   if (browser) {
     const storedValue = localStorage.getItem(storageKey);
     if (storedValue !== 'undefined' && storedValue !== null) {
@@ -14,10 +14,10 @@ function fromLocalStorage(storageKey, fallback) {
   return fallback;
 }
 
-function toLocalStorage(store, storageKey) {
+function toLocalStorage(store: Writable<string[]>, storageKey: string) {
   if (browser) {
     store.subscribe((value) => {
-      let storageValue = typeof value === 'object' ? JSON.stringify(value) : value;
+      let storageValue = typeof value === 'object' ? JSON.stringify(value.sort()) : value;
 
       localStorage.setItem(storageKey, storageValue);
     });
diff --git a/src/routes/+layout.js b/src/routes/+layout.ts
similarity index 100%
rename from src/routes/+layout.js
rename to src/routes/+layout.ts