feat: new jumbotron page for dm hall screen

8 months ago · babf668a2f
parent 036a0820f9
commit babf668a2f
11 changed files with 292 additions and 1 deletions
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@ -0,0 +1,38 @@
+# Architecture
+
+This is a Typescript project that Preact for the frontend and _server-side rendering_ (custom made).
+
+To use the project you just have to run
+
+```bash shell
+# Development
+$ npm run dev
+
+# Production
+$ npm run build
+$ npm run serve
+```
+
+Let's see what's inside the `package.json`
+
+```json
+...
+"scripts": {
+    "build:client": "vite build --outDir dist/entry-client",
+    "build:ssr": "vite build --ssr client/entry-server.tsx --outDir dist/entry-server",
+    "build:server": "esbuild server.ts --bundle --platform=node --format=esm --external:./node_modules/* --outdir=dist/server",
+    "build": "run-s build:client build:ssr build:server",
+    "dev": "run-s build:server serve:dev",
+    "serve:dev": "MODE=development node dist/server/server.js",
+    "serve": "node dist/server/server.js"
+},
+...
+```
+
+ma vediamolo meglio come diagramma
+
+![diagram](docs/out/package-json.svg)
+
+- Quando sviluppiamo abbiamo la regola `dev` che prima chiama la regola `build:server` che compila il file `server.ts` che contiene il vero e proprio server in ExpressJS che gestisce tutta l'applicazione. Internamente questo _entrypoint_ usa `server/` in fase di development usa ViteJS 
+
+- Il comando `build` invece prima costruisce il client utilizzando Vite, 
--- a/client/App.tsx
+++ b/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')}
--- a/client/pages/JumbotronPage.tsx
+++ b/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>
+        </>
+    )
+}
--- a/client/styles/main.scss
+++ b/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
 //
