Ora il db funge più veramente e si possono inviare i problemi

client/pages/Admin.jsx

@@ -0,0 +1,26 @@
+import { route } from 'preact-router'
+import { useEffect } from 'preact/hooks'
+import { useCurrentUser } from '../hooks.jsx'
+
+export const Admin = ({}) => {
+    const [user] = useCurrentUser(user => {
+        if (!user || user.role !== 'admin') {
+            route('/', true)
+        }
+    })
+
+    return (
+        <main class="admin">
+            <div class="logo">PHC / Problemi</div>
+            <div class="subtitle">
+                {user ? (
+                    <>
+                        Logged in as {user.role} @{user.username}
+                    </>
+                ) : (
+                    <a href="/login">Login</a>
+                )}
+            </div>
+        </main>
+    )
+}

client/pages/Home.jsx

@@ -1,12 +1,11 @@
 import { route } from 'preact-router'
+import { useEffect, useState } from 'preact/hooks'
 
 import { Problem } from '../components/Problem.jsx'
-import { useUser } from '../hooks.jsx'
+import { useReadResource, useCurrentUser } from '../hooks.jsx'
 
 export const HomePage = () => {
-    console.log('rendering homepage')
-
-    const [user, logout] = useUser()
+    const [user, logout] = useCurrentUser()
 
     const handleLogout = async () => {
         await fetch(`/api/logout`, {
@@ -16,13 +15,7 @@ export const HomePage = () => {
         logout()
     }
 
-    const problems = Array.from({ length: 20 }, (_, i) => ({
-        id: i + 1,
-        content:
-            `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n`.repeat(
-                ((i + 2) % 4) + 1
-            ),
-    }))
+    const [problems] = useReadResource('/api/problems', [])
 
     return (
         <main class="home">
@@ -30,7 +23,7 @@ export const HomePage = () => {
             <div class="subtitle">
                 {user ? (
                     <>
-                        Logged in as {user.username} (
+                        Logged in as {user.role} @{user.username} (
                         <span class="link" onClick={handleLogout}>
                             Logout
                         </span>

client/pages/Login.jsx

@@ -31,10 +31,11 @@ export const LoginPage = () => {
                     type="text"
                     value={username}
                     onInput={e => setUsername(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && login()}
                 />
 
                 <div class="fill">
-                    <button onClick={() => login()}>Accedi</button>
+                    <button onClick={login}>Accedi</button>
                 </div>
             </div>
         </main>

client/pages/Problem.jsx

@@ -1,23 +1,36 @@
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useContext, useEffect, useRef, useState } from 'preact/hooks'
 import { Markdown } from '../components/Markdown.jsx'
 import { Problem } from '../components/Problem.jsx'
+import { Solution } from '../components/Solution.jsx'
+import { MetadataContext, useCurrentUser, useReadResource } from '../hooks.jsx'
 
 export const ProblemPage = ({ id }) => {
+    const metadata = useContext(MetadataContext)
+    metadata.title = `Problem ${id}`
+
+    const [user] = useCurrentUser()
+
     const [source, setSource] = useState('')
     const editorRef = useRef()
 
+    const [{ content }] = useReadResource(`/api/problem/${id}`, { content: '' })
+
+    const [solutions] = useReadResource(`/api/solutions?problem=${id}`, [])
+
     const sendSolution = async () => {
-        const res = await fetch(`/api/problem/${id}/new-solution`, {
+        const res = await fetch(`/api/solution`, {
+            method: 'POST',
+            credentials: 'include',
             headers: {
                 'Content-Type': 'application/json',
             },
-            credentials: 'include',
             body: JSON.stringify({
-                source,
+                problemId: id,
+                content: source,
             }),
         })
 
-        console.log(await res.json())
+        location.reload()
     }
 
     useEffect(() => {
@@ -36,39 +49,57 @@ export const ProblemPage = ({ id }) => {
     return (
         <main class="problem">
             <div class="logo">PHC / Problemi</div>
+            {user && (
+                <div class="subtitle">
+                    Logged in as {user.role} @{user.username}
+                </div>
+            )}
             <div class="subtitle">Testo del problema</div>
-            <Problem
-                id={id}
-                content={`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n\n`.repeat(
-                    5
-                )}
-            />
-            <div class="subtitle">Invia una soluzione al problema</div>
-            <div class="solution-editor">
-                <div class="editor">
-                    <h1>Editor</h1>
-                    <textarea
-                        onInput={e => setSource(e.target.value)}
-                        value={source}
-                        cols="60"
-                        ref={editorRef}
-                        placeholder="Scrivi una nuova soluzione..."
-                    ></textarea>
-                </div>
-                <div class="preview">
-                    <h1>Preview</h1>
-                    <div class="preview-content">
-                        {source.trim().length ? (
-                            <Markdown source={source} />
-                        ) : (
-                            <div class="placeholder">Scrivi una nuova soluzione...</div>
-                        )}
+            <Problem id={id} content={content} />
+            {solutions.length > 0 && (
+                <details>
+                    <summary>Soluzioni</summary>
+                    <div class="solution-list">
+                        {solutions.map(s => (
+                            <Solution {...s} />
+                        ))}
                     </div>
+                </details>
+            )}
+            {user ? (
+                <>
+                    <div class="subtitle">Invia una soluzione al problema</div>
+                    <div class="solution-editor">
+                        <div class="editor">
+                            <h1>Editor</h1>
+                            <textarea
+                                onInput={e => setSource(e.target.value)}
+                                value={source}
+                                cols="60"
+                                ref={editorRef}
+                                placeholder="Scrivi una nuova soluzione..."
+                            ></textarea>
+                        </div>
+                        <div class="preview">
+                            <h1>Preview</h1>
+                            <div class="preview-content">
+                                {source.trim().length ? (
+                                    <Markdown source={source} />
+                                ) : (
+                                    <div class="placeholder">Scrivi una nuova soluzione...</div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="submit-solution">
+                        <button onClick={sendSolution}>Invia Soluzione</button>
+                    </div>
+                </>
+            ) : (
+                <div class="subtitle">
+                    <a href="/login">Accedi</a> per inviare una soluzione
                 </div>
-            </div>
-            <div class="submit-solution">
-                <button onClick={sendSolution}>Invia Soluzione</button>
-            </div>
+            )}
         </main>
     )
 }