Merge pull request #69 from s1lvax/feature/copy-public-url

Added a feature to copy the user's URL
s1lvax · Oct 22, 2024 · c9694d9 · c9694d9
2 parents 059cf3c + f38045c
commit c9694d9
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 44 deletions.
diff --git a/src/lib/components/MyProfile/UserSettings.svelte b/src/lib/components/MyProfile/UserSettings.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { Button } from '$lib/components/ui/button';
+	import { copyToClipboard } from '$lib/utils/copyToClipboard';
+	import { confirmDelete } from '$lib/utils/confirmDelete';
+	import { ArrowUpRight, Trash2, CircleChevronDown, Github, Copy } from 'lucide-svelte';
+
+	import { enhance } from '$app/forms';
+	import type { PageData } from '../../../routes/profile/$types';
+
+	export let data: PageData;
+</script>
+
+<div class="flex w-full justify-end space-x-2">
+	<div class="flex space-x-2">
+		<form action="?/updateOpenToCollaborating" method="POST" use:enhance>
+			<div class="flex flex-row items-center">
+				<Button type="submit" variant="ghost">
+					<Label for="open-to-collaborating" class="mr-2 hover:cursor-pointer"
+						>Open to Collaborating</Label
+					>
+					<!-- The switch is disabled so that the user is forced to click the button to trigger the function -->
+					<Switch
+						id="open-to-collaborating"
+						bind:checked={data.userData.openToCollaborating}
+						name="openToCollaborating"
+						includeInput
+						disabled
+					/>
+				</Button>
+			</div>
+		</form>
+	</div>
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger>
+			<Button variant="default">
+				<CircleChevronDown class="mr-2 h-4 w-4 text-sm" /> Your Profile
+			</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content>
+			<DropdownMenu.Group>
+				<DropdownMenu.Label>Profile Settings</DropdownMenu.Label>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item>
+					<a
+						href="/{data.userData.username}"
+						target="_blank"
+						class="flex flex-row items-center space-x-2"
+					>
+						<ArrowUpRight class="text-sm" /> View Public Profile
+					</a>
+				</DropdownMenu.Item>
+				<DropdownMenu.Item
+					on:click={() => copyToClipboard(`${window.location.origin}/${data.userData.username}`)}
+				>
+					<div class="flex flex-row items-center space-x-2 hover:cursor-pointer">
+						<Copy class="text-sm" /> Copy Profile's URL
+					</div>
+				</DropdownMenu.Item>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item>
+					<form action="?/deleteAccount&id={data.userId}" method="POST" use:enhance>
+						<button
+							type="submit"
+							class="flex flex-row items-center space-x-2 text-red-500"
+							on:click={confirmDelete}
+						>
+							<Trash2 class="text-sm" /> Delete Account
+						</button>
+					</form>
+				</DropdownMenu.Item>
+			</DropdownMenu.Group>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+</div>
diff --git a/src/routes/profile/+page.server.ts b/src/routes/profile/+page.server.ts
@@ -218,7 +218,6 @@ export const actions: Actions = {
 		throw redirect(303, '/');
 	},
 	updateOpenToCollaborating: async () => {
-		console.log('Updating openToCollaborating status');
 		//delete user
 		if (user) {
 			try {

diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
-	import { Button } from '$lib/components/ui/button';
 	import type { PageData } from './$types';
-	import { Separator } from '$lib/components/ui/separator/index.js';
 
 	import LinkForm from '$lib/components/MyProfile/LinkForm.svelte';
 	import UserStats from '$lib/components/MyProfile/UserStats.svelte';
 	import UserLinks from '$lib/components/MyProfile/UserLinks.svelte';
 	import SkillsForm from '$lib/components/MyProfile/SkillsForm.svelte';
 	import UserSkills from '$lib/components/MyProfile/UserSkills.svelte';
-	import { ArrowUpRight, Trash2 } from 'lucide-svelte';
-	import { enhance } from '$app/forms';
-	import { confirmDelete } from '$lib/utils/confirmDelete';
+
 	import { getGithubData } from '$lib/utils/getGithubData';
 	import type { GithubData } from '$lib/types/GithubData';
 	import { onMount } from 'svelte';
 	import type { PrivateProfileData } from '$lib/types/PrivateProfileData';
-
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { Switch } from '$lib/components/ui/switch/index.js';
+	import UserSettings from '$lib/components/MyProfile/UserSettings.svelte';
 
 	let githubData: GithubData | null = null;
 	let privateProfileData: PrivateProfileData | null = null;
@@ -46,41 +40,7 @@
 
 <div class="flex min-h-screen w-full flex-col">
 	<main class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-		<div class="flex w-full justify-end space-x-2">
-			<div class="flex space-x-2">
-				<form action="?/updateOpenToCollaborating" method="POST" use:enhance>
-					<div class="flex flex-row items-center">
-						<Button type="submit" variant="ghost">
-							<Label for="open-to-collaborating" class="mr-2 hover:cursor-pointer"
-								>Open to Collaborating</Label
-							>
-							<!-- The switch is disabled so that the user is forced to click the button to trigger the function -->
-							<Switch
-								id="open-to-collaborating"
-								bind:checked={data.userData.openToCollaborating}
-								name="openToCollaborating"
-								includeInput
-								disabled
-							/>
-						</Button>
-					</div>
-				</form>
-			</div>
-			<Separator orientation="vertical" />
-			<div class="flex space-x-2">
-				<form action="?/deleteAccount&id={data.userId}" method="POST" use:enhance>
-					<Button variant="destructive" type="submit" on:click={confirmDelete}
-						><Trash2 /> Delete Account</Button
-					>
-				</form>
-			</div>
-			<div class="flex space-x-2">
-				<Button variant="outline" href="/{data.userData.username}"
-					>View Public Profile <ArrowUpRight /></Button
-				>
-			</div>
-		</div>
-
+		<UserSettings {data} />
 		<UserStats {privateProfileData} />
 
 		<div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">