Every connection now has distince SubmitFunction for adding/removing connections

src/routes/settings/connections/+page.svelte

@@ -13,78 +13,85 @@
     export let data: PageServerData
     let connections = data.userConnections
 
-    const submitCredentials: SubmitFunction = async ({ formData, action, cancel }) => {
-        switch (action.search) {
-            case '?/authenticateJellyfin':
-                const { serverUrl, username, password } = Object.fromEntries(formData)
+    const authenticateJellyfin: SubmitFunction = ({ formData, cancel }) => {
+        const { serverUrl, username, password } = Object.fromEntries(formData)
 
-                if (!(serverUrl && username && password)) {
-                    $newestAlert = ['caution', 'All fields must be filled out']
-                    return cancel()
-                }
-                try {
-                    formData.set('serverUrl', new URL(serverUrl.toString()).origin)
-                } catch {
-                    $newestAlert = ['caution', 'Server URL is invalid']
-                    return cancel()
-                }
-
-                const deviceId = getDeviceUUID()
-                formData.append('deviceId', deviceId)
-                break
-            case '?/youtubeMusicLogin':
-                const code = await youtubeAuthenication()
-                formData.append('code', code)
-                break
-            case '?/deleteConnection':
-                break
-            default:
-                console.log(action.search)
-                cancel()
+        if (!(serverUrl && username && password)) {
+            $newestAlert = ['caution', 'All fields must be filled out']
+            return cancel()
+        }
+        try {
+            formData.set('serverUrl', new URL(serverUrl.toString()).origin)
+        } catch {
+            $newestAlert = ['caution', 'Server URL is invalid']
+            return cancel()
         }
 
-        return async ({ result }) => {
+        const deviceId = getDeviceUUID()
+        formData.append('deviceId', deviceId)
+
+        return ({ result }) => {
             if (result.type === 'failure') {
                 return ($newestAlert = ['warning', result.data?.message])
             } else if (result.type === 'success') {
-                if (result.data?.newConnection) {
-                    const newConnection: Connection = result.data.newConnection
-                    connections = [newConnection, ...connections]
+                const newConnection: Connection = result.data!.newConnection
+                connections = [...connections, newConnection]
 
-                    newConnectionModal = null
-                    return ($newestAlert = ['success', `Added ${Services[newConnection.service.type].displayName}`])
-                } else if (result.data?.deletedConnectionId) {
-                    const id = result.data.deletedConnectionId
-                    const indexToDelete = connections.findIndex((connection) => connection.id === id)
-                    const serviceType = connections[indexToDelete].service.type
+                newConnectionModal = null
+                return ($newestAlert = ['success', `Added ${Services[newConnection.service.type].displayName}`])
+            }
+        }
+    }
 
-                    connections.splice(indexToDelete, 1)
-                    connections = connections
+    const authenticateYouTube: SubmitFunction = async ({ formData, cancel }) => {
+        const googleLoginProcess = (): Promise<string> => {
+            return new Promise((resolve) => {
+                // @ts-ignore (google variable is a global variable imported by html script tag)
+                const client = google.accounts.oauth2.initCodeClient({
+                    client_id: PUBLIC_YOUTUBE_API_CLIENT_ID,
+                    scope: 'https://www.googleapis.com/auth/youtube',
+                    ux_mode: 'popup',
+                    callback: (response: any) => {
+                        resolve(response.code)
+                    },
+                })
+                client.requestCode()
+            })
+        }
 
-                    return ($newestAlert = ['success', `Deleted ${Services[serviceType].displayName}`])
-                }
-            } else if (result.type === 'redirect') {
-                window.open(result.location, '_blank')
+        const code = await googleLoginProcess()
+        if (!code) cancel()
+        formData.append('code', code)
+
+        return ({ result }) => {
+            if (result.type === 'failure') {
+                return ($newestAlert = ['warning', result.data?.message])
+            } else if (result.type === 'success') {
+                const newConnection: Connection = result.data!.newConnection
+                connections = [...connections, newConnection]
+                return ($newestAlert = ['success', 'Added Youtube Music'])
+            }
+        }
+    }
+
+    const deleteConnection: SubmitFunction = () => {
+        return ({ result }) => {
+            if (result.type === 'failure') {
+                return ($newestAlert = ['warning', result.data?.message])
+            } else if (result.type === 'success') {
+                const id = result.data!.deletedConnectionId
+                const indexToDelete = connections.findIndex((connection) => connection.id === id)
+                const serviceType = connections[indexToDelete].service.type
+
+                connections.splice(indexToDelete, 1)
+                connections = connections
+
+                return ($newestAlert = ['success', `Deleted ${Services[serviceType].displayName}`])
             }
         }
     }
 
     let newConnectionModal: ComponentType<SvelteComponent<{ submitFunction: SubmitFunction }>> | null = null
-
-    const youtubeAuthenication = async (): Promise<string> => {
-        return new Promise((resolve) => {
-            // @ts-ignore (google variable is a global variable imported by html script tag)
-            const client = google.accounts.oauth2.initCodeClient({
-                client_id: PUBLIC_YOUTUBE_API_CLIENT_ID,
-                scope: 'https://www.googleapis.com/auth/youtube',
-                ux_mode: 'popup',
-                callback: (response: any) => {
-                    resolve(response.code)
-                },
-            })
-            client.requestCode()
-        })
-    }
 </script>
 
 <main>
@@ -94,7 +101,7 @@
             <button class="add-connection-button h-14 rounded-md" on:click={() => (newConnectionModal = JellyfinAuthBox)}>
                 <img src={Services.jellyfin.icon} alt="{Services.jellyfin.displayName} icon" class="aspect-square h-full p-2" />
             </button>
-            <form method="post" action="?/youtubeMusicLogin" use:enhance={submitCredentials}>
+            <form method="post" action="?/youtubeMusicLogin" use:enhance={authenticateYouTube}>
                 <button class="add-connection-button h-14 rounded-md">
                     <img src={Services['youtube-music'].icon} alt="{Services['youtube-music'].displayName} icon" class="aspect-square h-full p-2" />
                 </button>
@@ -103,11 +110,11 @@
     </section>
     <div class="grid gap-8">
         {#each connections as connection}
-            <ConnectionProfile {connection} submitFunction={submitCredentials} />
+            <ConnectionProfile {connection} submitFunction={deleteConnection} />
         {/each}
     </div>
     {#if newConnectionModal !== null}
-        <svelte:component this={newConnectionModal} submitFunction={submitCredentials} on:close={() => (newConnectionModal = null)} />
+        <svelte:component this={newConnectionModal} submitFunction={authenticateJellyfin} on:close={() => (newConnectionModal = null)} />
     {/if}
 </main>