refactor: shared profile now on superforms

running-backlog.md

@@ -1,6 +1,5 @@
 # Migration to thatconference.com
 
-- Validate Slug
 - fix other profiles
 - forms lib upgraded
 - event hero image

src/_dataSources/api.that.tech/me/mutations.js

@@ -32,7 +32,10 @@ export default (fetch) => {
 		return client
 			.mutation({ mutation: MUTATION_UPDATE_SHARED_PROFILE, variables })
 			.then(({ data, errors }) => {
-				if (errors) log({ errors, tag: 'MUTATION_CHECK_IN_USER' });
+				if (errors) {
+					log({ errors, tag: 'MUTATION_CHECK_IN_USER' });
+					throw new Error('An error occurred while updating your shared profile.');
+				}
 
 				let results;
 

src/routes/(admin my)/my/profiles/shared/+page.server.js

@@ -1,7 +1,9 @@
 import { fail } from '@sveltejs/kit';
 import { superValidate } from 'sveltekit-superforms/server';
+import { redirect, setFlash } from 'sveltekit-flash-message/server';
 
 import meQueryApi from '$dataSources/api.that.tech/me/queries';
+import meMutationsApi from '$dataSources/api.that.tech/me/mutations';
 import sharedProfileSchema from '$lib/formSchemas/sharedProfile';
 
 export async function load({ fetch }) {
@@ -17,16 +19,34 @@ export async function load({ fetch }) {
 }
 
 export const actions = {
-	default: async ({ request }) => {
-		const form = await superValidate(request, sharedProfileSchema);
-		console.log('POST', form);
+	default: async (event) => {
+		const { updateSharedProfile } = meMutationsApi(event.fetch);
+
+		const form = await superValidate(event, sharedProfileSchema);
 
 		if (!form.valid) {
 			return fail(400, {
 				form
 			});
 		}
 
-		return { form };
+		try {
+			await updateSharedProfile(form.data);
+
+			const successMessage = {
+				type: 'success',
+				message: `Your shared profile contact information has been updated.`
+			};
+
+			setFlash(successMessage, event);
+			return { form };
+		} catch (error) {
+			const errorMessage = {
+				type: 'error',
+				message: `Whoops!!! ${error.message}`
+			};
+
+			throw redirect(errorMessage, event);
+		}
 	}
 };

src/routes/(admin my)/my/profiles/shared/+page.svelte

@@ -9,23 +9,8 @@
 	import { Warning } from '$elements/svgs';
 
 	import SharedProfileForm from './sharedProfileForm.svelte';
-	// import meMutationsApi from '$dataSources/api.that.tech/me/mutations';
 
 	const { isEmpty } = lodash;
-	// const { updateSharedProfile } = meMutationsApi();
-
-	// async function handleUpdate({ detail: { values, setSubmitting } }) {
-	// 	setSubmitting(true);
-
-	// 	try {
-	// 		await updateSharedProfile(values);
-	// 	} catch (e) {
-	// 		//todo what do we do here?
-	// 		console.error(e);
-	// 	}
-
-	// 	setSubmitting(false);
-	// }
 
 	const metaTags = ((title = 'My Shared Profile - THAT') => ({
 		title,
@@ -34,7 +19,7 @@
 			description: 'Create or update your shared THAT profile.',
 			openGraph: {
 				type: 'website',
-				url: `https://that.us/my/profiles/shared/`
+				url: `https://thatconference.com/my/profiles/shared/`
 			},
 			nofollow: true,
 			noindex: true

src/routes/(admin my)/my/profiles/shared/sharedProfileForm.svelte

@@ -4,18 +4,16 @@
 	import { getContext } from 'svelte';
 
 	import { superForm } from 'sveltekit-superforms/client';
-	import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
 	import * as flashModule from 'sveltekit-flash-message/client';
+	import { AlertOctagon } from 'lucide-svelte';
 	import Select from 'svelte-select';
 
-	import { Shell } from '$elements/buttons';
+	import { DisabledShell, Shell } from '$elements/buttons';
 	import sharedProfileFormSchema from '$lib/formSchemas/sharedProfile';
 
 	const { countryCode } = getContext('DROP_DOWN_KEY_VALUE_PAIRS');
 
-	let countryCodeValue = countryCode?.options?.find(({ value }) => value === sForm.country);
-
-	const { form, enhance, constraints } = superForm(sForm, {
+	const { form, enhance, constraints, errors, allErrors } = superForm(sForm, {
 		dataType: 'json',
 		validators: sharedProfileFormSchema,
 		syncFlashMessage: false,
@@ -25,6 +23,7 @@
 		}
 	});
 
+	let countryCodeSelect = countryCode?.options?.find(({ value }) => value === $form.country);
 	let formattedPhoneNumber = '';
 	function formatPhoneNumber(event) {
 		// Remove all non-numeric characters from the input
@@ -82,14 +81,16 @@
 						<span
 							class="absolute left-0 top-0 block h-2 w-2 -translate-x-4 -translate-y-4 transform rounded-full bg-red-400" />
 					</div>
-					<div class="mt-1 rounded-md border shadow-sm">
-						<input
-							bind:value={$form.firstName}
-							{...$constraints.firstName}
-							name="firstName"
-							type="text"
-							class="form-input block w-full" />
-					</div>
+					<input
+						bind:value={$form.firstName}
+						{...$constraints.firstName}
+						name="firstName"
+						type="text"
+						class="form-input mt-4 block w-full rounded-md shadow-sm" />
+
+					{#if $errors.firstName}
+						<small>{$errors.firstName}</small>
+					{/if}
 				</div>
 
 				<div class="sm:col-span-3">
@@ -100,13 +101,16 @@
 						<span
 							class="absolute left-0 top-0 block h-2 w-2 -translate-x-4 -translate-y-4 transform rounded-full bg-red-400" />
 					</div>
-					<div class="mt-1 rounded-md border shadow-sm">
-						<input
-							bind:value={$form.lastName}
-							{...$constraints.lastName}
-							name="lastName"
-							class="form-input block w-full" />
-					</div>
+
+					<input
+						bind:value={$form.lastName}
+						{...$constraints.lastName}
+						name="lastName"
+						class="form-input mt-4 block w-full rounded-md shadow-sm" />
+
+					{#if $errors.lastName}
+						<small>{$errors.lastName}</small>
+					{/if}
 				</div>
 
 				<div class="sm:col-span-6">
@@ -117,14 +121,16 @@
 						<span
 							class="absolute left-0 top-0 block h-2 w-2 -translate-x-4 -translate-y-4 transform rounded-full bg-red-400" />
 					</div>
-					<div class="mt-1 rounded-md border shadow-sm">
-						<input
-							bind:value={$form.email}
-							{...$constraints.email}
-							name="email"
-							type="email"
-							class="form-input block w-full" />
-					</div>
+					<input
+						bind:value={$form.email}
+						{...$constraints.email}
+						name="email"
+						type="email"
+						class="form-input mt-4 block w-full rounded-md shadow-sm" />
+
+					{#if $errors.email}
+						<small>{$errors.email}</small>
+					{/if}
 				</div>
 
 				<div class="relative py-6 sm:col-span-6">
@@ -138,42 +144,53 @@
 
 				<div class="sm:col-span-3">
 					<label for="city" class="block text-sm font-medium leading-5 text-gray-700"> City </label>
-					<div class="mt-1 rounded-md border shadow-sm">
-						<input
-							bind:value={$form.city}
-							{...$constraints.city}
-							name="city"
-							type="text"
-							class="form-input block w-full" />
-					</div>
+
+					<input
+						bind:value={$form.city}
+						{...$constraints.city}
+						name="city"
+						type="text"
+						class="form-input mt-4 block w-full rounded-md shadow-sm" />
+
+					{#if $errors.city}
+						<small>{$errors.city}</small>
+					{/if}
 				</div>
 
 				<div class="sm:col-span-3">
 					<label for="state" class="block text-sm font-medium leading-5 text-gray-700">
 						State
 					</label>
-					<div class="mt-1 rounded-md border shadow-sm">
-						<input
-							bind:value={$form.state}
-							{...$constraints.state}
-							name="state"
-							type="text"
-							class="form-input block w-full" />
-					</div>
+
+					<input
+						bind:value={$form.state}
+						{...$constraints.state}
+						name="state"
+						type="text"
+						class="form-input mt-4 block w-full rounded-md shadow-sm" />
+
+					{#if $errors.state}
+						<small>{$errors.state}</small>
+					{/if}
 				</div>
 
 				<div class="sm:col-span-3">
 					<label for="state" class="block text-sm font-medium leading-5 text-gray-700">
 						Country
 					</label>
-					<div class="mt-1 rounded-md border shadow-sm">
+
+					<div class="mt-4">
 						<Select
 							inputAttributes={{
 								name: 'country'
 							}}
-							inputStyles="form-multiselect hover:border-gray-700"
+							inputStyles="form-multiselect block w-full rounded-md shadow-sm"
 							items={countryCode.options}
-							bind:value={countryCodeValue} />
+							bind:value={countryCodeSelect}
+							bind:justValue={$form.country} />
+						{#if $errors.country}
+							<small>{$errors.country}</small>
+						{/if}
 					</div>
 				</div>
 
@@ -189,39 +206,57 @@
 						name="phone"
 						id="phone"
 						placeholder="+1 (123) 456-7890"
-						class="form-imput mt-1 block w-full rounded-md shadow-sm" />
+						class="form-imput mt-4 block w-full rounded-md shadow-sm" />
+
+					{#if $errors.phone}
+						<small>{$errors.phone}</small>
+					{/if}
 				</div>
 
 				<div class="sm:col-span-3">
 					<label for="company" class="block text-sm font-medium leading-5 text-gray-700">
 						Company
 					</label>
-					<div class="mt-1 rounded-md border shadow-sm">
-						<input
-							bind:value={$form.company}
-							{...$constraints.company}
-							name="company"
-							type="text"
-							class="form-input block w-full" />
-					</div>
+
+					<input
+						bind:value={$form.company}
+						{...$constraints.company}
+						name="company"
+						type="text"
+						class="form-imput mt-4 block w-full rounded-md shadow-sm" />
+
+					{#if $errors.company}
+						<small>{$errors.company}</small>
+					{/if}
 				</div>
 			</div>
 		</div>
 
-		<div class="mt-8 border-t border-gray-200 pt-5">
-			<div class="flex justify-end space-x-4">
-				<div class="flex">
-					<Shell>
-						<button type="submit" class="w-full px-8 py-2 text-sm font-medium leading-5">
-							<span>Update Shared Profile</span>
-						</button>
-					</Shell>
+		<div class="mt-24 border-t border-gray-400 pt-8">
+			{#if $allErrors.length}
+				<div class="flex flex-col space-y-3 text-red-500">
+					{#each $allErrors as error}
+						<div class="flex items-center space-x-2">
+							<AlertOctagon />
+							<p class="font-medium leading-5">{error.messages}</p>
+						</div>
+					{/each}
 				</div>
+			{/if}
+
+			<div class="flex justify-end space-x-4">
+				{#if $allErrors.length > 0}
+					<DisabledShell>
+						<div class="px-8 py-2 font-medium">Save Profile</div>
+					</DisabledShell>
+				{:else}
+					<button type="submit">
+						<Shell>
+							<div class="px-8 py-2 font-medium">Save Profile</div>
+						</Shell>
+					</button>
+				{/if}
 			</div>
 		</div>
 	</div>
 </form>
-
-<div class="py-12">
-	<SuperDebug data={$form} />
-</div>