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'
|
import { Link } from '../Router.jsx'
|
||||||
|
|
||||||
export const LoginPage = () => {
|
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 (
|
return (
|
||||||
<p>
|
<main class="login">
|
||||||
Login Page or <Link page="/">go back home</Link>
|
<div class="logo">PHC / Problemi</div>
|
||||||
</p>
|
<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 }) => {
|
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 (
|
return (
|
||||||
<>
|
<main class="problem">
|
||||||
<p>
|
<div class="logo">PHC / Problemi</div>
|
||||||
Problem <code>{id}</code> with options <code>{JSON.stringify(query)}</code>
|
<div class="subtitle">Testo del problema</div>
|
||||||
</p>
|
<Problem
|
||||||
<p>
|
id={id}
|
||||||
<Link page="/">Go back home</Link>
|
content={`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n\n`.repeat(
|
||||||
</p>
|
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