From bdc9ee0f61025d63f9f324025db6f379be834336 Mon Sep 17 00:00:00 2001
From: secondl1ght <secondl1ght@protonmail.com>
Date: Thu, 21 Dec 2023 20:10:15 -0700
Subject: [PATCH] refactor 404 handlers

---
 src/routes/community/[area]/+page.svelte | 68 +++++++++++++-----------
 src/routes/merchant/[id]/+page.svelte    |  8 +--
 src/routes/merchant/[id]/+page.ts        |  2 +-
 src/routes/tagger/[id]/+page.svelte      | 62 ++++++++++-----------
 src/routes/tagger/[id]/+page.ts          | 15 +++---
 5 files changed, 79 insertions(+), 76 deletions(-)

diff --git a/src/routes/community/[area]/+page.svelte b/src/routes/community/[area]/+page.svelte
index 0e8521a6..9768127f 100644
--- a/src/routes/community/[area]/+page.svelte
+++ b/src/routes/community/[area]/+page.svelte
@@ -3,7 +3,6 @@
 
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
 	import {
 		Footer,
 		Header,
@@ -851,9 +850,9 @@
 </script>
 
 <svelte:head>
-	<title>{$page.data.name} - BTC Map Community</title>
+	<title>{name ? name + ' - ' : ''}BTC Map Community</title>
 	<meta property="og:image" content="https://btcmap.org/images/og/communities.png" />
-	<meta property="twitter:title" content="{$page.data.name} - BTC Map Community" />
+	<meta property="twitter:title" content="{name ? name + ' - ' : ''}BTC Map Community" />
 	<meta property="twitter:image" content="https://btcmap.org/images/og/communities.png" />
 
 	{#if lightning && lightning.type === 'address'}
@@ -889,7 +888,7 @@
 						<div class="mx-auto h-32 w-32 animate-pulse rounded-full bg-link/50" />
 					{/if}
 					<h1 class="text-4xl font-semibold !leading-tight text-primary dark:text-white">
-						{name}
+						{name || 'BTC Map Community'}
 					</h1>
 					{#if org}
 						<OrgBadge {org} />
@@ -919,26 +918,28 @@
 					{:else}
 						<div class="mx-auto h-7 w-24 animate-pulse rounded bg-link/50" />
 					{/if}
-					<a
-						href={`/communities/map?community=${data.id}`}
-						class="inline-flex items-center justify-center text-xs text-link transition-colors hover:text-hover"
-						>View on community map <svg
-							class="ml-1 w-3"
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
+					{#if data.id}
+						<a
+							href={`/communities/map?community=${data.id}`}
+							class="inline-flex items-center justify-center text-xs text-link transition-colors hover:text-hover"
+							>View on community map <svg
+								class="ml-1 w-3"
+								width="16"
+								height="16"
+								viewBox="0 0 16 16"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M3 13L13 3M13 3H5.5M13 3V10.5"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg></a
 						>
-							<path
-								d="M3 13L13 3M13 3H5.5M13 3V10.5"
-								stroke="currentColor"
-								stroke-width="1.5"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg></a
-					>
+					{/if}
 				</div>
 
 				{#if dataInitialized}
@@ -980,7 +981,7 @@
 				<h3
 					class="rounded-t-3xl border border-b-0 border-statBorder p-5 text-center text-lg font-semibold text-primary dark:bg-white/10 dark:text-white md:text-left"
 				>
-					{name} Map
+					{name || 'BTC Map Community'} Map
 					<div class="flex items-center space-x-1 text-link">
 						{#if dataInitialized}
 							<div class="flex items-center space-x-1">
@@ -1079,7 +1080,7 @@
 					<h3
 						class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
 					>
-						{name} Supertaggers
+						{name || 'BTC Map Community'} Supertaggers
 					</h3>
 					<div bind:this={taggerDiv} class="hide-scroll max-h-[375px] overflow-scroll p-1">
 						{#if taggers && taggers.length}
@@ -1135,7 +1136,7 @@
 					<h3
 						class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
 					>
-						{name} Activity
+						{name || 'BTC Map Community'} Activity
 					</h3>
 
 					<div
@@ -1195,8 +1196,8 @@
 				<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
 					<div class="p-5 text-lg font-semibold text-primary dark:text-white">
 						<h3 class="mb-2 text-center md:text-left">
-							{name} Tickets
-							{#if !ticketError}
+							{name || 'BTC Map Community'} Tickets
+							{#if tickets && !ticketError}
 								<span class="text-base">({totalTickets})</span>
 							{/if}
 							<InfoTooltip
@@ -1212,12 +1213,15 @@
 									: type === 'Verify'
 										? 'rounded-b md:rounded-r md:rounded-bl-none'
 										: ''} {showType === type ? 'bg-link text-white' : ''} transition-colors"
-								on:click={() => (showType = type)}>{type}</button
+								on:click={() => (showType = type)}
+								disabled={!tickets || ticketError}
 							>
+								{type}
+							</button>
 						{/each}
 					</div>
 
-					{#if !ticketError}
+					{#if tickets && !ticketError}
 						{#if showType === 'Add'}
 							{#if add.length}
 								{#each add as ticket}
@@ -1258,7 +1262,7 @@
 							{/if}
 						{/if}
 
-						{#if tickets.length === 100}
+						{#if tickets?.length === 100}
 							<p
 								class="border-t border-statBorder p-5 text-center font-semibold text-primary dark:text-white"
 							>
@@ -1286,7 +1290,7 @@
 					<h3
 						class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
 					>
-						{name} Charts
+						{name || 'BTC Map Community'} Charts
 					</h3>
 					<div class="border-b border-statBorder p-5">
 						<div class="relative">
diff --git a/src/routes/merchant/[id]/+page.svelte b/src/routes/merchant/[id]/+page.svelte
index 5a02720e..932a6129 100644
--- a/src/routes/merchant/[id]/+page.svelte
+++ b/src/routes/merchant/[id]/+page.svelte
@@ -3,7 +3,6 @@
 
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
 	import {
 		Boost,
 		Footer,
@@ -373,12 +372,9 @@
 </script>
 
 <svelte:head>
-	<title>{$page.data.name ? $page.data.name + ' - ' : ''}BTC Map Merchant</title>
+	<title>{name ? name + ' - ' : ''}BTC Map Merchant</title>
 	<meta property="og:image" content="https://btcmap.org/images/og/merchant.png" />
-	<meta
-		property="twitter:title"
-		content="{$page.data.name ? $page.data.name + ' - ' : ''}BTC Map Merchant"
-	/>
+	<meta property="twitter:title" content="{name ? name + ' - ' : ''}BTC Map Merchant" />
 	<meta property="twitter:image" content="https://btcmap.org/images/og/merchant.png" />
 
 	{#if payment && payment.type === 'uri' && payment.url?.startsWith('lightning:')}
diff --git a/src/routes/merchant/[id]/+page.ts b/src/routes/merchant/[id]/+page.ts
index e60bac4b..e3b27c60 100644
--- a/src/routes/merchant/[id]/+page.ts
+++ b/src/routes/merchant/[id]/+page.ts
@@ -15,7 +15,7 @@ export async function load({ params }) {
 		if (data && data.id) {
 			return {
 				id: data.id,
-				name: data.osm_json.tags && data.osm_json.tags.name ? data.osm_json.tags.name : ''
+				name: data.osm_json.tags?.name
 			};
 		}
 	} catch (err) {
diff --git a/src/routes/tagger/[id]/+page.svelte b/src/routes/tagger/[id]/+page.svelte
index 6a0a36b0..c8ae2774 100644
--- a/src/routes/tagger/[id]/+page.svelte
+++ b/src/routes/tagger/[id]/+page.svelte
@@ -2,7 +2,7 @@
 	export let data;
 
 	import { browser } from '$app/environment';
-	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import {
 		Footer,
 		Header,
@@ -43,7 +43,6 @@
 		type ProfileLeaderboard
 	} from '$lib/types.js';
 	import { detectTheme, errToast } from '$lib/utils';
-	import { error } from '@sveltejs/kit';
 	import Chart from 'chart.js/auto';
 	import DOMPurify from 'dompurify';
 	import type { Map, TileLayer } from 'leaflet';
@@ -68,8 +67,9 @@
 
 		const userFound = $users.find((user) => user.id == data.user);
 		if (!userFound) {
-			errToast('Could not find user, please try again or contact BTC Map.');
-			error(404, 'User Not Found');
+			console.log('Could not find user, please try again or contact BTC Map.');
+			goto('/404');
+			return;
 		}
 		userCreated = userFound['created_at'];
 		supporter = Boolean(
@@ -523,9 +523,9 @@
 </script>
 
 <svelte:head>
-	<title>{$page.data.username} - BTC Map Supertagger</title>
+	<title>{username ? username + ' - ' : ''}BTC Map Supertagger</title>
 	<meta property="og:image" content="https://btcmap.org/images/og/supertagger.png" />
-	<meta property="twitter:title" content="{$page.data.username} - BTC Map Supertagger" />
+	<meta property="twitter:title" content="{username ? username + ' - ' : ''}BTC Map Supertagger" />
 	<meta property="twitter:image" content="https://btcmap.org/images/og/supertagger.png" />
 
 	{#if lightning}
@@ -562,30 +562,32 @@
 
 				<div>
 					<h1 class="text-4xl font-semibold !leading-tight text-primary dark:text-white">
-						{username}
+						{username || 'BTC Map Supertagger'}
 					</h1>
-					<a
-						href="https://www.openstreetmap.org/user/{username}"
-						target="_blank"
-						rel="noreferrer"
-						class="mx-auto mt-1 flex w-24 items-center justify-center text-xs text-link transition-colors hover:text-hover"
-						>OSM Profile <svg
-							class="ml-1 w-3"
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
+					{#if username}
+						<a
+							href="https://www.openstreetmap.org/user/{username}"
+							target="_blank"
+							rel="noreferrer"
+							class="mx-auto mt-1 flex w-24 items-center justify-center text-xs text-link transition-colors hover:text-hover"
+							>OSM Profile <svg
+								class="ml-1 w-3"
+								width="16"
+								height="16"
+								viewBox="0 0 16 16"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M3 13L13 3M13 3H5.5M13 3V10.5"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg></a
 						>
-							<path
-								d="M3 13L13 3M13 3H5.5M13 3V10.5"
-								stroke="currentColor"
-								stroke-width="1.5"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg></a
-					>
+					{/if}
 				</div>
 
 				<!-- svelte-ignore a11y-missing-content -->
@@ -670,7 +672,7 @@
 					<h3
 						class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
 					>
-						{username}'s Activity
+						{username || 'BTC Map Supertagger'}'s Activity
 					</h3>
 
 					<div
@@ -729,7 +731,7 @@
 				<h3
 					class="rounded-t-3xl border border-b-0 border-statBorder p-5 text-center text-lg font-semibold text-primary dark:bg-white/10 dark:text-white md:text-left"
 				>
-					{username}'s Map
+					{username || 'BTC Map Supertagger'}'s Map
 				</h3>
 
 				<div class="relative mb-2">
diff --git a/src/routes/tagger/[id]/+page.ts b/src/routes/tagger/[id]/+page.ts
index cf4f5ee2..ba560ff3 100644
--- a/src/routes/tagger/[id]/+page.ts
+++ b/src/routes/tagger/[id]/+page.ts
@@ -7,14 +7,15 @@ axiosRetry(axios, { retries: 3, retryDelay: axiosRetry.exponentialDelay });
 // @ts-expect-error
 export async function load({ params }) {
 	const { id } = params;
+	try {
+		const response = await axios.get(`https://api.btcmap.org/v2/users/${id}`);
 
-	const response = await axios.get(`https://api.btcmap.org/v2/users/${id}`);
+		const data = response.data;
 
-	const data = response.data;
-
-	if (data) {
-		return { user: data.id, username: data['osm_json']['display_name'] };
+		if (data) {
+			return { user: data.id, username: data['osm_json']['display_name'] };
+		}
+	} catch (err) {
+		error(404, 'User Not Found');
 	}
-
-	error(404, 'User Not Found');
 }