From 2a69f4e51a60e71de12daf27e15cc15d4b185923 Mon Sep 17 00:00:00 2001
From: Meeeeow <me@async.sh>
Date: Sat, 2 Dec 2017 22:37:03 +0800
Subject: [PATCH] fix: :bug: detail page will not load new data after route
 change

---
 .../src/components/PackageSidebar/index.jsx   | 12 +++++-
 .../modules/detail/{index.js => index.jsx}    | 42 +++++++++++++------
 2 files changed, 41 insertions(+), 13 deletions(-)
 rename src/webui/src/modules/detail/{index.js => index.jsx} (63%)

diff --git a/src/webui/src/components/PackageSidebar/index.jsx b/src/webui/src/components/PackageSidebar/index.jsx
index aae925562..ab3e690d3 100644
--- a/src/webui/src/components/PackageSidebar/index.jsx
+++ b/src/webui/src/components/PackageSidebar/index.jsx
@@ -23,10 +23,20 @@ export default class PackageSidebar extends React.Component {
   }
 
   async componentDidMount() {
+    await this.loadPackageData(this.props.packageName)
+  }
+
+  async componentWillReceiveProps(newProps) {
+    if (newProps.packageName !== this.props.packageName) {
+      await this.loadPackageData(newProps.packageName)
+    }
+  }
+
+  async loadPackageData(packageName) {
     let packageMeta;
 
     try {
-      packageMeta = (await API.get(`sidebar/${this.props.packageName}`)).data;
+      packageMeta = (await API.get(`sidebar/${packageName}`)).data;
     } catch (err) {
       this.setState({
         failed: true
diff --git a/src/webui/src/modules/detail/index.js b/src/webui/src/modules/detail/index.jsx
similarity index 63%
rename from src/webui/src/modules/detail/index.js
rename to src/webui/src/modules/detail/index.jsx
index 89367c248..a9afdc29a 100644
--- a/src/webui/src/modules/detail/index.js
+++ b/src/webui/src/modules/detail/index.jsx
@@ -22,22 +22,40 @@ export default class Detail extends React.Component {
     notFound: false,
   };
 
-  get packageName() {
-    let params = this.props.match.params;
+  getPackageName(props = this.props) {
+    let params = props.match.params;
     return `${(params.scope && '@' + params.scope + '/') || ''}${params.package}`;
   }
+  get packageName() {
+    return this.getPackageName();
+  }
 
   async componentDidMount() {
-     try {
-       const resp = await API.get(`package/readme/${this.packageName}`);
-       this.setState({
-         readMe: resp.data
-       });
-     } catch (err) {
-       this.setState({
-         notFound: true
-       });
-     }
+    await this.loadPackageInfo(this.packageName);
+  }
+
+  async componentWillReceiveProps(newProps) {
+    let packageName = this.getPackageName(newProps);
+    if (packageName === this.packageName) return;
+
+    await this.loadPackageInfo(packageName);
+  }
+
+  async loadPackageInfo(packageName) {
+    this.setState({
+      readMe: ''
+    });
+
+    try {
+      const resp = await API.get(`package/readme/${packageName}`);
+      this.setState({
+        readMe: resp.data
+      });
+    } catch (err) {
+      this.setState({
+        notFound: true
+      });
+    }
   }
 
   render() {