Refactoring to Typescript...

client/components/Header.jsx

@@ -1,8 +1,9 @@
 import { Link } from 'preact-router/match'
+import { isAdministrator, USER_ROLE_ADMIN, USER_ROLE_MODERATOR } from '../../shared/constants.js'
 
 const ROLE_LABEL = {
-    admin: 'Admin',
-    moderator: 'Moderatore',
+    [USER_ROLE_ADMIN]: 'Admin',
+    [USER_ROLE_MODERATOR]: 'Moderatore',
 }
 
 export const Header = ({ user, noLogin }) => (
@@ -13,7 +14,7 @@ export const Header = ({ user, noLogin }) => (
         <nav>
             {user ? (
                 <>
-                    {user.role !== 'student' && (
+                    {isAdministrator(user.role) && (
                         <div class="nav-item">
                             <Link activeClassName="active" href="/admin">
                                 Pannello Admin
@@ -22,8 +23,8 @@ export const Header = ({ user, noLogin }) => (
                     )}
                     <div class="nav-item">
                         <Link activeClassName="active" href="/profile">
-                            @{user.username}
-                            {user.role !== 'student' && <> ({ROLE_LABEL[user.role]})</>}
+                            @{user.id}
+                            {isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
                         </Link>
                     </div>
                 </>

client/components/Problem.jsx

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

client/components/Solution.jsx

@@ -1,6 +1,10 @@
+import { refToUserId } from '../../shared/db-refs.js'
 import { Markdown } from './Markdown.jsx'
 
-export const Solution = ({ userId, problemId, content }) => {
+export const Solution = ({ sentBy, forProblem, content }) => {
+    const userId = refToUserId(sentBy)
+    const problemId = refToUserId(forProblem)
+
     return (
         <div class="solution">
             <div class="solution-header">