feat: utenti page and poisson integration

2024-10-06 02:45:49 +02:00
parent a87c87eb10
commit 7e99cfa9d7
5 changed files with 70 additions and 47 deletions
@@ -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>
+        </>
+    )
+}