diff --git a/src/app/(home)/players/[id]/user.tsx b/src/app/(home)/players/[id]/user.tsx index e6b3085..c8d1caa 100644 --- a/src/app/(home)/players/[id]/user.tsx +++ b/src/app/(home)/players/[id]/user.tsx @@ -1,11 +1,5 @@ 'use client' -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from '@/components/ui/dropdown-menu' import { Tooltip, TooltipContent, @@ -32,6 +26,7 @@ import { } from '@/components/ui/select' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { cn } from '@/lib/utils' +import { auth } from '@/server/auth' import { RANKED_CHANNEL, VANILLA_CHANNEL } from '@/shared/constants' import { api } from '@/trpc/react' import { @@ -40,15 +35,16 @@ import { BarChart3, ChevronDown, ChevronUp, - EllipsisVertical, Filter, IceCreamCone, ShieldHalf, Star, Trophy, + Twitch, UserIcon, + Youtube, } from 'lucide-react' -import { ExternalIcon } from 'next/dist/client/components/react-dev-overlay/ui/icons/external' +import { useSession } from 'next-auth/react' import Link from 'next/link' import { useParams } from 'next/navigation' import { isNonNullish } from 'remeda' @@ -206,20 +202,6 @@ export function UserInfo() { - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* Stream widget */} - {/* */} - {/* */} - {/* */} - {/**/}

@@ -258,6 +240,38 @@ export function UserInfo() { )} + {discord_user.twitch_url && ( + + + + Twitch + + + )} + {discord_user.youtube_url && ( + + + + YouTube + + + )}

( + socialLinks.twitch_url + ) + const [youtubeUrl, setYoutubeUrl] = useState( + socialLinks.youtube_url + ) + + const { mutate: updateSocialLinks, isPending } = + api.profile.updateSocialLinks.useMutation({ + onSuccess: () => { + toast.success('Social links updated successfully') + }, + }) + + const handleSave = () => { + updateSocialLinks({ + twitch_url: twitchUrl, + youtube_url: youtubeUrl, + }) + } + + return ( +
+
+

+ Profile Settings +

+

+ Manage your profile settings and social links +

+
+ +
+
+

Stream Widget

+

+ Use this widget to display your stats on your stream +

+ {userId && ( + + Open Stream Widget + + )} +
+ +
{ + e.preventDefault() + handleSave() + }} + className='rounded-lg border bg-white p-6 dark:bg-zinc-800/20' + > +

Social Links

+
+
+ +
+ + setTwitchUrl(e.target.value || null)} + placeholder='https://twitch.tv/yourusername' + /> +
+
+
+ +
+ + setYoutubeUrl(e.target.value || null)} + placeholder='https://youtube.com/c/yourchannel' + className='w-full rounded-md border border-gray-300 p-2 dark:border-zinc-700 dark:bg-zinc-900' + /> +
+
+
+
+ +
+
+
+
+ ) +} diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx index ebcc003..93b02c7 100644 --- a/src/app/_components/header.tsx +++ b/src/app/_components/header.tsx @@ -13,7 +13,7 @@ import { ThemeToggle } from 'fumadocs-ui/components/layout/theme-toggle' import type { HomeLayoutProps } from 'fumadocs-ui/layouts/home' import type { LinkItemType } from 'fumadocs-ui/layouts/links' import { replaceOrDefault } from 'fumadocs-ui/layouts/shared' -import { LogIn, LogOut, Tv, User } from 'lucide-react' +import { LogIn, LogOut, Settings, Tv, User } from 'lucide-react' import { signIn, signOut, useSession } from 'next-auth/react' import Link from 'next/link' import { Fragment } from 'react' @@ -106,6 +106,15 @@ export function Header({ Profile + + + + Settings + + { - return await discord_service.get_user_by_id(input.user_id) + const discordUser = await discord_service.get_user_by_id(input.user_id) + + // Get social media links from the database + const userData = await db.query.users.findFirst({ + where: eq(users.discord_id, input.user_id), + columns: { + twitch_url: true, + youtube_url: true, + }, + }) + + return { + ...discordUser, + twitch_url: userData?.twitch_url || null, + youtube_url: userData?.youtube_url || null, + } }), }) diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts index 1cb6380..cba7aae 100644 --- a/src/server/db/schema.ts +++ b/src/server/db/schema.ts @@ -63,6 +63,8 @@ export const users = pgTable('user', (d) => ({ .default(sql`CURRENT_TIMESTAMP`), image: d.varchar({ length: 255 }), discord_id: d.varchar({ length: 255 }), + twitch_url: d.varchar({ length: 255 }), + youtube_url: d.varchar({ length: 255 }), role: d.varchar({ length: 255 }).notNull().default('user'), }))