import * as React from 'react';
import { useContext, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import DJClientContext from '../../providers/djclient';
import DashboardCard from '../../components/DashboardCard';
// Collections Section (includes featured + my collections)
export function CollectionsSection({ collections, loading, currentUser }) {
const djClient = useContext(DJClientContext).DataJunctionAPI;
const [allCollections, setAllCollections] = useState([]);
const [allLoading, setAllLoading] = useState(true);
useEffect(() => {
const fetchAll = async () => {
try {
const response = await djClient.listAllCollections();
console.log('All collections response:', response);
const all = response?.data?.listCollections || [];
setAllCollections(all);
} catch (error) {
console.error('Error fetching all collections:', error);
// Fall back to user's collections if fetching all fails
setAllCollections(collections);
}
setAllLoading(false);
};
fetchAll();
}, [djClient, collections]);
// Sort: user's collections first, then others
// If allCollections is empty, fall back to the collections prop
const collectionsToUse =
allCollections.length > 0 ? allCollections : collections;
const myCollections = collectionsToUse.filter(
c => c.createdBy?.username === currentUser?.username || !c.createdBy,
);
const otherCollections = collectionsToUse.filter(
c => c.createdBy && c.createdBy?.username !== currentUser?.username,
);
const allToShow = [...myCollections, ...otherCollections].slice(0, 8);
const collectionsGrid = allToShow.map(collection => {
const createdByUsername = collection.createdBy?.username;
const isOwner = createdByUsername === currentUser?.username;
const ownerDisplay = isOwner
? 'you'
: createdByUsername?.split('@')[0] || 'unknown';
return (
{
e.currentTarget.style.borderColor = 'var(--primary-color, #007bff)';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
e.currentTarget.style.transform = 'translateY(-2px)';
}}
onMouseLeave={e => {
e.currentTarget.style.borderColor = 'var(--border-color, #e0e0e0)';
e.currentTarget.style.boxShadow = 'none';
e.currentTarget.style.transform = 'translateY(0)';
}}
>
{collection.name}
{collection.description && (
{collection.description}
)}
{collection.nodeCount}{' '}
{collection.nodeCount === 1 ? 'node' : 'nodes'}
by {ownerDisplay}
);
});
return (
📁
No collections yet
Group related metrics and dimensions together for easier discovery
+ Create Collection
}
>
{allToShow.length > 0 && (
{collectionsGrid}
)}
);
}