import { useCallback, useEffect, useState } from 'react'
import { api, Me, Unauthenticated } from './api'
import Login from './Login'
import Shell from './Shell'

export default function App() {
  const [me, setMe] = useState<Me | null | undefined>(undefined)

  const refresh = useCallback(async () => {
    try { setMe(await api.me()) } catch (e) { if (e instanceof Unauthenticated) setMe(null) }
  }, [])

  useEffect(() => { refresh() }, [refresh])
  useEffect(() => {
    if (!me) return
    const t = setInterval(refresh, 30000)
    return () => clearInterval(t)
  }, [me, refresh])

  if (me === undefined) return <div className="center muted">…</div>
  if (me === null) return <Login onLogin={refresh} />
  return <Shell me={me} onLoggedOut={() => setMe(null)} />
}