78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import { Link, useNavigate, useParams } from 'react-router-dom'
|
|
import { api } from '../api.js'
|
|
import { useAuth } from '../context/AuthContext.jsx'
|
|
|
|
function todayLocal() {
|
|
const now = new Date()
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
return `${now.getFullYear()}-${month}-${day}`
|
|
}
|
|
|
|
export default function JournalSpacePage() {
|
|
const { spaceId } = useParams()
|
|
const navigate = useNavigate()
|
|
const { session } = useAuth()
|
|
const [space, setSpace] = useState(null)
|
|
const [days, setDays] = useState([])
|
|
const [date, setDate] = useState(todayLocal())
|
|
const [error, setError] = useState('')
|
|
|
|
useEffect(() => {
|
|
api(`/api/journal/spaces/${spaceId}`, { token: session.token })
|
|
.then((data) => {
|
|
setSpace(data.space)
|
|
setDays(data.days || [])
|
|
})
|
|
.catch((err) => setError(err.message))
|
|
}, [session.token, spaceId])
|
|
|
|
const openDay = async (calendarDate) => {
|
|
setError('')
|
|
try {
|
|
const payload = await api(`/api/journal/spaces/${spaceId}/days`, {
|
|
token: session.token,
|
|
method: 'POST',
|
|
body: { calendar_date: calendarDate }
|
|
})
|
|
navigate(`/journal/${spaceId}/${payload.day.id}`)
|
|
} catch (err) {
|
|
setError(err.message)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="card">
|
|
<p className="muted"><Link to="/journal">Alle Spaces</Link></p>
|
|
<h1>{space?.title || 'Space'}</h1>
|
|
<p className="lede">Tage chronologisch. Der Kalendertag ist nicht die Dialogzeit.</p>
|
|
{error && <p className="error">{error}</p>}
|
|
<form
|
|
className="stack"
|
|
onSubmit={(event) => {
|
|
event.preventDefault()
|
|
openDay(date)
|
|
}}
|
|
>
|
|
<label>
|
|
Tag öffnen
|
|
<input type="date" value={date} onChange={(e) => setDate(e.target.value)} required />
|
|
</label>
|
|
<button type="submit">Tag öffnen</button>
|
|
</form>
|
|
<ul className="stack">
|
|
{days.map((item) => (
|
|
<li key={item.id} className="row-item">
|
|
<Link to={`/journal/${spaceId}/${item.id}`}>
|
|
{item.calendar_date}
|
|
{item.entry_title ? ` · ${item.entry_title}` : ''}
|
|
{item.entry_count > 1 ? ` (${item.entry_count})` : ''}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|