Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-30 22:34:10 -05:00
Code Issues Activity

refactor: fix minor issues

Browse source
This commit is contained in:
Priscila Oliveira 2019-01-06 16:19:02 +01:00
parent a5e2853518
commit 0146c7d235
14 changed files with 65 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc
View file

@ -62,7 +62,7 @@
]
}],
"react/void-dom-elements-no-children": ["warn"],
"react/no-did-mount-set-state": ["warn", "disallow-in-func"],
"react/no-did-mount-set-state": ["error", "disallow-in-func"],
"react/jsx-wrap-multilines": ["error",{
"declaration": "parens",
"assignment": "parens",

14
src/webui/components/Header/index.js
View file

@ -24,7 +24,8 @@ import RegistryInfoDialog from '../RegistryInfoDialog';
import Label from '../Label';
import Search from '../Search';
import { IProps, IState, ToolTipType } from './types';
import { IProps, IState } from './types';
import type { ToolTipType } from './types';
import { Greetings, NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar, LeftSide, RightSide, IconSearchButton, SearchWrapper } from './styles';
class Header extends Component<IProps, IState> {
@ -39,18 +40,11 @@ class Header extends Component<IProps, IState> {
super(props);
this.state = {
openInfoDialog: false,
registryUrl: '',
registryUrl: getRegistryURL(),
showMobileNavBar: false,
};
}
componentDidMount() {
const registryUrl = getRegistryURL();
this.setState({
registryUrl,
});
}
/**
* opens popover menu for logged in user.
*/
@ -165,7 +159,7 @@ class Header extends Component<IProps, IState> {
const { username = '', withoutSearch = false } = this.props;
return (
<RightSide>
{!withoutSearch && this.renderToolTip('Search packages', 'search')}
{!withoutSearch && this.renderToolTipIcon('Search packages', 'search')}
{this.renderToolTipIcon('Documentation', 'help')}
{this.renderToolTipIcon('Registry Information', 'info')}
{username ? (

2
src/webui/components/NotFound/index.js
View file

@ -10,7 +10,7 @@ import { IProps } from './types';
const NotFound = ({ pkg }: IProps) => (
<Wrapper>
<h1>
{'Error 404 -'}
{'Error 404 - '}
{pkg}
</h1>
<hr />

9
src/webui/components/PackageSidebar/index.jsx
View file

@ -28,7 +28,8 @@ export default class PackageSidebar extends React.Component {
}
async componentDidMount() {
await this.loadPackageData(this.props.packageName);
const { packageName } = this.props;
await this.loadPackageData(packageName);
}
async loadPackageData(packageName) {
@ -48,7 +49,7 @@ export default class PackageSidebar extends React.Component {
}
render() {
let {packageMeta} = this.state;
const { packageMeta } = this.state;
if (packageMeta) {
const {time, _uplinks} = packageMeta;
@ -70,7 +71,7 @@ export default class PackageSidebar extends React.Component {
// Maintainers component
return (
<aside className="sidebar-info">
<aside className={'sidebar-info'}>
{time && (
<LastSync
lastUpdated={lastUpdated}
@ -91,7 +92,7 @@ export default class PackageSidebar extends React.Component {
);
}
return (
<aside className="sidebar-loading">Loading package information...</aside>
<aside className={'sidebar-loading'}>{'Loading package information...'}</aside>
);
}
}

2
src/webui/components/PackageSidebar/modules/Dependencies/index.jsx
View file

@ -21,7 +21,7 @@ const renderDependenciesList = (dependencies, dependenciesList) => {
title={`Depend on version: ${dependencies[dependenceName]}`}
>
<a href={getDetailPageURL(dependenceName)}>{dependenceName}</a>
{index < dependenciesList.length - 1 && <span>,&nbsp;</span>}
{index < dependenciesList.length - 1 && <span>{',&nbsp;'}</span>}
</li>
);
})}

8
src/webui/components/PackageSidebar/modules/Infos/index.jsx
View file

@ -8,7 +8,7 @@ import classes from './style.scss';
const renderSection = (title, url) => (
<li>
<span>{title}</span>
<a href={url} rel="noopener noreferrer" target="_blank">
<a href={url} rel={'noopener noreferrer'} target={'_blank'}>
{url}
</a>
</li>
@ -17,17 +17,17 @@ const renderSection = (title, url) => (
const Infos = ({homepage, repository, license}) => {
const showInfo = homepage || repository || license;
return (
<Module className={classes.infosModule} title="Infos">
<Module className={classes.infosModule} title={'Infos'}>
{showInfo ? (
<ul>
{homepage && renderSection('Homepage', homepage)}
{repository && renderSection('Repository', repository)}
{license && (
<li>
<span>License</span>
<span>{'License'}</span>
<span>{license}</span>
</li>)}
</ul>) : <ModuleContentPlaceholder text="Not Available!" />}
</ul>) : <ModuleContentPlaceholder text={'Not Available!'} />}
</Module>);
};

32
src/webui/components/PackageSidebar/modules/LastSync/index.jsx
View file

@ -5,33 +5,31 @@ import ModuleContentPlaceholder from '../../ModuleContentPlaceholder';
import classes from './style.scss';
const renderRecentReleases = (recentReleases) => {
return (
<ul>
{recentReleases.map((versionInfo) => {
const {version, time} = versionInfo;
return (
<li className="last-sync-item" key={version}>
<span>{version}</span>
<span>{time}</span>
</li>
);
})}
</ul>
);
};
const renderRecentReleases = (recentReleases) => (
<ul>
{recentReleases.map((versionInfo) => {
const {version, time} = versionInfo;
return (
<li className={'last-sync-item'} key={version}>
<span>{version}</span>
<span>{time}</span>
</li>
);
})}
</ul>
);
const LastSync = ({recentReleases = [], lastUpdated = ''}) => {
return (
<Module
className={classes.releasesModule}
description={lastUpdated}
title="Last Sync"
title={'Last Sync'}
>
{recentReleases.length ? (
renderRecentReleases(recentReleases)
) : (
<ModuleContentPlaceholder text="Not Available!" />
<ModuleContentPlaceholder text={'Not Available!'} />
)}
</Module>
);

11
src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index.jsx
View file

@ -3,17 +3,20 @@ import PropTypes from 'prop-types';
import classes from './style.scss';
export default function MaintainerInfo({title, name, avatar}) {
let avatarDescription = `${title} ${name}'s avatar`;
const MaintainerInfo = ({title, name, avatar}) => {
const avatarDescription = `${title} ${name}'s avatar`;
return (
<div className={classes.maintainer} title={name}>
<img alt={avatarDescription} src={avatar} title={avatarDescription} />
<span className="maintainer-name">{name}</span>
<span className={'maintainer-name'}>{name}</span>
</div>
);
}
};
MaintainerInfo.propTypes = {
title: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
avatar: PropTypes.string.isRequired,
};
export default MaintainerInfo;

24
src/webui/components/PackageSidebar/modules/Maintainers/index.jsx
View file

@ -31,7 +31,7 @@ export default class Maintainers extends React.Component {
}
get contributors() {
let contributors = get(this, 'props.packageMeta.latest.contributors', {});
const contributors = get(this, 'props.packageMeta.latest.contributors', {});
return filter(contributors, (contributor) => {
return (
contributor.name !== get(this, 'author.name') &&
@ -41,7 +41,8 @@ export default class Maintainers extends React.Component {
}
get showAllContributors() {
return this.state.showAllContributors || size(this.contributors) <= 5;
const { showAllContributors } = this.state;
return showAllContributors || size(this.contributors) <= 5;
}
get uniqueContributors() {
@ -73,7 +74,7 @@ export default class Maintainers extends React.Component {
avatar={contributor.avatar}
key={index}
name={contributor.name}
title="Contributors"
title={'Contributors'}
/>
);
});
@ -82,13 +83,13 @@ export default class Maintainers extends React.Component {
renderAuthorAndContributors(author) {
return (
<div>
<ul className="maintainer-author">
<ul className={'maintainer-author'}>
{author &&
author.name && (
<MaintainerInfo
avatar={author.avatar}
name={author.name}
title="Author"
title={'Author'}
/>
)}
{this.renderContributors()}
@ -97,9 +98,9 @@ export default class Maintainers extends React.Component {
<button
className={classes.showAllContributors}
onClick={this.handleShowAllContributors}
title="Current list only show the author and first 5 contributors unique by name"
title={'Current list only show the author and first 5 contributors unique by name'}
>
Show all contributor
{'Show all contributor'}
</button>
)}
</div>
@ -107,14 +108,13 @@ export default class Maintainers extends React.Component {
}
render() {
let author = this.author;
const contributors = this.renderContributors();
return (
<Module className={classes.maintainersModule} title="Maintainers">
{contributors.length || has(author, 'name') ? (
this.renderAuthorAndContributors(author)
<Module className={classes.maintainersModule} title={'Maintainers'}>
{contributors.length || has(this.author, 'name') ? (
this.renderAuthorAndContributors(this.author)
) : (
<ModuleContentPlaceholder text="Not Available!" />
<ModuleContentPlaceholder text={'Not Available!'} />
)}
</Module>
);

7
src/webui/pages/detail/index.jsx
View file

@ -37,9 +37,10 @@ export default class Detail extends Component {
}
componentDidUpdate(prevProps) {
const condition1 = prevProps.isUserLoggedIn !== this.props.isUserLoggedIn;
const { isUserLoggedIn, match } = this.props;
const condition1 = prevProps.isUserLoggedIn !== isUserLoggedIn;
const condition2 =
prevProps.match.params.package !== this.props.match.params.package;
prevProps.match.params.package !== match.params.package;
if (condition1 || condition2) {
const packageName = this.getPackageName(this.props);
this.loadPackageInfo(packageName);
@ -69,7 +70,7 @@ export default class Detail extends Component {
if (notFound) {
return (
<div className='container content'>
<div className={'container content'}>
<NotFound pkg={this.packageName} />
</div>
);

15
src/webui/utils/asyncComponent.js
View file

@ -1,18 +1,19 @@
import React from 'react';
export function asyncComponent(getComponent) {
export function asyncComponent(getComponentFunc) {
return class AsyncComponent extends React.Component {
static Component = null;
state = {Component: AsyncComponent.Component};
state = {Component: this.getComponent()};
componentDidMount() {
const { Component } = this.state;
if (!Component) {
getComponent().then(({default: Component}) => {
getComponent() {
if (!AsyncComponent.Component) {
getComponentFunc().then(({default: Component}) => {
AsyncComponent.Component = Component;
this.setState({Component});
return Component;
});
}
return AsyncComponent.Component;
}
render() {

2
test/unit/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap
View file

File diff suppressed because one or more lines are too long

2
test/unit/webui/components/PackageSidebar/__snapshots__/peerDependencies.spec.js.snap
View file

File diff suppressed because one or more lines are too long

2
test/unit/webui/components/__snapshots__/packagelist.spec.js.snap
View file

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PackageList /> component should load the component with packages 1`] = `"<div class=\\"package-list-items\\"><div class=\\"pkgContainer\\"><h1 class=\\"listTitle\\">Available Packages</h1><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/verdaccio\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">verdaccio</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>5 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">S</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Sam</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">Private NPM repository</div></div></div></a><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/abc\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">abc</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.1</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>5 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">R</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Rose</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">abc description</div></div></div></a><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/xyz\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">xyz</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.1.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on Invalid Date •</span>almost NaN years ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">M</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Martin</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">xyz description</div></div></div></a></div></div>"`;
exports[`<PackageList /> component should load the component with packages 1`] = `"<div class=\\"package-list-items\\"><div class=\\"pkgContainer\\"><h1 class=\\"listTitle\\">Available Packages</h1><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/verdaccio\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">verdaccio</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>6 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">S</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Sam</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">Private NPM repository</div></div></div></a><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/abc\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">abc</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.1</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>6 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">R</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Rose</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">abc description</div></div></div></a><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/xyz\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">xyz</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.1.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on Invalid Date •</span>almost NaN years ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">M</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Martin</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">xyz description</div></div></div></a></div></div>"`;