feat: utenti page and poisson integration

package.json

@@ -22,6 +22,7 @@
         "@fontsource/source-code-pro": "^5.0.16",
         "@fontsource/source-sans-pro": "^5.0.8",
         "@fontsource/space-mono": "^5.0.20",
+        "@preact/signals": "^1.3.0",
         "astro": "^4.4.6",
         "better-sqlite3": "^9.4.3",
         "drizzle-orm": "^0.29.4",

src/client/UtentiPage.tsx

@@ -0,0 +1,54 @@
+import { useSignal } from '@preact/signals'
+import { useEffect } from 'preact/hooks'
+
+type User = {
+    uid: string
+    gecos: string
+}
+
+function applyPatches(users: User[]) {
+    users.forEach(user => {
+        // strip ",+" from the end of the gecos field
+        user.gecos = user.gecos.replace(/,+$/, '')
+
+        // capitalize the first letter of each word
+        user.gecos = user.gecos.replace(/\b\w/g, c => c.toUpperCase())
+    })
+}
+
+export const UtentiPage = () => {
+    const utentiSignal = useSignal<User[]>([])
+
+    useEffect(() => {
+        fetch('https://poisson.phc.dm.unipi.it/users.json')
+            .then(response => response.json())
+            .then(data => {
+                applyPatches(data)
+                utentiSignal.value = data
+            })
+    }, [])
+
+    return (
+        <>
+            <div class="search">
+                <input type="text" placeholder="Cerca un utente Poisson..." />
+                <span class="material-symbols-outlined">search</span>
+            </div>
+            <div class="search-results">
+                {utentiSignal.value.map(user => (
+                    <div class="search-result">
+                        <div class="icon">
+                            <span class="material-symbols-outlined">person</span>
+                        </div>
+                        <div class="text">{user.gecos}</div>
+                        <div class="right">
+                            <a href={`https://poisson.phc.dm.unipi.it/~${user.uid}`}>
+                                <span class="material-symbols-outlined">globe</span>
+                            </a>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </>
+    )
+}

src/components/Header.astro

@@ -3,7 +3,7 @@
         <img src="/images/logo-circuit-board.svg" alt="phc logo" />
     </a>
     <div class="links">
-        <!-- <a role="button" href="/utenti">Utenti</a> -->
+        <a role="button" href="/utenti">Utenti</a>
         <!-- <a role="button" href="/appunti">Appunti</a> -->
         <a role="button" href="/notizie">Notizie</a>
         <a role="button" href="/guide">Guide</a>

src/pages/utenti.astro

@@ -1,42 +1,10 @@
 ---
 import PageLayout from '../layouts/PageLayout.astro'
+
+import { UtentiPage } from '../client/UtentiPage.tsx'
 ---
 
 <PageLayout pageTags="utenti">
     <h1>Utenti</h1>
-
+    <UtentiPage client:load />
-    <div class="search">
-        <input type="text" />
-        <span class="material-symbols-outlined">search</span>
-    </div>
-
-    <div class="search-results">
-        <div class="search-result">
-            <div class="icon"><span class="material-symbols-outlined">person</span></div>
-            <div class="text">Persona 1</div>
-            <div class="right">
-                <a href="#">
-                    <span class="material-symbols-outlined">globe</span>
-                </a>
-            </div>
-        </div>
-        <div class="search-result">
-            <span class="material-symbols-outlined">person</span>
-            <div class="text">Persona 2</div>
-            <div class="right">
-                <a href="#">
-                    <span class="material-symbols-outlined">globe</span>
-                </a>
-            </div>
-        </div>
-        <div class="search-result">
-            <span class="material-symbols-outlined">person</span>
-            <div class="text">Persona 3</div>
-            <div class="right">
-                <a href="#">
-                    <span class="material-symbols-outlined">globe</span>
-                </a>
-            </div>
-        </div>
-    </div>
 </PageLayout>

src/styles/pages.scss

@@ -238,20 +238,20 @@
         }
     }
 
-    // .utenti {
+    .utenti {
-    //     main {
+        main {
-    //         justify-self: center;
+            justify-self: center;
 
-    //         display: flex;
+            display: flex;
-    //         flex-direction: column;
+            flex-direction: column;
-    //         align-items: center;
+            align-items: center;
 
-    //         max-width: 80ch;
+            max-width: 80ch;
-    //         padding: 5rem 0;
+            padding: 5rem 0;
 
-    //         gap: 5rem;
+            gap: 5rem;
-    //     }
+        }
-    // }
+    }
 
     // .appunti {
     //     main {