sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2026-01-19 17:46:12 +07:00
Code Issues Releases Wiki Activity

refactor: migrate Uplinks to function component (#165)

Browse Source
This commit is contained in:
Antoine Chalifour
2019-10-07 14:13:05 +02:00
committed by Priscila Oliveira
parent 0ca89dcbe7
commit 950f6defca
3 changed files with 63 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/UpLinks/UpLinks.tsx
View File

@@ -1,58 +1,42 @@
import React, { ReactElement } from 'react';
import React, { useContext } from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import { DetailContextConsumer } from '../../pages/Version';
import { DetailContext } from '../../pages/Version';
import NoItems from '../NoItems';
import { formatDateDistance } from '../../utils/package';
import { Heading, Spacer, ListItemText } from './styles';
class UpLinks extends React.PureComponent<{}> {
public render(): ReactElement<HTMLElement> {
return (
<DetailContextConsumer>
{context => {
return (
context &&
context.packageMeta &&
context.packageMeta &&
context.packageMeta._uplinks &&
context.packageMeta.latest &&
this.renderContent(context.packageMeta._uplinks, context.packageMeta.latest)
);
}}
</DetailContextConsumer>
);
const UpLinks: React.FC = () => {
const { packageMeta } = useContext(DetailContext);
if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
return null;
}
public renderUpLinksList = uplinks => (
<List>
{Object.keys(uplinks)
.reverse()
.map(name => (
<ListItem key={name}>
<ListItemText>{name}</ListItemText>
<Spacer />
<ListItemText>{`${formatDateDistance(uplinks[name].fetched)} ago`}</ListItemText>
</ListItem>
))}
</List>
const { _uplinks: uplinks, latest } = packageMeta;
if (Object.keys(uplinks).length === 0) {
return <NoItems text={`${latest.name} has no uplinks.`} />;
}
return (
<>
<Heading variant="subtitle1">{'Uplinks'}</Heading>
<List>
{Object.keys(uplinks)
.reverse()
.map(name => (
<ListItem key={name}>
<ListItemText>{name}</ListItemText>
<Spacer />
<ListItemText>{`${formatDateDistance(uplinks[name].fetched)} ago`}</ListItemText>
</ListItem>
))}
</List>
</>
);
public renderContent(uplinks, { name }): ReactElement<HTMLElement> {
if (Object.keys(uplinks).length > 0) {
return (
uplinks && (
<>
<Heading variant="subtitle1">{'Uplinks'}</Heading>
{this.renderUpLinksList(uplinks)}
</>
)
);
}
return <NoItems text={`${name} has no uplinks.`} />;
}
}
};
export default UpLinks;