From 03262b4e621e9f923aa4409351ecd9dd61f0417f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Sharma?= <sharma.loic@gmail.com>
Date: Sat, 29 Dec 2018 16:57:12 -0800
Subject: [PATCH] Fix navigation after searching (#186)

* Fix navigation after the user has inputted search content
* Fixed some issues where `setState` was called after the component was unmounted
* Cleaned up routing

This was reported and originally fixed by @vitaliy-orlov in https://github.com/loic-sharma/BaGet/pull/183.
---
 src/BaGet.UI/src/App.tsx                      | 38 ++++++++++---------
 .../src/DisplayPackage/DisplayPackage.tsx     | 17 +++++++--
 src/BaGet.UI/src/index.tsx                    | 12 +++++-
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/BaGet.UI/src/App.tsx b/src/BaGet.UI/src/App.tsx
index 97677da5..a65849cf 100644
--- a/src/BaGet.UI/src/App.tsx
+++ b/src/BaGet.UI/src/App.tsx
@@ -1,35 +1,40 @@
 import * as React from 'react';
-import { BrowserRouter as Router, NavLink, Route, RouteComponentProps } from 'react-router-dom';
-import './App.css';
-import DisplayPackage from './DisplayPackage/DisplayPackage';
+
+import { Action, Location } from 'history';
+import { withRouter } from 'react-router';
+import { NavLink, Route, RouteComponentProps } from 'react-router-dom';
+
 import SearchResults from './SearchResults';
-import Upload from './Upload';
+
+import './App.css';
 
 interface IAppState {
   input: string;
-  selected?: string;
 }
 
-class App extends React.Component<{}, IAppState> {
+class App extends React.Component<RouteComponentProps, IAppState> {
 
-  constructor(props: {}) {
+  constructor(props: RouteComponentProps) {
     super(props);
 
     this.state = { input: "" };
+
+    this.props.history.listen(this.onRouteChange);
   }
 
   public render() {
     return (
-      <Router>
-        <div>
-          {this._renderNavigationBar()}
+      <div>
+        {this._renderNavigationBar()}
 
-          {this._renderContent()}
-        </div>
-      </Router>
+        {this._renderContent()}
+      </div>
     );
   }
 
+  private onRouteChange = (location: Location, action: Action) =>
+    this.setState({ input: "" });
+
   private _renderNavigationBar() {
     return (
       <nav className="navbar navbar-inverse" role="navigation">
@@ -65,9 +70,8 @@ class App extends React.Component<{}, IAppState> {
       return (
         <section role="main" className="container main-container">
           <Route exact={true} path="/" render={this.renderSearch} />
-          <Route path="/packages/:id" component={DisplayPackage} />
 
-          <Route path="/upload" component={Upload} />
+          {this.props.children}
         </section>
       );
     }
@@ -86,7 +90,7 @@ class App extends React.Component<{}, IAppState> {
   );
 
   private handleChange = (input: React.ChangeEvent<HTMLInputElement>) =>
-    this.setState({ input: input.target.value, selected: undefined });
+    this.setState({ input: input.target.value });
 }
 
-export default App;
+export default withRouter(App);
diff --git a/src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx b/src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx
index 5c7b16a5..4d050493 100644
--- a/src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx
+++ b/src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx
@@ -53,20 +53,30 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
   private parser: Parser;
   private htmlRenderer: HtmlRenderer;
 
+  private registrationController: AbortController;
+  private readmeController: AbortController;
+
   constructor(props: IDisplayPackageProps) {
     super(props);
 
     this.parser = new Parser();
     this.htmlRenderer = new HtmlRenderer();
+    this.registrationController = new AbortController();
+    this.readmeController = new AbortController();
 
     this.id = props.match.params.id;
     this.state = {package: undefined};
   }
 
+  public componentWillUnmount() {
+    this.registrationController.abort();
+    this.readmeController.abort();
+  }
+
   public componentDidMount() {
     const url = `/v3/registration/${this.id}/index.json`;
 
-    fetch(url).then(response => {
+    fetch(url, {signal: this.registrationController.signal}).then(response => {
       return response.json();
     }).then(json => {
       const results = json as Registration.IRegistrationIndex;
@@ -118,7 +128,7 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
         if (latestItem.catalogEntry.hasReadme) {
           const readmeUrl = `/v3/package/${this.id}/${latestVersion}/readme`;
 
-          fetch(readmeUrl).then(response => {
+          fetch(readmeUrl, {signal: this.readmeController.signal}).then(response => {
             return response.text();
           }).then(result => {
             this.setState(prevState => {
@@ -132,7 +142,8 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
           });
         }
       }
-    });
+    // tslint:disable-next-line:no-console
+    }).catch((e) => console.log("Failed to load package.", e));
   }
 
   public render() {
diff --git a/src/BaGet.UI/src/index.tsx b/src/BaGet.UI/src/index.tsx
index c56109e1..b0a0b1e2 100644
--- a/src/BaGet.UI/src/index.tsx
+++ b/src/BaGet.UI/src/index.tsx
@@ -1,10 +1,14 @@
 import { initializeIcons } from '@uifabric/icons';
 import 'bootstrap/dist/css/bootstrap.css';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';
 
+import DisplayPackage from './DisplayPackage/DisplayPackage';
+import Upload from './Upload';
+
 import './index.css';
 
 // import registerServiceWorker from './registerServiceWorker';
@@ -12,7 +16,13 @@ import './index.css';
 initializeIcons();
 
 ReactDOM.render(
-  <App />,
+  <Router>
+    <App>
+      <Route path="/packages/:id" component={DisplayPackage} />
+
+      <Route path="/upload" component={Upload} />
+    </App>
+  </Router>,
   document.getElementById('root') as HTMLElement
 );