Skip to content

Commit

Permalink
Merge pull request #115 from s1lvax/fix/change-integrations-layout
Browse files Browse the repository at this point in the history
changed layout
  • Loading branch information
s1lvax authored Oct 31, 2024
2 parents a9e035c + e0d6d7a commit b188889
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 45 deletions.
19 changes: 0 additions & 19 deletions src/lib/components/MyProfile/UserSettings.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { Button } from '$lib/components/ui/button';
import { copyToClipboard } from '$lib/utils/copyToClipboard';
import { confirmDelete } from '$lib/utils/confirmDelete';
import { AudioLines } from 'lucide-svelte';
import { enhance } from '$app/forms';
import type { PageData } from '../../../routes/profile/$types';
import { IconBrandGithub, IconTrash, IconCopy } from '@tabler/icons-svelte';
Expand All @@ -20,24 +19,6 @@
</h1>
<div class="mt-6">
<dl class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2">
<div class="px-4 py-6 sm:col-span-1 sm:px-0">
<dt class="text-lg">Spotify Integration</dt>
<dd class="mt-2">
{#if data.spotifyToken}
<form action="?/unlinkSpotify" method="POST" use:enhance>
<Button variant="destructive" type="submit" class="flex items-center">
<AudioLines class="mr-2" />
<span>Unlink Spotify</span>
</Button>
</form>
{:else}
<Button href="/api/spotify/login">
<AudioLines class="mr-2 text-green-700" />
<span>Link Spotify</span>
</Button>
{/if}
</dd>
</div>
<div class="px-4 py-6 sm:col-span-1 sm:px-0">
<dt class="text-lg">Collaboration Status</dt>
<dd class="mt-2">
Expand Down
12 changes: 12 additions & 0 deletions src/routes/profile/integrations/+page.server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { redirect } from '@sveltejs/kit';
import type { User } from '@prisma/client';
import { getGitHubUserIdFromImageUrl } from '$lib/utils/getGithubIDFromImage';
import { createRecentActivity } from '$lib/utils/createRecentActivity';
import { unlinkSpotify } from '$lib/utils/spotify/unlinkSpotify';

// Define the user variable with a possible null
let user: User | null = null;
Expand Down Expand Up @@ -89,5 +90,16 @@ export const actions: Actions = {
console.error(err);
return fail(500, { message: 'Something went wrong.' });
}
},
unlinkSpotify: async () => {
if (user) {
try {
// delete
unlinkSpotify(user.githubId);
} catch (error) {
console.error(error);
throw Error('Failed to delete user');
}
}
}
};
65 changes: 51 additions & 14 deletions src/routes/profile/integrations/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import Button from '$lib/components/ui/button/button.svelte';
import FormCardHeader from '$lib/components/MyProfile/FormCardHeader.svelte';
import LinkForm from '$lib/components/MyProfile/LinkForm.svelte';
import UserLinks from '$lib/components/MyProfile/UserLinks.svelte';
import ImportFromGithub from '$lib/components/MyProfile/ImportFromGithub.svelte';
import type { PageData } from '../$types';
import { AudioLines } from 'lucide-svelte';
import { enhance } from '$app/forms';
import MusicPlayer from '$lib/components/Shared/MusicPlayer.svelte';
export let data: PageData;
</script>
Expand All @@ -15,17 +19,50 @@
Integrations
</h1>

<Card.Root class="xl:col-span-2">
<FormCardHeader
description="The links visible on your profile. You can drag links around to modify the order"
title="Links"
>
<div class="flex flex-row items-stretch gap-4">
<LinkForm data={data.form} linksLength={data.links.length} links={data.links} />
<ImportFromGithub {data} />
</div>
</FormCardHeader>
<Card.Content>
<UserLinks links={data.links} />
</Card.Content>
</Card.Root>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
<div class="custom-links">
<Card.Root class="max-h-[300px] overflow-y-auto xl:col-span-2">
<FormCardHeader
description="The links visible on your profile. You can drag links around to modify the order"
title="Links"
>
<div class="flex flex-row items-stretch gap-4">
<LinkForm data={data.form} linksLength={data.links.length} links={data.links} />
<ImportFromGithub {data} />
</div>
</FormCardHeader>
<Card.Content>
<UserLinks links={data.links} />
</Card.Content>
</Card.Root>
</div>
<div class="spotify">
<Card.Root class="max-h-[300px] overflow-y-auto xl:col-span-2">
<Card.Header>
<Card.Title>Spotify</Card.Title>
<Card.Description>
Connect your Spotify account to display your currently playing song
</Card.Description>
</Card.Header>
<Card.Content>
{#if data.spotifyToken}
<div class="flex flex-col space-y-4">
<form action="?/unlinkSpotify" method="POST" use:enhance>
<Button variant="destructive" type="submit" class="flex items-center">
<AudioLines class="mr-2" />
<span>Unlink Spotify</span>
</Button>
</form>

<MusicPlayer githubUsername={data.userData.username} />
</div>
{:else}
<Button href="/api/spotify/login">
<AudioLines class="mr-2 text-green-700" />
<span>Link Spotify</span>
</Button>
{/if}
</Card.Content>
</Card.Root>
</div>
</div>
12 changes: 0 additions & 12 deletions src/routes/profile/settings/+page.server.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { Actions, PageServerLoad } from './$types';
import { deleteUser } from '$lib/utils/deleteUser';
import { unlinkSpotify } from '$lib/utils/spotify/unlinkSpotify';
import { updateOpenToCollaborating } from '$lib/utils/updateOpenToCollaborating';
import { fail } from 'sveltekit-superforms';
import { getGitHubUserIdFromImageUrl } from '$lib/utils/getGithubIDFromImage';
Expand Down Expand Up @@ -58,16 +57,5 @@ export const actions: Actions = {
throw Error('Failed to delete user');
}
}
},
unlinkSpotify: async () => {
if (user) {
try {
// delete
unlinkSpotify(user.githubId);
} catch (error) {
console.error(error);
throw Error('Failed to delete user');
}
}
}
};

0 comments on commit b188889

Please sign in to comment.