Almost MVP

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>