Pagina admin con creazione problemi e pagina utente personale

client/components/Header.jsx

@@ -0,0 +1,39 @@
+import { Link } from 'preact-router/match'
+
+const ROLE_LABEL = {
+    admin: 'Admin',
+    moderator: 'Moderatore',
+}
+
+export const Header = ({ user, noLogin }) => (
+    <header>
+        <div class="logo">
+            <a href="/">PHC / Problemi</a>
+        </div>
+        <nav>
+            {user ? (
+                <>
+                    {user.role !== 'student' && (
+                        <div class="nav-item">
+                            <Link activeClassName="active" href="/admin">
+                                Pannello Admin
+                            </Link>
+                        </div>
+                    )}
+                    <div class="nav-item">
+                        <Link activeClassName="active" href="/profile">
+                            @{user.username}
+                            {user.role !== 'student' && <> ({ROLE_LABEL[user.role]})</>}
+                        </Link>
+                    </div>
+                </>
+            ) : (
+                !noLogin && (
+                    <div class="nav-item">
+                        <Link href="/login">Login</Link>
+                    </div>
+                )
+            )}
+        </nav>
+    </header>
+)

client/components/Markdown.jsx

@@ -7,20 +7,34 @@ import remarkRehype from 'remark-rehype'
 import rehypeKatex from 'rehype-katex'
 import rehypeStringify from 'rehype-stringify'
 
+async function renderMarkdownAsync(source) {
+    return await unified()
+        .use(remarkParse)
+        .use(remarkMath)
+        .use(remarkRehype)
+        .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
+        .use(rehypeStringify)
+        .process(source)
+}
+
+// function renderMarkdownSync(source) {
+//     console.warn(`[Markdown] Rendering ${source.length} characters of markdown in sync mode`)
+
+//     return unified()
+//         .use(remarkParse)
+//         .use(remarkMath)
+//         .use(remarkRehype)
+//         .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
+//         .use(rehypeStringify)
+//         .processSync(source)
+// }
+
 export const Markdown = ({ source }) => {
     const elementRef = useRef()
 
     useEffect(async () => {
-        const renderedHtml = await unified()
-            .use(remarkParse)
-            .use(remarkMath)
-            .use(remarkRehype)
-            .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
-            .use(rehypeStringify)
-            .process(source)
-
         if (elementRef.current) {
-            elementRef.current.innerHTML = renderedHtml
+            elementRef.current.innerHTML = await renderMarkdownAsync(source)
         }
     }, [source])
 

client/components/MarkdownEditor.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'preact/hooks'
+import { Markdown } from './Markdown.jsx'
+
+export const MarkdownEditor = ({ source, setSource }) => {
+    const editorRef = useRef()
+
+    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 (
+        <div class="markdown-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>
+    )
+}

client/components/Problem.jsx

@@ -7,7 +7,6 @@ export const Problem = ({ id, content, createdBy }) => {
                 <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} />

client/components/Select.jsx

@@ -0,0 +1,12 @@
+export const Select = ({ options, value, setValue }) => (
+    <div class="input-select">
+        <select onInput={e => setValue?.(e.target.value)}>
+            {Object.entries(options).map(([k, v]) => (
+                <option value={k} selected={value === k}>
+                    {v}
+                </option>
+            ))}
+        </select>
+        <span class="material-symbols-outlined">expand_more</span>
+    </div>
+)

client/components/Solution.jsx

@@ -1,10 +1,24 @@
 import { Markdown } from './Markdown.jsx'
 
-export const Solution = ({ userId, content }) => {
+export const Solution = ({ userId, problemId, content }) => {
     return (
         <div class="solution">
             <div class="solution-header">
-                <div>@{userId}</div>
+                <div>
+                    Soluzione
+                    {userId && (
+                        <>
+                            {' '}
+                            di <a href={`/user/${userId}`}>@{userId}</a>
+                        </>
+                    )}
+                    {problemId && (
+                        <>
+                            {' '}
+                            per il <a href={`/problem/${problemId}`}>Problema {problemId}</a>
+                        </>
+                    )}
+                </div>
             </div>
             <div class="solution-content">
                 <Markdown source={content} />