Nicholai
c4a29225af
__Features Implemented:__ 1. __Image Display Grid__ - Responsive grid layout (2-4 columns) - Image previews with hover effects - Public/Private visibility badges - Caption display on images 2. __Upload Functionality__ - Drag-and-drop upload zone - Multiple file upload support - File type validation (PNG, JPG, WebP) - Size limit enforcement (5MB per file) - Upload progress feedback - Integration with endpoint 3. __Edit Capabilities__ - Modal dialog for editing images - Caption editor (textarea) - Tag management (add/remove tags) - Visibility toggle (public/private) - Image preview in edit dialog - Form validation with Zod 4. __Delete Functionality__ - Confirmation dialog before deletion - Permanent deletion warning - Integration with DELETE endpoint 5. __User Experience__ - Loading states during fetch/upload/edit/delete - Error handling with toast notifications - Success confirmations - Optimistic UI updates - Automatic data refresh after operations __Integration:__ - Added PortfolioManager to - Positioned below artist form for logical workflow - Automatic refresh of artist data when portfolio changes - Callback system for parent component updates ##
86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useParams } from 'next/navigation'
|
|
import { ArtistForm } from '@/components/admin/artist-form'
|
|
import { PortfolioManager } from '@/components/admin/portfolio-manager'
|
|
import { useToast } from '@/hooks/use-toast'
|
|
import type { Artist } from '@/types/database'
|
|
|
|
export default function EditArtistPage() {
|
|
const params = useParams()
|
|
const { toast } = useToast()
|
|
const [artist, setArtist] = useState<Artist | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const fetchArtist = async () => {
|
|
try {
|
|
const response = await fetch(`/api/artists/${params.id}`)
|
|
if (!response.ok) throw new Error('Failed to fetch artist')
|
|
const data = await response.json()
|
|
setArtist(data.artist)
|
|
} catch (error) {
|
|
console.error('Error fetching artist:', error)
|
|
toast({
|
|
title: 'Error',
|
|
description: 'Failed to load artist',
|
|
variant: 'destructive',
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (params.id) {
|
|
fetchArtist()
|
|
}
|
|
}, [params.id])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-lg">Loading artist...</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!artist) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-lg">Artist not found</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Edit Artist</h1>
|
|
<p className="text-muted-foreground">
|
|
Update {artist.name}'s information and portfolio
|
|
</p>
|
|
</div>
|
|
|
|
<ArtistForm
|
|
artist={artist}
|
|
onSuccess={() => {
|
|
toast({
|
|
title: 'Success',
|
|
description: 'Artist updated successfully',
|
|
})
|
|
fetchArtist() // Refresh the data
|
|
}}
|
|
/>
|
|
|
|
{/* Portfolio Management */}
|
|
<PortfolioManager
|
|
artistId={artist.id}
|
|
onImagesUpdate={() => {
|
|
fetchArtist() // Refresh artist data when images are updated
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|