Tasti per modificare lo stato di una soluzione e dettagli estetici

client/pages/Problem.tsx

@@ -1,5 +1,9 @@
 import { useContext, useEffect, useRef, useState } from 'preact/hooks'
-import { Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
+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'
@@ -44,7 +48,10 @@ export const ProblemPage = ({ id }: RouteProps) => {
                     <summary>Soluzioni</summary>
                     <div class="solution-list">
                         {solutions.map(s => (
-                            <Solution {...s} />
+                            <Solution
+                                {...s}
+                                adminControls={user !== null && isAdministrator(user.role)}
+                            />
                         ))}
                     </div>
                 </details>

client/pages/Profile.tsx

@@ -1,19 +1,33 @@
 import { route } from 'preact-router'
 import { useState } from 'preact/hooks'
+import { isAdministrator, Solution as SolutionModel, User } from '../../shared/model'
 import { server } from '../api'
 import { Header } from '../components/Header'
+import { Select } from '../components/Select'
 import { Solution } from '../components/Solution'
-import { useCurrentUser } from '../hooks'
+import { useCurrentUser, useReadResource } from '../hooks'
+
+const SolutionList = ({ user }: { user: User }) => {
+    const [solutions, refresh] = useReadResource<SolutionModel[]>(
+        `/api/solutions?user=${user.id}`,
+        []
+    )
+
+    return (
+        <div class="solution-list">
+            {solutions.map(({ forProblem, content, status }) => (
+                <Solution
+                    {...{ forProblem, content, status }}
+                    adminControls={isAdministrator(user.role)}
+                />
+            ))}
+        </div>
+    )
+}
 
 export const ProfilePage = ({}) => {
-    const [solutions, setSolutions] = useState([])
-
     const [user, logout] = useCurrentUser(user => {
-        if (user) {
-            server.get(`/api/solutions?user=${user.id}`).then(solutions => {
-                setSolutions(solutions)
-            })
-        } else {
+        if (!user) {
             route('/login', true)
         }
     })
@@ -28,11 +42,7 @@ export const ProfilePage = ({}) => {
             <main class="page-profile">
                 <Header {...{ user }} />
                 <div class="subtitle">Le tue soluzioni</div>
-                <div class="solution-list">
-                    {solutions.map(({ forProblem, content }) => (
-                        <Solution {...{ forProblem, content }} />
-                    ))}
-                </div>
+                <SolutionList {...{ user }} />
                 <div class="subtitle">Altro</div>
                 <button onClick={handleLogout}>Logout</button>
             </main>