diff --git a/src/components/Dist/Dist.tsx b/src/components/Dist/Dist.tsx index 3b05cf4..088a085 100644 --- a/src/components/Dist/Dist.tsx +++ b/src/components/Dist/Dist.tsx @@ -6,6 +6,7 @@ import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/ver import { Heading, DistListItem, DistChips } from './styles'; import fileSizeSI from '../../utils/file-size'; import { PackageMetaInterface } from 'types/packageMeta'; +import { formatLicense } from '../../utils/package'; class Dist extends Component { public render(): JSX.Element { @@ -18,28 +19,25 @@ class Dist extends Component { ); } - private renderChips(dist, license: string): JSX.Element | never[] { + private renderChips(dist, license: PackageMetaInterface['latest']['license']): (JSX.Element | undefined)[] { const distDict = { 'file-count': dist.fileCount, size: dist.unpackedSize && fileSizeSI(dist.unpackedSize), license, }; - const chipsList = Object.keys(distDict).reduce((componentList, title, key) => { - // @ts-ignore - const value = distDict[title]; - if (value) { - const label = ( - - {/* eslint-disable-next-line */} - {title.split('-').join(' ')}:{value} - - ); - // @ts-ignore is not assignable to parameter of type 'never' - componentList.push(); - } - return componentList; - }, []); + const chipsList = Object.keys(distDict).map((dist, key) => { + if (!distDict[dist]) return; + + const value = dist === 'license' ? formatLicense(distDict[dist]) : distDict[dist]; + const label = ( + + {/* eslint-disable-next-line */} + {dist.replace('-', ' ')}: {value} + + ); + return ; + }); return chipsList; } diff --git a/src/components/Package/Package.tsx b/src/components/Package/Package.tsx index 006d55f..8c76d66 100644 --- a/src/components/Package/Package.tsx +++ b/src/components/Package/Package.tsx @@ -6,10 +6,29 @@ import HomeIcon from '@material-ui/icons/Home'; import ListItem from '@material-ui/core/ListItem'; import Tooltip from '@material-ui/core/Tooltip'; +import { PackageMetaInterface } from 'types/packageMeta'; import Tag from '../Tag'; import fileSizeSI from '../../utils/file-size'; import { formatDate, formatDateDistance } from '../../utils/package'; - +import { + Author, + Avatar, + Description, + Details, + GridRightAligned, + Icon, + IconButton, + OverviewItem, + PackageList, + PackageListItem, + PackageListItemText, + PackageTitle, + Published, + TagContainer, + Text, + WrapperLink, +} from './styles'; +import { isURL } from '../../utils/url'; interface Author { name: string; avatar?: string; @@ -30,32 +49,11 @@ export interface PackageInterface { author: Author; description?: string; keywords?: string[]; - license?: string | null; + license?: PackageMetaInterface['latest']['license']; homepage?: string; bugs?: Bugs; dist?: Dist; } -// interface Props {} & PackageInterface; - -import { - Author, - Avatar, - Description, - Details, - GridRightAligned, - Icon, - IconButton, - OverviewItem, - PackageList, - PackageListItem, - PackageListItemText, - PackageTitle, - Published, - TagContainer, - Text, - WrapperLink, -} from './styles'; -import { isURL } from '../../utils/url'; const Package: React.FC = ({ author: { name: authorName, avatar: authorAvatar }, diff --git a/src/utils/package.ts b/src/utils/package.ts index 8565e99..485885a 100644 --- a/src/utils/package.ts +++ b/src/utils/package.ts @@ -6,11 +6,6 @@ import { isObject } from 'util'; export const TIMEFORMAT = 'DD.MM.YYYY, HH:mm:ss'; -export interface License { - type: string; - url: string; -} - /** * Formats license field for webui. * @see https://docs.npmjs.com/files/package.json#license diff --git a/types/packageMeta.ts b/types/packageMeta.ts index 473c331..bc86360 100644 --- a/types/packageMeta.ts +++ b/types/packageMeta.ts @@ -5,7 +5,12 @@ export interface PackageMetaInterface { fileCount: number; unpackedSize: number; }; - license: string; + license?: Partial | string | null; }; _uplinks: {}; } + +interface LicenseInterface { + type: string; + url: string; +}