Shared with tab

backend/server/adventures/views.py

@@ -402,6 +402,18 @@ class CollectionViewSet(viewsets.ModelViewSet):
 
         return Response(serializer.data)
     
+    # make an action to retreive all adventures that are shared with the user
+    @action(detail=False, methods=['get'])
+    def shared(self, request):
+        if not request.user.is_authenticated:
+            return Response({"error": "User is not authenticated"}, status=400)
+        queryset = Collection.objects.filter(
+            shared_with=request.user
+        )
+        queryset = self.apply_sorting(queryset)
+        serializer = self.get_serializer(queryset, many=True)
+        return Response(serializer.data)
+    
     # Adds a new user to the shared_with field of an adventure
     @action(detail=True, methods=['post'], url_path='share/(?P<uuid>[^/.]+)')
     def share(self, request, pk=None, uuid=None):

frontend/src/lib/components/Avatar.svelte

@@ -32,6 +32,7 @@
 		<li><button on:click={() => goto('/profile')}>Profile</button></li>
 		<li><button on:click={() => goto('/adventures')}>My Adventures</button></li>
 		<li><button on:click={() => goto('/activities')}>My Activities</button></li>
+		<li><button on:click={() => goto('/shared')}>Shared With Me</button></li>
 		<li><button on:click={() => goto('/settings')}>User Settings</button></li>
 		<form method="post">
 			<li><button formaction="/?/logout">Logout</button></li>

frontend/src/lib/components/CollectionCard.svelte

@@ -131,7 +131,7 @@
 						tabindex="0"
 						class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
 					>
-						{#if type != 'link'}
+						{#if type != 'link' && type != 'viewonly'}
 							<button
 								class="btn btn-neutral mb-2"
 								on:click={() => goto(`/collections/${collection.id}`)}
@@ -162,6 +162,13 @@
 								><TrashCan class="w-6 h-6" />Delete</button
 							>
 						{/if}
+						{#if type == 'viewonly'}
+							<button
+								class="btn btn-neutral mb-2"
+								on:click={() => goto(`/collections/${collection.id}`)}
+								><Launch class="w-5 h-5 mr-1" />Open Details</button
+							>
+						{/if}
 					</ul>
 				</div>
 			{/if}

frontend/src/routes/shared/+page.server.ts

@@ -0,0 +1,26 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		let res = await fetch(`${serverEndpoint}/api/collections/shared/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!res.ok) {
+			return redirect(302, '/login');
+		} else {
+			return {
+				props: {
+					collections: await res.json()
+				}
+			};
+		}
+	}
+}) satisfies PageServerLoad;

frontend/src/routes/shared/+page.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import CollectionCard from '$lib/components/CollectionCard.svelte';
+	import type { Collection } from '$lib/types';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	console.log(data);
+	let collections: Collection[] = data.props.collections;
+</script>
+
+{#if collections.length > 0}
+	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+		{#each collections as collection}
+			<CollectionCard type="viewonly" {collection} />
+		{/each}
+	</div>
+{:else}
+	<p class="text-center font-semibold text-xl mt-6">
+		No collections found that are shared with you.
+		{#if data.user && !data.user?.public_profile}
+			<p>In order to allow users to share with you, you need your profile set to public.</p>
+			<button class="btn btn-neutral mt-4" on:click={() => goto('/settings')}>Go to Settings</button
+			>
+		{/if}
+	</p>
+{/if}