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,6 +14,10 @@ export const UserPage = ({ uid }: RouteProps) => {
 
     const [user] = useCurrentUser()
 
+    const [stats] = useResource<null | Record<string, SolutionStat>>(`/api/stats`, null)
+    if(stats) {
+        const userStats = stats[uid]
+
             const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}`, [])
             const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
 
@@ -21,7 +25,16 @@ export const UserPage = ({ uid }: RouteProps) => {
             <>
                 <Header />
                 <main class="page-profile">
-                <div class="subtitle">Soluzioni di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a></div>
+                    <div class="subtitle">Statistiche di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a></div>
+                    <ul>
+                        <li>
+                            <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)} />
@@ -30,4 +43,5 @@ export const UserPage = ({ uid }: RouteProps) => {
                 </main>
             </>
         )
+    }
 }

client/styles/main.scss

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