--- a/docs/Makefile
+++ b/docs/Makefile
@ -0,0 +1,10 @@
+
+.PHONY: all
+all: setup out/package-json.svg
+
+.PHONY: setup
+setup: 
+	mkdir -p out
+
+out/package-json.svg: package-json.gv
+	dot -T svg -o out/package-json.svg package-json.gv
--- a/docs/out/package-json.svg
+++ b/docs/out/package-json.svg
@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 7.1.0 (0)
+ -->
+<!-- Pages: 1 -->
+<svg width="882pt" height="260pt"
+ viewBox="0.00 0.00 882.00 260.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 256)">
+<polygon fill="white" stroke="none" points="-4,4 -4,-256 878,-256 878,4 -4,4"/>
+<!-- build -->
+<g id="node1" class="node">
+<title>build</title>
+<path fill="none" stroke="black" d="M42,-144C42,-144 12,-144 12,-144 6,-144 0,-138 0,-132 0,-132 0,-120 0,-120 0,-114 6,-108 12,-108 12,-108 42,-108 42,-108 48,-108 54,-114 54,-120 54,-120 54,-132 54,-132 54,-138 48,-144 42,-144"/>
+<text text-anchor="middle" x="27" y="-122.3" font-family="Times,serif" font-size="14.00">build</text>
+</g>
+<!-- build:client -->
+<g id="node2" class="node">
+<title>build:client</title>
+<path fill="none" stroke="black" d="M193,-198C193,-198 139,-198 139,-198 133,-198 127,-192 127,-186 127,-186 127,-174 127,-174 127,-168 133,-162 139,-162 139,-162 193,-162 193,-162 199,-162 205,-168 205,-174 205,-174 205,-186 205,-186 205,-192 199,-198 193,-198"/>
+<text text-anchor="middle" x="166" y="-176.3" font-family="Times,serif" font-size="14.00">build:client</text>
+</g>
+<!-- build&#45;&gt;build:client -->
+<g id="edge1" class="edge">
+<title>build&#45;&gt;build:client</title>
+<path fill="none" stroke="black" d="M54.39,-137.94C65.34,-142.78 78.22,-148.32 90,-153 98.32,-156.3 107.22,-159.66 115.89,-162.84"/>
+<polygon fill="black" stroke="black" points="114.65,-166.11 125.24,-166.23 117.03,-159.53 114.65,-166.11"/>
+</g>
+<!-- build:ssr -->
+<g id="node3" class="node">
+<title>build:ssr</title>
+<path fill="none" stroke="black" d="M185.5,-144C185.5,-144 146.5,-144 146.5,-144 140.5,-144 134.5,-138 134.5,-132 134.5,-132 134.5,-120 134.5,-120 134.5,-114 140.5,-108 146.5,-108 146.5,-108 185.5,-108 185.5,-108 191.5,-108 197.5,-114 197.5,-120 197.5,-120 197.5,-132 197.5,-132 197.5,-138 191.5,-144 185.5,-144"/>
+<text text-anchor="middle" x="166" y="-122.3" font-family="Times,serif" font-size="14.00">build:ssr</text>
+</g>
+<!-- build&#45;&gt;build:ssr -->
+<g id="edge2" class="edge">
+<title>build&#45;&gt;build:ssr</title>
+<path fill="none" stroke="black" d="M54.41,-126C73.88,-126 100.75,-126 123.13,-126"/>
+<polygon fill="black" stroke="black" points="122.85,-129.5 132.85,-126 122.85,-122.5 122.85,-129.5"/>
+</g>
+<!-- build:server -->
+<g id="node4" class="node">
+<title>build:server</title>
+<path fill="none" stroke="black" d="M194.5,-90C194.5,-90 137.5,-90 137.5,-90 131.5,-90 125.5,-84 125.5,-78 125.5,-78 125.5,-66 125.5,-66 125.5,-60 131.5,-54 137.5,-54 137.5,-54 194.5,-54 194.5,-54 200.5,-54 206.5,-60 206.5,-66 206.5,-66 206.5,-78 206.5,-78 206.5,-84 200.5,-90 194.5,-90"/>
+<text text-anchor="middle" x="166" y="-68.3" font-family="Times,serif" font-size="14.00">build:server</text>
+</g>
+<!-- build&#45;&gt;build:server -->
+<g id="edge3" class="edge">
+<title>build&#45;&gt;build:server</title>
+<path fill="none" stroke="black" d="M54.39,-114.06C65.34,-109.22 78.22,-103.68 90,-99 97.87,-95.87 106.26,-92.7 114.48,-89.68"/>
+<polygon fill="black" stroke="black" points="115.49,-93.03 123.69,-86.33 113.1,-86.46 115.49,-93.03"/>
+</g>
+<!-- vite build &#45;&#45;outDir dist/entry&#45;client -->
+<g id="node5" class="node">
+<title>vite build &#45;&#45;outDir dist/entry&#45;client</title>
+<path fill="none" stroke="black" d="M667,-198C667,-198 485,-198 485,-198 479,-198 473,-192 473,-186 473,-186 473,-174 473,-174 473,-168 479,-162 485,-162 485,-162 667,-162 667,-162 673,-162 679,-168 679,-174 679,-174 679,-186 679,-186 679,-192 673,-198 667,-198"/>
+<text text-anchor="middle" x="576" y="-176.3" font-family="Times,serif" font-size="14.00">vite build &#45;&#45;outDir dist/entry&#45;client</text>
+</g>
+<!-- build:client&#45;&gt;vite build &#45;&#45;outDir dist/entry&#45;client -->
+<g id="edge4" class="edge">
+<title>build:client&#45;&gt;vite build &#45;&#45;outDir dist/entry&#45;client</title>
+<path fill="none" stroke="black" d="M205.38,-180C263.38,-180 375.67,-180 461.33,-180"/>
+<polygon fill="black" stroke="black" points="461.19,-183.5 471.19,-180 461.19,-176.5 461.19,-183.5"/>
+</g>
+<!-- vite build &#45;&#45;ssr client/entry&#45;server.tsx &#45;&#45;outDir dist/entry&#45;server -->
+<g id="node6" class="node">
+<title>vite build &#45;&#45;ssr client/entry&#45;server.tsx &#45;&#45;outDir dist/entry&#45;server</title>
+<path fill="none" stroke="black" d="M743,-144C743,-144 409,-144 409,-144 403,-144 397,-138 397,-132 397,-132 397,-120 397,-120 397,-114 403,-108 409,-108 409,-108 743,-108 743,-108 749,-108 755,-114 755,-120 755,-120 755,-132 755,-132 755,-138 749,-144 743,-144"/>
+<text text-anchor="middle" x="576" y="-122.3" font-family="Times,serif" font-size="14.00">vite build &#45;&#45;ssr client/entry&#45;server.tsx &#45;&#45;outDir dist/entry&#45;server</text>
+</g>
+<!-- build:ssr&#45;&gt;vite build &#45;&#45;ssr client/entry&#45;server.tsx &#45;&#45;outDir dist/entry&#45;server -->
+<g id="edge5" class="edge">
+<title>build:ssr&#45;&gt;vite build &#45;&#45;ssr client/entry&#45;server.tsx &#45;&#45;outDir dist/entry&#45;server</title>
+<path fill="none" stroke="black" d="M197.67,-126C238.3,-126 313.32,-126 385.83,-126"/>
+<polygon fill="black" stroke="black" points="385.46,-129.5 395.46,-126 385.46,-122.5 385.46,-129.5"/>
+</g>
+<!-- esbuild server.ts &#45;&#45;bundle &#45;&#45;platform=node &#45;&#45;format=esm &#45;&#45;external:./node_modules/* &#45;&#45;outdir=dist/server -->
+<g id="node7" class="node">
+<title>esbuild server.ts &#45;&#45;bundle &#45;&#45;platform=node &#45;&#45;format=esm &#45;&#45;external:./node_modules/* &#45;&#45;outdir=dist/server</title>
+<path fill="none" stroke="black" d="M862,-90C862,-90 290,-90 290,-90 284,-90 278,-84 278,-78 278,-78 278,-66 278,-66 278,-60 284,-54 290,-54 290,-54 862,-54 862,-54 868,-54 874,-60 874,-66 874,-66 874,-78 874,-78 874,-84 868,-90 862,-90"/>
+<text text-anchor="middle" x="576" y="-68.3" font-family="Times,serif" font-size="14.00">esbuild server.ts &#45;&#45;bundle &#45;&#45;platform=node &#45;&#45;format=esm &#45;&#45;external:./node_modules/* &#45;&#45;outdir=dist/server</text>
+</g>
+<!-- build:server&#45;&gt;esbuild server.ts &#45;&#45;bundle &#45;&#45;platform=node &#45;&#45;format=esm &#45;&#45;external:./node_modules/* &#45;&#45;outdir=dist/server -->
+<g id="edge6" class="edge">
+<title>build:server&#45;&gt;esbuild server.ts &#45;&#45;bundle &#45;&#45;platform=node &#45;&#45;format=esm &#45;&#45;external:./node_modules/* &#45;&#45;outdir=dist/server</title>
+<path fill="none" stroke="black" d="M206.86,-72C223.15,-72 243.53,-72 266.29,-72"/>
+<polygon fill="black" stroke="black" points="266.14,-75.5 276.14,-72 266.14,-68.5 266.14,-75.5"/>
+</g>
+<!-- dev -->
+<g id="node8" class="node">
+<title>dev</title>
+<path fill="none" stroke="black" d="M42,-63C42,-63 12,-63 12,-63 6,-63 0,-57 0,-51 0,-51 0,-39 0,-39 0,-33 6,-27 12,-27 12,-27 42,-27 42,-27 48,-27 54,-33 54,-39 54,-39 54,-51 54,-51 54,-57 48,-63 42,-63"/>
+<text text-anchor="middle" x="27" y="-41.3" font-family="Times,serif" font-size="14.00">dev</text>
+</g>
+<!-- dev&#45;&gt;build:server -->
+<g id="edge7" class="edge">
+<title>dev&#45;&gt;build:server</title>
+<path fill="none" stroke="black" d="M54.41,-50.21C71.26,-53.53 93.66,-57.94 113.88,-61.93"/>
+<polygon fill="black" stroke="black" points="113.19,-65.36 123.68,-63.86 114.55,-58.49 113.19,-65.36"/>
+</g>
+<!-- serve:dev -->
+<g id="node9" class="node">
+<title>serve:dev</title>
+<path fill="none" stroke="black" d="M188,-36C188,-36 144,-36 144,-36 138,-36 132,-30 132,-24 132,-24 132,-12 132,-12 132,-6 138,0 144,0 144,0 188,0 188,0 194,0 200,-6 200,-12 200,-12 200,-24 200,-24 200,-30 194,-36 188,-36"/>
+<text text-anchor="middle" x="166" y="-14.3" font-family="Times,serif" font-size="14.00">serve:dev</text>
+</g>
+<!-- dev&#45;&gt;serve:dev -->
+<g id="edge8" class="edge">
+<title>dev&#45;&gt;serve:dev</title>
+<path fill="none" stroke="black" d="M54.41,-39.79C73.15,-36.1 98.75,-31.06 120.6,-26.75"/>
+<polygon fill="black" stroke="black" points="121.01,-30.24 130.14,-24.87 119.66,-23.37 121.01,-30.24"/>
+</g>
+<!-- MODE=development node dist/server/server.js -->
+<g id="node10" class="node">
+<title>MODE=development node dist/server/server.js</title>
+<path fill="none" stroke="black" d="M701.5,-36C701.5,-36 450.5,-36 450.5,-36 444.5,-36 438.5,-30 438.5,-24 438.5,-24 438.5,-12 438.5,-12 438.5,-6 444.5,0 450.5,0 450.5,0 701.5,0 701.5,0 707.5,0 713.5,-6 713.5,-12 713.5,-12 713.5,-24 713.5,-24 713.5,-30 707.5,-36 701.5,-36"/>
+<text text-anchor="middle" x="576" y="-14.3" font-family="Times,serif" font-size="14.00">MODE=development node dist/server/server.js</text>
+</g>
+<!-- serve:dev&#45;&gt;MODE=development node dist/server/server.js -->
+<g id="edge9" class="edge">
+<title>serve:dev&#45;&gt;MODE=development node dist/server/server.js</title>
+<path fill="none" stroke="black" d="M200.39,-18C249.65,-18 344.84,-18 426.93,-18"/>
+<polygon fill="black" stroke="black" points="426.91,-21.5 436.91,-18 426.91,-14.5 426.91,-21.5"/>
+</g>
+<!-- serve -->
+<g id="node11" class="node">
+<title>serve</title>
+<path fill="none" stroke="black" d="M42,-252C42,-252 12,-252 12,-252 6,-252 0,-246 0,-240 0,-240 0,-228 0,-228 0,-222 6,-216 12,-216 12,-216 42,-216 42,-216 48,-216 54,-222 54,-228 54,-228 54,-240 54,-240 54,-246 48,-252 42,-252"/>
+<text text-anchor="middle" x="27" y="-230.3" font-family="Times,serif" font-size="14.00">serve</text>
+</g>
+<!-- node dist/server/server.js -->
+<g id="node12" class="node">
+<title>node dist/server/server.js</title>
+<path fill="none" stroke="black" d="M230,-252C230,-252 102,-252 102,-252 96,-252 90,-246 90,-240 90,-240 90,-228 90,-228 90,-222 96,-216 102,-216 102,-216 230,-216 230,-216 236,-216 242,-222 242,-228 242,-228 242,-240 242,-240 242,-246 236,-252 230,-252"/>
+<text text-anchor="middle" x="166" y="-230.3" font-family="Times,serif" font-size="14.00">node dist/server/server.js</text>
+</g>
+<!-- serve&#45;&gt;node dist/server/server.js -->
+<g id="edge10" class="edge">
+<title>serve&#45;&gt;node dist/server/server.js</title>
+<path fill="none" stroke="black" d="M54.41,-234C61.55,-234 69.68,-234 78.22,-234"/>
+<polygon fill="black" stroke="black" points="78.12,-237.5 88.12,-234 78.12,-230.5 78.12,-237.5"/>
+</g>
+</g>
+</svg>
--- a/docs/package-json.gv
+++ b/docs/package-json.gv
@ -0,0 +1,12 @@
+digraph {
+    rankdir=LR;
+    node [shape=box, style=rounded];
+
+    "build" -> { "build:client", "build:ssr", "build:server" }
+    "build:client" -> "vite build --outDir dist/entry-client"
+    "build:ssr" -> "vite build --ssr client/entry-server.tsx --outDir dist/entry-server"
+    "build:server" -> "esbuild server.ts --bundle --platform=node --format=esm --external:./node_modules/* --outdir=dist/server"
+    "dev" -> { "build:server", "serve:dev" }
+    "serve:dev" -> "MODE=development node dist/server/server.js"
+    "serve" -> "node dist/server/server.js"
+}
--- a/server/db/database.ts
+++ b/server/db/database.ts
@ -65,6 +65,9 @@ export function createDatabaseWrapper(db: DatabaseInternal): DatabaseConnection
        getProblem(id: string): Promise<Problem | null> {
            return getProblem(db, id)
        },
