100 lines
3.9 KiB
TypeScript
100 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import axios from "axios";
|
|
import * as React from 'react';
|
|
import { ApiKey, TwitchConnection, User } from "@prisma/client";
|
|
import { useEffect, useState } from "react";
|
|
import { useSession } from "next-auth/react";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
const SettingsPage = () => {
|
|
const { data: session, status } = useSession();
|
|
const [previousUsername, setPreviousUsername] = useState<string>()
|
|
const [userId, setUserId] = useState<string>()
|
|
const [loading, setLoading] = useState<boolean>(true)
|
|
|
|
useEffect(() => {
|
|
if (status !== "authenticated" || previousUsername == session.user?.name) {
|
|
return
|
|
}
|
|
|
|
setPreviousUsername(session.user?.name as string)
|
|
if (session.user?.name) {
|
|
const fetchData = async () => {
|
|
var connection: User = (await axios.get("/api/account")).data
|
|
setUserId(connection.id)
|
|
setLoading(false)
|
|
}
|
|
|
|
fetchData().catch(console.error)
|
|
}
|
|
}, [session])
|
|
|
|
const [twitchUser, setTwitchUser] = useState<TwitchConnection | null>(null)
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
var connection: TwitchConnection = (await axios.get("/api/settings/connections/twitch")).data
|
|
setTwitchUser(connection)
|
|
}
|
|
|
|
fetchData().catch(console.error);
|
|
}, [])
|
|
|
|
const OnTwitchConnectionDelete = async () => {
|
|
try {
|
|
await axios.post("/api/settings/connections/twitch/delete")
|
|
setTwitchUser(null)
|
|
} catch (error) {
|
|
console.log("ERROR", error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="text-2xl text-center pt-[50px]">Connections</div>
|
|
<div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
|
|
<div>
|
|
<div className="px-10 py-6 rounded-md bg-purple-500 overflow-hidden wrap">
|
|
<div className={cn("hidden", !loading && "inline-block w-5/6")}>
|
|
<div className="inline-block">
|
|
<Avatar>
|
|
<AvatarImage src="https://cdn2.iconfinder.com/data/icons/social-aquicons/512/Twitch.png" alt="twitch" />
|
|
<AvatarFallback></AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
<div className="inline-block ml-5">
|
|
<div className="inline-block text-lg">Twitch</div>
|
|
<div className={cn("hidden", twitchUser == null && "text-s flex")}>
|
|
<Link href={(process.env.NEXT_PUBLIC_TWITCH_OAUTH_URL as string) + userId}>Connect your Twitch account!</Link>
|
|
</div>
|
|
<div className={cn("hidden", twitchUser != null && "text-s flex")}>
|
|
<p>{twitchUser?.broadcasterId}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={cn("hidden", !loading && "inline-block")}>
|
|
<button onClick={OnTwitchConnectionDelete} className={cn("hidden", twitchUser != null && "flex")}>
|
|
<Avatar>
|
|
<AvatarImage src="https://upload.wikimedia.org/wikipedia/en/b/ba/Red_x.svg" alt="delete" />
|
|
<AvatarFallback></AvatarFallback>
|
|
</Avatar>
|
|
</button>
|
|
</div>
|
|
<Skeleton className={cn("visible rounded-full flex items-center bg-transparent", !loading && "hidden")}>
|
|
<Skeleton className="h-12 w-12 rounded-full" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="pl-[10px] h-5 w-[100px]" />
|
|
<Skeleton className="pl-[10px] h-4 w-[200px]" />
|
|
</div>
|
|
</Skeleton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SettingsPage; |