import { useEffect, useRef, useState } from 'react'
/**
* PersonalizeFeedModal — the gate shown when a signed-out (or not-yet-set-up)
* visitor taps the "Close to Home" lens. It invites them to sign in and set up
* a personalized feed. No data is fetched or fabricated here; it's purely a
* call-to-action over the homepage.
*/
interface PersonalizeFeedModalProps {
open: boolean
onClose: () => void
isAuthenticated: boolean
/** Signed-out path: kick off OAuth with the chosen provider. */
onSignIn: (provider: string) => void
/** Signed-in (profile incomplete) path: go to the setup wizard. */
onSetUp: () => void
}
/** OAuth providers offered in the sign-in step (mirrors the header dropdown). */
const PROVIDERS: { id: string; label: string; icon: JSX.Element }[] = [
{
id: 'google',
label: 'Google',
icon: (
),
},
{
id: 'facebook',
label: 'Facebook',
icon: (
),
},
{
id: 'github',
label: 'GitHub',
icon: (
),
},
{
id: 'huggingface',
label: 'HuggingFace',
icon: 🤗,
},
]
export default function PersonalizeFeedModal({
open,
onClose,
isAuthenticated,
onSignIn,
onSetUp,
}: PersonalizeFeedModalProps) {
const primaryRef = useRef(null)
// Signed-out two-step: the primary CTA reveals the OAuth provider choices.
const [showProviders, setShowProviders] = useState(false)
// ESC closes; focus the primary CTA when the dialog opens.
useEffect(() => {
if (!open) return
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose()
}
document.addEventListener('keydown', onKey)
// Defer focus a tick so the element is mounted/painted.
const t = window.setTimeout(() => primaryRef.current?.focus(), 0)
return () => {
document.removeEventListener('keydown', onKey)
window.clearTimeout(t)
}
}, [open, onClose])
// Reset to the intro step whenever the dialog re-opens.
useEffect(() => {
if (!open) setShowProviders(false)
}, [open])
if (!open) return null
const primaryLabel = isAuthenticated ? 'Set up my feed' : 'Sign in & set it up'
const onPrimary = isAuthenticated ? onSetUp : () => setShowProviders(true)
return (
{/* Dim backdrop — click to dismiss */}
🏠
Close to Home
{showProviders
? 'Choose how you’d like to sign in. We’ll bring you right back to set up your feed.'
: 'See civic activity near you, on the issues you care about. Sign in and tell us a little about your area to personalize your feed.'}