372 lines
13 KiB
JavaScript
372 lines
13 KiB
JavaScript
import React, { useState, useCallback } from 'react'
|
|
import Modal from '../ui/Modal'
|
|
import Button from '../ui/Button'
|
|
|
|
const MEDALS = [
|
|
{ key: 'gold', label: 'Gold', emoji: '🥇', weight: 5 },
|
|
{ key: 'silver', label: 'Silver', emoji: '🥈', weight: 3 },
|
|
{ key: 'bronze', label: 'Bronze', emoji: '🥉', weight: 1 },
|
|
]
|
|
|
|
function getMedalMeta(medalKey) {
|
|
return MEDALS.find((medal) => medal.key === medalKey) ?? null
|
|
}
|
|
|
|
function getMedalWeight(medalKey) {
|
|
return getMedalMeta(medalKey)?.weight ?? 0
|
|
}
|
|
|
|
function buildConfirmationContent(pendingConfirmation) {
|
|
if (!pendingConfirmation) {
|
|
return null
|
|
}
|
|
|
|
const nextMedal = getMedalMeta(pendingConfirmation.medal)
|
|
const previousMedal = getMedalMeta(pendingConfirmation.previousMedal)
|
|
|
|
if (pendingConfirmation.action === 'remove') {
|
|
return {
|
|
title: `Remove ${nextMedal?.label ?? 'medal'} medal?`,
|
|
summary: `This will remove your ${nextMedal?.label ?? ''} medal from this artwork.`,
|
|
details: 'Your contribution to the medal score will be removed immediately after confirmation.',
|
|
confirmLabel: 'Remove medal',
|
|
confirmVariant: 'danger',
|
|
modalVariant: 'danger',
|
|
}
|
|
}
|
|
|
|
return {
|
|
title: `Change medal to ${nextMedal?.label ?? 'selected medal'}?`,
|
|
summary: `You already awarded ${previousMedal?.label ?? 'a medal'} to this artwork.`,
|
|
details: `Confirm to switch your medal from ${previousMedal?.label ?? 'the current medal'} to ${nextMedal?.label ?? 'the selected medal'}.`,
|
|
confirmLabel: `Change to ${nextMedal?.label ?? 'selected medal'}`,
|
|
confirmVariant: 'accent',
|
|
modalVariant: 'default',
|
|
}
|
|
}
|
|
|
|
function describeMedalError(message) {
|
|
const normalized = String(message || '').trim()
|
|
const lower = normalized.toLowerCase()
|
|
|
|
if (lower.includes('verify your email')) {
|
|
return {
|
|
title: 'Email verification required',
|
|
summary: 'Medals are limited to verified accounts to reduce abuse and low-quality vote spam.',
|
|
details: 'Open your account email, use the verification link, then reload this page and try again.',
|
|
}
|
|
}
|
|
|
|
if (lower.includes('at least') && lower.includes('hours old')) {
|
|
return {
|
|
title: 'Account is too new',
|
|
summary: normalized,
|
|
details: 'This cooldown is there to stop throwaway accounts from mass-awarding artworks immediately after signup.',
|
|
}
|
|
}
|
|
|
|
if (lower.includes('your own artwork')) {
|
|
return {
|
|
title: 'Own artwork cannot be medaled',
|
|
summary: 'Creators cannot add medals to their own work.',
|
|
details: 'Only other community members can award medals so the score stays community-driven.',
|
|
}
|
|
}
|
|
|
|
if (lower.includes('not published yet')) {
|
|
return {
|
|
title: 'Artwork is not published yet',
|
|
summary: 'This artwork has not reached a public, medal-eligible state yet.',
|
|
details: 'Medals are only available after the artwork is published and visible publicly.',
|
|
}
|
|
}
|
|
|
|
if (lower.includes('not eligible for medals')) {
|
|
return {
|
|
title: 'Artwork is not eligible for medals',
|
|
summary: 'This artwork is currently blocked from medal voting.',
|
|
details: 'That usually means it is private, unapproved, or otherwise not available for public medal activity.',
|
|
}
|
|
}
|
|
|
|
if (lower.includes('no longer available')) {
|
|
return {
|
|
title: 'Artwork is unavailable',
|
|
summary: 'This artwork can no longer receive medals.',
|
|
details: 'The artwork may have been removed or is no longer publicly available.',
|
|
}
|
|
}
|
|
|
|
if (lower.includes('disabled')) {
|
|
return {
|
|
title: 'Medals are temporarily unavailable',
|
|
summary: normalized,
|
|
details: 'This is a site-wide setting, not a problem with your account.',
|
|
}
|
|
}
|
|
|
|
return {
|
|
title: 'Unable to add medal',
|
|
summary: normalized || 'The medal request could not be completed.',
|
|
details: 'Check that you are signed in with an eligible account and that the artwork is publicly medal-eligible.',
|
|
}
|
|
}
|
|
|
|
export default function ArtworkAwards({ artwork, initialAwards = null, isAuthenticated = false }) {
|
|
const artworkId = artwork?.id
|
|
const isOwnArtwork = Boolean(artwork?.viewer?.id && artwork?.user?.id && artwork.viewer.id === artwork.user.id)
|
|
|
|
const [awards, setAwards] = useState({
|
|
gold: initialAwards?.gold ?? 0,
|
|
silver: initialAwards?.silver ?? 0,
|
|
bronze: initialAwards?.bronze ?? 0,
|
|
score: initialAwards?.score ?? 0,
|
|
})
|
|
const [viewerAward, setViewerAward] = useState(initialAwards?.current_user_medal ?? initialAwards?.viewer_award ?? null)
|
|
const [loading, setLoading] = useState(null) // which medal is pending
|
|
const [error, setError] = useState(null)
|
|
const [pendingConfirmation, setPendingConfirmation] = useState(null)
|
|
|
|
const errorDetails = error ? describeMedalError(error) : null
|
|
const confirmationContent = buildConfirmationContent(pendingConfirmation)
|
|
|
|
const csrfToken = typeof document !== 'undefined'
|
|
? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
|
|
: null
|
|
|
|
const apiFetch = useCallback(async (method, body = null) => {
|
|
const res = await fetch(`/api/artworks/${artworkId}/medal`, {
|
|
method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken || '',
|
|
'Accept': 'application/json',
|
|
},
|
|
credentials: 'same-origin',
|
|
body: body ? JSON.stringify(body) : undefined,
|
|
})
|
|
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
throw new Error(data?.message || data?.errors?.medal?.[0] || 'Request failed')
|
|
}
|
|
|
|
return res.json()
|
|
}, [artworkId, csrfToken])
|
|
|
|
const applyServerResponse = useCallback((data) => {
|
|
const payload = data?.medals || data?.awards || null
|
|
|
|
if (payload) {
|
|
setAwards({
|
|
gold: payload.gold ?? 0,
|
|
silver: payload.silver ?? 0,
|
|
bronze: payload.bronze ?? 0,
|
|
score: payload.score ?? 0,
|
|
})
|
|
}
|
|
setViewerAward(data?.current_user_medal ?? data?.viewer_award ?? null)
|
|
}, [])
|
|
|
|
const handleMedalAction = useCallback(async ({ action, medal, previousMedal = null }) => {
|
|
if (!isAuthenticated || isOwnArtwork) return
|
|
if (loading) return
|
|
|
|
setError(null)
|
|
|
|
// Optimistic update
|
|
const prevAwards = { ...awards }
|
|
const prevViewer = viewerAward
|
|
|
|
if (action === 'remove') {
|
|
// Undo: remove award
|
|
setAwards(a => ({
|
|
...a,
|
|
[medal]: Math.max(0, a[medal] - 1),
|
|
score: Math.max(0, a.score - getMedalWeight(medal)),
|
|
}))
|
|
setViewerAward(null)
|
|
|
|
setLoading(medal)
|
|
try {
|
|
const data = await apiFetch('DELETE')
|
|
applyServerResponse(data)
|
|
} catch (e) {
|
|
setAwards(prevAwards)
|
|
setViewerAward(prevViewer)
|
|
setError(e.message)
|
|
} finally {
|
|
setLoading(null)
|
|
}
|
|
return
|
|
}
|
|
|
|
if (action === 'change' && previousMedal) {
|
|
// Change: swap medals
|
|
setAwards(a => ({
|
|
...a,
|
|
[previousMedal]: Math.max(0, a[previousMedal] - 1),
|
|
[medal]: a[medal] + 1,
|
|
score: a.score - getMedalWeight(previousMedal) + getMedalWeight(medal),
|
|
}))
|
|
setViewerAward(medal)
|
|
|
|
setLoading(medal)
|
|
try {
|
|
const data = await apiFetch('POST', { medal_type: medal })
|
|
applyServerResponse(data)
|
|
} catch (e) {
|
|
setAwards(prevAwards)
|
|
setViewerAward(prevViewer)
|
|
setError(e.message)
|
|
} finally {
|
|
setLoading(null)
|
|
}
|
|
return
|
|
}
|
|
|
|
// New award
|
|
setAwards(a => ({
|
|
...a,
|
|
[medal]: a[medal] + 1,
|
|
score: a.score + getMedalWeight(medal),
|
|
}))
|
|
setViewerAward(medal)
|
|
|
|
setLoading(medal)
|
|
try {
|
|
const data = await apiFetch('POST', { medal_type: medal })
|
|
applyServerResponse(data)
|
|
} catch (e) {
|
|
setAwards(prevAwards)
|
|
setViewerAward(prevViewer)
|
|
setError(e.message)
|
|
} finally {
|
|
setLoading(null)
|
|
}
|
|
}, [isAuthenticated, isOwnArtwork, loading, awards, viewerAward, apiFetch, applyServerResponse])
|
|
|
|
const handleMedalClick = useCallback((medal) => {
|
|
if (!isAuthenticated || isOwnArtwork) return
|
|
if (loading) return
|
|
|
|
setError(null)
|
|
|
|
if (viewerAward === medal) {
|
|
setPendingConfirmation({ action: 'remove', medal, previousMedal: medal })
|
|
return
|
|
}
|
|
|
|
if (viewerAward) {
|
|
setPendingConfirmation({ action: 'change', medal, previousMedal: viewerAward })
|
|
return
|
|
}
|
|
|
|
void handleMedalAction({ action: 'add', medal })
|
|
}, [isAuthenticated, isOwnArtwork, loading, viewerAward, handleMedalAction])
|
|
|
|
const closeConfirmation = useCallback(() => {
|
|
if (loading) return
|
|
setPendingConfirmation(null)
|
|
}, [loading])
|
|
|
|
const confirmPendingAction = useCallback(async () => {
|
|
if (!pendingConfirmation || loading) return
|
|
|
|
const action = pendingConfirmation
|
|
setPendingConfirmation(null)
|
|
await handleMedalAction(action)
|
|
}, [pendingConfirmation, loading, handleMedalAction])
|
|
|
|
return (
|
|
<>
|
|
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Medals</h2>
|
|
|
|
{errorDetails && (
|
|
<div className="mt-3 rounded-xl border border-red-400/20 bg-red-500/10 px-4 py-3 text-left">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-red-300/90">{errorDetails.title}</div>
|
|
<p className="mt-2 text-sm leading-6 text-red-200">{errorDetails.summary}</p>
|
|
<p className="mt-2 text-xs leading-5 text-red-100/75">{errorDetails.details}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-4 flex flex-col gap-3 sm:flex-row">
|
|
{MEDALS.map(({ key, label, emoji }) => {
|
|
const isActive = viewerAward === key
|
|
const isPending = loading === key
|
|
|
|
return (
|
|
<button
|
|
key={key}
|
|
type="button"
|
|
disabled={!isAuthenticated || isOwnArtwork || loading !== null}
|
|
onClick={() => handleMedalClick(key)}
|
|
title={!isAuthenticated ? 'Sign in to medal' : isOwnArtwork ? 'You cannot medal your own artwork' : isActive ? `Remove ${label} medal` : viewerAward ? `Change medal to ${label}` : `Give ${label} medal`}
|
|
className={[
|
|
'inline-flex min-h-11 flex-1 flex-col items-center justify-center gap-1 rounded-lg border px-3 py-2 text-sm transition-all',
|
|
isActive
|
|
? 'border-accent/40 bg-accent/10 font-semibold text-accent shadow-lg shadow-accent/10'
|
|
: 'border-white/[0.08] bg-white/[0.03] text-white/70 hover:bg-white/[0.06] hover:border-white/[0.12]',
|
|
(!isAuthenticated || isOwnArtwork || loading !== null) && 'cursor-not-allowed opacity-60',
|
|
].filter(Boolean).join(' ')}
|
|
>
|
|
<span className="text-xl leading-none" aria-hidden="true">
|
|
{isPending ? '…' : emoji}
|
|
</span>
|
|
<span className="text-xs font-medium leading-none">{label}</span>
|
|
<span className="text-xs text-soft tabular-nums">
|
|
{awards[key]}
|
|
</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{awards.score > 0 && (
|
|
<p className="mt-3 text-right text-xs text-soft">
|
|
Score: <span className="font-semibold text-white">{awards.score}</span>
|
|
</p>
|
|
)}
|
|
|
|
{!isAuthenticated && (
|
|
<p className="mt-3 text-center text-xs text-soft">
|
|
<a href="/login" className="text-accent underline hover:no-underline">Sign in</a> to medal this artwork
|
|
</p>
|
|
)}
|
|
|
|
{isAuthenticated && isOwnArtwork && (
|
|
<p className="mt-3 text-center text-xs text-soft">
|
|
You cannot medal your own artwork.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<Modal
|
|
open={Boolean(confirmationContent)}
|
|
onClose={closeConfirmation}
|
|
title={confirmationContent?.title}
|
|
size="sm"
|
|
variant={confirmationContent?.modalVariant}
|
|
footer={confirmationContent ? (
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<Button variant="ghost" size="sm" onClick={closeConfirmation} disabled={loading !== null}>
|
|
Cancel
|
|
</Button>
|
|
<Button variant={confirmationContent.confirmVariant} size="sm" onClick={confirmPendingAction} loading={loading !== null}>
|
|
{confirmationContent.confirmLabel}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
>
|
|
{confirmationContent ? (
|
|
<div className="space-y-3">
|
|
<p className="text-sm leading-6 text-slate-200">{confirmationContent.summary}</p>
|
|
<p className="text-xs leading-5 text-slate-400">{confirmationContent.details}</p>
|
|
</div>
|
|
) : null}
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|