🏗️ Combine AuthorizeButton and LoginButton

src/lib/components/Authorize.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { user } from '$lib/stores'
+	import { authorize } from '$lib/spotify'
+	import { setCookie } from '$lib/cookie'
+
+	export let firebase = false
+	export let spotify = false
+
+	let url: string
+
+	onMount(() => {
+		if (firebase) url = '/login?redirect=' + encodeURIComponent(location.pathname)
+	})
+</script>
+
+{#if firebase && !$user}
+	{#if $user === undefined}
+		<!-- loading state -->
+	{:else if $user == null}
+		<a href={url} class="btn-primary">Login</a>
+		<p class="mt-4">Log in to use our tools</p>
+	{/if}
+{:else if spotify}
+	<button
+		class="btn-primary"
+		on:click={() => {
+			setCookie('directed_from_path', location.pathname)
+			authorize('user-library-read playlist-modify-public')
+		}}>Authorize</button
+	>
+	<p class="mt-4">In order to use our tools, we need limited access to your Spotify account.</p>
+{:else}
+	<slot />
+{/if}

src/routes/(tools)/public-liked-songs/+page.svelte

@@ -1,57 +1,62 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import { publicLikedSongs } from '$lib/firebase/functions'
-	import { user } from '$lib/stores'
-	import AuthorizeButton from '$lib/components/AuthorizeButton.svelte'
-	import LoginButton from '$lib/components/LoginButton.svelte'
+	import Authorize from '$lib/components/Authorize.svelte'
 	import Spinner from '$lib/components/spinner.svelte'
 	import SpotifyEmbed from '$lib/components/spotify-embed.svelte'
 	import ErrorMsg from '$lib/components/ErrorMsg.svelte'
 
-	let createResponse: ReturnType<(typeof publicLikedSongs)['create']> | undefined
-	let isPopulated = false
+	let playlistId: Promise<string>
+	let isPopulated: boolean | undefined = false
+	let error: unknown
 
 	onMount(() => {
 		const searchParams = new URLSearchParams(location.search.slice(1))
 		const code = searchParams.get('code')
 		if (code) {
-			createAndPopulate(code)
+			playlistId = create(code)
 			history.replaceState({}, document.title, location.pathname)
 		}
 	})
 
-	async function createAndPopulate(code: string) {
-		createResponse = publicLikedSongs.create({ code, origin: location.origin })
-		const {
-			data: { userId }
-		} = await createResponse
-		await publicLikedSongs.populate({ userId, origin: location.origin })
-		isPopulated = true
+	async function create(code: string) {
+		const { data } = await publicLikedSongs.create({ code, origin: location.origin })
+		populate(data.userId)
+		return data.playlistId
+	}
+
+	async function populate(userId: string) {
+		try {
+			await publicLikedSongs.populate({ userId: userId, origin: location.origin })
+			isPopulated = true
+		} catch (err) {
+			isPopulated = undefined
+			error = err
+		}
 	}
 </script>
 
 <div class="my-4 text-center">
-	{#if createResponse}
-		{#await createResponse}
+	<Authorize firebase spotify={playlistId === undefined}>
+		{#await playlistId}
 			<Spinner />
-		{:then { data: { playlistId } }}
+		{:then playlistId}
 			<SpotifyEmbed
 				title="public-liked-songs"
 				type="playlist"
 				id={playlistId}
 				className="mx-auto"
 			/>
-			{#if isPopulated}
+			{#if isPopulated === true}
 				<p>Playlist synced!</p>
-			{:else}
+			{:else if isPopulated === false}
 				<p class="loading">Populating playlist</p>
 			{/if}
 		{:catch error}
 			<ErrorMsg {error} />
 		{/await}
-	{:else if $user}
-		<AuthorizeButton />
-	{:else}
-		<LoginButton />
-	{/if}
+		{#if error}
+			<ErrorMsg {error} />
+		{/if}
+	</Authorize>
 </div>