"use client"; import { useState, useEffect } from 'react'; import { Skeleton } from "@nextui-org/react"; import Image from 'next/image'; import { User2, SlidersHorizontal, Info, Trash, RefreshCcw, Save } from 'lucide-react'; import { HeaderNavLink } from '@/app/components/ui/navlink'; import Swal from 'sweetalert2'; import { useSession } from 'next-auth/react'; const ProfileSection: React.FC = () => { const [userId, setUserId] = useState(''); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [imageURL, setImageURL] = useState(''); const [isLoaded, setIsLoaded] = useState(false); const [isAdmin, setIsAdmin] = useState(false); const [initialProfileData, setInitialProfileData] = useState({ name: '', email: '', imageURL: '' }); const { data: session, status } = useSession(); const supabaseAccessToken = session?.supabaseAccessToken; const handleNameChange = (event: React.ChangeEvent) => { setName(event.target.value); }; const handleEmailChange = (event: React.ChangeEvent) => { setEmail(event.target.value); }; const handleImageURLChange = (event: React.ChangeEvent) => { setImageURL(event.target.value); }; const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); if (!isProfileChanged()) { console.log('No changes detected, not submitting the form'); return; } Swal.fire({ title: 'Are you sure?', text: 'Do you want to update your profile data? This action cannot be undone!', icon: 'warning', showCancelButton: true, confirmButtonColor: '#4caf50', cancelButtonColor: '#b91c1c', confirmButtonText: 'Yes', cancelButtonText: 'No', }).then(async (result) => { if (result.isConfirmed) { // Update the profile data in the database if (await updateProfileData()) { // Show a success message after updating the profile data Swal.fire({ title: 'Profile Updated!', text: 'Your profile data has been updated successfully.', icon: 'success', confirmButtonColor: '#4caf50', }); } else { // Show an error message if the profile data update failed Swal.fire({ title: 'Error!', text: 'Failed to update your profile data. Please try again later. (Check Console for more details)', icon: 'error', confirmButtonColor: '#4caf50', }); } } }); }; const handleDeleteProfile = () => { Swal.fire({ title: 'Are you sure?', text: 'Do you want to delete your profile & data? This action cannot be undone, and your data will be deleted forever!', icon: 'warning', showCancelButton: true, confirmButtonColor: '#4caf50', cancelButtonColor: '#b91c1c', confirmButtonText: 'Yes', cancelButtonText: 'No', }).then(async (result) => { if (result.isConfirmed) { // Delete the profile data from the database if (await deleteProfileData()) { // Show a success message after deleting the profile data Swal.fire({ title: 'Profile Deleted!', text: 'Your profile data has been deleted successfully. You will be redirected to the home page.', icon: 'success', confirmButtonColor: '#4caf50', }); // Redirect to the home page after deleting the profile data window.location.href = '/'; } else { // Show an error message if the profile data deletion failed Swal.fire({ title: 'Error!', text: 'Failed to delete your profile data. Please try again later. (Check Console for more details)', icon: 'error', confirmButtonColor: '#4caf50', }); } } }); }; const handleResetProfile = () => { setName(initialProfileData.name); setEmail(initialProfileData.email); setImageURL(initialProfileData.imageURL); } const checkAdminRole = async () => { const response = await fetch('/api/admin/is-admin'); if (!response.ok) { console.error('Failed to fetch admin data'); return; } const data = await response.json(); setIsAdmin(data.isAdmin); console.log('Admin role fetched successfully! Data:', data); }; // Update the profile data in the database, via PUT request const updateProfileData = async () => { const response = await fetch('/api/profile', { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ userId: userId, name: name, email: email, image: imageURL, }), }); if (!response.ok) { console.error('Failed to update profile data:', response.statusText); return false; } console.log('Profile data updated successfully!'); // Update initial profile data to the new data setInitialProfileData({ name, email, imageURL }); return true; }; // Fetch the profile data from the database, via GET request const fetchProfileData = async () => { const response = await fetch('/api/profile'); if (!response.ok) { console.error('Failed to fetch profile data'); return; } const data = await response.json(); const userData = data.userData; setUserId(userData.id); setName(userData.name); setEmail(userData.email); setImageURL(userData.image); setInitialProfileData({ name: userData.name, email: userData.email, imageURL: userData.image }); setIsLoaded(true); console.log('Profile data fetched successfully! Data:', userData); }; // Delete the profile data from the database, via DELETE request const deleteProfileData = async () => { const response = await fetch('/api/profile', { method: 'DELETE', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${supabaseAccessToken}`, // Add the Supabase access token in the Authorization header }, body: JSON.stringify({ userId: userId, }), }); if (!response.ok) { console.error('Failed to delete profile data:', response.text); return false; } console.log('Profile data deleted successfully!'); Swal.fire({ title: 'Profile Deleted!', text: 'Your profile data has been deleted successfully.', icon: 'success', confirmButtonColor: '#4caf50', }); return true; }; useEffect(() => { fetchProfileData(); checkAdminRole(); }, []); const isProfileChanged = () => { return ( name !== initialProfileData.name || email !== initialProfileData.email || imageURL !== initialProfileData.imageURL ); }; return (

Profile

{imageURL ? {name} : }
{isAdmin ? ( ) : null}