Pagina admin con creazione problemi e pagina utente personale
parent
484c21d606
commit
48d1b3b4ed
@ -0,0 +1,18 @@
|
||||
export const server = {
|
||||
async get(url) {
|
||||
const res = await fetch(url, { credentials: 'include' })
|
||||
return await res.json()
|
||||
},
|
||||
async post(url, body) {
|
||||
const res = await fetch(url, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
|
||||
return await res.json()
|
||||
},
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
@ -1,26 +1,46 @@
|
||||
import { route } from 'preact-router'
|
||||
import { useEffect } from 'preact/hooks'
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
import { server } from '../api.jsx'
|
||||
import { Header } from '../components/Header.jsx'
|
||||
import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
|
||||
import { useCurrentUser } from '../hooks.jsx'
|
||||
|
||||
export const Admin = ({}) => {
|
||||
const CreateProblem = ({}) => {
|
||||
const [source, setSource] = useState('')
|
||||
const createProblem = async () => {
|
||||
const id = await server.post('/api/problem', {
|
||||
content: source,
|
||||
})
|
||||
|
||||
route(`/problem/${id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MarkdownEditor {...{ source, setSource }} />
|
||||
<button onClick={createProblem}>Aggiungi Problema</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const AdminPage = ({}) => {
|
||||
const [user] = useCurrentUser(user => {
|
||||
if (!user || user.role !== 'admin') {
|
||||
if (!user) {
|
||||
route('/login', true)
|
||||
} else if (user.role !== 'admin' && user.role !== 'moderator') {
|
||||
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>
|
||||
user && (
|
||||
<main class="page-admin">
|
||||
<Header {...{ user }} />
|
||||
<div class="subtitle">Nuovo problema</div>
|
||||
<CreateProblem />
|
||||
<div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
|
||||
...
|
||||
</main>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
import { route } from 'preact-router'
|
||||
import { useState } from 'preact/hooks'
|
||||
import { server } from '../api.jsx'
|
||||
import { Header } from '../components/Header.jsx'
|
||||
import { Solution } from '../components/Solution.jsx'
|
||||
import { useCurrentUser, useReadResource } from '../hooks.jsx'
|
||||
|
||||
export const ProfilePage = ({}) => {
|
||||
const [solutions, setSolutions] = useState([])
|
||||
|
||||
const [user, logout] = useCurrentUser(async user => {
|
||||
if (!user) {
|
||||
route('/login', true)
|
||||
}
|
||||
|
||||
setSolutions(await server.get(`/api/solutions?user=${user.username}`))
|
||||
})
|
||||
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
route('/')
|
||||
}
|
||||
|
||||
return (
|
||||
user && (
|
||||
<main class="page-profile">
|
||||
<Header {...{ user }} />
|
||||
<div class="subtitle">Le tue soluzioni</div>
|
||||
<div class="solution-list">
|
||||
{solutions.map(({ problemId, content }) => (
|
||||
<Solution {...{ problemId, content }} />
|
||||
))}
|
||||
</div>
|
||||
<div class="subtitle">Altro</div>
|
||||
<button onClick={handleLogout}>Logout</button>
|
||||
</main>
|
||||
)
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue