Refactoring to Typescript...

client/pages/Admin.tsx

@@ -1,5 +1,6 @@
 import { route } from 'preact-router'
 import { useEffect, useState } from 'preact/hooks'
+import { isAdministrator, isStudent } from '../../shared/constants.js'
 import { server } from '../api.jsx'
 import { Header } from '../components/Header.jsx'
 import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
@@ -27,7 +28,7 @@ export const AdminPage = ({}) => {
     const [user] = useCurrentUser(user => {
         if (!user) {
             route('/login', true)
-        } else if (user.role !== 'admin' && user.role !== 'moderator') {
+        } else if (isStudent(user.role)) {
             route('/', true)
         }
     })

client/pages/Home.tsx

@@ -10,6 +10,8 @@ export const HomePage = () => {
     const [user] = useCurrentUser()
     const [problems] = useReadResource('/api/problems', [])
 
+    console.log(problems)
+
     return (
         <main class="page-home">
             <Header {...{ user }} />

client/pages/Login.tsx

@@ -13,7 +13,7 @@ export const LoginPage = () => {
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify({
-                username,
+                id: username,
             }),
         })
 

client/pages/Problem.tsx

@@ -20,7 +20,7 @@ export const ProblemPage = ({ id }) => {
 
     const sendSolution = async () => {
         await server.post('/api/solution', {
-            problemId: id,
+            forProblem: id,
             content: source,
         })
 

client/pages/Profile.tsx

@@ -13,7 +13,7 @@ export const ProfilePage = ({}) => {
             route('/login', true)
         }
 
-        setSolutions(await server.get(`/api/solutions?user=${user.username}`))
+        setSolutions(await server.get(`/api/solutions?user=${user.id}`))
     })
 
     const handleLogout = () => {
@@ -27,8 +27,8 @@ export const ProfilePage = ({}) => {
                 <Header {...{ user }} />
                 <div class="subtitle">Le tue soluzioni</div>
                 <div class="solution-list">
-                    {solutions.map(({ problemId, content }) => (
-                        <Solution {...{ problemId, content }} />
+                    {solutions.map(({ forProblem, content }) => (
+                        <Solution {...{ forProblem, content }} />
                     ))}
                 </div>
                 <div class="subtitle">Altro</div>