Added urls for searching

I'm definitely not happy with the current state of it as the goal is to fix runelite#461 and current state of things don't use query parameters.

I've tried getting query parameters to work but for some reason I can't seem to figure out how to match the url for those.

So I went ahead and started trying to 'solve the issue' this way.

I would like to get some feedback and/or help on how to tackle this problem.

src/components/app.js

@@ -34,7 +34,11 @@ const App = ({ loading, navbarDark, login, logout, loggedIn, username }) => (
       />
       <Async path="/pulse" getComponent={() => import('../routes/pulse')} />
       <Async
-        path="/plugin-hub/:author?"
+        path="/plugin-hub/author/:author/:search?"
+        getComponent={() => import('../routes/plugin-hub')}
+      />
+      <Async
+        path="/plugin-hub/search/:search?"
         getComponent={() => import('../routes/plugin-hub')}
       />
       <Async
@@ -77,6 +81,7 @@ const App = ({ loading, navbarDark, login, logout, loggedIn, username }) => (
 export default connect(
   state => ({
     loggedIn: isLoggedIn(state),
+    search: state.filter,
     ...state.app,
     ...state.account
   }),

src/components/external-plugin.js

@@ -1,11 +1,13 @@
 import { h, Fragment } from 'preact'
 import './feature.scss'
 import './tooltip.css'
+import { getPluginFilter } from '../modules/plugin-hub'
 import { numberWithCommas } from '../util'
 
 const ExternalPlugin = ({
   displayName,
   author,
+  search,
   description,
   internalName,
   imageUrl,
@@ -29,7 +31,13 @@ const ExternalPlugin = ({
             <a href={`/plugin-hub/show/${internalName}`}>{displayName}</a>
           </h5>
           <h6 class="card-subtitle mb-2 text-muted">
-            <a href={`/plugin-hub/${author}`}>{author}</a>
+            <a
+              href={`/plugin-hub/author/${
+                search ? author + '/' + search : author
+              }`}
+            >
+              {author}
+            </a>
           </h6>
           <p class="card-text">
             {count > 0 && (

src/components/navigation.js

@@ -88,7 +88,7 @@ const Navigation = ({ dark, login, loggedIn, username }) => (
             onClick={toggleMenu}
             class="nav-link"
             activeClassName="active"
-            href="/plugin-hub"
+            href="/plugin-hub/search"
           >
             Plugin Hub
           </Link>

src/routes/plugin-hub.js

@@ -20,6 +20,7 @@ import SearchBar from '../components/search-bar'
 import { fetchConfig } from '../modules/config'
 import Choice from '../components/choice'
 import { numberWithCommas } from '../util'
+import { Router, route } from 'preact-router'
 
 const description =
   'The Plugin Hub is a repository of plugins that are created and ' +
@@ -28,13 +29,15 @@ const description =
   "Developers to ensure they comply with Jagex's 3rd party client rules " +
   'and are not malicious in some other way.'
 
-const handleChange = (event, setPluginFilter) =>
+const handleChange = (event, setPluginFilter) => {
   setPluginFilter({
     name: event.target.value
   })
+}
 
 const PluginHub = ({
   author,
+  search,
   externalPlugins,
   pluginFilter,
   pluginSorting,
@@ -50,6 +53,10 @@ const PluginHub = ({
   const totalCount = externalPlugins.reduce((a, b) => a + b.count, 0)
   const sortChoices = ['active installs', 'name', 'time updated', 'time added']
 
+  if (search) {
+    pluginFilter.name = search
+  }
+
   if (installedPluginCount > 0) {
     sortChoices.push('installed')
   }
@@ -103,7 +110,14 @@ const PluginHub = ({
             <div class="col-sm-8">
               <SearchBar
                 value={pluginFilter.name}
-                onInput={e => handleChange(e, setPluginFilter)}
+                onInput={e => {
+                  if (author) {
+                    route(`/plugin-hub/author/${author}/${e.target.value}`)
+                  } else {
+                    route(`/plugin-hub/search/${e.target.value}`)
+                  }
+                  handleChange(e, setPluginFilter)
+                }}
               />
             </div>
             <div class="col-sm-4">
@@ -117,7 +131,11 @@ const PluginHub = ({
           </div>
           <div class="row">
             {externalPlugins.map(plugin => (
-              <ExternalPlugin key={plugin.internalName} {...plugin} />
+              <ExternalPlugin
+                key={plugin.internalName}
+                search={search}
+                {...plugin}
+              />
             ))}
           </div>
         </div>