Almost MVP

client/pages/Admin.tsx

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

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

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

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