From 431e7608d229641248f28b1551e4ede6fd764b49 Mon Sep 17 00:00:00 2001
From: Ayush Sharma <ayush.aceit@gmail.com>
Date: Tue, 28 Aug 2018 08:04:15 +0200
Subject: [PATCH] fix: ui change details issue in props update (#959) (#960)

---
 src/webui/components/PackageSidebar/index.jsx |  6 ------
 src/webui/modules/detail/index.jsx            | 19 ++++++++++++-------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/webui/components/PackageSidebar/index.jsx b/src/webui/components/PackageSidebar/index.jsx
index 163d0b69f..833cd3b4c 100644
--- a/src/webui/components/PackageSidebar/index.jsx
+++ b/src/webui/components/PackageSidebar/index.jsx
@@ -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;
 
diff --git a/src/webui/modules/detail/index.jsx b/src/webui/modules/detail/index.jsx
index 77c20ae12..47797ed44 100644
--- a/src/webui/modules/detail/index.jsx
+++ b/src/webui/modules/detail/index.jsx
@@ -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>
     );