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 { 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'
|
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 => {
|
const [user] = useCurrentUser(user => {
|
||||||
if (!user || user.role !== 'admin') {
|
if (!user) {
|
||||||
|
route('/login', true)
|
||||||
|
} else if (user.role !== 'admin' && user.role !== 'moderator') {
|
||||||
route('/', true)
|
route('/', true)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main class="admin">
|
user && (
|
||||||
<div class="logo">PHC / Problemi</div>
|
<main class="page-admin">
|
||||||
<div class="subtitle">
|
<Header {...{ user }} />
|
||||||
{user ? (
|
<div class="subtitle">Nuovo problema</div>
|
||||||
<>
|
<CreateProblem />
|
||||||
Logged in as {user.role} @{user.username}
|
<div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
|
||||||
</>
|
...
|
||||||
) : (
|
</main>
|
||||||
<a href="/login">Login</a>
|
)
|
||||||
)}
|
|
||||||
</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