cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

Refactor: Dependencies - Replaced class with func. comp (#169)

Browse Source
This commit is contained in:
Antoine Chalifour 2019-10-11 15:02:53 +02:00 committed by Priscila Oliveira
parent e0642a9d0d
commit 99621b6baf
5 changed files with 167 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -27,7 +27,7 @@
"@types/node": "12.7.8",
"@types/react": "16.9.2",
"@types/react-dom": "16.9.0",
"@types/react-router-dom": "4.3.5",
"@types/react-router-dom": "5.1.0",
"@types/validator": "10.11.3",
"@typescript-eslint/parser": "2.3.2",
"@verdaccio/babel-preset": "2.0.0",
@ -85,10 +85,9 @@
"react": "16.10.0",
"react-autosuggest": "9.4.3",
"react-dom": "16.10.0",
"react-router-dom": "5.1.2",
"react-emotion": "9.2.12",
"react-hot-loader": "4.12.11",
"react-router": "5.0.1",
"react-router-dom": "5.0.1",
"resolve-url-loader": "3.1.0",
"rimraf": "3.0.0",
"source-map-loader": "0.2.4",

92
src/components/Dependencies/Dependencies.test.tsx Normal file
View File

@ -0,0 +1,92 @@
import React from 'react';
import { render } from '@testing-library/react';
import { HashRouter } from 'react-router-dom';
import { DetailContextProvider } from '../../pages/Version';
import Dependencies from './Dependencies';
describe('<Dependencies /> component', () => {
test('Renders a message when there are no dependencies', () => {
// Given
const packageMeta = {
latest: {
name: 'verdaccio',
version: '4.0.0',
author: {
name: 'verdaccio user',
email: 'verdaccio.user@verdaccio.org',
url: '',
avatar: 'https://www.gravatar.com/avatar/000000',
},
dist: { fileCount: 0, unpackedSize: 0 },
dependencies: {},
devDependencies: {},
peerDependencies: {},
},
_uplinks: {},
};
// When
const { getByText } = render(
<DetailContextProvider value={{ packageMeta }}>
<Dependencies />
</DetailContextProvider>
);
// Then
expect(getByText('verdaccio has no dependencies.')).toBeDefined();
});
test('Renders a link to each dependency', () => {
// Given
const packageMeta = {
latest: {
name: 'verdaccio',
version: '4.0.0',
author: {
name: 'verdaccio user',
email: 'verdaccio.user@verdaccio.org',
url: '',
avatar: 'https://www.gravatar.com/avatar/000000',
},
dist: { fileCount: 0, unpackedSize: 0 },
dependencies: {
react: '16.9.0',
'react-dom': '16.9.0',
},
devDependencies: {
'babel-core': '7.0.0-beta6',
},
peerDependencies: {
'styled-components': '5.0.0',
},
},
_uplinks: {},
};
// When
const { getByText } = render(
<HashRouter>
<DetailContextProvider value={{ packageMeta }}>
<Dependencies />
</DetailContextProvider>
</HashRouter>
);
// Then
// FIXME: currently MaterialUI chips do not support the children
// prop, therefore it is impossible to use proper links for
// dependencies. Those are for now clickable spans
expect(getByText('dependencies (2)')).toBeDefined();
expect(getByText('react@16.9.0').tagName).toBe('SPAN');
expect(getByText('react-dom@16.9.0').tagName).toBe('SPAN');
expect(getByText('devDependencies (1)')).toBeDefined();
expect(getByText('babel-core@7.0.0-beta6').tagName).toBe('SPAN');
expect(getByText('peerDependencies (1)')).toBeDefined();
expect(getByText('styled-components@5.0.0').tagName).toBe('SPAN');
});
});

123
src/components/Dependencies/Dependencies.tsx
View File

@ -1,117 +1,78 @@
import React, { Component, Fragment, ReactElement } from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import React, { useContext } from 'react';
import { useHistory } from 'react-router-dom';
import CardContent from '@material-ui/core/CardContent';
import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
import { PackageDependencies } from '../../../types/packageMeta';
import { DetailContext } from '../../pages/Version';
import NoItems from '../NoItems';
import { CardWrap, Heading, Tags, Tag } from './styles';
type DepDetailProps = {
name: string;
version: string;
onLoading?: () => void;
} & RouteComponentProps;
interface DepDetailState {
name: string;
version: string;
interface DependencyBlockProps {
title: string;
dependencies: PackageDependencies;
}
class DepDetail extends Component<DepDetailProps, DepDetailState> {
constructor(props: DepDetailProps) {
super(props);
const { name, version } = this.props;
const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
const { enableLoading } = useContext(DetailContext);
const history = useHistory();
this.state = {
name,
version,
};
}
const deps = Object.entries(dependencies);
public render(): ReactElement<HTMLElement> {
const { name, version } = this.state;
const tagText = `${name}@${version}`;
return <Tag className={'dep-tag'} clickable={true} label={tagText} onClick={this.handleOnClick} />;
}
function handleClick(name: string): void {
enableLoading && enableLoading();
private handleOnClick = () => {
const { name } = this.state;
const { onLoading, history } = this.props;
onLoading && onLoading();
history.push(`/-/web/detail/${name}`);
};
}
const WrapperDependencyDetail = withRouter(DepDetail);
class DependencyBlock extends Component<{ title: string; dependencies: [] }> {
public render(): ReactElement<HTMLElement> {
const { dependencies, title } = this.props;
const deps = Object.entries(dependencies) as [];
return (
<DetailContextConsumer>
{({ enableLoading }) => {
return (
<CardWrap>
<CardContent>
<Heading variant="subtitle1">{`${title} (${deps.length})`}</Heading>
<Tags>{this.renderTags(deps, enableLoading)}</Tags>
<Tags>
{deps.map(([name, version]) => (
// eslint-disable-next-line
<Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} />
))}
</Tags>
</CardContent>
</CardWrap>
);
}}
</DetailContextConsumer>
);
};
function hasKeys(object?: { [key: string]: any }): boolean {
return !!object && Object.keys(object).length > 0;
}
private renderTags = (deps: [], enableLoading?: () => void) =>
deps.map(dep => {
const [name, version] = dep as [string, string];
const Dependencies: React.FC<{}> = () => {
const { packageMeta } = useContext(DetailContext);
return <WrapperDependencyDetail key={name} name={name} onLoading={enableLoading} version={version} />;
});
if (!packageMeta) {
throw new Error('packageMeta is required at DetailContext');
}
class Dependencies extends Component {
public render(): ReactElement<HTMLElement> {
return (
<DetailContextConsumer>
{packageMeta => {
return this.renderDependencies(packageMeta as VersionPageConsumerProps);
}}
</DetailContextConsumer>
);
}
private checkDependencyLength<T>(dependency: Record<string, T> = {}): boolean {
return Object.keys(dependency).length > 0;
}
private renderDependencies({ packageMeta }): ReactElement<HTMLElement> {
const { latest } = packageMeta;
// FIXME: add dependencies to package meta type
// @ts-ignore
const { dependencies, devDependencies, peerDependencies, name } = latest;
const dependencyMap = { dependencies, devDependencies, peerDependencies };
const hasDependencies = hasKeys(dependencies) || hasKeys(devDependencies) || hasKeys(peerDependencies);
const dependencyList = Object.keys(dependencyMap).reduce(
(result, value, key) => {
const selectedDepndency = dependencyMap[value];
if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
result.push(<DependencyBlock dependencies={selectedDepndency} key={key} title={value} />);
if (hasDependencies) {
return (
<>
{Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
if (!dependencies || Object.keys(dependencies).length === 0) {
return null;
}
return result;
},
[] as JSX.Element[]
return <DependencyBlock dependencies={dependencies} key={dependencyType} title={dependencyType} />;
})}
</>
);
}
if (dependencyList.length) {
return <Fragment>{dependencyList}</Fragment>;
}
return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
}
}
};
export default Dependencies;

4
types/packageMeta.ts
View File

@ -48,3 +48,7 @@ export interface Author {
url?: string;
avatar?: string;
}
export interface PackageDependencies {
[key: string]: string;
}

26
yarn.lock
View File

@ -1676,10 +1676,10 @@
dependencies:
"@types/react" "*"
"@types/react-router-dom@4.3.5":
version "4.3.5"
resolved "https://registry.verdaccio.org/@types%2freact-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f"
integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA==
"@types/react-router-dom@5.1.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.0.tgz#8baa84a7fa8c8e7797fb3650ca51f93038cb4caf"
integrity sha512-YCh8r71pL5p8qDwQf59IU13hFy/41fDQG/GeOI3y+xmD4o0w3vEPxE8uBe+dvOgMoDl0W1WUZsWH0pxc1mcZyQ==
dependencies:
"@types/history" "*"
"@types/react" "*"
@ -10946,23 +10946,23 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.verdaccio.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-router-dom@5.0.1:
version "5.0.1"
resolved "https://registry.verdaccio.org/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
integrity sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==
react-router-dom@5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
dependencies:
"@babel/runtime" "^7.1.2"
history "^4.9.0"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-router "5.0.1"
react-router "5.1.2"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-router@5.0.1:
version "5.0.1"
resolved "https://registry.verdaccio.org/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==
react-router@5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==
dependencies:
"@babel/runtime" "^7.1.2"
history "^4.9.0"