Almost MVP

client/api.tsx

@@ -13,6 +13,18 @@ export const server = {
             body: JSON.stringify(body),
         })
 
+        return await res.json()
+    },
+    async patch<T>(url: string, body?: T) {
+        const res = await fetch(url, {
+            method: 'PATCH',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        })
+
         return await res.json()
     },
 }

client/components/Markdown.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'preact/hooks'
+import { useContext, useEffect, useRef } from 'preact/hooks'
 
 import { unified } from 'unified'
 import remarkParse from 'remark-parse'
@@ -6,6 +6,7 @@ import remarkMath from 'remark-math'
 import remarkRehype from 'remark-rehype'
 import rehypeKatex from 'rehype-katex'
 import rehypeStringify from 'rehype-stringify'
+import { ServerContext } from '../hooks'
 
 async function renderMarkdownAsync(source: string) {
     return await unified()
@@ -17,9 +18,7 @@ async function renderMarkdownAsync(source: string) {
         .process(source)
 }
 
-// function renderMarkdownSync(source) {
+// function renderMarkdownSync(source: string): string {
-//     console.warn(`[Markdown] Rendering ${source.length} characters of markdown in sync mode`)
-
 //     return unified()
 //         .use(remarkParse)
 //         .use(remarkMath)
@@ -27,9 +26,24 @@ async function renderMarkdownAsync(source: string) {
 //         .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
 //         .use(rehypeStringify)
 //         .processSync(source)
+//         .toString()
 // }
 
 export const Markdown = ({ source }: { source: string }) => {
+    // Magia nera per renderizzare il markdown lato server
+    //
+    // const isServer = useContext(ServerContext)
+    // if (isServer) {
+    //     return (
+    //         <div
+    //             class="markdown"
+    //             dangerouslySetInnerHTML={{
+    //                 __html: renderMarkdownSync(source),
+    //             }}
+    //         ></div>
+    //     )
+    // }
+
     const elementRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {

client/components/Solution.tsx

@@ -1,5 +1,13 @@
 import { JSX } from 'preact/jsx-runtime'
-import { ProblemId, SolutionStatus, UserId } from '../../shared/model'
+import {
+    MetadataProps,
+    ProblemId,
+    Solution as SolutionModel,
+    SolutionId,
+    SolutionStatus,
+    UserId,
+} from '../../shared/model'
+import { server } from '../api'
 import { Markdown } from './Markdown'
 import { Select } from './Select'
 
@@ -10,14 +18,58 @@ const STATUS_SELECT_OPTIONS: Record<SolutionStatus, JSX.Element> = {
 }
 
 type Props = {
+    id: SolutionId
     sentBy?: UserId
     forProblem: ProblemId
     content: string
     status?: SolutionStatus
+    visible?: boolean
     adminControls: boolean
+    setSolution?: (solutionFn: (prev: SolutionModel) => SolutionModel) => void
+    refreshSolution?: () => void
 }
 
-export const Solution = ({ sentBy, forProblem, content, status, adminControls }: Props) => {
+export const Solution = ({
+    id,
+    sentBy,
+    forProblem,
+    content,
+    status,
+    visible,
+    adminControls,
+    setSolution,
+    refreshSolution,
+}: Props) => {
+    const markAsCorrect = async () => {
+        setSolution?.(prevSolution => ({ ...prevSolution, status: 'correct' }))
+
+        await server.patch(`/api/solution/${id}`, {
+            status: 'correct',
+        })
+
+        refreshSolution?.()
+    }
+
+    const markAsWrong = async () => {
+        setSolution?.(prevSolution => ({ ...prevSolution, status: 'wrong' }))
+
+        await server.patch(`/api/solution/${id}`, {
+            status: 'wrong',
+        })
+
+        refreshSolution?.()
+    }
+
+    const changeVisibility = async () => {
+        setSolution?.(prevSolution => ({ ...prevSolution, visible: !visible }))
+
+        await server.patch(`/api/solution/${id}`, {
+            visible: !visible,
+        })
+
+        refreshSolution?.()
+    }
+
     return (
         <div class={['solution', status].join(' ')}>
             <div class="solution-header">
@@ -50,17 +102,29 @@ export const Solution = ({ sentBy, forProblem, content, status, adminControls }:
                         <div class="status-label">{STATUS_SELECT_OPTIONS[status]}</div>
                         {adminControls && (
                             <>
-                                <button disabled={status === 'pending'} class="icon">
+                                <button
-                                    <span class="material-symbols-outlined">hourglass_empty</span>
+                                    disabled={status === 'correct'}
-                                </button>
+                                    class="icon"
-                                <button disabled={status === 'correct'} class="icon">
+                                    onClick={markAsCorrect}
+                                >
                                     <span class="material-symbols-outlined correct">
                                         check_circle
                                     </span>
                                 </button>
-                                <button disabled={status === 'wrong'} class="icon">
+                                <button
+                                    disabled={status === 'wrong'}
+                                    class="icon"
+                                    onClick={markAsWrong}
+                                >
                                     <span class="material-symbols-outlined wrong">cancel</span>
                                 </button>
+                                {status !== 'pending' && (
+                                    <button class="icon" onClick={changeVisibility}>
+                                        <span class="material-symbols-outlined">
+                                            {visible ? 'visibility' : 'visibility_off'}
+                                        </span>
+                                    </button>
+                                )}
                             </>
                         )}
                     </div>

client/entry-server.tsx

@@ -1,6 +1,6 @@
 import renderToString from 'preact-render-to-string'
 // import { App } from './App'
-import { MetadataContext } from './hooks'
+import { MetadataContext, ServerContext } from './hooks'
 
 import { RenderedPage } from '../shared/ssr'
 import { App } from './App'
@@ -10,7 +10,9 @@ export default (url: string): RenderedPage => {
 
     const html = renderToString(
         <MetadataContext.Provider value={metadata}>
+            {/* <ServerContext.Provider value={true}> */}
             <App url={url} />
+            {/* </ServerContext.Provider> */}
         </MetadataContext.Provider>
     )
 

client/hooks.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks'
+import { StateUpdater, useEffect, useState } from 'preact/hooks'
 
 import { createContext } from 'preact'
 import { server } from './api'
@@ -10,6 +10,9 @@ type Metadata = {
 
 export const MetadataContext = createContext<Metadata>({})
 
+export const ServerContext = createContext<boolean>(false)
+export const ClientContext = createContext<boolean>(false)
+
 type CurrentUserHook = (
     onLoaded?: (user: User | null) => void
 ) => [User | null, () => Promise<void>]
@@ -32,12 +35,17 @@ export const useCurrentUser: CurrentUserHook = onLoaded => {
     return [user, logout]
 }
 
-type ReadResourceFunction = <T>(
+type RefreshFunction = () => AbortController
+type HeuristicStateUpdater<S> = StateUpdater<S>
+
+type ResourceHookFunction = <T>(
     url: string | (() => string),
     initialValue: T
-) => [T, () => AbortController]
+) => [T, RefreshFunction, HeuristicStateUpdater<T>]
+
+export const useResource: ResourceHookFunction = (url, initialValue) => {
+    //
 
-export const useReadResource: ReadResourceFunction = (url, initialValue) => {
     const [value, setValue] = useState(initialValue)
 
     function refresh() {
@@ -65,5 +73,24 @@ export const useReadResource: ReadResourceFunction = (url, initialValue) => {
         }
     }, [])
 
-    return [value, refresh]
+    return [value, refresh, setValue]
+}
+
+type HeuristicListItemUpdater<S> = (index: number, value: S | ((prevValue: S) => S)) => void
+
+export const useListResource = <T,>(
+    url: string | (() => string)
+): [T[], RefreshFunction, HeuristicListItemUpdater<T>, HeuristicStateUpdater<T[]>] => {
+    const [list, refreshList, setListHeuristic] = useResource<T[]>(url, [])
+
+    const setItemHeuristic: HeuristicListItemUpdater<T> = (index, newValue) => {
+        setListHeuristic(list => {
+            const newList = [...list]
+            // @ts-ignore
+            newList[index] = typeof newValue === 'function' ? newValue(list[index]) : newValue
+            return newList
+        })
+    }
+
+    return [list, refreshList, setItemHeuristic, setListHeuristic]
 }

client/pages/Admin.tsx

@@ -1,10 +1,11 @@
 import { route } from 'preact-router'
 import { useState } from 'preact/hooks'
-import { isStudent } from '../../shared/model'
+import { isAdministrator, isStudent, Solution as SolutionModel } from '../../shared/model'
 import { server } from '../api'
 import { Header } from '../components/Header'
 import { MarkdownEditor } from '../components/MarkdownEditor'
-import { useCurrentUser } from '../hooks'
+import { Solution } from '../components/Solution'
+import { useCurrentUser, useListResource, useResource } from '../hooks'
 
 const CreateProblem = ({}) => {
     const [source, setSource] = useState('')
@@ -33,6 +34,9 @@ export const AdminPage = ({}) => {
         }
     })
 
+    const [solutions, refreshSolutions, setSolutionHeuristic] =
+        useListResource<SolutionModel>(`/api/solutions`)
+
     return (
         user && (
             <main class="page-admin">
@@ -40,7 +44,19 @@ export const AdminPage = ({}) => {
                 <div class="subtitle">Nuovo problema</div>
                 <CreateProblem />
                 <div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
-                ...
+                <div class="solution-list">
+                    {solutions.map(
+                        (s, index) =>
+                            s.status === 'pending' && (
+                                <Solution
+                                    adminControls
+                                    {...s}
+                                    setSolution={solFn => setSolutionHeuristic(index, solFn)}
+                                    refreshSolution={refreshSolutions}
+                                />
+                            )
+                    )}
+                </div>
             </main>
         )
     )

client/pages/Home.tsx

@@ -5,11 +5,11 @@ import { Header } from '../components/Header'
 
 import { Problem } from '../components/Problem'
 import { Select } from '../components/Select'
-import { useReadResource, useCurrentUser } from '../hooks'
+import { useResource, useCurrentUser } from '../hooks'
 
 export const HomePage = () => {
     const [user] = useCurrentUser()
-    const [problems] = useReadResource<ProblemModel[]>('/api/problems', [])
+    const [problems] = useResource<ProblemModel[]>('/api/problems', [])
 
     console.log(problems)
 

client/pages/Problem.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from 'preact/hooks'
+import { useContext, useState } from 'preact/hooks'
 import {
     isAdministrator,
     Problem as ProblemModel,
@@ -9,7 +9,7 @@ import { Header } from '../components/Header'
 import { MarkdownEditor } from '../components/MarkdownEditor'
 import { Problem } from '../components/Problem'
 import { Solution } from '../components/Solution'
-import { MetadataContext, useCurrentUser, useReadResource } from '../hooks'
+import { MetadataContext, useCurrentUser, useListResource, useResource } from '../hooks'
 
 type RouteProps = {
     id: string
@@ -23,11 +23,13 @@ export const ProblemPage = ({ id }: RouteProps) => {
 
     const [source, setSource] = useState('')
 
-    const [{ content }] = useReadResource<{ content: string }>(`/api/problem/${id}`, {
+    const [{ content }] = useResource<{ content: string }>(`/api/problem/${id}`, {
         content: '',
     })
 
-    const [solutions] = useReadResource<SolutionModel[]>(`/api/solutions?problem=${id}`, [])
+    const [solutions, refreshSolutions, setSolutionHeuristic] = useListResource<SolutionModel>(
+        `/api/solutions?problem=${id}`
+    )
 
     const sendSolution = async () => {
         await server.post('/api/solution', {
@@ -35,7 +37,7 @@ export const ProblemPage = ({ id }: RouteProps) => {
             content: source,
         })
 
-        location.reload()
+        refreshSolutions()
     }
 
     return (
@@ -47,10 +49,12 @@ export const ProblemPage = ({ id }: RouteProps) => {
                 <details>
                     <summary>Soluzioni</summary>
                     <div class="solution-list">
-                        {solutions.map(s => (
+                        {solutions.map((s, index) => (
                             <Solution
                                 {...s}
                                 adminControls={user !== null && isAdministrator(user.role)}
+                                refreshSolution={refreshSolutions}
+                                setSolution={solFn => setSolutionHeuristic(index, solFn)}
                             />
                         ))}
                     </div>

client/pages/Profile.tsx

@@ -5,13 +5,10 @@ import { server } from '../api'
 import { Header } from '../components/Header'
 import { Select } from '../components/Select'
 import { Solution } from '../components/Solution'
-import { useCurrentUser, useReadResource } from '../hooks'
+import { useCurrentUser, useResource } from '../hooks'
 
 const SolutionList = ({ user }: { user: User }) => {
-    const [solutions, refresh] = useReadResource<SolutionModel[]>(
+    const [solutions, refresh] = useResource<SolutionModel[]>(`/api/solutions?user=${user.id}`, [])
-        `/api/solutions?user=${user.id}`,
-        []
-    )
 
     return (
         <div class="solution-list">

client/styles/main.scss

@@ -328,6 +328,7 @@ details {
 
     display: flex;
     flex-direction: column;
+    align-items: center;
     gap: 1rem;
 }
 
@@ -422,13 +423,13 @@ header {
     flex-direction: column;
     gap: 0.5rem;
 
+    transition: all 100ms ease-in-out;
+
     &.correct {
-        // background: hsl(120, 100%, 90%);
+        border: 4px solid #00aa00;
-        box-shadow: 0 0 12px 2px #00990030, 0 0 1px 1px #00330030;
     }
     &.wrong {
-        // background: hsl(0, 100%, 90%);
+        border: 4px solid #cc0000;
-        box-shadow: 0 0 12px 2px #99000030, 0 0 1px 1px #33000030;
     }
 
     .solution-header {

package.json

@@ -9,8 +9,8 @@
         "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",
-        "serve:dev": "MODE=development node dist/server/server.js",
         "dev": "run-s build:server serve:dev",
+        "serve:dev": "MODE=development node dist/server/server.js",
         "serve": "node dist/server/server.js"
     },
     "license": "MIT",
@@ -21,6 +21,7 @@
         "chalk": "^5.1.2",
         "cookie-parser": "^1.4.6",
         "express": "^4.18.2",
+        "http-status-codes": "^2.2.0",
         "katex": "^0.16.3",
         "morgan": "^1.10.0",
         "preact": "^10.11.2",
@@ -44,6 +45,7 @@
         "concurrently": "^7.5.0",
         "esbuild": "^0.15.13",
         "npm-run-all": "^4.1.5",
+        "ts-node": "^10.9.1",
         "typescript": "^4.8.4"
     }
 }

pnpm-lock.yaml

@@ -13,6 +13,7 @@ specifiers:
   cookie-parser: ^1.4.6
   esbuild: ^0.15.13
   express: ^4.18.2
+  http-status-codes: ^2.2.0
   katex: ^0.16.3
   morgan: ^1.10.0
   npm-run-all: ^4.1.5
@@ -25,6 +26,7 @@ specifiers:
   remark-parse: ^10.0.1
   remark-rehype: ^10.1.0
   sass: ^1.55.0
+  ts-node: ^10.9.1
   typescript: ^4.8.4
   unified: ^10.1.2
   url-pattern: ^1.0.3
@@ -37,6 +39,7 @@ dependencies:
   chalk: 5.1.2
   cookie-parser: 1.4.6
   express: 4.18.2
+  http-status-codes: 2.2.0
   katex: 0.16.3
   morgan: 1.10.0
   preact: 10.11.2
@@ -60,6 +63,7 @@ devDependencies:
   concurrently: 7.5.0
   esbuild: 0.15.13
   npm-run-all: 4.1.5
+  ts-node: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
   typescript: 4.8.4
 
 packages:
@@ -308,6 +312,13 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
+  /@cspotcode/source-map-support/0.8.1:
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+    dev: true
+
   /@esbuild/android-arm/0.15.13:
     resolution: {integrity: sha512-RY2fVI8O0iFUNvZirXaQ1vMvK0xhCcl0gqRj74Z6yEiO1zAUa7hbsdwZM1kzqbxHK7LFyMizipfXT3JME+12Hw==}
     engines: {node: '>=12'}
@@ -344,7 +355,6 @@ packages:
   /@jridgewell/resolve-uri/3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
-    dev: false
 
   /@jridgewell/set-array/1.1.2:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
@@ -353,7 +363,6 @@ packages:
 
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: false
 
   /@jridgewell/trace-mapping/0.3.17:
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
@@ -362,6 +371,13 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: false
 
+  /@jridgewell/trace-mapping/0.3.9:
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.0
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
   /@preact/preset-vite/2.4.0_preact@10.11.2+vite@3.2.2:
     resolution: {integrity: sha512-EiUMHuiCThuTuK+eH2r5uDg+CJbbt4aWJGePuszrHuXUpRv6WAeO4S+/DTJsEHtPtGmPRR3cLQ68N5097eOSRA==}
     peerDependencies:
@@ -436,6 +452,22 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /@tsconfig/node10/1.0.9:
+    resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
+    dev: true
+
+  /@tsconfig/node12/1.0.11:
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+    dev: true
+
+  /@tsconfig/node14/1.0.3:
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+    dev: true
+
+  /@tsconfig/node16/1.0.3:
+    resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
+    dev: true
+
   /@types/body-parser/1.19.2:
     resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
     dependencies:
@@ -543,6 +575,17 @@ packages:
       negotiator: 0.6.3
     dev: false
 
+  /acorn-walk/8.2.0:
+    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /acorn/8.8.1:
+    resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -569,6 +612,10 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /arg/4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+    dev: true
+
   /array-flatten/1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
     dev: false
@@ -806,6 +853,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /create-require/1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+    dev: true
+
   /cross-spawn/6.0.5:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
     engines: {node: '>=4.8'}
@@ -874,6 +925,11 @@ packages:
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
     dev: false
 
+  /diff/4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+    dev: true
+
   /diff/5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
     engines: {node: '>=0.3.1'}
@@ -1410,6 +1466,10 @@ packages:
       toidentifier: 1.0.1
     dev: false
 
+  /http-status-codes/2.2.0:
+    resolution: {integrity: sha512-feERVo9iWxvnejp3SEfm/+oNG517npqL2/PIA8ORjyOZjGC7TwCRQsZylciLS64i6pJ0wRYz3rkXLRwbtFa8Ng==}
+    dev: false
+
   /iconv-lite/0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -1631,6 +1691,10 @@ packages:
     resolution: {integrity: sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==}
     dev: false
 
+  /make-error/1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+    dev: true
+
   /mdast-util-definitions/5.1.1:
     resolution: {integrity: sha512-rQ+Gv7mHttxHOBx2dkF4HWTg+EE+UR78ptQWDylzPKaQuVGdG4HIoY3SrS/pCp80nZ04greFvXbVFHT+uf0JVQ==}
     dependencies:
@@ -2531,6 +2595,37 @@ packages:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
     dev: false
 
+  /ts-node/10.9.1_cbe7ovvae6zqfnmtgctpgpys54:
+    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.9
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.3
+      '@types/node': 18.11.9
+      acorn: 8.8.1
+      acorn-walk: 8.2.0
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 4.8.4
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    dev: true
+
   /tslib/2.4.1:
     resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
     dev: true
@@ -2662,6 +2757,10 @@ packages:
       sade: 1.8.1
     dev: false
 
+  /v8-compile-cache-lib/3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+    dev: true
+
   /validate-npm-package-license/3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
     dependencies:
@@ -2781,6 +2880,11 @@ packages:
       yargs-parser: 21.1.1
     dev: true
 
+  /yn/3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+    dev: true
+
   /zwitch/2.0.2:
     resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
     dev: false

server.ts

@@ -6,8 +6,8 @@ import morgan from 'morgan'
 
 import { createServer as createViteServer } from 'vite'
 
-import { createApiRouter } from './server/routes.js'
+import { createApiRouter } from './server/routes'
-import { RenderFunction } from './shared/ssr.js'
+import { RenderFunction } from './shared/ssr'
 
 const HTML_ROUTES = ['/', '/login', '/problem/:id', '/admin', '/profile']
 
@@ -71,7 +71,7 @@ async function createDevRouter() {
                     .replace('<!-- INJECT META TAGS -->', metaTagsHtml)
                     .replace('<!-- SSR OUTLET -->', html)
             )
-        } catch (error) {
+        } catch (error: any) {
             vite.ssrFixStacktrace(error)
             next(error)
         }
@@ -82,8 +82,9 @@ async function createDevRouter() {
 
 async function createProductionRouter() {
     // Load bundled entry point for server side rendering
-    const render: RenderFunction = ((await import('./dist/entry-server/entry-server.js')) as any)
+
-        .default
+    // @ts-ignore
+    const render: RenderFunction = (await import('./dist/entry-server/entry-server.js')).default
 
     const r = express.Router()
 

server/db/database.ts

@@ -37,7 +37,7 @@ function createMutex(): Mutex {
     const unlock = () => {
         if (waiters.length > 0) {
             console.log(`[Mutex] Passing lock to next in queue (of size ${waiters.length})`)
-            const resolve = waiters.shift()
+            const resolve = waiters.shift()!!
             resolve(once(unlock, `lock already released`))
         } else {
             locked = false
@@ -116,8 +116,8 @@ export const getUsers = (db: DatabaseConnection) =>
         return Object.values(state.users)
     })
 
-export const getUser = (db: DatabaseConnection, id: string) =>
+export const getUser: (db: DatabaseConnection, id: string) => Promise<User | null> = (db, id) =>
-    withDatabase(db, (state: Database): User | null => {
+    withDatabase(db, state => {
         return state.users[id] ?? null
     })
 
@@ -142,9 +142,9 @@ export const createProblem = (
         return nextId
     })
 
-export const getProblem = (db: DatabaseConnection, id: string): Promise<Problem> =>
+export const getProblem = (db: DatabaseConnection, id: string): Promise<Problem | null> =>
     withDatabase(db, state => {
-        return state.problems[id]
+        return state.problems[id] ?? null
     })
 
 export const getProblems = (db: DatabaseConnection): Promise<Problem[]> =>
@@ -158,53 +158,52 @@ export const getProblems = (db: DatabaseConnection): Promise<Problem[]> =>
 
 export const createSolution = (
     db: DatabaseConnection,
-    { sentBy, forProblem, content }: Omit<Solution, MetaProps>
+    { sentBy, forProblem, content }: Omit<Solution, MetaProps | 'status' | 'visible'>
 ): Promise<SolutionId> =>
     withDatabase(db, state => {
-        const id = crypto.randomBytes(10).toString('hex')
+        const id = crypto.randomBytes(10).toString('hex') as SolutionId
+
         state.solutions[id] = {
             id,
+            createdAt: new Date().toISOString(),
+
             sentBy,
             forProblem,
             content,
             status: 'pending',
+            visible: false,
         }
 
         return id
     })
 
-export const getSolution = (db: DatabaseConnection, id: SolutionId): Promise<Solution> =>
+export const getSolution = (db: DatabaseConnection, id: SolutionId): Promise<Solution | null> =>
     withDatabase(db, state => {
-        return state.solutions[id]
+        return state.solutions[id] ?? null
     })
 
 export const updateSolution = (
     db: DatabaseConnection,
     id: SolutionId,
-    solution: Omit<Solution, MetaProps>
+    solution: Partial<Omit<Solution, MetaProps>>
 ): Promise<Solution> =>
     withDatabase(db, state => {
-        state.solutions[id] = { id, ...solution }
+        state.solutions[id] = {
+            ...state.solutions[id],
+            ...solution,
+        }
+
         return state.solutions[id]
     })
 
-type SolutionsQuery = Partial<{
+export const getSolutions = (db: DatabaseConnection) =>
-    sentBy?: UserId
-    forProblem?: ProblemId
-}>
-
-export const getSolutions = (db: DatabaseConnection, { sentBy, forProblem }: SolutionsQuery = {}) =>
     withDatabase(db, state => {
         let solutions = Object.values(state.solutions)
 
-        console.log(solutions.length, sentBy, forProblem)
-
-        if (sentBy) {
-            solutions = solutions.filter(s => s.sentBy === sentBy)
-        }
-        if (forProblem) {
-            solutions = solutions.filter(s => s.forProblem === forProblem)
-        }
-
         return solutions
     })
+
+export const getVisibleSolutions = (db: DatabaseConnection) =>
+    withDatabase(db, state => {
+        return Object.values(state.solutions).filter(s => s.visible)
+    })

server/routes.ts

@@ -7,6 +7,8 @@ import express, { Request, Response, Router } from 'express'
 
 import { createStatusRouter } from './middlewares'
 
+import { StatusCodes } from 'http-status-codes'
+
 import {
     createDatabase,
     createProblem,
@@ -17,24 +19,37 @@ import {
     getSolutions,
     getUser,
     getUsers,
+    getVisibleSolutions,
     updateSolution,
 } from './db/database'
 
-import { isAdministrator, isStudent, Problem, ProblemId, UserId } from '../shared/model'
+import {
+    Id,
+    isAdministrator,
+    isStudent,
+    Opaque,
+    Problem,
+    ProblemId,
+    Solution as SolutionModel,
+    SolutionId,
+    UserId,
+} from '../shared/model'
 import { initialDatabaseValue } from './db/example-data'
 
+import { validateObjectKeys } from '../shared/utils'
+
 export async function createApiRouter() {
-    type SessionId = string
+    type SessionId = Opaque<string, string, 'session'>
 
+    const sessionStore: Record<SessionId, UserId> = {}
     const sessions = {
-        store: {},
         createSession(userId: UserId) {
-            const sid = crypto.randomBytes(10).toString('hex')
+            const sid = crypto.randomBytes(10).toString('hex') as SessionId
-            this.store[sid] = userId
+            sessionStore[sid] = userId
             return sid
         },
         getUserForSession(sid: SessionId) {
-            return this.store[sid] ?? null
+            return sessionStore[sid] ?? null
         },
     }
 
@@ -68,7 +83,7 @@ export async function createApiRouter() {
 
         const user = await getUser(db, id)
         if (!user) {
-            res.sendStatus(403)
+            res.sendStatus(StatusCodes.FORBIDDEN)
             return
         }
 
@@ -83,8 +98,8 @@ export async function createApiRouter() {
 
     r.get('/api/users', async (req, res) => {
         const requestUser = await getRequestUser(req)
-        if (requestUser.role !== 'admin' && requestUser.role !== 'moderator') {
+        if (!requestUser || !isAdministrator(requestUser.role)) {
-            res.sendStatus(401)
+            res.sendStatus(StatusCodes.UNAUTHORIZED)
             return
         }
 
@@ -119,11 +134,11 @@ export async function createApiRouter() {
     r.post('/api/problem', async (req, res) => {
         const user = await getRequestUser(req)
         if (!user) {
-            res.sendStatus(401)
+            res.sendStatus(StatusCodes.UNAUTHORIZED)
             return
         }
         if (user.role !== 'admin' && user.role !== 'moderator') {
-            res.sendStatus(401)
+            res.sendStatus(StatusCodes.UNAUTHORIZED)
             return
         }
 
@@ -135,86 +150,107 @@ export async function createApiRouter() {
         res.json(id)
     })
 
-    r.get('/api/solution/:id', async (req, res) => {
+    r.get('/api/solutions', async (req, res) => {
-        const user = await getRequestUser(req)
+        let queryUser = (req.query.user ?? null) as UserId | null
-
+        let queryProblem = (req.query.problem ?? null) as ProblemId | null
-        // l'utente deve essere loggato
-        if (!user) {
-            res.sendStatus(401)
-            return
-        }
 
-        const solution = await getSolution(db, req.params.id)
+        const requestUser = await getRequestUser(req)
 
-        // uno studente che prova a ottenere la soluzione di un altro utente
+        let solutions = await getSolutions(db)
-        if (!isAdministrator(user.role) && solution.sentBy !== user.id) {
+        // se l'utente non è loggato o se non è un amministratore allora mostra solo le soluzioni "visibili"
-            res.sendStatus(401)
+        if (!requestUser || !isAdministrator(requestUser.role)) {
-            return
+            solutions = solutions.filter(
+                s => s.visible || (requestUser && s.sentBy === requestUser.id)
+            )
+        }
+        // filtra rispetto agli utenti
+        if (queryUser !== null) {
+            solutions = solutions.filter(s => s.sentBy === queryUser)
+        }
+        // filtra rispetto ai problemi
+        if (queryProblem !== null) {
+            solutions = solutions.filter(s => s.forProblem === queryProblem)
         }
 
-        res.json(solution)
+        res.json(solutions)
     })
 
-    r.get('/api/solutions', async (req, res) => {
+    r.get('/api/solution/:id', async (req, res) => {
-        let queryUserId = req.query.user as string
+        const user = await getRequestUser(req)
-        let queryProblemId = req.query.problem as string
 
-        const requestUser = await getRequestUser(req)
+        const solution = await getSolution(db, req.params.id as SolutionId)
-        if (!requestUser) {
+        // la soluzione deve esistere
-            res.sendStatus(401)
+        if (solution === null) {
+            res.sendStatus(StatusCodes.NOT_FOUND)
             return
         }
-
+        // uno studente può vedere solo soluzioni visibili o proprie soluzione
-        // if current user is not an administrator then force the user query to current user
+        if (!solution.visible && user && isStudent(user.role) && solution.sentBy !== user.id) {
-        if (!isAdministrator(requestUser.role)) {
+            res.sendStatus(StatusCodes.UNAUTHORIZED)
-            queryUserId = requestUser.id
+            return
         }
 
-        res.json(
+        res.json(solution)
-            await getSolutions(db, {
-                sentBy: queryUserId as UserId,
-                forProblem: queryProblemId as ProblemId,
-            })
-        )
     })
 
     r.post('/api/solution', async (req, res) => {
         const user = await getRequestUser(req)
         if (!user) {
-            res.sendStatus(401)
+            res.sendStatus(StatusCodes.UNAUTHORIZED)
             return
         }
 
         await createSolution(db, {
             sentBy: user.id,
-            forProblem: req.body.problemId,
+            forProblem: req.body.forProblem,
             content: req.body.content,
-            status: 'pending',
         })
 
         res.send({ status: 'ok' })
     })
 
-    r.post('/api/solution/:id', async (req, res) => {
+    r.patch('/api/solution/:id', async (req, res) => {
-        const user = await getRequestUser(req)
+        const id = req.params.id as SolutionId
 
+        const user = await getRequestUser(req)
         // l'utente deve essere loggato
         if (!user) {
-            res.sendStatus(401)
+            res.sendStatus(StatusCodes.UNAUTHORIZED)
             return
         }
 
-        const solutionId = req.params.id
+        const solution = await getSolution(db, id)
-        const solution = await getSolution(db, solutionId)
+        // la soluzione deve esistere
-
+        if (solution === null) {
+            res.sendStatus(404)
+            return
+        }
         // uno studente non può modificare una soluzione di un altro utente
-        if (isStudent(user.role) && solution.sentBy !== user.id) {
+        if (user.role === 'student' && solution.sentBy !== user.id) {
-            res.sendStatus(401)
+            res.status(StatusCodes.UNAUTHORIZED)
+            res.send(`a student can only modify its own solution`)
+            return
+        }
+        // uno studente può modificare solo il campo "content"
+        if (
+            user.role === 'student' &&
+            !validateObjectKeys<keyof SolutionModel>(req.body, ['content'])
+        ) {
+            res.status(StatusCodes.UNAUTHORIZED)
+            res.send(`a student can only modify the field "content"`)
+            return
+        }
+        // un moderatore può modificare solo i campi "content", "visible", "status"
+        if (
+            user.role === 'moderator' &&
+            !validateObjectKeys<keyof SolutionModel>(req.body, ['content', 'status', 'visible'])
+        ) {
+            res.status(StatusCodes.UNAUTHORIZED)
+            res.send(`a moderator can only modify the fields "content", "visible", "status"`)
             return
         }
 
-        // modifico la soluzione con il json mandato dal client nel body della richiesta
+        await updateSolution(db, id, req.body)
-        await updateSolution(db, solutionId, req.body)
 
         res.json({ status: 'ok' })
     })
@@ -224,13 +260,13 @@ export async function createApiRouter() {
 
         // intanto l'utente deve essere loggato
         if (!user) {
-            res.sendStatus(401)
+            res.sendStatus(StatusCodes.UNAUTHORIZED)
             return
         }
 
         // solo gli amministratori possono usare questa route
         if (!isAdministrator(user.role)) {
-            res.sendStatus(401)
+            res.sendStatus(StatusCodes.UNAUTHORIZED)
             return
         }
 

shared/model.ts

@@ -4,8 +4,8 @@
 
 export type MetadataProps = 'id' | 'createdAt'
 
-type Opaque<T, K, L extends string = 'opaque'> = T & { _: K; __: L }
+export type Opaque<T, K, L extends string = 'opaque'> = T & { _: K; __: L }
-type Id<T> = Opaque<string, T, 'id'>
+export type Id<T> = Opaque<string, T, 'id'>
 
 //
 // Users
@@ -20,6 +20,7 @@ export type UserId = Id<User>
 
 export type User = {
     id: UserId
+
     role: UserRole
 }
 
@@ -39,9 +40,10 @@ export type ProblemId = Id<Problem>
 
 export type Problem = {
     id: ProblemId
+    createdAt: string
+
     content: string
     createdBy: UserId
-    createdAt: string
 }
 
 //
@@ -50,12 +52,19 @@ export type Problem = {
 
 export type SolutionStatus = 'pending' | 'correct' | 'wrong'
 
-export type SolutionId = string
+export type SolutionId = Id<Solution>
 
 export type Solution = {
     id: SolutionId
+    createdAt: string
+
     sentBy: UserId
     forProblem: ProblemId
     content: string
     status: SolutionStatus
+
+    /**
+     * The _visibility status_ only applies when `status` is not "pending"
+     */
+    visible: boolean
 }

shared/utils.ts

@@ -0,0 +1,6 @@
+export function validateObjectKeys<K extends string>(obj: any, keys: K[]): boolean {
+    const keySet = new Set(keys)
+
+    // @ts-ignore
+    return Object.keys(obj).every(key => keySet.has(key))
+}

tsconfig.json

@@ -8,6 +8,7 @@
         "esModuleInterop": false,
         "allowSyntheticDefaultImports": true,
         "strict": true,
+        "strictNullChecks": true,
         "noImplicitAny": true,
         "forceConsistentCasingInFileNames": true,
         "module": "ESNext",

tsconfig.node.json

@@ -4,6 +4,7 @@
         "module": "ESNext",
         "moduleResolution": "Node",
         "noImplicitAny": true,
+        "strictNullChecks": true,
         "allowSyntheticDefaultImports": true
     },
     "include": ["server", "shared"]