Pagina admin con creazione problemi e pagina utente personale

2022-11-09 02:49:54 +01:00
parent 484c21d606
commit 48d1b3b4ed
21 changed files with 633 additions and 299 deletions
@@ -1,26 +1,46 @@
 import { route } from 'preact-router'
-import { useEffect } from 'preact/hooks'
+import { useEffect, useState } from 'preact/hooks'
+import { server } from '../api.jsx'
+import { Header } from '../components/Header.jsx'
+import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
 import { useCurrentUser } from '../hooks.jsx'

-export const Admin = ({}) => {
+const CreateProblem = ({}) => {
+    const [source, setSource] = useState('')
+    const createProblem = async () => {
+        const id = await server.post('/api/problem', {
+            content: source,
+        })
+
+        route(`/problem/${id}`)
+    }
+
+    return (
+        <>
+            <MarkdownEditor {...{ source, setSource }} />
+            <button onClick={createProblem}>Aggiungi Problema</button>
+        </>
+    )
+}
+
+export const AdminPage = ({}) => {
    const [user] = useCurrentUser(user => {
-        if (!user || user.role !== 'admin') {
+        if (!user) {
+            route('/login', true)
+        } else if (user.role !== 'admin' && user.role !== 'moderator') {
            route('/', true)
        }
    })

    return (
-        <main class="admin">
-            <div class="logo">PHC / Problemi</div>
-            <div class="subtitle">
-                {user ? (
-                    <>
-                        Logged in as {user.role} @{user.username}
-                    </>
-                ) : (
-                    <a href="/login">Login</a>
-                )}
-            </div>
-        </main>
+        user && (
+            <main class="page-admin">
+                <Header {...{ user }} />
+                <div class="subtitle">Nuovo problema</div>
+                <CreateProblem />
+                <div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
+                ...
+            </main>
+        )
    )
 }
@@ -1,39 +1,33 @@
 import { route } from 'preact-router'
 import { useEffect, useState } from 'preact/hooks'
+import { Header } from '../components/Header.jsx'

 import { Problem } from '../components/Problem.jsx'
+import { Select } from '../components/Select.jsx'
 import { useReadResource, useCurrentUser } from '../hooks.jsx'

 export const HomePage = () => {
-    const [user, logout] = useCurrentUser()
-
-    const handleLogout = async () => {
-        await fetch(`/api/logout`, {
-            method: 'POST',
-        })
-
-        logout()
-    }
-
+    const [user] = useCurrentUser()
    const [problems] = useReadResource('/api/problems', [])

    return (
-        <main class="home">
-            <div class="logo">PHC / Problemi</div>
-            <div class="subtitle">
-                {user ? (
-                    <>
-                        Logged in as {user.role} @{user.username} (
-                        <span class="link" onClick={handleLogout}>
-                            Logout
-                        </span>
-                        )
-                    </>
-                ) : (
-                    <a href="/login">Login</a>
-                )}
-            </div>
+        <main class="page-home">
+            <Header {...{ user }} />
            <div class="board">
+                <div class="fill-row board-controls">
+                    <div class="sort-order">
+                        <Select
+                            value="oldest"
+                            options={{
+                                'latest': 'Prima più recenti',
+                                'oldest': 'Prima più antichi',
+                                'top-solved': 'Prima più risolti',
+                                'least-solved': 'Prima meno risolti',
+                            }}
+                        />
+                    </div>
+                </div>
+
                {problems.map(p => (
                    <Problem {...p} />
                ))}
@@ -1,6 +1,7 @@
 import { route } from 'preact-router'

 import { useState } from 'preact/hooks'
+import { Header } from '../components/Header.jsx'

 export const LoginPage = () => {
    const [username, setUsername] = useState('')
@@ -20,10 +21,9 @@ export const LoginPage = () => {
    }

    return (
-        <main class="login">
-            <div class="logo">PHC / Problemi</div>
+        <main class="page-login">
+            <Header noLogin />
            <div class="subtitle">Accedi</div>
-
            <div class="form">
                <label for="login-username">Username</label>
                <input
@@ -1,5 +1,7 @@
 import { useContext, useEffect, useRef, useState } from 'preact/hooks'
-import { Markdown } from '../components/Markdown.jsx'
+import { server } from '../api.jsx'
+import { Header } from '../components/Header.jsx'
+import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
 import { Problem } from '../components/Problem.jsx'
 import { Solution } from '../components/Solution.jsx'
 import { MetadataContext, useCurrentUser, useReadResource } from '../hooks.jsx'
@@ -11,49 +13,23 @@ export const ProblemPage = ({ id }) => {
    const [user] = useCurrentUser()

    const [source, setSource] = useState('')
-    const editorRef = useRef()

    const [{ content }] = useReadResource(`/api/problem/${id}`, { content: '' })

    const [solutions] = useReadResource(`/api/solutions?problem=${id}`, [])

    const sendSolution = async () => {
-        const res = await fetch(`/api/solution`, {
-            method: 'POST',
-            credentials: 'include',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                problemId: id,
-                content: source,
-            }),
+        await server.post('/api/solution', {
+            problemId: id,
+            content: source,
        })

        location.reload()
    }

-    useEffect(() => {
-        if (editorRef.current) {
-            // settare questo ad "auto" toglie l'altezza al contenitore che passa alla sua
-            // dimensione minima iniziale, ciò serve per permettere all'autosize della textarea di
-            // crescere e ridursi ma ha il problema che resetta lo scroll della pagina che deve
-            // essere preservato a mano
-            const oldScrollY = window.scrollY
-            editorRef.current.style.height = 'auto'
-            editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
-            window.scrollTo(0, oldScrollY)
-        }
-    }, [source])
-
    return (
-        <main class="problem">
-            <div class="logo">PHC / Problemi</div>
-            {user && (
-                <div class="subtitle">
-                    Logged in as {user.role} @{user.username}
-                </div>
-            )}
+        <main class="page-problem">
+            <Header {...{ user }} />
            <div class="subtitle">Testo del problema</div>
            <Problem id={id} content={content} />
            {solutions.length > 0 && (
@@ -66,39 +42,12 @@ export const ProblemPage = ({ id }) => {
                    </div>
                </details>
            )}
-            {user ? (
+            {user && (
                <>
                    <div class="subtitle">Invia una soluzione al problema</div>
-                    <div class="solution-editor">
-                        <div class="editor">
-                            <h1>Editor</h1>
-                            <textarea
-                                onInput={e => setSource(e.target.value)}
-                                value={source}
-                                cols="60"
-                                ref={editorRef}
-                                placeholder="Scrivi una nuova soluzione..."
-                            ></textarea>
-                        </div>
-                        <div class="preview">
-                            <h1>Preview</h1>
-                            <div class="preview-content">
-                                {source.trim().length ? (
-                                    <Markdown source={source} />
-                                ) : (
-                                    <div class="placeholder">Scrivi una nuova soluzione...</div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                    <div class="submit-solution">
-                        <button onClick={sendSolution}>Invia Soluzione</button>
-                    </div>
+                    <MarkdownEditor {...{ source, setSource }} />
+                    <button onClick={sendSolution}>Invia Soluzione</button>
                </>
-            ) : (
-                <div class="subtitle">
-                    <a href="/login">Accedi</a> per inviare una soluzione
-                </div>
            )}
        </main>
    )
@@ -0,0 +1,39 @@
+import { route } from 'preact-router'
+import { useState } from 'preact/hooks'
+import { server } from '../api.jsx'
+import { Header } from '../components/Header.jsx'
+import { Solution } from '../components/Solution.jsx'
+import { useCurrentUser, useReadResource } from '../hooks.jsx'
+
+export const ProfilePage = ({}) => {
+    const [solutions, setSolutions] = useState([])
+
+    const [user, logout] = useCurrentUser(async user => {
+        if (!user) {
+            route('/login', true)
+        }
+
+        setSolutions(await server.get(`/api/solutions?user=${user.username}`))
+    })
+
+    const handleLogout = () => {
+        logout()
+        route('/')
+    }
+
+    return (
+        user && (
+            <main class="page-profile">
+                <Header {...{ user }} />
+                <div class="subtitle">Le tue soluzioni</div>
+                <div class="solution-list">
+                    {solutions.map(({ problemId, content }) => (
+                        <Solution {...{ problemId, content }} />
+                    ))}
+                </div>
+                <div class="subtitle">Altro</div>
+                <button onClick={handleLogout}>Logout</button>
+            </main>
+        )
+    )
+}