problemi/client/pages/Home.jsx

import { route } from 'preact-router'
import { useEffect, useState } from 'preact/hooks'

import { Problem } from '../components/Problem.jsx'
import { useReadResource, useCurrentUser } from '../hooks.jsx'

export const HomePage = () => {
    const [user, logout] = useCurrentUser()

    const handleLogout = async () => {
        await fetch(`/api/logout`, {
            method: 'POST',
        })

        logout()
    }

    const [problems] = useReadResource('/api/problems', [])

    return (
        <main class="home">
            <div class="logo">PHC / Problemi</div>
            <div class="subtitle">
                {user ? (
                    <>
                        Logged in as {user.role} @{user.username} (
                        <span class="link" onClick={handleLogout}>
                            Logout
                        </span>
                        )
                    </>
                ) : (
                    <a href="/login">Login</a>
                )}
            </div>
            <div class="board">
                {problems.map(p => (
                    <Problem {...p} />
                ))}
            </div>
        </main>
    )
}