import React, { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';
import './ArtifactManager.css';
const supabase = createClient(
process.env.REACT_APP_SUPABASE_URL,
process.env.REACT_APP_SUPABASE_ANON_KEY
);
const ArtifactManager = () => {
const [artifacts, setArtifacts] = useState([]);
const [newArtifact, setNewArtifact] = useState({
name: '',
description: '',
size: { width: '', height: '', depth: '' },
media: { images: [''], videos: [''] },
notes: ''
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// Fetch all artifacts
const fetchArtifacts = async () => {
try {
setLoading(true);
const { data, error } = await supabase
.from('artifacts')
.select('*')
.order('created_at', { ascending: false });
if (error) throw error;
setArtifacts(data || []);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
// Add new artifact (đã sửa lỗi duplicate key)
const addArtifact = async () => {
if (!newArtifact.name.trim()) {
setError('Tên hiện vật không được để trống');
return;
}
try {
setLoading(true);
setError(null);
// Chỉ gửi các trường cần thiết, không gửi id
const { data, error } = await supabase
.from('artifacts')
.insert([{
name: newArtifact.name,
description: newArtifact.description,
size: newArtifact.size,
media: newArtifact.media,
notes: newArtifact.notes
}])
.select(); // Trả về bản ghi vừa tạo
if (error) throw error;
setNewArtifact({
name: '',
description: '',
size: { width: '', height: '', depth: '' },
media: { images: [''], videos: [''] },
notes: ''
});
// Cập nhật danh sách ngay lập tức
setArtifacts(prev => [data[0], ...prev]);
} catch (err) {
setError(`Lỗi khi thêm hiện vật: ${err.message}`);
} finally {
setLoading(false);
}
};
// Delete artifact
const deleteArtifact = async (id) => {
if (!window.confirm('Bạn chắc chắn muốn xóa hiện vật này?')) return;
try {
setLoading(true);
const { error } = await supabase
.from('artifacts')
.delete()
.eq('id', id);
if (error) throw error;
setArtifacts(prev => prev.filter(item => item.id !== id));
} catch (err) {
setError(`Lỗi khi xóa hiện vật: ${err.message}`);
} finally {
setLoading(false);
}
};
// Handle input changes
const handleInputChange = (e) => {
const { name, value } = e.target;
setNewArtifact(prev => ({ ...prev, [name]: value }));
};
const handleSizeChange = (e) => {
const { name, value } = e.target;
setNewArtifact(prev => ({
...prev,
size: { ...prev.size, [name]: value }
}));
};
const handleMediaChange = (type, index, value) => {
setNewArtifact(prev => {
const newMedia = { ...prev.media };
newMedia[type][index] = value;
return { ...prev, media: newMedia };
});
};
const addMediaField = (type) => {
setNewArtifact(prev => ({
...prev,
media: {
...prev.media,
[type]: [...prev.media[type], '']
}
}));
};
const removeMediaField = (type, index) => {
setNewArtifact(prev => ({
...prev,
media: {
...prev.media,
[type]: prev.media[type].filter((_, i) => i !== index)
}
}));
};
useEffect(() => {
fetchArtifacts();
}, []);
return (
{/* Artifacts list */}
);
};
export default ArtifactManager;
Quản lý Hiện vật Bảo tàng
{error &&{error}
}
{/* Add new artifact form */}
Thêm hiện vật mới
{newArtifact.media.images.map((image, index) => (
handleMediaChange('images', index, e.target.value)}
placeholder="https://example.com/image.jpg"
/>
{index > 0 && (
)}
))}
{newArtifact.media.videos.map((video, index) => (
handleMediaChange('videos', index, e.target.value)}
placeholder="https://example.com/video.mp4"
/>
{index > 0 && (
)}
))}
Danh sách hiện vật ({artifacts.length})
{loading && artifacts.length === 0 ? (Đang tải dữ liệu...
) : artifacts.length === 0 ? (Chưa có hiện vật nào
) : (
{artifacts.map(artifact => (
{artifact.description && (
{artifact.media.images.length > 0 && (
))}
)}
{artifact.name}
{artifact.description}
)}Kích thước: {artifact.size.width} × {artifact.size.height} × {artifact.size.depth} cm
{artifact.notes && (Ghi chú: {artifact.notes}
)}
{artifact.media.images.map((img, idx) => (
e.target.style.display = 'none'}
/>
))}
)}