Full refactor to Typescript

client/pages/Admin.tsx

@@ -1,10 +1,10 @@
 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'
-import { useCurrentUser } from '../hooks.jsx'
+import { useState } from 'preact/hooks'
+import { isStudent } from '../../shared/model'
+import { server } from '../api'
+import { Header } from '../components/Header'
+import { MarkdownEditor } from '../components/MarkdownEditor'
+import { useCurrentUser } from '../hooks'
 
 const CreateProblem = ({}) => {
     const [source, setSource] = useState('')

client/pages/Home.tsx

@@ -1,14 +1,15 @@
 import { route } from 'preact-router'
 import { useEffect, useState } from 'preact/hooks'
-import { Header } from '../components/Header.jsx'
+import { Problem as ProblemModel } from '../../shared/model'
+import { Header } from '../components/Header'
 
-import { Problem } from '../components/Problem.jsx'
-import { Select } from '../components/Select.jsx'
-import { useReadResource, useCurrentUser } from '../hooks.jsx'
+import { Problem } from '../components/Problem'
+import { Select } from '../components/Select'
+import { useReadResource, useCurrentUser } from '../hooks'
 
 export const HomePage = () => {
     const [user] = useCurrentUser()
-    const [problems] = useReadResource('/api/problems', [])
+    const [problems] = useReadResource<ProblemModel[]>('/api/problems', [])
 
     console.log(problems)
 

client/pages/Login.tsx

@@ -30,7 +30,9 @@ export const LoginPage = () => {
                     id="login-username"
                     type="text"
                     value={username}
-                    onInput={e => setUsername(e.target.value)}
+                    onInput={e =>
+                        setUsername(e.target instanceof HTMLInputElement ? e.target.value : '')
+                    }
                     onKeyDown={e => e.key === 'Enter' && login()}
                 />
 

client/pages/Problem.tsx

@@ -1,12 +1,17 @@
 import { useContext, useEffect, useRef, useState } from 'preact/hooks'
-import { server } from '../api.jsx'
-import { Header } from '../components/Header.jsx'
-import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
-import { Problem } from '../components/Problem.jsx'
-import { Solution } from '../components/Solution.jsx'
-import { MetadataContext, useCurrentUser, useReadResource } from '../hooks.jsx'
+import { Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
+import { server } from '../api'
+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'
 
-export const ProblemPage = ({ id }) => {
+type RouteProps = {
+    id: string
+}
+
+export const ProblemPage = ({ id }: RouteProps) => {
     const metadata = useContext(MetadataContext)
     metadata.title = `Problem ${id}`
 
@@ -14,9 +19,11 @@ export const ProblemPage = ({ id }) => {
 
     const [source, setSource] = useState('')
 
-    const [{ content }] = useReadResource(`/api/problem/${id}`, { content: '' })
+    const [{ content }] = useReadResource<{ content: string }>(`/api/problem/${id}`, {
+        content: '',
+    })
 
-    const [solutions] = useReadResource(`/api/solutions?problem=${id}`, [])
+    const [solutions] = useReadResource<SolutionModel[]>(`/api/solutions?problem=${id}`, [])
 
     const sendSolution = async () => {
         await server.post('/api/solution', {

client/pages/Profile.tsx

@@ -1,19 +1,21 @@
 import { route } from 'preact-router'
 import { useState } from 'preact/hooks'
-import { server } from '../api.jsx'
-import { Header } from '../components/Header.jsx'
-import { Solution } from '../components/Solution.jsx'
-import { useCurrentUser, useReadResource } from '../hooks.jsx'
+import { server } from '../api'
+import { Header } from '../components/Header'
+import { Solution } from '../components/Solution'
+import { useCurrentUser } from '../hooks'
 
 export const ProfilePage = ({}) => {
     const [solutions, setSolutions] = useState([])
 
-    const [user, logout] = useCurrentUser(async user => {
-        if (!user) {
+    const [user, logout] = useCurrentUser(user => {
+        if (user) {
+            server.get(`/api/solutions?user=${user.id}`).then(solutions => {
+                setSolutions(solutions)
+            })
+        } else {
             route('/login', true)
         }
-
-        setSolutions(await server.get(`/api/solutions?user=${user.id}`))
     })
 
     const handleLogout = () => {