From f4512e1151ca92b0e51c42e28f04d38b901b9eb5 Mon Sep 17 00:00:00 2001
From: Brett Slaski <brett@thatconference.com>
Date: Mon, 9 Oct 2023 15:55:56 -0500
Subject: [PATCH] fix: routes to non-existend events threw 500. They respond
 appropriately now

---
 package.json                                           |  2 +-
 .../(that conference online)/[event]/[date]/+layout.js |  6 +++++-
 .../_components/EventTicket.svelte                     | 10 +++++-----
 .../_components/OnlineHero.svelte                      |  8 ++++----
 src/routes/(that conferences)/+layout.js               |  3 +++
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index e212ed7..ba3c759 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "thatconference.com",
-	"version": "5.0.9",
+	"version": "5.0.10",
 	"description": "THATConference.com website",
 	"main": "index.js",
 	"type": "module",
diff --git a/src/routes/(that conference online)/[event]/[date]/+layout.js b/src/routes/(that conference online)/[event]/[date]/+layout.js
index bf730bf..2295300 100644
--- a/src/routes/(that conference online)/[event]/[date]/+layout.js	
+++ b/src/routes/(that conference online)/[event]/[date]/+layout.js	
@@ -1,3 +1,4 @@
+import { error } from '@sveltejs/kit';
 import eventsApi from '$dataSources/api.that.tech/events/queries';
 
 export async function load({ params, fetch }) {
@@ -6,8 +7,11 @@ export async function load({ params, fetch }) {
 
 	const { queryEventWithSpeakersBySlug } = eventsApi(fetch);
 
+	const eventRecord = await queryEventWithSpeakersBySlug(eventSlug);
+	if (!eventRecord) throw error(404, 'Event not found');
+
 	return {
 		eventSlug,
-		event: await queryEventWithSpeakersBySlug(eventSlug)
+		event: eventRecord
 	};
 }
diff --git a/src/routes/(that conference online)/_components/EventTicket.svelte b/src/routes/(that conference online)/_components/EventTicket.svelte
index c88b3d4..7c26931 100644
--- a/src/routes/(that conference online)/_components/EventTicket.svelte	
+++ b/src/routes/(that conference online)/_components/EventTicket.svelte	
@@ -63,10 +63,10 @@
 						</div>
 					</div>
 					<div class="mt-4 flex items-baseline text-6xl font-extrabold">
-						{#if eventTickets['CLAIMABLE_TICKET'].price === 0}
+						{#if eventTickets['CLAIMABLE_TICKET']?.price === 0}
 							Free
 						{:else}
-							${eventTickets['CLAIMABLE_TICKET'].price}
+							${eventTickets['CLAIMABLE_TICKET']?.price ?? 15}
 							<span class="ml-1 text-2xl font-medium text-gray-500"> USD </span>
 						{/if}
 					</div>
@@ -107,7 +107,7 @@
 
 					<StandardButton
 						on:click={() =>
-							dispatch('claim-ticket', { product: { id: eventTickets['CLAIMABLE_TICKET'].id } })}>
+							dispatch('claim-ticket', { product: { id: eventTickets['CLAIMABLE_TICKET']?.id } })}>
 						Claim Your Ticket
 					</StandardButton>
 				</div>
@@ -133,7 +133,7 @@
 					<p class="text-lg text-gray-500">
 						{dayjs(event.startDate).format('dddd, MMMM D, YYYY - h:mm A z')}
 					</p>
-					<p class="mt-6  text-lg text-gray-500">
+					<p class="mt-6 text-lg text-gray-500">
 						{eventTickets['VIRTUAL_CAMPER'].description}
 					</p>
 				</div>
@@ -175,7 +175,7 @@
 			</div>
 		</div>
 
-		<div class="relative mt-12  lg:mt-24">
+		<div class="relative mt-12 lg:mt-24">
 			<div class="flex flex-col">
 				<h3 class="text-2xl font-extrabold tracking-tight text-thatBlue-800 sm:text-3xl">
 					Built to support the practitioners
diff --git a/src/routes/(that conference online)/_components/OnlineHero.svelte b/src/routes/(that conference online)/_components/OnlineHero.svelte
index 655e701..70fe48c 100644
--- a/src/routes/(that conference online)/_components/OnlineHero.svelte	
+++ b/src/routes/(that conference online)/_components/OnlineHero.svelte	
@@ -43,7 +43,7 @@
 							</h1>
 
 							<h2
-								class="mt-1 text-4xl font-extrabold tracking-tight text-white sm:mt-2 sm:text-6xl lg:mt-3 xl:text-6xl ">
+								class="mt-1 text-4xl font-extrabold tracking-tight text-white sm:mt-2 sm:text-6xl lg:mt-3 xl:text-6xl">
 								{dayjs(event.startDate).format('MMMM D, YYYY')}
 							</h2>
 						</div>
@@ -60,15 +60,15 @@
 				<div class="col-span-3 mt-6 flex flex-col items-center space-y-6 font-extrabold">
 					<div>
 						<div class="transform transition duration-500 ease-in-out hover:scale-105">
-							<a href={`/activities/${event.slug}`}>
+							<a href={`https://that.us/activities/${event.slug}`}>
 								<span
 									class="rounded-md bg-thatOrange-400 px-4 py-2 text-lg uppercase leading-5 tracking-wide text-white transition duration-500 ease-in-out hover:bg-thatOrange-500"
-									>View Event Schedule</span>
+									>View Event Schedule on THAT.us</span>
 							</a>
 						</div>
 					</div>
 
-					<p class="text-lg lowercase italic tracking-tight text-white ">
+					<p class="text-lg lowercase italic tracking-tight text-white">
 						all dates/times are represented in your time zone.
 					</p>
 				</div>
diff --git a/src/routes/(that conferences)/+layout.js b/src/routes/(that conferences)/+layout.js
index 5c484b9..15101fb 100644
--- a/src/routes/(that conferences)/+layout.js	
+++ b/src/routes/(that conferences)/+layout.js	
@@ -1,3 +1,4 @@
+import { error } from '@sveltejs/kit';
 import eventsApi from '$dataSources/api.that.tech/events/queries';
 
 export const trailingSlash = 'always';
@@ -18,6 +19,8 @@ export async function load({ params, url }) {
 	const { queryEventWithSpeakersBySlug } = eventsApi();
 	const event = await queryEventWithSpeakersBySlug(eventSlug);
 
+	if (!event) throw error(404, 'Event not found');
+
 	return {
 		eventName,
 		event