351 lines
13 KiB
TypeScript
351 lines
13 KiB
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import { useCallback, useEffect, useRef, useState } from "react"
|
|||
|
|
import { ImagePlus, Send, Trash2, X } from "lucide-react"
|
|||
|
|
|
|||
|
|
/** Rå meldingsform fra backend. */
|
|||
|
|
export type ApiRoundMessage = {
|
|||
|
|
id: string
|
|||
|
|
round_id: string
|
|||
|
|
author_user_id: string
|
|||
|
|
author_display_name: string
|
|||
|
|
body: string | null
|
|||
|
|
image_url: string | null
|
|||
|
|
created_at: string // ISO 8601
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export type RoundMessagesProps = {
|
|||
|
|
roundId: string
|
|||
|
|
currentUserId: string
|
|||
|
|
roundOwnerUserId: string
|
|||
|
|
// Økes av round-detail.tsx sitt "/ws/rounds/{id}/live"-signal (samme
|
|||
|
|
// "noe endret seg, hent på nytt"-mønster som resten av rundens
|
|||
|
|
// sanntid) -- trigger en ny henting av meldingslisten uten å måtte
|
|||
|
|
// koble en egen WebSocket til akkurat denne komponenten.
|
|||
|
|
refreshKey?: number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ACCEPTED_IMAGE_TYPES = "image/jpeg,image/png,image/webp,image/gif"
|
|||
|
|
const MAX_IMAGE_HEIGHT = 300
|
|||
|
|
|
|||
|
|
/** Kort, norsk relativt tidsstempel (f.eks. "nå", "5 min", "2 t", "i går"). */
|
|||
|
|
function formatRelativeTime(iso: string): { label: string; title: string } {
|
|||
|
|
const then = new Date(iso)
|
|||
|
|
const title = then.toLocaleString("nb-NO", {
|
|||
|
|
day: "2-digit",
|
|||
|
|
month: "short",
|
|||
|
|
hour: "2-digit",
|
|||
|
|
minute: "2-digit",
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const diffMs = Date.now() - then.getTime()
|
|||
|
|
const diffSec = Math.round(diffMs / 1000)
|
|||
|
|
const diffMin = Math.round(diffSec / 60)
|
|||
|
|
const diffHour = Math.round(diffMin / 60)
|
|||
|
|
const diffDay = Math.round(diffHour / 24)
|
|||
|
|
|
|||
|
|
let label: string
|
|||
|
|
if (diffSec < 45) label = "nå nettopp"
|
|||
|
|
else if (diffMin < 60) label = `for ${diffMin} min siden`
|
|||
|
|
else if (diffHour < 24) label = `for ${diffHour} t siden`
|
|||
|
|
else if (diffDay === 1) label = "i går"
|
|||
|
|
else if (diffDay < 7) label = `for ${diffDay} dager siden`
|
|||
|
|
else
|
|||
|
|
label = then.toLocaleDateString("nb-NO", {
|
|||
|
|
day: "numeric",
|
|||
|
|
month: "short",
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return { label, title }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function RoundMessages({ roundId, currentUserId, roundOwnerUserId, refreshKey }: RoundMessagesProps) {
|
|||
|
|
const [messages, setMessages] = useState<ApiRoundMessage[]>([])
|
|||
|
|
const [loading, setLoading] = useState(true)
|
|||
|
|
const [loadError, setLoadError] = useState<string | null>(null)
|
|||
|
|
|
|||
|
|
const [body, setBody] = useState("")
|
|||
|
|
const [imageFile, setImageFile] = useState<File | null>(null)
|
|||
|
|
const [imagePreview, setImagePreview] = useState<string | null>(null)
|
|||
|
|
const [posting, setPosting] = useState(false)
|
|||
|
|
const [postError, setPostError] = useState<string | null>(null)
|
|||
|
|
const [deletingId, setDeletingId] = useState<string | null>(null)
|
|||
|
|
|
|||
|
|
const fileInputRef = useRef<HTMLInputElement | null>(null)
|
|||
|
|
|
|||
|
|
// Hent meldinger ved mount, og på nytt hver gang refreshKey endres
|
|||
|
|
// (WS-signal fra round-detail.tsx).
|
|||
|
|
useEffect(() => {
|
|||
|
|
const controller = new AbortController()
|
|||
|
|
async function load() {
|
|||
|
|
setLoading(true)
|
|||
|
|
setLoadError(null)
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/rounds/${roundId}/messages`, {
|
|||
|
|
credentials: "include",
|
|||
|
|
signal: controller.signal,
|
|||
|
|
})
|
|||
|
|
if (!res.ok) throw new Error(`Status ${res.status}`)
|
|||
|
|
const data: ApiRoundMessage[] = await res.json()
|
|||
|
|
setMessages(data)
|
|||
|
|
} catch (err) {
|
|||
|
|
if ((err as Error).name === "AbortError") return
|
|||
|
|
setLoadError("Kunne ikke laste kommentarene. Prøv å laste siden på nytt.")
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
load()
|
|||
|
|
return () => controller.abort()
|
|||
|
|
}, [roundId, refreshKey])
|
|||
|
|
|
|||
|
|
// Rydd opp objekt-URL-en for bildeforhåndsvisning.
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
if (imagePreview) URL.revokeObjectURL(imagePreview)
|
|||
|
|
}
|
|||
|
|
}, [imagePreview])
|
|||
|
|
|
|||
|
|
const clearSelectedImage = useCallback(() => {
|
|||
|
|
setImageFile(null)
|
|||
|
|
setImagePreview((prev) => {
|
|||
|
|
if (prev) URL.revokeObjectURL(prev)
|
|||
|
|
return null
|
|||
|
|
})
|
|||
|
|
if (fileInputRef.current) fileInputRef.current.value = ""
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|||
|
|
const file = e.target.files?.[0]
|
|||
|
|
if (!file) return
|
|||
|
|
setPostError(null)
|
|||
|
|
setImageFile(file)
|
|||
|
|
setImagePreview((prev) => {
|
|||
|
|
if (prev) URL.revokeObjectURL(prev)
|
|||
|
|
return URL.createObjectURL(file)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const trimmedBody = body.trim()
|
|||
|
|
const canPost = (trimmedBody.length > 0 || imageFile != null) && !posting
|
|||
|
|
|
|||
|
|
async function handlePost(e: React.FormEvent) {
|
|||
|
|
e.preventDefault()
|
|||
|
|
if (!canPost) return
|
|||
|
|
|
|||
|
|
setPosting(true)
|
|||
|
|
setPostError(null)
|
|||
|
|
try {
|
|||
|
|
const formData = new FormData()
|
|||
|
|
if (trimmedBody.length > 0) formData.append("body", trimmedBody)
|
|||
|
|
if (imageFile) formData.append("image", imageFile)
|
|||
|
|
|
|||
|
|
const res = await fetch(`/rounds/${roundId}/messages`, {
|
|||
|
|
method: "POST",
|
|||
|
|
credentials: "include",
|
|||
|
|
body: formData,
|
|||
|
|
})
|
|||
|
|
if (res.status !== 201) throw new Error(`Status ${res.status}`)
|
|||
|
|
|
|||
|
|
const created: ApiRoundMessage = await res.json()
|
|||
|
|
// Legg nederst — listen er kronologisk, eldst til nyest.
|
|||
|
|
setMessages((prev) => [...prev, created])
|
|||
|
|
setBody("")
|
|||
|
|
clearSelectedImage()
|
|||
|
|
} catch {
|
|||
|
|
setPostError("Kunne ikke poste kommentaren. Prøv igjen.")
|
|||
|
|
} finally {
|
|||
|
|
setPosting(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleDelete(id: string) {
|
|||
|
|
setDeletingId(id)
|
|||
|
|
setPostError(null)
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/rounds/${roundId}/messages/${id}`, {
|
|||
|
|
method: "DELETE",
|
|||
|
|
credentials: "include",
|
|||
|
|
})
|
|||
|
|
if (res.status !== 204) throw new Error(`Status ${res.status}`)
|
|||
|
|
setMessages((prev) => prev.filter((m) => m.id !== id))
|
|||
|
|
} catch {
|
|||
|
|
setPostError("Kunne ikke slette kommentaren. Prøv igjen.")
|
|||
|
|
} finally {
|
|||
|
|
setDeletingId(null)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section className="flex flex-col gap-4" aria-label="Kommentarer og bilder fra runden">
|
|||
|
|
{/* Composer */}
|
|||
|
|
<form
|
|||
|
|
onSubmit={handlePost}
|
|||
|
|
className="flex flex-col gap-3 rounded-2xl border border-border bg-card p-4 sm:p-5"
|
|||
|
|
>
|
|||
|
|
<label htmlFor="round-message-body" className="sr-only">
|
|||
|
|
Skriv en kommentar
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
id="round-message-body"
|
|||
|
|
value={body}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
setBody(e.target.value)
|
|||
|
|
if (postError) setPostError(null)
|
|||
|
|
}}
|
|||
|
|
placeholder="Skriv en kommentar..."
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full resize-y rounded-xl border border-border bg-background px-3 py-2.5 text-base text-foreground outline-none transition-all duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Valgt bilde – forhåndsvisning */}
|
|||
|
|
{imagePreview && (
|
|||
|
|
<div className="flex items-center gap-3 rounded-xl border border-border bg-muted p-2.5">
|
|||
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|||
|
|
<img
|
|||
|
|
src={imagePreview || "/placeholder.svg"}
|
|||
|
|
alt="Forhåndsvisning av valgt bilde"
|
|||
|
|
className="size-14 shrink-0 rounded-lg object-cover"
|
|||
|
|
/>
|
|||
|
|
<span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
|
|||
|
|
{imageFile?.name}
|
|||
|
|
</span>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={clearSelectedImage}
|
|||
|
|
className="inline-flex h-11 min-w-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground outline-none transition-all duration-200 ease-in-out hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
|
|||
|
|
>
|
|||
|
|
<X aria-hidden="true" className="size-4" />
|
|||
|
|
Fjern
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|||
|
|
<input
|
|||
|
|
ref={fileInputRef}
|
|||
|
|
type="file"
|
|||
|
|
accept={ACCEPTED_IMAGE_TYPES}
|
|||
|
|
onChange={handleFileChange}
|
|||
|
|
className="sr-only"
|
|||
|
|
aria-hidden="true"
|
|||
|
|
tabIndex={-1}
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => fileInputRef.current?.click()}
|
|||
|
|
className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 text-base font-medium text-foreground outline-none transition-all duration-200 ease-in-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
|
|||
|
|
>
|
|||
|
|
<ImagePlus aria-hidden="true" className="size-5" />
|
|||
|
|
Legg til bilde
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={!canPost}
|
|||
|
|
className="inline-flex h-11 min-w-11 items-center justify-center gap-2 rounded-lg bg-primary px-5 text-base font-medium text-primary-foreground outline-none transition-all duration-200 ease-in-out hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{posting ? (
|
|||
|
|
<span
|
|||
|
|
aria-hidden="true"
|
|||
|
|
className="size-4 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<Send aria-hidden="true" className="size-5" />
|
|||
|
|
)}
|
|||
|
|
{posting ? "Poster..." : "Post"}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{postError && (
|
|||
|
|
<p role="alert" className="text-sm font-medium text-destructive">
|
|||
|
|
{postError}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
{/* Meldingsliste */}
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="flex justify-center py-12" aria-live="polite" aria-busy="true">
|
|||
|
|
<span
|
|||
|
|
aria-hidden="true"
|
|||
|
|
className="size-8 animate-spin rounded-full border-4 border-primary/20 border-t-primary"
|
|||
|
|
/>
|
|||
|
|
<span className="sr-only">Laster kommentarer...</span>
|
|||
|
|
</div>
|
|||
|
|
) : loadError ? (
|
|||
|
|
<p role="alert" className="rounded-2xl border border-border bg-card p-5 text-base text-destructive">
|
|||
|
|
{loadError}
|
|||
|
|
</p>
|
|||
|
|
) : messages.length === 0 ? (
|
|||
|
|
<p className="rounded-2xl border border-border bg-card p-5 text-base text-muted-foreground">
|
|||
|
|
Ingen kommentarer ennå — vær den første til å dele et bilde eller en kommentar fra runden.
|
|||
|
|
</p>
|
|||
|
|
) : (
|
|||
|
|
<ul className="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-card">
|
|||
|
|
{messages.map((m) => {
|
|||
|
|
const canDelete = m.author_user_id === currentUserId || roundOwnerUserId === currentUserId
|
|||
|
|
const isDeleting = deletingId === m.id
|
|||
|
|
const { label, title } = formatRelativeTime(m.created_at)
|
|||
|
|
return (
|
|||
|
|
<li key={m.id} className="flex flex-col gap-3 p-4 sm:p-5">
|
|||
|
|
<div className="flex items-start justify-between gap-3">
|
|||
|
|
<div className="flex min-w-0 flex-col">
|
|||
|
|
<span className="truncate text-base font-semibold text-foreground">
|
|||
|
|
{m.author_display_name}
|
|||
|
|
</span>
|
|||
|
|
<time
|
|||
|
|
dateTime={m.created_at}
|
|||
|
|
title={title}
|
|||
|
|
className="text-sm font-medium text-muted-foreground"
|
|||
|
|
>
|
|||
|
|
{label}
|
|||
|
|
</time>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{canDelete && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => handleDelete(m.id)}
|
|||
|
|
disabled={isDeleting}
|
|||
|
|
className="inline-flex h-11 min-w-11 shrink-0 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive outline-none transition-all duration-200 ease-in-out hover:bg-destructive/10 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{isDeleting ? (
|
|||
|
|
<span
|
|||
|
|
aria-hidden="true"
|
|||
|
|
className="size-4 animate-spin rounded-full border-2 border-destructive/30 border-t-destructive"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<Trash2 aria-hidden="true" className="size-4" />
|
|||
|
|
)}
|
|||
|
|
Slett
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{m.image_url && (
|
|||
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|||
|
|
<img
|
|||
|
|
src={m.image_url || "/placeholder.svg"}
|
|||
|
|
alt={`Bilde delt av ${m.author_display_name}`}
|
|||
|
|
style={{ maxHeight: MAX_IMAGE_HEIGHT }}
|
|||
|
|
className="w-full rounded-xl object-cover"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{m.body && (
|
|||
|
|
<p className="text-base leading-relaxed text-foreground whitespace-pre-wrap">
|
|||
|
|
{m.body}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</li>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default RoundMessages
|