Full refactor to Typescript

client/App.tsx

@@ -8,7 +8,7 @@ import { LoginPage } from './pages/Login'
 import { ProblemPage } from './pages/Problem'
 import { ProfilePage } from './pages/Profile'
 
-const Redirect = ({ to }: { default: boolean; to: string }) => {
+const Redirect = ({ to }: { to: string }) => {
     useEffect(() => {
         route(to, true)
     }, [])
@@ -23,12 +23,31 @@ const Redirect = ({ to }: { default: boolean; to: string }) => {
 export const App = ({ url }: { url?: string }) => {
     return (
         <Router url={url}>
-            <HomePage path="/" />
-            <LoginPage path="/login" />
-            <ProfilePage path="/profile" />
-            <ProblemPage path="/problem/:id" />
-            <AdminPage path="/admin" />
-            <Redirect default to="/" />
+            <HomePage
+                // @ts-ignore
+                path="/"
+            />
+            <LoginPage
+                // @ts-ignore
+                path="/login"
+            />
+            <ProfilePage
+                // @ts-ignore
+                path="/profile"
+            />
+            <ProblemPage
+                // @ts-ignore
+                path="/problem/:id"
+            />
+            <AdminPage
+                // @ts-ignore
+                path="/admin"
+            />
+            <Redirect
+                // @ts-ignore
+                default
+                to="/"
+            />
         </Router>
     )
 }

client/api.tsx

@@ -1,9 +1,9 @@
 export const server = {
-    async get(url) {
+    async get(url: string) {
         const res = await fetch(url, { credentials: 'include' })
         return await res.json()
     },
-    async post(url, body) {
+    async post<T>(url: string, body?: T) {
         const res = await fetch(url, {
             method: 'POST',
             credentials: 'include',

client/components/Header.tsx

@@ -1,12 +1,18 @@
 import { Link } from 'preact-router/match'
-import { isAdministrator, USER_ROLE_ADMIN, USER_ROLE_MODERATOR } from '../../shared/constants.js'
+import { isAdministrator, User, UserRole } from '../../shared/model'
 
-const ROLE_LABEL = {
-    [USER_ROLE_ADMIN]: 'Admin',
-    [USER_ROLE_MODERATOR]: 'Moderatore',
+const ROLE_LABEL: Record<UserRole, string> = {
+    ['admin']: 'Admin',
+    ['moderator']: 'Moderatore',
+    ['student']: 'Studente',
 }
 
-export const Header = ({ user, noLogin }) => (
+type Props = {
+    user?: User | null
+    noLogin?: boolean
+}
+
+export const Header = ({ user, noLogin }: Props) => (
     <header>
         <div class="logo">
             <a href="/">PHC / Problemi</a>

client/components/Markdown.tsx

@@ -7,7 +7,7 @@ import remarkRehype from 'remark-rehype'
 import rehypeKatex from 'rehype-katex'
 import rehypeStringify from 'rehype-stringify'
 
-async function renderMarkdownAsync(source) {
+async function renderMarkdownAsync(source: string) {
     return await unified()
         .use(remarkParse)
         .use(remarkMath)
@@ -29,13 +29,15 @@ async function renderMarkdownAsync(source) {
 //         .processSync(source)
 // }
 
-export const Markdown = ({ source }) => {
-    const elementRef = useRef()
+export const Markdown = ({ source }: { source: string }) => {
+    const elementRef = useRef<HTMLDivElement>(null)
 
-    useEffect(async () => {
-        if (elementRef.current) {
-            elementRef.current.innerHTML = await renderMarkdownAsync(source)
-        }
+    useEffect(() => {
+        renderMarkdownAsync(source).then(data => {
+            if (elementRef.current) {
+                elementRef.current.innerHTML = data.toString()
+            }
+        })
     }, [source])
 
     return <div class="markdown" ref={elementRef}></div>

client/components/MarkdownEditor.tsx

@@ -1,8 +1,14 @@
-import { useEffect, useRef } from 'preact/hooks'
-import { Markdown } from './Markdown.jsx'
+import { Component, JSX } from 'preact'
+import { StateUpdater, useEffect, useRef } from 'preact/hooks'
+import { Markdown } from './Markdown'
 
-export const MarkdownEditor = ({ source, setSource }) => {
-    const editorRef = useRef()
+type Props = {
+    source: string
+    setSource: StateUpdater<string>
+}
+
+export const MarkdownEditor = ({ source, setSource }: Props) => {
+    const editorRef = useRef<HTMLTextAreaElement>(null)
 
     useEffect(() => {
         if (editorRef.current) {
@@ -22,9 +28,11 @@ export const MarkdownEditor = ({ source, setSource }) => {
             <div class="editor">
                 <h1>Editor</h1>
                 <textarea
-                    onInput={e => setSource(e.target.value)}
+                    onInput={e =>
+                        setSource(e.target instanceof HTMLTextAreaElement ? e.target.value : '')
+                    }
                     value={source}
-                    cols="60"
+                    cols={60}
                     ref={editorRef}
                     placeholder="Scrivi una nuova soluzione..."
                 ></textarea>

client/components/Problem.tsx

@@ -1,6 +1,12 @@
-import { Markdown } from './Markdown.jsx'
+import { Markdown } from './Markdown'
 
-export const Problem = ({ id, content, solutionsCount }) => {
+type Props = {
+    id: string
+    content: string
+    solutionsCount?: number
+}
+
+export const Problem = ({ id, content, solutionsCount }: Props) => {
     return (
         <div class="problem">
             <div class="problem-header">
@@ -11,7 +17,7 @@ export const Problem = ({ id, content, solutionsCount }) => {
             <div class="problem-content">
                 <Markdown source={content} />
             </div>
-            {solutionsCount > 0 && (
+            {solutionsCount && solutionsCount > 0 && (
                 <div class="problem-footer">
                     {solutionsCount} soluzion{solutionsCount === 1 ? 'e' : 'i'}
                 </div>

client/components/Select.jsx

@@ -1,12 +0,0 @@
-export const Select = ({ options, value, setValue }) => (
-    <div class="input-select">
-        <select onInput={e => setValue?.(e.target.value)}>
-            {Object.entries(options).map(([k, v]) => (
-                <option value={k} selected={value === k}>
-                    {v}
-                </option>
-            ))}
-        </select>
-        <span class="material-symbols-outlined">expand_more</span>
-    </div>
-)

client/components/Select.tsx

@@ -0,0 +1,23 @@
+import { StateUpdater } from 'preact/hooks'
+import { JSX } from 'preact/jsx-runtime'
+
+type Props = {
+    options: Record<string, string>
+    value: string
+    setValue?: StateUpdater<string>
+}
+
+export const Select = ({ options, value, setValue }: Props) => (
+    <div class="input-select">
+        <select
+            onInput={e => setValue?.(e.target instanceof HTMLSelectElement ? e.target.value : '')}
+        >
+            {Object.entries(options).map(([k, v]) => (
+                <option value={k} selected={value === k}>
+                    {v}
+                </option>
+            ))}
+        </select>
+        <span class="material-symbols-outlined">expand_more</span>
+    </div>
+)

client/components/Solution.tsx

@@ -1,25 +1,29 @@
-import { refToUserId } from '../../shared/db-refs.js'
-import { Markdown } from './Markdown.jsx'
+import { ProblemId, SolutionStatus, UserId } from '../../shared/model'
+import { Markdown } from './Markdown'
 
-export const Solution = ({ sentBy, forProblem, content }) => {
-    const userId = refToUserId(sentBy)
-    const problemId = refToUserId(forProblem)
+type Props = {
+    sentBy?: UserId
+    forProblem: ProblemId
+    content: string
+    status?: SolutionStatus
+}
 
+export const Solution = ({ sentBy, forProblem, content }: Props) => {
     return (
         <div class="solution">
             <div class="solution-header">
                 <div>
                     Soluzione
-                    {userId && (
+                    {sentBy && (
                         <>
                             {' '}
-                            di <a href={`/user/${userId}`}>@{userId}</a>
+                            di <a href={`/user/${sentBy}`}>@{sentBy}</a>
                         </>
                     )}
-                    {problemId && (
+                    {forProblem && (
                         <>
                             {' '}
-                            per il <a href={`/problem/${problemId}`}>Problema {problemId}</a>
+                            per il <a href={`/problem/${forProblem}`}>Problema {forProblem}</a>
                         </>
                     )}
                 </div>

client/entry-client.tsx

@@ -1,4 +1,4 @@
 import { hydrate } from 'preact'
 import { App } from './App'
 
-// hydrate(<App />, document.body)
+hydrate(<App />, document.body)

client/entry-server.tsx

@@ -3,13 +3,14 @@ import renderToString from 'preact-render-to-string'
 import { MetadataContext } from './hooks'
 
 import { RenderedPage } from '../shared/ssr'
+import { App } from './App'
 
 export default (url: string): RenderedPage => {
     const metadata = {}
 
     const html = renderToString(
         <MetadataContext.Provider value={metadata}>
-            {/* <App url={url} /> */}
+            <App url={url} />
         </MetadataContext.Provider>
     )
 

client/hooks.tsx

@@ -1,11 +1,20 @@
 import { useEffect, useState } from 'preact/hooks'
 
 import { createContext } from 'preact'
-import { server } from './api.jsx'
+import { server } from './api'
+import { User } from '../shared/model'
 
-export const MetadataContext = createContext({})
+type Metadata = {
+    title?: string
+}
+
+export const MetadataContext = createContext<Metadata>({})
+
+type CurrentUserHook = (
+    onLoaded?: (user: User | null) => void
+) => [User | null, () => Promise<void>]
 
-export const useCurrentUser = onLoaded => {
+export const useCurrentUser: CurrentUserHook = onLoaded => {
     const [user, setUser] = useState(null)
 
     const logout = async () => {
@@ -13,16 +22,22 @@ export const useCurrentUser = onLoaded => {
         setUser(null)
     }
 
-    useEffect(async () => {
-        const user = await server.get('/api/current-user')
-        setUser(user)
-        onLoaded?.(user)
+    useEffect(() => {
+        server.get('/api/current-user').then(user => {
+            setUser(user)
+            onLoaded?.(user)
+        })
     }, [])
 
     return [user, logout]
 }
 
-export const useReadResource = (url, initialValue) => {
+type ReadResourceFunction = <T>(
+    url: string | (() => string),
+    initialValue: T
+) => [T, () => AbortController]
+
+export const useReadResource: ReadResourceFunction = (url, initialValue) => {
     const [value, setValue] = useState(initialValue)
 
     function refresh() {

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'
-
-export const ProblemPage = ({ id }) => {
+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'
+
+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 = () => {

server/db/database.ts

@@ -3,7 +3,7 @@ import crypto from 'crypto'
 import { readFile, writeFile, access, constants } from 'fs/promises'
 
 import {
-    CommonProps as MetaProps,
+    MetadataProps as MetaProps,
     Problem,
     ProblemId,
     Solution,
@@ -191,14 +191,16 @@ export const updateSolution = (
     })
 
 type SolutionsQuery = Partial<{
-    sentBy: UserId
-    forProblem: ProblemId
+    sentBy?: UserId
+    forProblem?: ProblemId
 }>
 
 export const getSolutions = (db: DatabaseConnection, { sentBy, forProblem }: SolutionsQuery = {}) =>
     withDatabase(db, state => {
         let solutions = Object.values(state.solutions)
 
+        console.log(solutions.length, sentBy, forProblem)
+
         if (sentBy) {
             solutions = solutions.filter(s => s.sentBy === sentBy)
         }

shared/model.ts

@@ -2,10 +2,9 @@
 // Common
 //
 
-export type CommonProps = 'id' | 'createdAt'
+export type MetadataProps = 'id' | 'createdAt'
 
 type Opaque<T, K, L extends string = 'opaque'> = T & { _: K; __: L }
-
 type Id<T> = Opaque<string, T, 'id'>
 
 //