Erol Haagenrud
f55a51e9e2
Kommandoer jeg vil kjøre mot ekte teecup_db/teecup_api/teecup_frontend: psql migrasjon 058_round_messages.sql mot ekte teecup_db (ny round_message-tabell, ingen endring i eksisterende tabeller). docker compose up -d --build teecup_api teecup_frontend (begge containere, siden dette er backend+frontend sammen). Etterpå: bekreft round_message-tabellen finnes, /health//my-rounds/new//my-feed → 200 over https, teeoff.no upåvirket.
350 lines
13 KiB
TypeScript
350 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
|