You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

71 lines
2.3 KiB
TypeScript

import { useContext, useState } from 'preact/hooks'
import { isAdministrator, Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
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, useCurrentUser, useListResource, useResource } from '../hooks'
type RouteProps = {
id: string
}
export const ProblemPage = ({ id }: RouteProps) => {
const metadata = useContext(MetadataContext)
metadata.title = `Problem ${id}`
const [user] = useCurrentUser()
const [source, setSource] = useState('')
const [{ content }] = useResource<{ content: string }>(`/api/problem/${id}`, {
content: '',
})
const [solutions, refreshSolutions, setSolutionHeuristic] = useListResource<SolutionModel>(
`/api/solutions?problem=${id}`
)
const sendSolution = async () => {
await server.post('/api/solution', {
forProblem: id,
content: source,
})
setSource('')
refreshSolutions()
}
return (
<main class="page-problem">
<Header {...{ user }} />
<div class="subtitle">Testo del problema</div>
<Problem id={id} content={content} />
{solutions.length > 0 && (
<details>
<summary>Soluzioni</summary>
<div class="solution-list">
{solutions.map((s, index) => (
<Solution
{...s}
adminControls={user !== null && isAdministrator(user.role)}
refreshSolution={refreshSolutions}
setSolution={solFn => setSolutionHeuristic(index, solFn)}
/>
))}
</div>
</details>
)}
{user && (
<>
<div class="subtitle">Invia una soluzione al problema</div>
<MarkdownEditor {...{ source, setSource }} />
<button onClick={sendSolution}>Invia Soluzione</button>
</>
)}
</main>
)
}