File size: 2,152 Bytes
7cc7aef a78483d 7cc7aef a78483d 7cc7aef a78483d 7cc7aef a78483d 7cc7aef a78483d 7cc7aef a78483d 7cc7aef a78483d 7cc7aef |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import { useEffect, useState } from 'react';
import { databases, Query, CONFIG } from '../appwrite';
export default function ResourceList({ moduleId, sectionId }) {
const [resources, setResources] = useState([]);
const [loading, setLoading] = useState(true);
const fetchResources = async () => {
try {
const res = await databases.listDocuments(
CONFIG.databaseId,
CONFIG.resourcesCollectionId,
[
Query.equal('moduleId', moduleId),
Query.equal('sectionId', sectionId),
Query.orderAsc('order'),
]
);
setResources(res.documents);
} catch (err) {
console.error('Erreur fetchResources:', err);
} finally {
setLoading(false);
}
};
useEffect(() => {
setLoading(true);
fetchResources();
}, [moduleId, sectionId]);
if (loading) return <div className="loading">Chargement des ressources...</div>;
const getFileIcon = (type) => {
switch (type) {
case 'pdf': return '📄';
case 'video': return '🎬';
case 'link': return '🔗';
case 'image': return '🖼️';
case 'ppt':
case 'pptx': return '📊';
case 'doc':
case 'docx': return '📝';
case 'xls':
case 'xlsx': return '📈';
default: return '📎';
}
};
const getFileSize = (url) => {
return '';
};
return (
<div className="file-list">
{resources.length === 0 ? (
<p className="no-resources">Aucun document disponible pour cette section.</p>
) : (
resources.map((r) => (
<a
key={r.$id}
href={r.url}
target="_blank"
rel="noopener noreferrer"
className="file-item"
>
<div className="file-icon">{getFileIcon(r.type)}</div>
<div className="file-info">
<div className="file-name">{r.title}</div>
{r.description && (
<div className="file-meta">{r.description}</div>
)}
</div>
<div className="file-download">↓</div>
</a>
))
)}
</div>
);
} |