fix: ui change details issue in props update (#959) (#960)

This commit is contained in:
Ayush Sharma 2018-08-28 08:04:15 +02:00 committed by Juan Picado @jotadeveloper
parent 96bed90db1
commit 431e7608d2
2 changed files with 12 additions and 13 deletions

View File

@ -30,12 +30,6 @@ export default class PackageSidebar extends React.Component {
await this.loadPackageData(this.props.packageName);
}
async UNSAFE_componentWillReceiveProps(newProps) {
if (newProps.packageName !== this.props.packageName) {
await this.loadPackageData(newProps.packageName);
}
}
async loadPackageData(packageName) {
let packageMeta;

View File

@ -20,12 +20,14 @@ export default class Detail extends Component {
state = {
readMe: '',
notFound: false,
notFound: false
};
getPackageName(props = this.props) {
const params = props.match.params;
return `${(params.scope && '@' + params.scope + '/') || ''}${params.package}`;
return `${(params.scope && '@' + params.scope + '/') || ''}${
params.package
}`;
}
get packageName() {
return this.getPackageName();
@ -35,9 +37,12 @@ export default class Detail extends Component {
await this.loadPackageInfo(this.packageName);
}
componentDidUpdate(newProps) {
if (newProps.isUserLoggedIn !== this.props.isUserLoggedIn) {
const packageName = this.getPackageName(newProps);
componentDidUpdate(prevProps) {
const condition1 = prevProps.isUserLoggedIn !== this.props.isUserLoggedIn;
const condition2 =
prevProps.match.params.package !== this.props.match.params.package;
if (condition1 || condition2) {
const packageName = this.getPackageName(this.props);
this.loadPackageInfo(packageName);
}
}
@ -64,13 +69,13 @@ export default class Detail extends Component {
const {notFound, readMe} = this.state;
if (notFound) {
return <NotFound pkg={this.packageName}/>;
return <NotFound pkg={this.packageName} />;
} else if (isEmpty(readMe)) {
return <Loading text={loadingMessage} />;
}
return (
<div className={classes.twoColumn}>
<PackageDetail readMe={readMe} packageName={this.packageName}/>
<PackageDetail readMe={readMe} packageName={this.packageName} />
<PackageSidebar packageName={this.packageName} />
</div>
);