magic: added a way for running async functions in the top level jsx code

client/pages/ProblemPage.tsx

@@ -7,7 +7,7 @@ import { Header } from '../components/Header'
 import { MarkdownEditor } from '../components/MarkdownEditor'
 import { Problem } from '../components/Problem'
 import { Solution } from '../components/Solution'
-import { MetadataContext, useListResource, useResource } from '../hooks'
+import { MetadataContext, useListResource, useResource, ServerContext, DatabaseContext, useServerAsyncCallback } from '../hooks'
 import { useCurrentUser } from '../hooks/useCurrentUser'
 
 type RouteProps = {
@@ -16,8 +16,16 @@ type RouteProps = {
 
 export const ProblemPage = ({ id }: RouteProps) => {
     const metadata = useContext(MetadataContext)
-    metadata.title = `Problem ${id}`
-    metadata.description = 'Bacheca di problemi del PHC'
+    const db = useContext(DatabaseContext)
+    if (db) {
+        useServerAsyncCallback(async () => {
+            const problem = await db.getProblem(id)
+            if (problem) {
+                metadata.title = `PHC Problemi | ${problem.title}`
+                metadata.description = problem.content
+            }
+        })
+    }
 
     const [user] = useCurrentUser()
 
@@ -25,7 +33,7 @@ export const ProblemPage = ({ id }: RouteProps) => {
 
     const [problem, refreshProblem] = useResource<ProblemModel | null>(`/api/problem/${id}`, null, problem => {
         if (problem === null) {
-            route(prependBaseUrl('/'))
+            route(prependBaseUrl(`/error?message=${encodeURIComponent(`Il problema "${id}" non esiste`)}`))
         }
     })