From 291bc8e44c301471607290e215095a681ea7448f Mon Sep 17 00:00:00 2001
From: Ben Lopata <benlopata@gmail.com>
Date: Tue, 22 Oct 2024 14:28:07 -0500
Subject: [PATCH] Adds discord integration, misc formatting.

---
 www/app/settings/SettingsLayout.tsx           | 51 +++++------
 www/components/settings/AccountSettings.tsx   |  3 +-
 .../settings/IntegrationsSettings.tsx         | 53 +++++------
 www/components/settings/SecuritySettings.tsx  |  3 +-
 www/components/settings/SettingsForm.tsx      | 87 +++++++++----------
 5 files changed, 91 insertions(+), 106 deletions(-)

diff --git a/www/app/settings/SettingsLayout.tsx b/www/app/settings/SettingsLayout.tsx
index 650a85a..61dffc9 100644
--- a/www/app/settings/SettingsLayout.tsx
+++ b/www/app/settings/SettingsLayout.tsx
@@ -1,30 +1,23 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import Link from "next/link";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import SubscriptionSettings from "@/components/settings/SubscriptionSettings";
-import { IntegrationsSettings } from "@/components/settings/IntegrationsSettings";
-import { SecuritySettings } from "@/components/settings/SecuritySettings";
-import { AccountSettings } from "@/components/settings/AccountSettings";
-import { SupportSettings } from "@/components/settings/SupportSettings";
+import { useState } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import SubscriptionSettings from '@/components/settings/SubscriptionSettings';
+import { IntegrationsSettings } from '@/components/settings/IntegrationsSettings';
+import { SecuritySettings } from '@/components/settings/SecuritySettings';
+import { AccountSettings } from '@/components/settings/AccountSettings';
+import { SupportSettings } from '@/components/settings/SupportSettings';
 
 export default function SettingsLayout({ user, subscription, products }) {
-  const [activeTab, setActiveTab] = useState("account");
+  const [activeTab, setActiveTab] = useState('account');
 
   const navItems = [
-    { id: "account", label: "Account" },
-    { id: "security", label: "Security" },
-    { id: "subscription", label: "Subscription" },
-    { id: "integrations", label: "Integrations" },
-    { id: "support", label: "Support" },
+    { id: 'account', label: 'Account' },
+    { id: 'security', label: 'Security' },
+    { id: 'subscription', label: 'Subscription' },
+    { id: 'integrations', label: 'Integrations' },
+    { id: 'support', label: 'Support' },
   ];
 
   return (
@@ -50,8 +43,8 @@ export default function SettingsLayout({ user, subscription, products }) {
                   onClick={() => setActiveTab(item.id)}
                   className={`w-full text-left p-2 rounded ${
                     activeTab === item.id
-                      ? "bg-primary text-primary-foreground"
-                      : "hover:bg-accent hover:text-accent-foreground"
+                      ? 'bg-primary text-primary-foreground'
+                      : 'hover:bg-accent hover:text-accent-foreground'
                   }`}
                 >
                   {item.label}
@@ -61,16 +54,16 @@ export default function SettingsLayout({ user, subscription, products }) {
           </ul>
         </nav>
         <div className="flex-1 p-8">
-          {activeTab === "account" && <AccountSettings user={user} />}
-          {activeTab === "security" && <SecuritySettings user={user} />}
-          {activeTab === "subscription" && (
+          {activeTab === 'account' && <AccountSettings user={user} />}
+          {activeTab === 'security' && <SecuritySettings user={user} />}
+          {activeTab === 'subscription' && (
             <SubscriptionSettings
               subscription={subscription}
               products={products}
             />
           )}
-          {activeTab === "integrations" && <IntegrationsSettings user={user} />}
-          {activeTab === "support" && <SupportSettings user={user} />}
+          {activeTab === 'integrations' && <IntegrationsSettings />}
+          {activeTab === 'support' && <SupportSettings />}
         </div>
       </div>
     </div>
diff --git a/www/components/settings/AccountSettings.tsx b/www/components/settings/AccountSettings.tsx
index cec4c6d..50eec19 100644
--- a/www/components/settings/AccountSettings.tsx
+++ b/www/components/settings/AccountSettings.tsx
@@ -1,9 +1,8 @@
-import { SettingsForm } from "@/components/settings/SettingsForm";
+import { SettingsForm } from '@/components/settings/SettingsForm';
 
 interface User {
   id: string;
   email: string;
-  // Add other user properties as needed
 }
 
 export function AccountSettings({ user }: { user: User }) {
diff --git a/www/components/settings/IntegrationsSettings.tsx b/www/components/settings/IntegrationsSettings.tsx
index 9f35c62..183cddc 100644
--- a/www/components/settings/IntegrationsSettings.tsx
+++ b/www/components/settings/IntegrationsSettings.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import { FaDiscord } from 'react-icons/fa';
 import { createClient } from '@/utils/supabase/client';
+import useSWR from 'swr';
 import {
   Card,
   CardContent,
@@ -17,32 +17,23 @@ interface User {
   email: string;
 }
 
-interface IntegrationsSettingsProps {
-  user: User;
-}
-
-export function IntegrationsSettings({ user }: IntegrationsSettingsProps) {
-  const [isDiscordConnected, setIsDiscordConnected] = useState(false);
-  const [discordTag, setDiscordTag] = useState<string | null>(null);
+const fetcher = async () => {
   const supabase = createClient();
-
-  useEffect(() => {
-    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 {
+    data: { user },
+  } = await supabase.auth.getUser();
+  return {
+    isDiscordConnected: user?.app_metadata?.provider === 'discord',
+    discordTag:
+      user?.app_metadata?.provider === 'discord'
+        ? user.user_metadata?.full_name
+        : null,
   };
+};
+
+export function IntegrationsSettings() {
+  const { data, error, mutate } = useSWR('discordConnection', fetcher);
+  const supabase = createClient();
 
   const handleDiscordConnect = async () => {
     const { error } = await supabase.auth.signInWithOAuth({
@@ -55,6 +46,8 @@ export function IntegrationsSettings({ user }: IntegrationsSettingsProps) {
 
     if (error) {
       console.error('Error connecting Discord:', error);
+    } else {
+      mutate(); // Revalidate the data after connecting
     }
   };
 
@@ -63,11 +56,13 @@ export function IntegrationsSettings({ user }: IntegrationsSettingsProps) {
     if (error) {
       console.error('Error disconnecting Discord:', error);
     } else {
-      setIsDiscordConnected(false);
-      setDiscordTag(null);
+      mutate(); // Revalidate the data after disconnecting
     }
   };
 
+  if (error) return <div>Failed to load</div>;
+  if (!data) return <div>Loading...</div>;
+
   return (
     <div className="space-y-4">
       <h2 className="text-3xl font-bold text-primary">Integrations</h2>
@@ -77,11 +72,11 @@ export function IntegrationsSettings({ user }: IntegrationsSettingsProps) {
           <CardDescription>Connect your Discord account</CardDescription>
         </CardHeader>
         <CardContent>
-          {isDiscordConnected ? (
+          {data.isDiscordConnected ? (
             <div className="space-y-4">
               <p className="text-sm text-gray-600">
                 Connected as:{' '}
-                <span className="font-semibold">{discordTag}</span>
+                <span className="font-semibold">{data.discordTag}</span>
               </p>
               <Button
                 onClick={handleDiscordDisconnect}
diff --git a/www/components/settings/SecuritySettings.tsx b/www/components/settings/SecuritySettings.tsx
index 7f1423d..66e2348 100644
--- a/www/components/settings/SecuritySettings.tsx
+++ b/www/components/settings/SecuritySettings.tsx
@@ -1,9 +1,8 @@
-import { SettingsForm } from "./SettingsForm";
+import { SettingsForm } from './SettingsForm';
 
 interface User {
   id: string;
   email: string;
-  // Add other user properties as needed
 }
 
 export function SecuritySettings({ user }: { user: User }) {
diff --git a/www/components/settings/SettingsForm.tsx b/www/components/settings/SettingsForm.tsx
index eef5b48..16bd4c6 100644
--- a/www/components/settings/SettingsForm.tsx
+++ b/www/components/settings/SettingsForm.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { createClient } from "@/utils/supabase/client";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { useState } from 'react';
+import { createClient } from '@/utils/supabase/client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import {
   Card,
   CardContent,
@@ -12,25 +12,24 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import Swal from "sweetalert2";
+} from '@/components/ui/card';
+import Swal from 'sweetalert2';
 
 interface User {
   id: string;
   email: string;
-  // Add other user properties as needed
 }
 
 interface SettingsFormProps {
   user: User;
-  type: "account" | "security";
+  type: 'account' | 'security';
 }
 
 export function SettingsForm({ user, type }: SettingsFormProps) {
   const [email, setEmail] = useState(user.email);
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
 
   const supabase = createClient();
 
@@ -41,22 +40,22 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         { email: email },
         {
           emailRedirectTo: `${location.origin}/settings`,
-        },
+        }
       );
       if (error) throw error;
       Swal.fire({
-        title: "Success!",
-        text: "Please check your new email for a confirmation link",
-        icon: "success",
-        confirmButtonText: "Close",
+        title: 'Success!',
+        text: 'Please check your new email for a confirmation link',
+        icon: 'success',
+        confirmButtonText: 'Close',
       });
     } catch (error) {
       console.error(error);
       Swal.fire({
-        title: "Error!",
-        text: "Something went wrong while updating your email",
-        icon: "error",
-        confirmButtonText: "Close",
+        title: 'Error!',
+        text: 'Something went wrong while updating your email',
+        icon: 'error',
+        confirmButtonText: 'Close',
       });
     }
   };
@@ -65,10 +64,10 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
     e.preventDefault();
     if (newPassword !== confirmPassword) {
       Swal.fire({
-        title: "Error!",
-        text: "Passwords do not match",
-        icon: "error",
-        confirmButtonText: "Close",
+        title: 'Error!',
+        text: 'Passwords do not match',
+        icon: 'error',
+        confirmButtonText: 'Close',
       });
       return;
     }
@@ -78,20 +77,20 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
       });
       if (error) throw error;
       Swal.fire({
-        title: "Success!",
-        text: "Your password has been updated",
-        icon: "success",
-        confirmButtonText: "Close",
+        title: 'Success!',
+        text: 'Your password has been updated',
+        icon: 'success',
+        confirmButtonText: 'Close',
       });
-      setNewPassword("");
-      setConfirmPassword("");
+      setNewPassword('');
+      setConfirmPassword('');
     } catch (error) {
       console.error(error);
       Swal.fire({
-        title: "Error!",
-        text: "Something went wrong while updating your password",
-        icon: "error",
-        confirmButtonText: "Close",
+        title: 'Error!',
+        text: 'Something went wrong while updating your password',
+        icon: 'error',
+        confirmButtonText: 'Close',
       });
     }
   };
@@ -100,16 +99,16 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
     <Card className="bg-card text-card-foreground">
       <CardHeader>
         <CardTitle className="text-primary">
-          {type === "account" ? "Account Information" : "Security Settings"}
+          {type === 'account' ? 'Account Information' : 'Security Settings'}
         </CardTitle>
         <CardDescription>
-          {type === "account"
-            ? "Update your account settings here."
-            : "Manage your security settings and change your password."}
+          {type === 'account'
+            ? 'Update your account settings here.'
+            : 'Manage your security settings and change your password.'}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
-        {type === "account" && (
+        {type === 'account' && (
           <div className="space-y-2">
             <Label htmlFor="email" className="text-foreground">
               Email
@@ -123,7 +122,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
             />
           </div>
         )}
-        {type === "security" && (
+        {type === 'security' && (
           <>
             <div className="space-y-2">
               <Label htmlFor="currentPassword" className="text-foreground">
@@ -165,7 +164,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         )}
       </CardContent>
       <CardFooter className="flex justify-start border-t pt-6">
-        {type === "account" && (
+        {type === 'account' && (
           <Button
             onClick={handleEmailChange}
             className="bg-primary text-primary-foreground hover:bg-primary/90"
@@ -173,7 +172,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
             Update Email
           </Button>
         )}
-        {type === "security" && (
+        {type === 'security' && (
           <Button
             onClick={handlePasswordChange}
             className="bg-primary text-primary-foreground hover:bg-primary/90"