feat: new jumbotron page for dm hall screen

client/App.tsx

@@ -15,6 +15,7 @@ import { ProblemPage } from './pages/ProblemPage'
 import { ProfilePage } from './pages/ProfilePage'
 import { ScoresPage } from './pages/ScoresPage'
 import { UserPage } from './pages/UserPage'
+import { JumbotronPage } from './pages/JumbotronPage'
 
 // const Redirect = ({ to }: { to: string }) => {
 //     useEffect(() => {
@@ -61,6 +62,10 @@ export const App = ({ url }: { url?: string }) => {
                     // @ts-ignore
                     path={pbu('/problem/:id')}
                 />
+                <JumbotronPage
+                    // @ts-ignore
+                    path={pbu('/jumbotron')}
+                />
                 <UserPage
                     // @ts-ignore
                     path={pbu('/u/:uid')}

client/pages/JumbotronPage.tsx

@@ -0,0 +1,51 @@
+import { route } from 'preact-router'
+import { useContext, useEffect, useState } from 'preact/hooks'
+import { isAdministrator, Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
+import { prependBaseUrl } from '../../shared/utils'
+import { server } from '../api'
+import { Header } from '../components/Header'
+import { MarkdownEditor } from '../components/MarkdownEditor'
+import { Problem } from '../components/Problem'
+import { Solution } from '../components/Solution'
+import { MetadataContext, useListResource, useResource, ServerContext, DatabaseContext, useServerAsyncCallback } from '../hooks'
+import { useLoggedInUser } from '../hooks/useCurrentUser'
+
+export const JumbotronPage = ({}) => {
+    const metadata = useContext(MetadataContext)
+    const db = useContext(DatabaseContext)
+    if (db) {
+        useServerAsyncCallback(async () => {
+            const problem = await db.getJumbotronProblem()
+            if (problem) {
+                metadata.title = `PHC Problemi | ${problem.title}`
+                metadata.description = problem.content
+            }
+        })
+    }
+
+    const [problem] = useResource<ProblemModel | null>(`/api/jumbotron`, null, problem => {
+        if (problem === null) {
+            route(prependBaseUrl(`/error?message=${encodeURIComponent(`Il problema jumbotron non esiste`)}`))
+        }
+    })
+
+    if (!problem) {
+        return <></>
+    }
+
+    const [solutions] = useListResource<SolutionModel>(`/api/solutions?problem=${problem.id}`)
+
+    return (
+        <>
+            <main class="page-jumbotron">
+                <div class="subtitle">
+                    <a href="/">PHC Problemi</a>
+                </div>
+                <>{problem && <Problem {...problem} />}</>
+                <div class="centered">
+                    Per ora ci sono {solutions.length} soluzion{'ie'[solutions.length === 1 ? 1 : 0]}
+                </div>
+            </main>
+        </>
+    )
+}

client/styles/main.scss

@@ -467,6 +467,15 @@ main.page-scores {
     }
 }
 
+main.page-jumbotron {
+    width: 100%;
+    height: 100%;
+
+    justify-content: center;
+
+    zoom: 1.5;
+}
+
 //
 // Components
 //