delete friend confirmation modal

lilith · Sep 23, 2023 · fc9b81b · fc9b81b
1 parent ddc3305
commit fc9b81b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/src/routes/circle/+page.svelte b/src/routes/circle/+page.svelte
@@ -41,6 +41,13 @@
 		showClickToTextLink = true;
 	}
 
+	let friendToDelete:
+		| {
+				connectionId: number;
+				name: string;
+		  }
+		| undefined;
+	$: showDeleteFriendModal = !!friendToDelete;
 	async function deleteFriend(connectionId: number) {
 		const response = await writeReq('/db', {
 			type: 'deleteFriend',
@@ -83,6 +90,31 @@
 			>
 		</div>
 	</Modal>
+	<Modal bind:showModal={showDeleteFriendModal}>
+		<h2 slot="header" style="margin-top: 0px;">Unfriend</h2>
+
+		<p>Are you sure that you'd like to unfriend {friendToDelete?.name}?</p>
+
+		<div slot="close" let:dialog>
+			<button
+				on:click={async () => {
+					if (friendToDelete) await deleteFriend(friendToDelete.connectionId);
+					friendToDelete = undefined;
+					dialog.close();
+				}}
+			>
+				Yes
+			</button>
+			<button
+				on:click={() => {
+					friendToDelete = undefined;
+					dialog.close();
+				}}
+			>
+				No
+			</button>
+		</div>
+	</Modal>
 	<NavBar pageName="Circle" />
 	<p class="subtitle">Your Circle</p>
 	<p>Names that are crossed out indicate friends who have turned off their notifications.</p>
@@ -107,9 +139,8 @@
 				{/each}
 			</div>
 			<div class="btn-wrapper delete w-full">
-				<button
-					class="delete-btn"
-					on:click|preventDefault={() => deleteFriend(household.connectionId)}><hr /></button
+				<button class="delete-btn" on:click|preventDefault={() => (friendToDelete = household)}
+					><hr /></button
 				>
 			</div>
 		</div>

diff --git a/src/routes/household/+page.server.ts b/src/routes/household/+page.server.ts
@@ -4,6 +4,7 @@ import prisma from '$lib/prisma';
 
 export const load = (async ({ parent, depends }) => {
 	depends('data:householdId');
+	const { user } = await parent();
 	const householdInfo: {
 		householdId: number | null;
 		name: string;
@@ -25,7 +26,6 @@ export const load = (async ({ parent, depends }) => {
 		adults: []
 	};
 
-	const { user } = await parent();
 	const householdId = user.householdId;
 	if (householdId) {
 		const household = await prisma.household.findUnique({

diff --git a/src/routes/household/+page.svelte b/src/routes/household/+page.svelte
@@ -7,6 +7,7 @@
 	import { invalidate, invalidateAll, goto } from '$app/navigation';
 	import NavBar from '../NavBar.svelte';
 	import { writeReq } from '$lib/utils';
+	import { fullName } from '$lib/format';
 	import { DateTime } from 'luxon';
 
 	enum ModalReason {
@@ -170,8 +171,10 @@
 							"Are you sure that you'd like to disconnect from this household? The household's info will be saved, but you won't be able to access it until another adult in the household sends you an invite.";
 					} else {
 						modalText.heading = 'Disconnect Adult';
-						modalText.content =
-							"Are you sure that you'd like to disconnect this adult from this household?";
+						modalText.content = `Are you sure that you'd like to disconnect ${fullName(
+							adults[ind].firstName,
+							adults[ind].lastName
+						)} from this household?`;
 					}
 				}
 				break;
@@ -315,6 +318,9 @@
 					{#each householdInvites[0].household.children as kid}
 						<p style="font-size: 18px;">{kid.firstName} {kid.lastName ?? ''}</p>
 					{/each}
+					{#if !householdInvites[0].household.children.length}
+						<p>None added yet</p>
+					{/if}
 				</div>
 
 				<div slot="close" let:dialog>