phc/problemi
6
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Almost MVP

Browse Source
This commit is contained in:
aziis98
2022-11-22 04:03:32 +01:00
parent ea3b7aeecf
commit dcaa052f30
19 changed files with 430 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/api.tsx
+12
View File
@@ -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
+18 -4
View File
@@ -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) {
// console.warn(`[Markdown] Rendering ${source.length} characters of markdown in sync mode`)
// function renderMarkdownSync(source: string): string {
// 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
+71 -7
View File
@@ -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">
<span class="material-symbols-outlined">hourglass_empty</span>
</button>
<button disabled={status === 'correct'} 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
+3 -1
View File
@@ -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
+32 -5
View File
@@ -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
+19 -3
View File
@@ -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
+2 -2
View File
@@ -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
+10 -6
View File
@@ -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
+2 -5
View File
@@ -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[]>(
`/api/solutions?user=${user.id}`,
[]
)
const [solutions, refresh] = useResource<SolutionModel[]>(`/api/solutions?user=${user.id}`, [])
return (
<div class="solution-list">
client/styles/main.scss
+5 -4
View File
@@ -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%);
box-shadow: 0 0 12px 2px #00990030, 0 0 1px 1px #00330030;
border: 4px solid #00aa00;
}
&.wrong {
// background: hsl(0, 100%, 90%);
box-shadow: 0 0 12px 2px #99000030, 0 0 1px 1px #33000030;
border: 4px solid #cc0000;
}
.solution-header {
package.json
+3 -1
View File
@@ -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
Generated
+106 -2
View File
@@ -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 -5
View File
@@ -6,8 +6,8 @@ import morgan from 'morgan'
import { createServer as createViteServer } from 'vite'
import { createApiRouter } from './server/routes.js'
import { RenderFunction } from './shared/ssr.js'
import { createApiRouter } from './server/routes'
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
+25 -26
View File
@@ -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) =>
withDatabase(db, (state: Database): User | null => {
export const getUser: (db: DatabaseConnection, id: string) => Promise<User | null> = (db, id) =>
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<{
sentBy?: UserId
forProblem?: ProblemId
}>
export const getSolutions = (db: DatabaseConnection, { sentBy, forProblem }: SolutionsQuery = {}) =>
export const getSolutions = (db: DatabaseConnection) =>
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
+95 -59
View File
@@ -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'
export async function createApiRouter() {
type SessionId = string
import { validateObjectKeys } from '../shared/utils'
export async function createApiRouter() {
type SessionId = Opaque<string, string, 'session'>
const sessionStore: Record<SessionId, UserId> = {}
const sessions = {
store: {},
createSession(userId: UserId) {
const sid = crypto.randomBytes(10).toString('hex')
this.store[sid] = userId
const sid = crypto.randomBytes(10).toString('hex') as SessionId
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') {
res.sendStatus(401)
if (!requestUser || !isAdministrator(requestUser.role)) {
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/solutions', async (req, res) => {
let queryUser = (req.query.user ?? null) as UserId | null
let queryProblem = (req.query.problem ?? null) as ProblemId | null
const requestUser = await getRequestUser(req)
let solutions = await getSolutions(db)
// se l'utente non è loggato o se non è un amministratore allora mostra solo le soluzioni "visibili"
if (!requestUser || !isAdministrator(requestUser.role)) {
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(solutions)
})
r.get('/api/solution/:id', async (req, res) => {
const user = await getRequestUser(req)
// l'utente deve essere loggato
if (!user) {
res.sendStatus(401)
const solution = await getSolution(db, req.params.id as SolutionId)
// la soluzione deve esistere
if (solution === null) {
res.sendStatus(StatusCodes.NOT_FOUND)
return
}
const solution = await getSolution(db, req.params.id)
// uno studente che prova a ottenere la soluzione di un altro utente
if (!isAdministrator(user.role) && solution.sentBy !== user.id) {
res.sendStatus(401)
// uno studente può vedere solo soluzioni visibili o proprie soluzione
if (!solution.visible && user && isStudent(user.role) && solution.sentBy !== user.id) {
res.sendStatus(StatusCodes.UNAUTHORIZED)
return
}
res.json(solution)
})
r.get('/api/solutions', async (req, res) => {
let queryUserId = req.query.user as string
let queryProblemId = req.query.problem as string
const requestUser = await getRequestUser(req)
if (!requestUser) {
res.sendStatus(401)
return
}
// if current user is not an administrator then force the user query to current user
if (!isAdministrator(requestUser.role)) {
queryUserId = requestUser.id
}
res.json(
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) => {
const user = await getRequestUser(req)
r.patch('/api/solution/:id', async (req, res) => {
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, solutionId)
const solution = await getSolution(db, id)
// 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) {
res.sendStatus(401)
if (user.role === 'student' && solution.sentBy !== user.id) {
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, solutionId, req.body)
await updateSolution(db, id, 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
+13 -4
View File
@@ -4,8 +4,8 @@
export type MetadataProps = 'id' | 'createdAt'
type Opaque<T, K, L extends string = 'opaque'> = T & { _: K; __: L }
type Id<T> = Opaque<string, T, 'id'>
export type Opaque<T, K, L extends string = 'opaque'> = T & { _: K; __: L }
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
+6
View File
@@ -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
+1
View File
@@ -8,6 +8,7 @@
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"strictNullChecks": true,
"noImplicitAny": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
tsconfig.node.json
+1
View File
@@ -4,6 +4,7 @@
"module": "ESNext",
"moduleResolution": "Node",
"noImplicitAny": true,
"strictNullChecks": true,
"allowSyntheticDefaultImports": true
},
"include": ["server", "shared"]