refactor: convert Dist component to hooks

Author: bighuggies

src/components/Dist/Dist.test.tsx

@@ -1,30 +1,16 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Dist from './Dist';
 
-const mockPackageMeta = jest.fn(() => ({
-  latest: {
-    homepage: 'https://verdaccio.tld',
-    bugs: {
-      url: 'https://verdaccio.tld/bugs',
-    },
-    dist: {
-      tarball: 'https://verdaccio.tld/download',
-    },
-  },
-}));
+import { DetailContext } from '../../pages/Version';
+import Dist from './Dist';
 
-jest.mock('../../pages/Version', () => ({
-  DetailContextConsumer: component => {
-    return component.children({ packageMeta: mockPackageMeta() });
-  },
-}));
+const withDistComponent = (packageMeta: React.ContextType<typeof DetailContext>['packageMeta']): JSX.Element => (
+  <DetailContext.Provider value={{ packageMeta }}>
+    <Dist />
+  </DetailContext.Provider>
+);
 
 describe('<Dist /> component', () => {
-  beforeEach(() => {
-    jest.resetModules();
-  });
-
   test('should render the component in default state', () => {
     const packageMeta = {
       latest: {
@@ -36,12 +22,10 @@ describe('<Dist /> component', () => {
         },
         license: '',
       },
+      _uplinks: {},
     };
 
-    // @ts-ignore
-    mockPackageMeta.mockImplementation(() => packageMeta);
-
-    const wrapper = mount(<Dist />);
+    const wrapper = mount(withDistComponent(packageMeta));
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -56,12 +40,10 @@ describe('<Dist /> component', () => {
         },
         license: 'MIT',
       },
+      _uplinks: {},
     };
 
-    // @ts-ignore
-    mockPackageMeta.mockImplementation(() => packageMeta);
-
-    const wrapper = mount(<Dist />);
+    const wrapper = mount(withDistComponent(packageMeta));
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -79,12 +61,10 @@ describe('<Dist /> component', () => {
           url: 'https://www.opensource.org/licenses/mit-license.php',
         },
       },
+      _uplinks: {},
     };
 
-    // @ts-ignore
-    mockPackageMeta.mockImplementation(() => packageMeta);
-
-    const wrapper = mount(<Dist />);
+    const wrapper = mount(withDistComponent(packageMeta));
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

src/components/Dist/Dist.tsx

@@ -1,56 +1,46 @@
-import React, { Component } from 'react';
+import React, { FC, useContext } from 'react';
 
 import List from '@material-ui/core/List';
 
-import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
+import { DetailContext } from '../../pages/Version';
 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 {
-    return (
-      <DetailContextConsumer>
-        {(context: Partial<VersionPageConsumerProps>) => {
-          return context && context.packageMeta && this.renderDist(context.packageMeta);
-        }}
-      </DetailContextConsumer>
-    );
-  }
-
-  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).map((dist, key) => {
-      if (!distDict[dist]) return;
-
-      const value = dist === 'license' ? formatLicense(distDict[dist]) : distDict[dist];
-      const label = (
+const DistChip: FC<{ name: string }> = ({ name, children }) =>
+  children ? (
+    <DistChips
+      // lint rule conflicting with prettier
+      /* eslint-disable react/jsx-wrap-multilines */
+      label={
         <>
-          {/* eslint-disable-next-line */}
-          <b>{dist.replace('-', ' ')}</b>: {value}
+          <b>{name}</b>
+          {': '}
+          {children}
         </>
-      );
-      return <DistChips key={key} label={label} />;
-    });
+      }
+      /* eslint-enable */
+    />
+  ) : null;
 
-    return chipsList;
-  }
+const Dist: FC = () => {
+  const { packageMeta } = useContext(DetailContext);
 
-  private renderDist = (packageMeta: PackageMetaInterface) => {
-    const { dist, license } = packageMeta && packageMeta.latest;
+  if (!packageMeta) {
+    return null;
+  }
 
-    return (
-      <List subheader={<Heading variant="subtitle1">{'Latest Distribution'}</Heading>}>
-        <DistListItem button={true}>{this.renderChips(dist, license)}</DistListItem>
-      </List>
-    );
-  };
-}
+  const { dist, license } = packageMeta && packageMeta.latest;
+
+  return (
+    <List subheader={<Heading variant="subtitle1">{'Latest Distribution'}</Heading>}>
+      <DistListItem button={true}>
+        <DistChip name="file count">{dist.fileCount}</DistChip>
+        <DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
+        <DistChip name="license">{formatLicense(license)}</DistChip>
+      </DistListItem>
+    </List>
+  );
+};
 
 export default Dist;