Ora il db funge più veramente e si possono inviare i problemi

2022-11-08 03:34:41 +01:00
parent 1452c0c143
commit 484c21d606
16 changed files with 519 additions and 144 deletions
@@ -1,12 +1,13 @@
 import { Markdown } from './Markdown.jsx'

-export const Problem = ({ id, content }) => {
+export const Problem = ({ id, content, createdBy }) => {
    return (
        <div class="problem">
            <div class="problem-header">
                <div class="problem-title">
                    <a href={`/problem/${id}`}>Problema {id}</a>
                </div>
+                {createdBy && <div class="problem-author">Creato da @{createdBy}</div>}
            </div>
            <div class="problem-content">
                <Markdown source={content} />
@@ -0,0 +1,14 @@
+import { Markdown } from './Markdown.jsx'
+
+export const Solution = ({ userId, content }) => {
+    return (
+        <div class="solution">
+            <div class="solution-header">
+                <div>@{userId}</div>
+            </div>
+            <div class="solution-content">
+                <Markdown source={content} />
+            </div>
+        </div>
+    )
+}
@@ -2,3 +2,11 @@ import { hydrate } from 'preact'
 import { App } from './App.jsx'

 hydrate(<App />, document.body)
+
+window.fetchServer = url => {
+    fetch(url, { credentials: 'include' })
+        .then(res => res.ok && res.json())
+        .then(data => {
+            console.log(data)
+        })
+}
@@ -1,6 +1,15 @@
 import renderToString from 'preact-render-to-string'
 import { App } from './App.jsx'
+import { MetadataContext } from './hooks.jsx'

 export function render(url) {
-    return renderToString(<App url={url} />)
+    const metadata = {}
+
+    const html = renderToString(
+        <MetadataContext.Provider value={metadata}>
+            <App url={url} />
+        </MetadataContext.Provider>
+    )
+
+    return { html, metadata }
 }
@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'preact/hooks'

-export const useUser = () => {
+import { createContext } from 'preact'
+
+export const MetadataContext = createContext({})
+
+export const useCurrentUser = onLoaded => {
    const [user, setUser] = useState(null)

    const logout = () => {
@@ -11,12 +15,48 @@ export const useUser = () => {
        const res = await fetch(`/api/current-user`, {
            credentials: 'include',
        })
+        const user = await res.json()
+        setUser(user)

-        if (res.ok) {
-            const user = await res.json()
-            setUser(user)
-        }
+        console.log(`Current user is`, user)
+
+        onLoaded?.(user)
    }, [])

+    useEffect(() => {
+        console.log(user)
+    }, [user])
+
    return [user, logout]
 }
+
+export const useReadResource = (url, initialValue) => {
+    const [value, setValue] = useState(initialValue)
+
+    function refresh() {
+        const controller = new AbortController()
+
+        fetch(url, { signal: controller.signal })
+            .then(res => {
+                if (res.ok) {
+                    return res.json()
+                } else {
+                    return initialValue
+                }
+            })
+            .then(newValue => {
+                setValue(newValue)
+            })
+
+        return controller
+    }
+
+    useEffect(() => {
+        const controller = refresh()
+        return () => {
+            controller.abort()
+        }
+    }, [])
+
+    return [value, refresh]
+}
@@ -0,0 +1,26 @@
+import { route } from 'preact-router'
+import { useEffect } from 'preact/hooks'
+import { useCurrentUser } from '../hooks.jsx'
+
+export const Admin = ({}) => {
+    const [user] = useCurrentUser(user => {
+        if (!user || user.role !== 'admin') {
+            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>
+    )
+}
@@ -1,12 +1,11 @@
 import { route } from 'preact-router'
+import { useEffect, useState } from 'preact/hooks'

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

 export const HomePage = () => {
-    console.log('rendering homepage')
-
-    const [user, logout] = useUser()
+    const [user, logout] = useCurrentUser()

    const handleLogout = async () => {
        await fetch(`/api/logout`, {
@@ -16,13 +15,7 @@ export const HomePage = () => {
        logout()
    }

-    const problems = Array.from({ length: 20 }, (_, i) => ({
-        id: i + 1,
-        content:
-            `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n`.repeat(
-                ((i + 2) % 4) + 1
-            ),
-    }))
+    const [problems] = useReadResource('/api/problems', [])

    return (
        <main class="home">
@@ -30,7 +23,7 @@ export const HomePage = () => {
            <div class="subtitle">
                {user ? (
                    <>
-                        Logged in as {user.username} (
+                        Logged in as {user.role} @{user.username} (
                        <span class="link" onClick={handleLogout}>
                            Logout
                        </span>
@@ -31,10 +31,11 @@ export const LoginPage = () => {
                    type="text"
                    value={username}
                    onInput={e => setUsername(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && login()}
                />

                <div class="fill">
-                    <button onClick={() => login()}>Accedi</button>
+                    <button onClick={login}>Accedi</button>
                </div>
            </div>
        </main>
@@ -1,23 +1,36 @@
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useContext, useEffect, useRef, useState } from 'preact/hooks'
 import { Markdown } from '../components/Markdown.jsx'
 import { Problem } from '../components/Problem.jsx'
+import { Solution } from '../components/Solution.jsx'
+import { MetadataContext, useCurrentUser, useReadResource } from '../hooks.jsx'

 export const ProblemPage = ({ id }) => {
+    const metadata = useContext(MetadataContext)
+    metadata.title = `Problem ${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/problem/${id}/new-solution`, {
+        const res = await fetch(`/api/solution`, {
+            method: 'POST',
+            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
            },
-            credentials: 'include',
            body: JSON.stringify({
-                source,
+                problemId: id,
+                content: source,
            }),
        })

-        console.log(await res.json())
+        location.reload()
    }

    useEffect(() => {
@@ -36,39 +49,57 @@ export const ProblemPage = ({ id }) => {
    return (
        <main class="problem">
            <div class="logo">PHC / Problemi</div>
+            {user && (
+                <div class="subtitle">
+                    Logged in as {user.role} @{user.username}
+                </div>
+            )}
            <div class="subtitle">Testo del problema</div>
-            <Problem
-                id={id}
-                content={`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n\n`.repeat(
-                    5
-                )}
-            />
-            <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>
-                        )}
+            <Problem id={id} content={content} />
+            {solutions.length > 0 && (
+                <details>
+                    <summary>Soluzioni</summary>
+                    <div class="solution-list">
+                        {solutions.map(s => (
+                            <Solution {...s} />
+                        ))}
                    </div>
+                </details>
+            )}
+            {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>
+                </>
+            ) : (
+                <div class="subtitle">
+                    <a href="/login">Accedi</a> per inviare una soluzione
                </div>
-            </div>
-            <div class="submit-solution">
-                <button onClick={sendSolution}>Invia Soluzione</button>
-            </div>
+            )}
        </main>
    )
 }
@@ -69,17 +69,17 @@ button {
    border: 1px solid #c8c8c8;
    padding: 0.5rem 2rem;

-    box-shadow: -2px 4px 16px 0 #00000010, -2px 4px 4px 0 #00000010;
+    box-shadow: -2px 2px 16px 0 #00000010;
    border-radius: 0.25rem;

-    background: linear-gradient(180deg, #f0f0f0, #dfdfdf 20%, #d8d8d8 80%, #c0c0c0);
+    background: linear-gradient(180deg, #f0f0f0, #e8e8e8 20%, #e0e0e0 90%, #cdcdcd);

    transition: all 100ms ease-in;

    &:hover {
        border: 1px solid #c4c4c4;
-        box-shadow: -2px 4px 20px 4px #00000010, -2px 4px 6px 2px #00000010;
-        background: linear-gradient(180deg, #f8f8f8, #e4e4e4 20%, #e4e4e4 80%, #c8c8c8);
+        box-shadow: -2px 2px 20px 0 #00000010;
+        background: linear-gradient(180deg, #fff, #ededed 20%, #e8e8e8 90%, #c0c0c0);
    }
 }

@@ -193,10 +193,28 @@ main {
 main.home {
    .board {
        width: 100%;
+        // min-width: 0;

        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(60ch, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(auto, 70ch));
        gap: 2rem;
+
+        justify-content: center;
+    }
+}
+
+main.problem {
+    summary {
+        padding: 1rem;
+        text-align: center;
+
+        user-select: none;
+    }
+
+    .solution-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
    }
 }

@@ -207,7 +225,8 @@ main.home {
 main {
    .problem {
        padding: 1rem;
-        // border: 1px solid #ddd;
+
+        max-width: 80ch;

        box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
        border-radius: 0.5rem;
@@ -217,16 +236,23 @@ main {
        grid-template-rows: auto 1fr;
        gap: 0.5rem;

-        max-width: 80ch;
-
        .problem-header {
            display: grid;
            grid-template-columns: auto;
+            gap: 0.25rem;

            .problem-title {
                font-size: 24px;
                font-weight: 700;
            }
+
+            .problem-author {
+                grid-row: 2;
+
+                font-size: 16px;
+                color: #000000dd;
+                // font-weight: 400;
+            }
        }

        .problem-content {
@@ -234,6 +260,30 @@ main {
        }
    }

+    .solution {
+        padding: 1rem;
+
+        max-width: 80ch;
+
+        box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
+        border-radius: 0.5rem;
+        background: #ffffff;
+
+        display: grid;
+        grid-template-rows: auto 1fr;
+        gap: 0.5rem;
+
+        .solution-header {
+            display: grid;
+            grid-template-columns: auto;
+            gap: 0.25rem;
+        }
+
+        .solution-content {
+            @extend .text-body;
+        }
+    }
+
    .solution-editor {
        display: grid;
        width: 100%;
@@ -291,13 +341,15 @@ main {
    .form {
        min-width: 50ch;

+        background: #e0e0e0;
+
        display: grid;
        grid-template-columns: auto 1fr;

-        // border: 2px solid #ccc;
+        border: 1px solid #c0c0c0;
        border-radius: 1rem;

-        box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
+        // box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;

        padding: 1.5rem 2rem 1rem;
        gap: 1rem;