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 {