sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-12-18 10:14:26 +07:00
Code Issues Releases Wiki Activity

fix: convert Dist component to hooks (#156)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Dist/Dist.test.tsx
View File

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

72
src/components/Dist/Dist.tsx
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 List from '@material-ui/core/List';
import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import { Heading, DistListItem, DistChips } from './styles'; import { Heading, DistListItem, DistChips } from './styles';
import fileSizeSI from '../../utils/file-size'; import fileSizeSI from '../../utils/file-size';
import { PackageMetaInterface } from 'types/packageMeta';
import { formatLicense } from '../../utils/package'; import { formatLicense } from '../../utils/package';
class Dist extends Component { const DistChip: FC<{ name: string }> = ({ name, children }) =>
public render(): JSX.Element { children ? (
return ( <DistChips
<DetailContextConsumer> // lint rule conflicting with prettier
{(context: Partial<VersionPageConsumerProps>) => { /* eslint-disable react/jsx-wrap-multilines */
return context && context.packageMeta && this.renderDist(context.packageMeta); label={
}}
</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 = (
<> <>
{/* eslint-disable-next-line */} <b>{name}</b>
<b>{dist.replace('-', ' ')}</b>: {value} {': '}
{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 ( return (
<List subheader={<Heading variant="subtitle1">{'Latest Distribution'}</Heading>}> <List subheader={<Heading variant="subtitle1">{'Latest Distribution'}</Heading>}>
<DistListItem button={true}>{this.renderChips(dist, license)}</DistListItem> <DistListItem button={true}>
</List> <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; export default Dist;