import * as React from 'react';
import Divider from '@material-ui/core/Divider';
import Package from '../Package';
import Help from '../Help';
import { formatLicense } from '../../utils/package';
import { PackageInterface } from '../Package/Package';
import * as classes from './styles';
interface Props {
packages: PackageInterface[];
}
export const PackageList: React.FC<Props> = props => {
const renderPackages: () => React.ReactElement<HTMLElement>[] = () => {
return props.packages.map((pkg, i) => {
const { name, version, description, time, keywords, dist, homepage, bugs, author } = pkg;
// TODO: move format license to API side.
const license = formatLicense(pkg.license);
return (
<React.Fragment key={i}>
{i !== 0 && <Divider />}
<Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
</React.Fragment>
);
});
};
const hasPackages: () => boolean = () => props.packages.length > 0;
<div className={'package-list-items'}>
<div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div>
</div>