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

refactor: migrate Uplinks to function component (#165)

Browse Source
This commit is contained in:
Antoine Chalifour 2019-10-07 14:13:05 +02:00 committed by Priscila Oliveira
parent 0ca89dcbe7
commit 950f6defca
3 changed files with 63 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/UpLinks/UpLinks.test.tsx
View File

@ -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();
});
});

74
src/components/UpLinks/UpLinks.tsx
View File

@ -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<HTMLElement> {
return (
<DetailContextConsumer>
{context => {
return (
context &&
context.packageMeta &&
context.packageMeta &&
context.packageMeta._uplinks &&
context.packageMeta.latest &&
this.renderContent(context.packageMeta._uplinks, context.packageMeta.latest)
);
}}
</DetailContextConsumer>
);
const UpLinks: React.FC = () => {
const { packageMeta } = useContext(DetailContext);
if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
return null;
}
public renderUpLinksList = uplinks => (
<List>
{Object.keys(uplinks)
.reverse()
.map(name => (
<ListItem key={name}>
<ListItemText>{name}</ListItemText>
<Spacer />
<ListItemText>{`${formatDateDistance(uplinks[name].fetched)} ago`}</ListItemText>
</ListItem>
))}
</List>
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()
.map(name => (
<ListItem key={name}>
<ListItemText>{name}</ListItemText>
<Spacer />
<ListItemText>{`${formatDateDistance(uplinks[name].fetched)} ago`}</ListItemText>
</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;

4
src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
View File

@ -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>"`;