refactor: migrate Uplinks to function component (#165)

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('<UpLinks /> component', () => {
@@ -8,4 +9,33 @@ describe('<UpLinks /> component', () => {
     const wrapper = shallow(<UpLinks />);
     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(
+      <DetailContext.Provider value={{ packageMeta }}>
+        <UpLinks />
+      </DetailContext.Provider>
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 });

src/components/UpLinks/UpLinks.tsx

@@ -1,32 +1,29 @@
-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<{}> {
+const UpLinks: React.FC = () => {
-  public render(): ReactElement<HTMLElement> {
+  const { packageMeta } = useContext(DetailContext);
-    return (
+
-      <DetailContextConsumer>
+  if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
-        {context => {
+    return null;
-          return (
-            context &&
-            context.packageMeta &&
-            context.packageMeta &&
-            context.packageMeta._uplinks &&
-            context.packageMeta.latest &&
-            this.renderContent(context.packageMeta._uplinks, context.packageMeta.latest)
-          );
-        }}
-      </DetailContextConsumer>
-    );
   }
 
-  public renderUpLinksList = uplinks => (
+  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()
@@ -38,21 +35,8 @@ class UpLinks extends React.PureComponent<{}> {
             </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;

src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap

@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<UpLinks /> component should render the component in default state 1`] = `""`;
+exports[`<UpLinks /> component should render the component in default state 1`] = `null`;
+
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1ikpjfo e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;