diff --git a/src/components/UpLinks/UpLinks.test.tsx b/src/components/UpLinks/UpLinks.test.tsx
index fab15d1..e955fb4 100644
--- a/src/components/UpLinks/UpLinks.test.tsx
+++ b/src/components/UpLinks/UpLinks.test.tsx
@@ -1,6 +1,7 @@
import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
+import { DetailContext } from '../../pages/Version';
import UpLinks from './UpLinks';
describe(' component', () => {
@@ -8,4 +9,33 @@ describe(' component', () => {
const wrapper = shallow();
expect(wrapper.html()).toMatchSnapshot();
});
+
+ test('should render the component with uplinks', () => {
+ const packageMeta = {
+ latest: {
+ name: 'verdaccio',
+ version: '4.0.0',
+ author: {
+ name: 'verdaccio user',
+ url: '',
+ avatar: 'https://www.gravatar.com/avatar/000000',
+ },
+ dist: { fileCount: 0, unpackedSize: 0 },
+ },
+ _uplinks: {
+ npmjs: {
+ etag: '"W/"252f0a131cedd3ea82dfefd6fa049558""',
+ fetched: 1529779934081,
+ },
+ },
+ };
+
+ const wrapper = mount(
+
+
+
+ );
+
+ expect(wrapper.html()).toMatchSnapshot();
+ });
});
diff --git a/src/components/UpLinks/UpLinks.tsx b/src/components/UpLinks/UpLinks.tsx
index 4ff48ad..f34e4de 100644
--- a/src/components/UpLinks/UpLinks.tsx
+++ b/src/components/UpLinks/UpLinks.tsx
@@ -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 {
- return (
-
- {context => {
- return (
- context &&
- context.packageMeta &&
- context.packageMeta &&
- context.packageMeta._uplinks &&
- context.packageMeta.latest &&
- this.renderContent(context.packageMeta._uplinks, context.packageMeta.latest)
- );
- }}
-
- );
+const UpLinks: React.FC = () => {
+ const { packageMeta } = useContext(DetailContext);
+
+ if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
+ return null;
}
- public renderUpLinksList = uplinks => (
-
- {Object.keys(uplinks)
- .reverse()
- .map(name => (
-
- {name}
-
- {`${formatDateDistance(uplinks[name].fetched)} ago`}
-
- ))}
-
+ const { _uplinks: uplinks, latest } = packageMeta;
+
+ if (Object.keys(uplinks).length === 0) {
+ return ;
+ }
+
+ return (
+ <>
+ {'Uplinks'}
+
+ {Object.keys(uplinks)
+ .reverse()
+ .map(name => (
+
+ {name}
+
+ {`${formatDateDistance(uplinks[name].fetched)} ago`}
+
+ ))}
+
+ >
);
-
- public renderContent(uplinks, { name }): ReactElement {
- if (Object.keys(uplinks).length > 0) {
- return (
- uplinks && (
- <>
- {'Uplinks'}
- {this.renderUpLinksList(uplinks)}
- >
- )
- );
- }
- return ;
- }
-}
+};
export default UpLinks;
diff --git a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
index 2ad8e69..4fa5fc2 100644
--- a/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
+++ b/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
@@ -1,3 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` component should render the component in default state 1`] = `""`;
+exports[` component should render the component in default state 1`] = `null`;
+
+exports[` component should render the component with uplinks 1`] = `"Uplinks
"`;