From 2e857cf8b59b1c34cce1e6e4dbde161f9ab14bb4 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 17 Apr 2018 01:28:01 +0200
Subject: [PATCH] Use shallow routing (#27)

* Use shallow routing

* Reset state if not going to a search url

* Only prefetch once
---
 components/Layout.js      | 37 +++++++++++++++++++++++++++----------
 components/PluginsList.js | 16 ++++++----------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/components/Layout.js b/components/Layout.js
index cdf78bba..67335e33 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Router from 'next/router'
+import { withRouter } from 'next/router'
 import Meta from './Meta'
 import Header from './Header'
 import SearchList from './SearchList'
@@ -8,34 +8,49 @@ import LinuxLogo from '../static/linux-logo.svg'
 import WindowsLogo from '../static/windows-logo.svg'
 import * as gtag from '../lib/gtag'
 import RouterEvents from '../lib/router-events'
+import { format } from 'url'
 
 RouterEvents.on('routeChangeComplete', url => {
   gtag.pageview(url)
 })
 
-export default class extends React.Component {
+class Layout extends React.Component {
   constructor() {
     super()
 
     this.handleSearch = this.handleSearch.bind(this)
   }
 
+  componentWillReceiveProps(nextProps) {
+    const { router } = nextProps
+    if (!/^\/search/.exec(router.asPath)) {
+      this.setState({
+        searchQuery: null,
+        originalURL: router.asPath
+      })
+    }
+  }
+
   componentDidMount() {
+    const { router } = this.props
     this.setState({
-      originalURL: Router.asPath
+      originalURL: router.asPath
     })
   }
 
   handleSearch(query) {
+    const { router } = this.props
     if (query) {
-      const url = `/search?q=${query}`
-      window.history.replaceState(
-        query,
-        `Hyper Store - Searching for ${query}`,
-        url
-      )
+      // We construct the original href for shallow routing
+      const href = format({ pathname: router.pathname, query: router.query })
+      // asPath will be different depending on user input
+      const asPath = `/search?q=${query}`
+      router.replace(href, asPath, { shallow: true })
     } else {
-      window.history.replaceState({}, 'Hyper Store', this.state.originalURL)
+      // When query is empty we render the original url
+      router.replace(this.state.originalURL, this.state.originalURL, {
+        shallow: true
+      })
     }
 
     this.setState({
@@ -65,3 +80,5 @@ export default class extends React.Component {
     )
   }
 }
+
+export default withRouter(Layout)
diff --git a/components/PluginsList.js b/components/PluginsList.js
index f0bdc776..02875461 100644
--- a/components/PluginsList.js
+++ b/components/PluginsList.js
@@ -29,6 +29,11 @@ export default class extends React.Component {
     return sortedPlugins
   }
 
+  componentDidMount() {
+    // Optimization
+    Router.prefetch('/plugin')
+  }
+
   render() {
     const plugins = this.orderPlugins(this.props.plugins, this.props.filteredBy)
 
@@ -37,16 +42,7 @@ export default class extends React.Component {
       return (
         <div className="plugins-list container">
           {plugins.map((plugin, i) => (
-            <div
-              key={plugin.name}
-              className="plugin"
-              onMouseEnter={() => {
-                Router.prefetch(
-                  `/plugin?id=${plugin.name}`,
-                  `/plugins/${plugin.name}`
-                )
-              }}
-            >
+            <div key={plugin.name} className="plugin">
               <Link
                 href={`/plugin?id=${plugin.name}`}
                 as={`/plugins/${plugin.name}`}