'use client' import { useCallback, useEffect, useState } from 'react' import { createClient } from '@/utils/supabase/client' import { type User } from '@supabase/supabase-js' import Avatar from './avatar' export default function AccountForm({ user }: { user: User | null }) { const supabase = createClient() const [loading, setLoading] = useState(true) const [fullname, setFullname] = useState(null) const [username, setUsername] = useState(null) const [website, setWebsite] = useState(null) const [avatar_url, setAvatarUrl] = useState(null) const getProfile = useCallback(async () => { try { setLoading(true) const { data, error, status } = await supabase .from('profiles') .select(`full_name, username, website, avatar_url`) .eq('id', user?.id) .single() if (error && status !== 406) { console.log(error) throw error } if (data) { setFullname(data.full_name) setUsername(data.username) setWebsite(data.website) setAvatarUrl(data.avatar_url) } } catch (error) { alert('Error loading user data!') } finally { setLoading(false) } }, [user, supabase]) useEffect(() => { getProfile() }, [user, getProfile]) async function updateProfile({ username, website, avatar_url, }: { username: string | null fullname: string | null website: string | null avatar_url: string | null }) { try { setLoading(true) const { error } = await supabase.from('profiles').upsert({ id: user?.id as string, full_name: fullname, username, website, avatar_url, updated_at: new Date().toISOString(), }) if (error) throw error alert('Profile updated!') } catch (error) { alert('Error updating the data!') } finally { setLoading(false) } } return (
{ setAvatarUrl(url) updateProfile({ fullname, username, website, avatar_url: url }) }} />
setFullname(e.target.value)} />
setUsername(e.target.value)} />
setWebsite(e.target.value)} />
) }