fix: convert Dist component to hooks (#156)

This commit is contained in:
Andrew Hughson 2019-10-05 09:33:31 +01:00 committed by Juan Picado @jotadeveloper
parent 583ddd555a
commit f1f8f8ae3f
2 changed files with 44 additions and 74 deletions

View File

@ -1,30 +1,16 @@
import React from 'react';
import { mount } from 'enzyme';
import { DetailContext } from '../../pages/Version';
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',
},
},
}));
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();
});
});

View File

@ -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);
if (!packageMeta) {
return null;
}
private renderDist = (packageMeta: PackageMetaInterface) => {
const { dist, license } = packageMeta && packageMeta.latest;
const { dist, license } = packageMeta && packageMeta.latest;
return (
<List subheader={<Heading variant="subtitle1">{'Latest Distribution'}</Heading>}>
<DistListItem button={true}>{this.renderChips(dist, license)}</DistListItem>
</List>
);
};
}
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;