Intermediate refactoring...

2022-11-07 00:00:01 +01:00
parent 471fad6d61
commit 5142d4c551
23 changed files with 1648 additions and 1728 deletions
@@ -0,0 +1,46 @@
+import { Problem } from '../components/Problem.jsx'
+import { useUser } from '../hooks.jsx'
+
+export const HomePage = () => {
+    const { username } = useUser()
+
+    const logout = async () => {
+        await fetch(`/api/logout`, {
+            method: 'POST',
+        })
+
+        location.reload()
+    }
+
+    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
+            ),
+    }))
+
+    return (
+        <main class="home">
+            <div class="logo">PHC / Problemi</div>
+            <div class="subtitle">
+                {username ? (
+                    <>
+                        Logged in as {username} (
+                        <span class="link" onClick={() => logout()}>
+                            Logout
+                        </span>
+                        )
+                    </>
+                ) : (
+                    <a href="/login">Login</a>
+                )}
+            </div>
+            <div class="board">
+                {problems.map(p => (
+                    <Problem {...p} />
+                ))}
+            </div>
+        </main>
+    )
+}
@@ -0,0 +1,40 @@
+import { useState } from 'preact/hooks'
+
+export const LoginPage = () => {
+    const [username, setUsername] = useState('')
+
+    const login = async () => {
+        await fetch(`/api/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                username,
+            }),
+        })
+
+        location.href = '/#/'
+    }
+
+    return (
+        <main class="login">
+            <div class="logo">PHC / Problemi</div>
+            <div class="subtitle">Accedi</div>
+
+            <div class="form">
+                <label for="login-username">Username</label>
+                <input
+                    id="login-username"
+                    type="text"
+                    value={username}
+                    onInput={e => setUsername(e.target.value)}
+                />
+
+                <div class="fill">
+                    <button onClick={() => login()}>Accedi</button>
+                </div>
+            </div>
+        </main>
+    )
+}
@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Markdown } from '../components/Markdown.jsx'
+import { Problem } from '../components/Problem.jsx'
+
+export const ProblemPage = ({ id }) => {
+    const [source, setSource] = useState('')
+    const editorRef = useRef()
+
+    const sendSolution = async () => {
+        const res = await fetch(`/api/problem/${id}/new-solution`, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            credentials: 'include',
+            body: JSON.stringify({
+                source,
+            }),
+        })
+
+        console.log(await res.json())
+    }
+
+    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>
+            <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>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <div class="submit-solution">
+                <button onClick={sendSolution}>Invia Soluzione</button>
+            </div>
+        </main>
+    )
+}