Almost MVP

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) {
-//     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

@@ -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>