Abandonar Grupo [1]

my-app/src/lib/client/alerts.ts

@@ -1,7 +1,26 @@
+import { goto, invalidateAll } from '$app/navigation';
+import { routes } from '$lib';
+
 export async function confirmArchiveGroup(group: Group) {
 	const action = group.is_archived ? 'desarchivar' : 'archivar';
-	const message = `¿Querés ${action} el grupo ${group.name}?`;
+	const message = `¿Querés ${action} el grupo "${group.name}"?`;
 	if (!confirm(message)) return;
-	await fetch(`/api/groups?groupId=${group.id}&archive=${!group.is_archived}`, { method: 'PUT' });
+	await fetch(`${routes.apiGroups}?groupId=${group.id}&archive=${!group.is_archived}`, {
+		method: 'PUT'
+	});
 	location.reload();
 }
+
+export async function confirmLeaveGroup(group: Group) {
+	const message = `¿Estás seguro que querés dejar el grupo "${group.name}"?`;
+	if (!confirm(message)) return;
+	let response = await fetch(`${routes.apiMembers}?groupId=${group.id}`, { method: 'DELETE' });
+	if (!response.ok) {
+		let body = await response.json();
+		let { detail } = JSON.parse(body.message);
+		alert('No se pudo dejar el grupo. ' + detail);
+		return;
+	}
+	await invalidateAll();
+	goto(routes.groups);
+}

my-app/src/lib/index.ts

@@ -19,6 +19,7 @@ export const ICONS = [
 	'danger',
 	'loadbar-doc',
 	'add',
+	'log-out',
 	'check-o',
 	'arrow-left'
 ] as const;

my-app/src/lib/server/api.ts

@@ -75,7 +75,8 @@ export const groupService = {
 	listAllMemberBalances: (id: Id, cookies: Cookies) =>
 		get(`group/${id}/balance`, getAuthHeader(cookies)),
 	addMember: (id: Id, user_identifier: Id | string, cookies: Cookies) =>
-		post(`group/${id}/member`, { user_identifier }, getAuthHeader(cookies))
+		post(`group/${id}/member`, { user_identifier }, getAuthHeader(cookies)),
+	leaveGroup: (id: Id, cookies: Cookies) => del(`group/${id}/member`, getAuthHeader(cookies))
 };
 export const spendingService = {
 	list: (groupId: Id, cookies: Cookies) => get(`group/${groupId}/spending`, getAuthHeader(cookies)),

my-app/src/routes/api/members/+server.ts

@@ -2,7 +2,13 @@ import { groupService } from '$lib/server/api';
 import type { RequestHandler } from './$types';
 
 export const GET: RequestHandler = async ({ url, cookies }) => {
-	const groupId = url.searchParams.get('groupId') || 0;
-	const body = await groupService.listAllMembers(+groupId, cookies);
+	const groupId = +url.searchParams.get('groupId') || 0;
+	const body = await groupService.listAllMembers(groupId, cookies);
+	return new Response(JSON.stringify(body));
+};
+
+export const DELETE: RequestHandler = async ({ url, cookies }) => {
+	const groupId = +url.searchParams.get('groupId') || 0;
+	const body = await groupService.leaveGroup(groupId, cookies);
 	return new Response(JSON.stringify(body));
 };

my-app/src/routes/groups/[id=integer]/members/+page.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { routes } from '$lib';
+	import { confirmLeaveGroup } from '$lib/client/alerts';
 	import Avatar from '$lib/components/Avatar.svelte';
 	import CssIcon from '$lib/components/CssIcon.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 	const pageTitle = `Miembros`;
+
+	const isOwner = data?.group?.owner_id === data?.userId;
 </script>
 
 <svelte:head>
@@ -25,8 +28,20 @@
 </header>
 
 {#each data.members as user}
-	<article>
-		<Avatar seed={user.email} size={40} />
-		{user.email}
+	{@const isActiveUser = data?.userId === user.id}
+	<article class="grid ai-center">
+		<span class="centered">
+			<Avatar seed={user.email} size={40} />
+			{user.email}
+		</span>
+
+		{#if !isOwner && isActiveUser}
+			<span class="t-right">
+				<button class="outline" on:click={() => confirmLeaveGroup(data?.group)}>
+					<CssIcon name="log-out" />
+					Abandonar grupo
+				</button>
+			</span>
+		{/if}
 	</article>
 {/each}