673 lines
24 KiB
TypeScript
673 lines
24 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'
|
|
|
|
type TimelineHop = {
|
|
service: string
|
|
status: string
|
|
details?: Record<string, any>
|
|
timestamp?: string
|
|
}
|
|
|
|
type Snapshot = {
|
|
request_id: string
|
|
title: string
|
|
year?: number
|
|
request_type: string
|
|
state: string
|
|
state_reason?: string
|
|
timeline: TimelineHop[]
|
|
actions: { id: string; label: string; risk: string; requires_confirmation: boolean }[]
|
|
artwork?: { poster_url?: string; backdrop_url?: string }
|
|
raw?: Record<string, any>
|
|
}
|
|
|
|
type ReleaseOption = {
|
|
title?: string
|
|
indexer?: string
|
|
indexerId?: number
|
|
guid?: string
|
|
size?: number
|
|
seeders?: number
|
|
leechers?: number
|
|
protocol?: string
|
|
infoUrl?: string
|
|
}
|
|
|
|
type SnapshotHistory = {
|
|
request_id: string
|
|
state: string
|
|
state_reason?: string
|
|
created_at: string
|
|
}
|
|
|
|
type ActionHistory = {
|
|
request_id: string
|
|
action_id: string
|
|
label: string
|
|
status: string
|
|
message?: string
|
|
created_at: string
|
|
}
|
|
|
|
const percentFromTorrent = (torrent: Record<string, any>) => {
|
|
const progress = Number(torrent.progress)
|
|
if (!Number.isNaN(progress) && progress >= 0 && progress <= 1) {
|
|
return Math.round(progress * 100)
|
|
}
|
|
const size = Number(torrent.size)
|
|
const left = Number(torrent.amount_left)
|
|
if (!Number.isNaN(size) && size > 0 && !Number.isNaN(left)) {
|
|
return Math.round(((size - left) / size) * 100)
|
|
}
|
|
return null
|
|
}
|
|
|
|
const formatBytes = (value?: number) => {
|
|
if (!value || Number.isNaN(value)) return 'n/a'
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
|
let size = value
|
|
let idx = 0
|
|
while (size >= 1024 && idx < units.length - 1) {
|
|
size /= 1024
|
|
idx += 1
|
|
}
|
|
return `${size.toFixed(1)} ${units[idx]}`
|
|
}
|
|
|
|
type SeasonStat = {
|
|
seasonNumber: number
|
|
available: number
|
|
missing: number
|
|
}
|
|
|
|
const seasonStatsFromSeries = (series: Record<string, any>): SeasonStat[] => {
|
|
const dateValue = series?.previousAiring ?? series?.firstAired
|
|
const airedAt = dateValue ? new Date(dateValue) : null
|
|
if (!airedAt || Number.isNaN(airedAt.valueOf()) || airedAt > new Date()) {
|
|
return []
|
|
}
|
|
const seasons = Array.isArray(series?.seasons) ? series.seasons : []
|
|
return seasons
|
|
.filter((season: Record<string, any>) => season?.monitored === true)
|
|
.map((season: Record<string, any>) => {
|
|
const stats = season.statistics
|
|
const available = stats && typeof stats === 'object' ? Number(stats.episodeFileCount) : NaN
|
|
const aired = stats && typeof stats === 'object' ? Number(stats.episodeCount) : NaN
|
|
const fallbackTotal =
|
|
stats && typeof stats === 'object' ? Number(stats.totalEpisodeCount) : NaN
|
|
const total = !Number.isNaN(aired) && aired > 0 ? aired : fallbackTotal
|
|
const seasonDateValue = stats?.previousAiring ?? stats?.firstAired ?? null
|
|
const seasonAiredAt = seasonDateValue ? new Date(seasonDateValue) : null
|
|
if (
|
|
!Number.isNaN(available) &&
|
|
!Number.isNaN(total) &&
|
|
total > 0 &&
|
|
(!seasonAiredAt || Number.isNaN(seasonAiredAt.valueOf()) || seasonAiredAt <= new Date())
|
|
) {
|
|
return {
|
|
seasonNumber: season.seasonNumber,
|
|
available,
|
|
missing: Math.max(0, total - available),
|
|
}
|
|
}
|
|
return null
|
|
})
|
|
.filter((season): season is SeasonStat => season !== null && season.missing > 0)
|
|
}
|
|
|
|
const friendlyState = (value: string) => {
|
|
const map: Record<string, string> = {
|
|
REQUESTED: 'Waiting for approval',
|
|
APPROVED: 'Approved and queued',
|
|
NEEDS_ADD: 'Needs adding to the library',
|
|
ADDED_TO_ARR: 'Added to the library queue',
|
|
SEARCHING: 'Searching for releases',
|
|
GRABBED: 'Download queued',
|
|
DOWNLOADING: 'Downloading',
|
|
IMPORTING: 'Adding to your library',
|
|
COMPLETED: 'Ready to watch',
|
|
AVAILABLE: 'Ready to watch',
|
|
FAILED: 'Needs attention',
|
|
UNKNOWN: 'Status not available yet',
|
|
}
|
|
return map[value] ?? value.replaceAll('_', ' ').toLowerCase()
|
|
}
|
|
|
|
const friendlyTimelineStatus = (service: string, status: string) => {
|
|
if (service === 'Jellyseerr') {
|
|
const map: Record<string, string> = {
|
|
Pending: 'Waiting for approval',
|
|
Approved: 'Approved',
|
|
Declined: 'Declined',
|
|
Available: 'Ready to watch',
|
|
Processing: 'Working on it',
|
|
'Partially Available': 'Partially ready',
|
|
'Waiting for approval': 'Waiting for approval',
|
|
'Working on it': 'Working on it',
|
|
'Partially ready': 'Partially ready',
|
|
'Ready to watch': 'Ready to watch',
|
|
}
|
|
return map[status] ?? status
|
|
}
|
|
if (service === 'Sonarr/Radarr') {
|
|
const map: Record<string, string> = {
|
|
missing: 'Not added yet',
|
|
added: 'Added to the library queue',
|
|
searching: 'Searching for releases',
|
|
available: 'Ready to watch',
|
|
error: 'Needs attention',
|
|
unknown: 'Checking…',
|
|
}
|
|
return map[status] ?? status
|
|
}
|
|
if (service === 'Prowlarr') {
|
|
const map: Record<string, string> = {
|
|
ok: 'Search sources OK',
|
|
issues: 'Search sources need attention',
|
|
error: 'Search sources unavailable',
|
|
}
|
|
return map[status] ?? status
|
|
}
|
|
if (service === 'qBittorrent') {
|
|
const map: Record<string, string> = {
|
|
downloading: 'Downloading',
|
|
paused: 'Paused',
|
|
completed: 'Content downloaded',
|
|
idle: 'No active downloads',
|
|
error: 'Downloader error',
|
|
}
|
|
return map[status] ?? status
|
|
}
|
|
if (service === 'Jellyfin') {
|
|
const map: Record<string, string> = {
|
|
available: 'Ready to watch',
|
|
missing: 'Not in Jellyfin yet',
|
|
error: 'Jellyfin unavailable',
|
|
}
|
|
return map[status] ?? status
|
|
}
|
|
return status
|
|
}
|
|
|
|
export default function RequestTimelinePage({ params }: { params: { id: string } }) {
|
|
const router = useRouter()
|
|
const [snapshot, setSnapshot] = useState<Snapshot | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [showDetails, setShowDetails] = useState(false)
|
|
const [actionMessage, setActionMessage] = useState<string | null>(null)
|
|
const [releaseOptions, setReleaseOptions] = useState<ReleaseOption[]>([])
|
|
const [searchRan, setSearchRan] = useState(false)
|
|
const [modalMessage, setModalMessage] = useState<string | null>(null)
|
|
const [historySnapshots, setHistorySnapshots] = useState<SnapshotHistory[]>([])
|
|
const [historyActions, setHistoryActions] = useState<ActionHistory[]>([])
|
|
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
try {
|
|
if (!getToken()) {
|
|
router.push('/login')
|
|
return
|
|
}
|
|
const baseUrl = getApiBase()
|
|
const [snapshotResponse, historyResponse, actionsResponse] = await Promise.all([
|
|
authFetch(`${baseUrl}/requests/${params.id}/snapshot`),
|
|
authFetch(`${baseUrl}/requests/${params.id}/history?limit=5`),
|
|
authFetch(`${baseUrl}/requests/${params.id}/actions?limit=5`),
|
|
])
|
|
|
|
if (snapshotResponse.status === 401) {
|
|
clearToken()
|
|
router.push('/login')
|
|
return
|
|
}
|
|
const snapshotData = await snapshotResponse.json()
|
|
setSnapshot(snapshotData)
|
|
setReleaseOptions([])
|
|
setSearchRan(false)
|
|
setModalMessage(null)
|
|
|
|
if (historyResponse.ok) {
|
|
const historyData = await historyResponse.json()
|
|
if (Array.isArray(historyData.snapshots)) {
|
|
setHistorySnapshots(historyData.snapshots)
|
|
}
|
|
}
|
|
if (actionsResponse.ok) {
|
|
const actionsData = await actionsResponse.json()
|
|
if (Array.isArray(actionsData.actions)) {
|
|
setHistoryActions(actionsData.actions)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
load()
|
|
}, [params.id])
|
|
|
|
if (loading) {
|
|
return (
|
|
<main className="card">
|
|
<div className="loading-center" role="status" aria-live="polite">
|
|
<div className="spinner" aria-hidden="true" />
|
|
<div className="loading-text">Loading request timeline...</div>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
if (!snapshot) {
|
|
return <main className="card">Could not load that request.</main>
|
|
}
|
|
|
|
const summary =
|
|
snapshot.state_reason ??
|
|
`This request is currently ${snapshot.state.replaceAll('_', ' ').toLowerCase()}.`
|
|
|
|
const downloadHop = snapshot.timeline.find((hop) => hop.service === 'qBittorrent')
|
|
const downloadState = downloadHop?.details?.summary ?? downloadHop?.status ?? 'Unknown'
|
|
const jellyfinAvailable = Boolean(snapshot.raw?.jellyfin?.available)
|
|
const pipelineSteps = [
|
|
{ key: 'Jellyseerr', label: 'Jellyseerr' },
|
|
{ key: 'Sonarr/Radarr', label: 'Library queue' },
|
|
{ key: 'Prowlarr', label: 'Search' },
|
|
{ key: 'qBittorrent', label: 'Download' },
|
|
{ key: 'Jellyfin', label: 'Jellyfin' },
|
|
]
|
|
const stageFromState = (state: string) => {
|
|
if (jellyfinAvailable || state === 'COMPLETED' || state === 'AVAILABLE') return 4
|
|
if (state === 'DOWNLOADING' || state === 'IMPORTING') return 3
|
|
if (state === 'GRABBED') return 2
|
|
if (state === 'SEARCHING' || state === 'ADDED_TO_ARR' || state === 'NEEDS_ADD') return 1
|
|
if (state === 'APPROVED' || state === 'REQUESTED') return 0
|
|
return 1
|
|
}
|
|
const activeStage = stageFromState(snapshot.state)
|
|
const extendedTimeline: TimelineHop[] = [
|
|
...snapshot.timeline,
|
|
{
|
|
service: 'Jellyfin',
|
|
status: jellyfinAvailable ? 'available' : 'missing',
|
|
details: snapshot.raw?.jellyfin ?? {},
|
|
},
|
|
]
|
|
const jellyfinLink = snapshot.raw?.jellyfin?.link
|
|
const posterUrl = snapshot.artwork?.poster_url
|
|
const resolvedPoster =
|
|
posterUrl && posterUrl.startsWith('http') ? posterUrl : posterUrl ? `${getApiBase()}${posterUrl}` : null
|
|
|
|
return (
|
|
<main className="card">
|
|
<div className="request-header">
|
|
<div className="request-header-main">
|
|
{resolvedPoster && (
|
|
<img
|
|
className="request-poster"
|
|
src={resolvedPoster}
|
|
alt={`${snapshot.title} poster`}
|
|
loading="lazy"
|
|
/>
|
|
)}
|
|
<div>
|
|
<h1>{snapshot.title}</h1>
|
|
<div className="meta">{snapshot.request_type.toUpperCase()} {snapshot.year ?? ''}</div>
|
|
</div>
|
|
</div>
|
|
{jellyfinAvailable && jellyfinLink && (
|
|
<a className="ghost-button" href={jellyfinLink} target="_blank" rel="noreferrer">
|
|
Open in Jellyfin
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<section className="status-box">
|
|
<div>
|
|
<h2>Status</h2>
|
|
<p className="status-text">{friendlyState(snapshot.state)}</p>
|
|
</div>
|
|
<div>
|
|
<h2>What this means</h2>
|
|
<p>{summary}</p>
|
|
</div>
|
|
{(actionMessage || (searchRan && releaseOptions.length === 0)) && (
|
|
<div>
|
|
<h2>Last action</h2>
|
|
{actionMessage && <p>{actionMessage}</p>}
|
|
{searchRan && releaseOptions.length === 0 && (
|
|
<p>Nothing to grab yet. We did not find a match on your torrent providers.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h2>Current download state</h2>
|
|
<p>{downloadState}</p>
|
|
</div>
|
|
<div>
|
|
<h2>Next step</h2>
|
|
<p>
|
|
{snapshot.actions.length === 0
|
|
? 'Nothing to do right now.'
|
|
: snapshot.actions[0].label}
|
|
</p>
|
|
<p className="helper">
|
|
Use the buttons below if you want to run a safe retry or a fix.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="details-toggle">
|
|
<button type="button" onClick={() => setShowDetails((value) => !value)}>
|
|
{showDetails ? 'Hide details' : 'Show details (advanced)'}
|
|
</button>
|
|
</div>
|
|
|
|
<section className="pipeline-map">
|
|
<h2>Pipeline location</h2>
|
|
<div className="pipeline-steps">
|
|
{pipelineSteps.map((step, index) => (
|
|
<div
|
|
key={step.key}
|
|
className={`pipeline-step ${
|
|
index === activeStage ? 'is-active' : index < activeStage ? 'is-complete' : ''
|
|
}`}
|
|
>
|
|
<div className="pipeline-dot" />
|
|
<span>{step.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="pipeline-hint">The glowing light shows where your request is right now.</p>
|
|
</section>
|
|
|
|
<section className="timeline">
|
|
{extendedTimeline.map((hop, index) => (
|
|
<div
|
|
key={`${hop.service}-${index}`}
|
|
className={`timeline-item ${
|
|
hop.service === pipelineSteps[activeStage]?.key ? 'is-active' : ''
|
|
}`}
|
|
>
|
|
<div className="timeline-marker" />
|
|
<div className="timeline-card">
|
|
<div className="timeline-title">
|
|
<strong>{hop.service}</strong>
|
|
<span>{friendlyTimelineStatus(hop.service, hop.status)}</span>
|
|
</div>
|
|
{hop.service === 'Sonarr/Radarr' && hop.details?.series && (() => {
|
|
const seasons = seasonStatsFromSeries(hop.details.series)
|
|
if (seasons.length === 0) {
|
|
return <div className="meta">Up to date</div>
|
|
}
|
|
return (
|
|
<div className="timeline-sublist">
|
|
<div className="meta">Seasons available vs missing</div>
|
|
<ul>
|
|
{seasons.map((season) => (
|
|
<li key={season.seasonNumber}>
|
|
<span>Season {season.seasonNumber}</span>
|
|
<span>{season.available} available / {season.missing} missing</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
})()}
|
|
{hop.service === 'Sonarr/Radarr' && hop.details?.missingEpisodes && (
|
|
<div className="timeline-sublist">
|
|
<div className="meta">Missing episodes</div>
|
|
<ul>
|
|
{Object.entries(hop.details.missingEpisodes as Record<string, number[]>).map(
|
|
([seasonNumber, episodes]) => (
|
|
<li key={seasonNumber}>
|
|
<span>Season {seasonNumber}</span>
|
|
<span>
|
|
{episodes.length
|
|
? episodes.map((ep) => `E${ep}`).join(', ')
|
|
: 'Episode numbers unavailable'}
|
|
</span>
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
{hop.service === 'Sonarr/Radarr' && hop.details?.note && (
|
|
<div className="meta">{hop.details.note}</div>
|
|
)}
|
|
{hop.service === 'qBittorrent' &&
|
|
Array.isArray(hop.details?.torrents) &&
|
|
hop.details.torrents.length > 0 && (
|
|
<div className="timeline-sublist">
|
|
<div className="meta">Downloads in qBittorrent</div>
|
|
<ul>
|
|
{hop.details.torrents.map((torrent: Record<string, any>) => {
|
|
const percent = percentFromTorrent(torrent)
|
|
return (
|
|
<li key={torrent.hash ?? torrent.name}>
|
|
<span>{torrent.name ?? 'Unknown item'}</span>
|
|
<span>{percent === null ? 'n/a' : `${percent}%`}</span>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
{showDetails && hop.details && (
|
|
<pre>{JSON.stringify(hop.details, null, 2)}</pre>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
<section className="actions">
|
|
<h2>Try a safe fix</h2>
|
|
{actionMessage && <div className="action-message">{actionMessage}</div>}
|
|
<div className="action-grid">
|
|
{snapshot.actions.map((action) => (
|
|
<button
|
|
key={action.id}
|
|
type="button"
|
|
onClick={async () => {
|
|
if (!snapshot) return
|
|
if (action.requires_confirmation) {
|
|
const ok = window.confirm(
|
|
`Run "${action.label}"? This action may change system state.`
|
|
)
|
|
if (!ok) return
|
|
}
|
|
const baseUrl = getApiBase()
|
|
const actionMap: Record<string, string> = {
|
|
search_releases: 'actions/search',
|
|
search_auto: 'actions/search_auto',
|
|
resume_torrent: 'actions/qbit/resume',
|
|
readd_to_arr: 'actions/readd',
|
|
}
|
|
const path = actionMap[action.id]
|
|
if (!path) {
|
|
setActionMessage('This action is not wired yet.')
|
|
return
|
|
}
|
|
if (action.id === 'search_releases') {
|
|
setActionMessage(null)
|
|
setReleaseOptions([])
|
|
setSearchRan(false)
|
|
setModalMessage(null)
|
|
}
|
|
try {
|
|
const response = await authFetch(`${baseUrl}/requests/${snapshot.request_id}/${path}`, {
|
|
method: 'POST',
|
|
})
|
|
if (!response.ok) {
|
|
if (response.status === 401) {
|
|
clearToken()
|
|
router.push('/login')
|
|
return
|
|
}
|
|
const text = await response.text()
|
|
throw new Error(text || `Request failed: ${response.status}`)
|
|
}
|
|
const data = await response.json()
|
|
if (action.id === 'search_releases') {
|
|
if (Array.isArray(data.releases)) {
|
|
setReleaseOptions(data.releases)
|
|
}
|
|
setSearchRan(true)
|
|
if (!Array.isArray(data.releases) || data.releases.length === 0) {
|
|
setModalMessage(
|
|
'Nothing to grab yet. We searched your torrent providers but found no matches.'
|
|
)
|
|
} else {
|
|
setModalMessage('Search complete. Pick an option below if you want to download.')
|
|
}
|
|
setActionMessage(`${action.label} started.`)
|
|
} else if (action.id === 'search_auto') {
|
|
const message = data?.message ?? 'Search sent to Sonarr/Radarr.'
|
|
setActionMessage(message)
|
|
setModalMessage(message)
|
|
} else {
|
|
const message = data?.message ?? `${action.label} started.`
|
|
setActionMessage(message)
|
|
setModalMessage(message)
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
const message = `${action.label} failed. Check the backend logs.`
|
|
setActionMessage(message)
|
|
setModalMessage(message)
|
|
}
|
|
}}
|
|
>
|
|
{action.label}
|
|
<span>
|
|
{action.risk === 'low'
|
|
? 'safe'
|
|
: action.risk === 'medium'
|
|
? 'caution'
|
|
: action.risk === 'high'
|
|
? 'high impact'
|
|
: action.risk}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{releaseOptions.length > 0 && (
|
|
<div className="timeline-sublist">
|
|
<div className="meta">Download options found</div>
|
|
<ul>
|
|
{releaseOptions.map((release) => (
|
|
<li key={`${release.guid ?? release.title}`}>
|
|
<span>
|
|
{release.title ?? 'Unknown option'}{' '}
|
|
<small>{release.indexer ? `(${release.indexer})` : ''}</small>
|
|
</span>
|
|
<span>{release.seeders ?? 0} seeders · {formatBytes(release.size)}</span>
|
|
<button
|
|
type="button"
|
|
disabled={!release.guid || !release.indexerId}
|
|
onClick={async () => {
|
|
if (!snapshot || !release.guid || !release.indexerId) {
|
|
setActionMessage('Missing details to start the download.')
|
|
setModalMessage('Missing details to start the download.')
|
|
return
|
|
}
|
|
const ok = window.confirm(`Download "${release.title}"?`)
|
|
if (!ok) return
|
|
const baseUrl = getApiBase()
|
|
try {
|
|
const response = await authFetch(
|
|
`${baseUrl}/requests/${snapshot.request_id}/actions/grab`,
|
|
{
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
guid: release.guid,
|
|
indexerId: release.indexerId,
|
|
}),
|
|
}
|
|
)
|
|
if (!response.ok) {
|
|
if (response.status === 401) {
|
|
clearToken()
|
|
router.push('/login')
|
|
return
|
|
}
|
|
const text = await response.text()
|
|
throw new Error(text || `Request failed: ${response.status}`)
|
|
}
|
|
setActionMessage('Download sent to Sonarr/Radarr.')
|
|
setModalMessage('Download sent to Sonarr/Radarr.')
|
|
} catch (error) {
|
|
console.error(error)
|
|
const message = 'Download failed. Check the logs.'
|
|
setActionMessage(message)
|
|
setModalMessage(message)
|
|
}
|
|
}}
|
|
>
|
|
Download
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="history">
|
|
<h2>History</h2>
|
|
<div className="history-grid">
|
|
<div className="summary-card">
|
|
<h3>Recent status changes</h3>
|
|
<ul>
|
|
{historySnapshots.length === 0 ? (
|
|
<li>No history recorded yet.</li>
|
|
) : (
|
|
historySnapshots.map((entry) => (
|
|
<li key={`${entry.created_at}-${entry.state}`}>
|
|
<span>{entry.state.replaceAll('_', ' ')}</span>
|
|
<span>{entry.state_reason ?? 'No reason provided.'}</span>
|
|
</li>
|
|
))
|
|
)}
|
|
</ul>
|
|
</div>
|
|
<div className="summary-card">
|
|
<h3>Recent actions</h3>
|
|
<ul>
|
|
{historyActions.length === 0 ? (
|
|
<li>No actions recorded yet.</li>
|
|
) : (
|
|
historyActions.map((entry) => (
|
|
<li key={`${entry.created_at}-${entry.action_id}`}>
|
|
<span>{entry.label}</span>
|
|
<span>{entry.message ?? entry.status}</span>
|
|
</li>
|
|
))
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{modalMessage && (
|
|
<div className="modal-backdrop" role="dialog" aria-modal="true">
|
|
<div className="modal-card">
|
|
<h2>Update</h2>
|
|
<p>{modalMessage}</p>
|
|
<button type="button" onClick={() => setModalMessage(null)}>
|
|
Got it
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|