forked from sombochea/verdaccio-ui
88 lines
2.1 KiB
JavaScript
88 lines
2.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import isEmpty from 'lodash/isEmpty';
|
|
|
|
import PackageDetail from '../../components/PackageDetail';
|
|
import NotFound from '../../components/NotFound';
|
|
import Spinner from '../../components/Spinner';
|
|
import API from '../../utils/api';
|
|
|
|
import classes from './detail.scss';
|
|
import PackageSidebar from '../../components/PackageSidebar/index';
|
|
|
|
export default class Detail extends Component {
|
|
static propTypes = {
|
|
match: PropTypes.object,
|
|
isUserLoggedIn: PropTypes.bool,
|
|
};
|
|
|
|
state = {
|
|
readMe: '',
|
|
notFound: false,
|
|
};
|
|
|
|
getPackageName(props = this.props) {
|
|
const params = props.match.params;
|
|
return `${(params.scope && '@' + params.scope + '/') || ''}${
|
|
params.package
|
|
}`;
|
|
}
|
|
|
|
get packageName() {
|
|
return this.getPackageName();
|
|
}
|
|
|
|
async componentDidMount() {
|
|
await this.loadPackageInfo(this.packageName);
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const { isUserLoggedIn, match } = this.props;
|
|
const condition1 = prevProps.isUserLoggedIn !== isUserLoggedIn;
|
|
const condition2 =
|
|
prevProps.match.params.package !== match.params.package;
|
|
if (condition1 || condition2) {
|
|
const packageName = this.getPackageName(this.props);
|
|
this.loadPackageInfo(packageName);
|
|
}
|
|
}
|
|
|
|
async loadPackageInfo(packageName) {
|
|
this.setState({
|
|
readMe: '',
|
|
});
|
|
|
|
try {
|
|
const resp = await API.request(`package/readme/${packageName}`, 'GET');
|
|
this.setState({
|
|
readMe: resp,
|
|
notFound: false,
|
|
});
|
|
} catch (err) {
|
|
this.setState({
|
|
notFound: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { notFound, readMe } = this.state;
|
|
|
|
if (notFound) {
|
|
return (
|
|
<div className={'container content'}>
|
|
<NotFound pkg={this.packageName} />
|
|
</div>
|
|
);
|
|
} else if (isEmpty(readMe)) {
|
|
return <Spinner centered={true} />;
|
|
}
|
|
return (
|
|
<div className={`container content ${classes.twoColumn}`}>
|
|
<PackageDetail packageName={this.packageName} readMe={readMe} />
|
|
<PackageSidebar packageName={this.packageName} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|