Added urls for searching

src/components/app.js

@@ -34,7 +34,7 @@ const App = ({ loading, navbarDark, login, logout, loggedIn, username }) => (
       />
       <Async path="/pulse" getComponent={() => import('../routes/pulse')} />
       <Async
-        path="/plugin-hub/:author?"
+        path="/plugin-hub/:author?/:parameters?"
         getComponent={() => import('../routes/plugin-hub')}
       />
       <Async
@@ -77,6 +77,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

@@ -6,6 +6,7 @@ import { numberWithCommas } from '../util'
 const ExternalPlugin = ({
   displayName,
   author,
+  s,
   description,
   internalName,
   imageUrl,
@@ -29,7 +30,9 @@ 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/${s ? author + '?s=' + s : author}`}>
+              {author}
+            </a>
           </h6>
           <p class="card-text">
             {count > 0 && (

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 { route } from 'preact-router'
 
 const description =
   'The Plugin Hub is a repository of plugins that are created and ' +
@@ -28,13 +29,25 @@ 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, author, setPluginFilter) => {
   setPluginFilter({
     name: event.target.value
   })
+  if (author) {
+    route(
+      `/plugin-hub/${author}${
+        event.target.value ? '?s=' + event.target.value : ''
+      }`
+    )
+  } else {
+    route(`/plugin-hub/${event.target.value ? '?s=' + event.target.value : ''}`)
+  }
+}
 
+// "s" is the search param from the query parameters to filter plugins
 const PluginHub = ({
   author,
+  s,
   externalPlugins,
   pluginFilter,
   pluginSorting,
@@ -45,6 +58,16 @@ const PluginHub = ({
     author ? plugin.author === author : true
   )
 
+  if (s) {
+    if (s !== pluginFilter.name) {
+      setPluginFilter({ name: s })
+    }
+  } else {
+    if (pluginFilter.name !== '') {
+      setPluginFilter({ name: '' })
+    }
+  }
+
   const pluginCount = externalPlugins.length
   const installedPluginCount = externalPlugins.filter(p => p.installed).length
   const totalCount = externalPlugins.reduce((a, b) => a + b.count, 0)
@@ -103,7 +126,9 @@ const PluginHub = ({
             <div class="col-sm-8">
               <SearchBar
                 value={pluginFilter.name}
-                onInput={e => handleChange(e, setPluginFilter)}
+                onInput={e => {
+                  handleChange(e, author, setPluginFilter)
+                }}
               />
             </div>
             <div class="col-sm-4">
@@ -117,7 +142,7 @@ const PluginHub = ({
           </div>
           <div class="row">
             {externalPlugins.map(plugin => (
-              <ExternalPlugin key={plugin.internalName} {...plugin} />
+              <ExternalPlugin key={plugin.internalName} s={s} {...plugin} />
             ))}
           </div>
         </div>
@@ -126,12 +151,14 @@ const PluginHub = ({
   )
 }
 
-const mapStateToProps = (state, props) => ({
-  ...props,
-  externalPlugins: getSortedExternalPlugins(state),
-  pluginFilter: getPluginFilter(state),
-  pluginSorting: getPluginSorting(state)
-})
+const mapStateToProps = (state, props) => {
+  return {
+    ...props,
+    externalPlugins: getSortedExternalPlugins(state),
+    pluginFilter: getPluginFilter(state),
+    pluginSorting: getPluginSorting(state)
+  }
+}
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(