Added some pages
parent
92944167e7
commit
471fad6d61
@ -0,0 +1,15 @@
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
|
||||
export const useUser = () => {
|
||||
const [username, setUsername] = useState(null)
|
||||
|
||||
useEffect(async () => {
|
||||
const res = await fetch(`/api/current-user`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
const username = await res.json()
|
||||
setUsername(username)
|
||||
}, [])
|
||||
|
||||
return { username }
|
||||
}
|
||||
@ -1,9 +1,41 @@
|
||||
import { useState } from 'preact/hooks'
|
||||
import { Link } from '../Router.jsx'
|
||||
|
||||
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 (
|
||||
<p>
|
||||
Login Page or <Link page="/">go back home</Link>
|
||||
</p>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
import { useEffect, useRef, useState } from 'preact/hooks'
|
||||
import { Markdown } from '../components/Markdown.jsx'
|
||||
|
||||
export const NewSolutionPage = ({ params: { 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) {
|
||||
editorRef.current.style.height = 'auto'
|
||||
editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
|
||||
}
|
||||
}, [source])
|
||||
|
||||
return (
|
||||
<main class="new-solution">
|
||||
<div class="logo">PHC / Problemi</div>
|
||||
|
||||
<div class="subtitle">Nuova soluzione per il problema #{id}</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.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>
|
||||
)
|
||||
}
|
||||
@ -1,14 +1,74 @@
|
||||
import { Link } from '../Router.jsx'
|
||||
import { useEffect, useRef, useState } from 'preact/hooks'
|
||||
import { Markdown } from '../components/Markdown.jsx'
|
||||
import { Problem } from '../components/Problem.jsx'
|
||||
|
||||
export const ProblemPage = ({ params: { id }, query }) => {
|
||||
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 (
|
||||
<>
|
||||
<p>
|
||||
Problem <code>{id}</code> with options <code>{JSON.stringify(query)}</code>
|
||||
</p>
|
||||
<p>
|
||||
<Link page="/">Go back home</Link>
|
||||
</p>
|
||||
</>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue