324 lines
12 KiB
TypeScript
324 lines
12 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { useParams, Link, useSearchParams, useNavigate } from 'react-router-dom';
|
|
import { Project, Package, PaginatedResponse } from '../types';
|
|
import { getProject, listPackages, createPackage } from '../api';
|
|
import { Breadcrumb } from '../components/Breadcrumb';
|
|
import { Badge } from '../components/Badge';
|
|
import { SearchInput } from '../components/SearchInput';
|
|
import { SortDropdown, SortOption } from '../components/SortDropdown';
|
|
import { FilterChip, FilterChipGroup } from '../components/FilterChip';
|
|
import { Pagination } from '../components/Pagination';
|
|
import './Home.css';
|
|
|
|
const SORT_OPTIONS: SortOption[] = [
|
|
{ value: 'name', label: 'Name' },
|
|
{ value: 'created_at', label: 'Created' },
|
|
{ value: 'updated_at', label: 'Updated' },
|
|
];
|
|
|
|
const FORMAT_OPTIONS = ['generic', 'npm', 'pypi', 'docker', 'deb', 'rpm', 'maven', 'nuget', 'helm'];
|
|
|
|
function formatBytes(bytes: number): string {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function ProjectPage() {
|
|
const { projectName } = useParams<{ projectName: string }>();
|
|
const navigate = useNavigate();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
const [packagesData, setPackagesData] = useState<PaginatedResponse<Package> | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [newPackage, setNewPackage] = useState({ name: '', description: '', format: 'generic', platform: 'any' });
|
|
const [creating, setCreating] = useState(false);
|
|
|
|
// Get params from URL
|
|
const page = parseInt(searchParams.get('page') || '1', 10);
|
|
const search = searchParams.get('search') || '';
|
|
const sort = searchParams.get('sort') || 'name';
|
|
const order = (searchParams.get('order') || 'asc') as 'asc' | 'desc';
|
|
const format = searchParams.get('format') || '';
|
|
|
|
const updateParams = useCallback(
|
|
(updates: Record<string, string | undefined>) => {
|
|
const newParams = new URLSearchParams(searchParams);
|
|
Object.entries(updates).forEach(([key, value]) => {
|
|
if (value === undefined || value === '' || (key === 'page' && value === '1')) {
|
|
newParams.delete(key);
|
|
} else {
|
|
newParams.set(key, value);
|
|
}
|
|
});
|
|
setSearchParams(newParams);
|
|
},
|
|
[searchParams, setSearchParams]
|
|
);
|
|
|
|
const loadData = useCallback(async () => {
|
|
if (!projectName) return;
|
|
|
|
try {
|
|
setLoading(true);
|
|
const [projectData, packagesResult] = await Promise.all([
|
|
getProject(projectName),
|
|
listPackages(projectName, { page, search, sort, order, format: format || undefined }),
|
|
]);
|
|
setProject(projectData);
|
|
setPackagesData(packagesResult);
|
|
setError(null);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to load data');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [projectName, page, search, sort, order, format]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
// Keyboard navigation - go back with backspace
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Backspace' && !['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)) {
|
|
e.preventDefault();
|
|
navigate('/');
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [navigate]);
|
|
|
|
async function handleCreatePackage(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
try {
|
|
setCreating(true);
|
|
await createPackage(projectName!, newPackage);
|
|
setNewPackage({ name: '', description: '', format: 'generic', platform: 'any' });
|
|
setShowForm(false);
|
|
loadData();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to create package');
|
|
} finally {
|
|
setCreating(false);
|
|
}
|
|
}
|
|
|
|
const handleSearchChange = (value: string) => {
|
|
updateParams({ search: value, page: '1' });
|
|
};
|
|
|
|
const handleSortChange = (newSort: string, newOrder: 'asc' | 'desc') => {
|
|
updateParams({ sort: newSort, order: newOrder, page: '1' });
|
|
};
|
|
|
|
const handleFormatChange = (value: string) => {
|
|
updateParams({ format: value, page: '1' });
|
|
};
|
|
|
|
const handlePageChange = (newPage: number) => {
|
|
updateParams({ page: String(newPage) });
|
|
};
|
|
|
|
const clearFilters = () => {
|
|
setSearchParams({});
|
|
};
|
|
|
|
const hasActiveFilters = search !== '' || format !== '';
|
|
const packages = packagesData?.items || [];
|
|
const pagination = packagesData?.pagination;
|
|
|
|
if (loading && !packagesData) {
|
|
return <div className="loading">Loading...</div>;
|
|
}
|
|
|
|
if (!project) {
|
|
return <div className="error-message">Project not found</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="home">
|
|
<Breadcrumb
|
|
items={[
|
|
{ label: 'Projects', href: '/' },
|
|
{ label: project.name },
|
|
]}
|
|
/>
|
|
|
|
<div className="page-header">
|
|
<div className="page-header__info">
|
|
<div className="page-header__title-row">
|
|
<h1>{project.name}</h1>
|
|
<Badge variant={project.is_public ? 'public' : 'private'}>
|
|
{project.is_public ? 'Public' : 'Private'}
|
|
</Badge>
|
|
</div>
|
|
{project.description && <p className="description">{project.description}</p>}
|
|
<div className="page-header__meta">
|
|
<span className="meta-item">Created {new Date(project.created_at).toLocaleDateString()}</span>
|
|
{project.updated_at !== project.created_at && (
|
|
<span className="meta-item">Updated {new Date(project.updated_at).toLocaleDateString()}</span>
|
|
)}
|
|
<span className="meta-item">by {project.created_by}</span>
|
|
</div>
|
|
</div>
|
|
<button className="btn btn-primary" onClick={() => setShowForm(!showForm)}>
|
|
{showForm ? 'Cancel' : '+ New Package'}
|
|
</button>
|
|
</div>
|
|
|
|
{error && <div className="error-message">{error}</div>}
|
|
|
|
{showForm && (
|
|
<form className="form card" onSubmit={handleCreatePackage}>
|
|
<h3>Create New Package</h3>
|
|
<div className="form-row">
|
|
<div className="form-group">
|
|
<label htmlFor="name">Name</label>
|
|
<input
|
|
id="name"
|
|
type="text"
|
|
value={newPackage.name}
|
|
onChange={(e) => setNewPackage({ ...newPackage, name: e.target.value })}
|
|
placeholder="releases"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="format">Format</label>
|
|
<select
|
|
id="format"
|
|
value={newPackage.format}
|
|
onChange={(e) => setNewPackage({ ...newPackage, format: e.target.value })}
|
|
>
|
|
{FORMAT_OPTIONS.map((f) => (
|
|
<option key={f} value={f}>
|
|
{f}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="description">Description</label>
|
|
<input
|
|
id="description"
|
|
type="text"
|
|
value={newPackage.description}
|
|
onChange={(e) => setNewPackage({ ...newPackage, description: e.target.value })}
|
|
placeholder="Optional description"
|
|
/>
|
|
</div>
|
|
<button type="submit" className="btn btn-primary" disabled={creating}>
|
|
{creating ? 'Creating...' : 'Create Package'}
|
|
</button>
|
|
</form>
|
|
)}
|
|
|
|
<div className="list-controls">
|
|
<SearchInput
|
|
value={search}
|
|
onChange={handleSearchChange}
|
|
placeholder="Search packages..."
|
|
className="list-controls__search"
|
|
/>
|
|
<select
|
|
className="list-controls__select"
|
|
value={format}
|
|
onChange={(e) => handleFormatChange(e.target.value)}
|
|
>
|
|
<option value="">All formats</option>
|
|
{FORMAT_OPTIONS.map((f) => (
|
|
<option key={f} value={f}>
|
|
{f}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<SortDropdown options={SORT_OPTIONS} value={sort} order={order} onChange={handleSortChange} />
|
|
</div>
|
|
|
|
{hasActiveFilters && (
|
|
<FilterChipGroup onClearAll={clearFilters}>
|
|
{search && <FilterChip label="Search" value={search} onRemove={() => handleSearchChange('')} />}
|
|
{format && <FilterChip label="Format" value={format} onRemove={() => handleFormatChange('')} />}
|
|
</FilterChipGroup>
|
|
)}
|
|
|
|
{packages.length === 0 ? (
|
|
<div className="empty-state">
|
|
{hasActiveFilters ? (
|
|
<p>No packages match your filters. Try adjusting your search.</p>
|
|
) : (
|
|
<p>No packages yet. Create your first package to start uploading artifacts!</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="project-grid">
|
|
{packages.map((pkg) => (
|
|
<Link to={`/project/${projectName}/${pkg.name}`} key={pkg.id} className="project-card card">
|
|
<div className="package-card__header">
|
|
<h3>{pkg.name}</h3>
|
|
<Badge variant="default">{pkg.format}</Badge>
|
|
</div>
|
|
{pkg.description && <p>{pkg.description}</p>}
|
|
|
|
{(pkg.tag_count !== undefined || pkg.artifact_count !== undefined) && (
|
|
<div className="package-stats">
|
|
{pkg.tag_count !== undefined && (
|
|
<div className="package-stats__item">
|
|
<span className="package-stats__value">{pkg.tag_count}</span>
|
|
<span className="package-stats__label">Tags</span>
|
|
</div>
|
|
)}
|
|
{pkg.artifact_count !== undefined && (
|
|
<div className="package-stats__item">
|
|
<span className="package-stats__value">{pkg.artifact_count}</span>
|
|
<span className="package-stats__label">Artifacts</span>
|
|
</div>
|
|
)}
|
|
{pkg.total_size !== undefined && pkg.total_size > 0 && (
|
|
<div className="package-stats__item">
|
|
<span className="package-stats__value">{formatBytes(pkg.total_size)}</span>
|
|
<span className="package-stats__label">Size</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="project-meta">
|
|
{pkg.latest_tag && (
|
|
<span className="latest-tag">
|
|
Latest: <strong>{pkg.latest_tag}</strong>
|
|
</span>
|
|
)}
|
|
<span className="date">Created {new Date(pkg.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{pagination && pagination.total_pages > 1 && (
|
|
<Pagination
|
|
page={pagination.page}
|
|
totalPages={pagination.total_pages}
|
|
total={pagination.total}
|
|
limit={pagination.limit}
|
|
onPageChange={handlePageChange}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProjectPage;
|