Add stats on user page

client/pages/UserPage.tsx

@@ -1,4 +1,4 @@
-import { isAdministrator, Solution as SolutionModel } from '../../shared/model'
+import { isAdministrator, Solution as SolutionModel, SolutionStat } from '../../shared/model'
 import { sortByStringKey } from '../../shared/utils'
 import { prependBaseUrl } from '../api'
 import { Header } from '../components/Header'
@@ -14,20 +14,34 @@ export const UserPage = ({ uid }: RouteProps) => {
 
     const [user] = useCurrentUser()
 
-    const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}`, [])
+    const [stats] = useResource<null | Record<string, SolutionStat>>(`/api/stats`, null)
-    const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
+    if(stats) {
+        const userStats = stats[uid]
 
-    return (
+            const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}`, [])
-        <>
+            const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
-            <Header />
+
-            <main class="page-profile">
+            return (
-                <div class="subtitle">Soluzioni di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a></div>
+            <>
-                <div class="solution-list">
+                <Header />
-                    {sortedSolutions.map(solution => (
+                <main class="page-profile">
-                        <Solution refreshSolution={refreshSolutions} {...solution} adminControls={user !== null && isAdministrator(user.role)} />
+                    <div class="subtitle">Statistiche di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a></div>
-                    ))}
+                    <ul>
-                </div>
+                        <li>
-            </main>
+                            <div class="info">Soluzioni inviate: {userStats.sentSolutionsCount}</div>
-        </>
+                        </li>
-    )
+                        <li>
-}
+                            <div class="info">Soluzioni corrette: {userStats.correctSolutionsCount}</div>
+                        </li>
+                    </ul>
+                    <div class="subtitle">Soluzioni notevoli</div>
+                    <div class="solution-list">
+                        {sortedSolutions.map(solution => (
+                            <Solution refreshSolution={refreshSolutions} {...solution} adminControls={user !== null && isAdministrator(user.role)} />
+                        ))}
+                    </div>
+                </main>
+            </>
+        )
+    }
+}

client/styles/main.scss

@@ -308,6 +308,10 @@ main {
         font-size: 28px;
     }
 
+    .info {
+        font-size: 20px;
+    }
+
     .fill-main {
         display: flex;
         gap: 0.5rem;