From 6f4329cefa7c8ce57dbef3024bd037add24119b3 Mon Sep 17 00:00:00 2001
From: Ben Lopata <benlopata@gmail.com>
Date: Fri, 18 Oct 2024 10:07:37 -0500
Subject: [PATCH] Update discord login.

---
 .../settings/IntegrationsSettings.tsx         | 73 +++++++++++--------
 1 file changed, 44 insertions(+), 29 deletions(-)

diff --git a/www/components/settings/IntegrationsSettings.tsx b/www/components/settings/IntegrationsSettings.tsx
index 8d7f622..9f35c62 100644
--- a/www/components/settings/IntegrationsSettings.tsx
+++ b/www/components/settings/IntegrationsSettings.tsx
@@ -1,21 +1,20 @@
-"use client";
+'use client';
 
-import { useState, useEffect } from "react";
-import { FaDiscord } from "react-icons/fa";
-import { createClient } from "@/utils/supabase/client";
+import { useState, useEffect } from 'react';
+import { FaDiscord } from 'react-icons/fa';
+import { createClient } from '@/utils/supabase/client';
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
 
 interface User {
   id: string;
   email: string;
-  // Add other user properties as needed
 }
 
 interface IntegrationsSettingsProps {
@@ -24,39 +23,49 @@ interface IntegrationsSettingsProps {
 
 export function IntegrationsSettings({ user }: IntegrationsSettingsProps) {
   const [isDiscordConnected, setIsDiscordConnected] = useState(false);
+  const [discordTag, setDiscordTag] = useState<string | null>(null);
   const supabase = createClient();
 
   useEffect(() => {
-    // Check if Discord is connected
-    // This is a placeholder - you'll need to implement the actual check
-    const checkDiscordConnection = async () => {
-      // Example: const { data, error } = await supabase.from('profiles').select('discord_connected').eq('id', user.id).single();
-      // setIsDiscordConnected(data?.discord_connected || false);
-    };
-
     checkDiscordConnection();
   }, [user.id]);
 
+  const checkDiscordConnection = async () => {
+    const {
+      data: { user: supabaseUser },
+    } = await supabase.auth.getUser();
+
+    if (supabaseUser?.app_metadata?.provider === 'discord') {
+      setIsDiscordConnected(true);
+      setDiscordTag(supabaseUser.user_metadata?.full_name || null);
+    } else {
+      setIsDiscordConnected(false);
+      setDiscordTag(null);
+    }
+  };
+
   const handleDiscordConnect = async () => {
     const { error } = await supabase.auth.signInWithOAuth({
-      provider: "discord",
+      provider: 'discord',
       options: {
         redirectTo: `${location.origin}/settings?tab=integrations`,
+        scopes: 'identify email',
       },
     });
 
     if (error) {
-      console.error("Error connecting Discord:", error);
-      // You might want to show an error message to the user here
+      console.error('Error connecting Discord:', error);
     }
   };
 
   const handleDiscordDisconnect = async () => {
-    // Implement disconnect logic here
-    // This might involve removing the Discord token from your database
-    // and updating the UI state
-    console.log("Disconnecting Discord");
-    // setIsDiscordConnected(false);
+    const { error } = await supabase.auth.signOut();
+    if (error) {
+      console.error('Error disconnecting Discord:', error);
+    } else {
+      setIsDiscordConnected(false);
+      setDiscordTag(null);
+    }
   };
 
   return (
@@ -69,13 +78,19 @@ export function IntegrationsSettings({ user }: IntegrationsSettingsProps) {
         </CardHeader>
         <CardContent>
           {isDiscordConnected ? (
-            <Button
-              onClick={handleDiscordDisconnect}
-              className="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white bg-red-500 hover:bg-red-600 rounded-md transition-colors duration-300"
-            >
-              <FaDiscord className="mr-2 h-4 w-4" />
-              Disconnect Discord Account
-            </Button>
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                Connected as:{' '}
+                <span className="font-semibold">{discordTag}</span>
+              </p>
+              <Button
+                onClick={handleDiscordDisconnect}
+                className="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white bg-red-500 hover:bg-red-600 rounded-md transition-colors duration-300"
+              >
+                <FaDiscord className="mr-2 h-4 w-4" />
+                Disconnect Discord Account
+              </Button>
+            </div>
           ) : (
             <Button
               onClick={handleDiscordConnect}