+        getJumbotronProblem(): Promise<Problem | null> {
+            return getJumbotronProblem(db)
+        },
    }
 }

@ -145,6 +148,18 @@ export const getProblem = (db: DatabaseInternal, id: string): Promise<Problem |
        return problem && !problem.deleted ? problem : null
    })

+export const getJumbotronProblem = (db: DatabaseInternal): Promise<Problem | null> =>
+    withDatabase(db, state => {
+        const mostRecentProblems = Object.values(state.problems)
+            .filter(p => !p.deleted)
+            .sort((p1, p2) => new Date(p2.createdAt).getTime() - new Date(p1.createdAt).getTime())
+            .slice(0, 3)
+
+        if (mostRecentProblems.length === 0) return null
+
+        return mostRecentProblems[Math.floor(Math.random() * mostRecentProblems.length)]
+    })
+
 export const getProblems = (db: DatabaseInternal): Promise<Problem[]> =>
    withDatabase(db, state => {
        return Object.values(state.problems).filter(p => !p.deleted)
--- a/server/db/example-data.ts
+++ b/server/db/example-data.ts
@ -1,5 +1,5 @@
 import { UserId } from '../../shared/model'
-import { Database } from './database'
+import { Database } from '../../shared/database'

 export const initialDatabaseValue: Database = {
    users: {},
--- a/server/routes.ts
+++ b/server/routes.ts
@ -14,6 +14,7 @@ import {
    createSolution,
    deleteProblem,
    deleteSolution,
+    getJumbotronProblem,
    getProblem,
    getProblems,
    getSolution,
@ -140,6 +141,11 @@ export async function createApiRouter(): Promise<[Router, DatabaseConnection]> {
        res.json(users)
    })

+    r.get('/api/jumbotron', async (req, res) => {
+        const problem = await getJumbotronProblem(db)
+        res.json(problem)
+    })
+
    r.get('/api/problems', async (req, res) => {
        type ProblemWithSolutionsCount = ProblemModel & { solutionsCount?: number }

--- a/shared/database.ts
+++ b/shared/database.ts
@ -2,6 +2,7 @@ import { Problem, Solution, User } from './model'

 export type DatabaseConnection = {
    getProblem(id: string): Promise<Problem | null>
+    getJumbotronProblem(): Promise<Problem | null>
 }

 export type Database = {