133 lines
4.5 KiB
TypeScript
133 lines
4.5 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { Check } from 'lucide-react'
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/components/ui/sheet'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
import { SUPABASE_URL, SUPABASE_ANON_KEY } from '@/lib/supabase'
|
|
import { useAuth } from '@/auth/AuthContext'
|
|
|
|
interface ProfileSheetProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
}
|
|
|
|
// Lee el access token de localStorage sin pasar por el processLock de Supabase.
|
|
// El token es escrito por GoTrueClient tras cada login/refresh y siempre está vigente
|
|
// mientras la sesión esté activa.
|
|
function getAccessToken(): string | null {
|
|
try {
|
|
const key = Object.keys(localStorage).find(
|
|
(k) => k.startsWith('sb-') && k.endsWith('-auth-token')
|
|
)
|
|
if (!key) return null
|
|
const stored = JSON.parse(localStorage.getItem(key) ?? 'null') as Record<string, unknown> | null
|
|
return (stored?.access_token as string | undefined) ?? null
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
export function ProfileSheet({ open, onOpenChange }: ProfileSheetProps) {
|
|
const { user, updateUser } = useAuth()
|
|
const [name, setName] = useState('')
|
|
const [company, setCompany] = useState('')
|
|
|
|
useEffect(() => {
|
|
if (open && user) {
|
|
setName(user.name || user.email || '')
|
|
setCompany(user.company ?? '')
|
|
}
|
|
// Intencional: solo inicializar cuando el sheet se abre, no en cada cambio de `user`
|
|
// (evita resetear el formulario mientras el usuario está editando).
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [open])
|
|
|
|
function handleSave() {
|
|
if (!user || !name.trim()) return
|
|
|
|
const savedName = name.trim()
|
|
const savedCompany = company.trim() || undefined
|
|
|
|
// Actualización optimista: aplicar cambios localmente y cerrar el Sheet de inmediato.
|
|
// El Sheet nunca queda abierto esperando la respuesta del servidor.
|
|
// La modal de Radix bloquea todo el UI mientras está abierta, así que cerramos
|
|
// ANTES del await para que el usuario pueda seguir trabajando sin demora.
|
|
updateUser({ name: savedName, company: savedCompany })
|
|
onOpenChange(false)
|
|
|
|
// Persistir en Supabase en background — fire & forget.
|
|
// Si falla (red lenta, token vencido, cold start de Supabase), el estado local
|
|
// ya tiene el nuevo nombre. En el próximo login, syncProfileFromDB recupera el DB.
|
|
const token = getAccessToken()
|
|
if (!token) return
|
|
|
|
void fetch(
|
|
`${SUPABASE_URL}/rest/v1/users?id=eq.${encodeURIComponent(user.id)}`,
|
|
{
|
|
method: 'PATCH',
|
|
headers: {
|
|
apikey: SUPABASE_ANON_KEY,
|
|
Authorization: `Bearer ${token}`,
|
|
'Content-Type': 'application/json',
|
|
Prefer: 'return=minimal',
|
|
},
|
|
body: JSON.stringify({ name: savedName, company: savedCompany ?? null }),
|
|
signal: AbortSignal.timeout(10000),
|
|
}
|
|
)
|
|
.then((res) => {
|
|
if (!res.ok) console.error('[ProfileSheet] Error guardando perfil:', res.status)
|
|
})
|
|
.catch((err) => {
|
|
console.error('[ProfileSheet] Error guardando perfil:', err)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Sheet open={open} onOpenChange={onOpenChange}>
|
|
<SheetContent>
|
|
<SheetHeader>
|
|
<SheetTitle>Editar perfil</SheetTitle>
|
|
</SheetHeader>
|
|
|
|
<div className="space-y-4 mt-6">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Nombre</Label>
|
|
<Input
|
|
autoFocus
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Tu nombre"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Empresa</Label>
|
|
<Input
|
|
value={company}
|
|
onChange={(e) => setCompany(e.target.value)}
|
|
placeholder="InQuality"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Email</Label>
|
|
<Input value={user?.email ?? ''} readOnly className="bg-muted text-muted-foreground cursor-not-allowed" />
|
|
</div>
|
|
</div>
|
|
|
|
<SheetFooter className="mt-6 flex gap-2">
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
Cancelar
|
|
</Button>
|
|
<Button onClick={handleSave} disabled={!name.trim()} className="gap-1.5">
|
|
<Check className="h-4 w-4" />
|
|
Guardar
|
|
</Button>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|