diff --git a/src/components/app.js b/src/components/app.js index 16c47673b..0c558949a 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -34,7 +34,11 @@ const App = ({ loading, navbarDark, login, logout, loggedIn, username }) => ( /> import('../routes/pulse')} /> import('../routes/plugin-hub')} + /> + import('../routes/plugin-hub')} /> ( export default connect( state => ({ loggedIn: isLoggedIn(state), + search: state.filter, ...state.app, ...state.account }), diff --git a/src/components/external-plugin.js b/src/components/external-plugin.js index 73d947c69..ecd5e1be5 100644 --- a/src/components/external-plugin.js +++ b/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 = ({ {displayName}
- {author} + + {author} +

{count > 0 && ( diff --git a/src/components/navigation.js b/src/components/navigation.js index c32092d42..b4bbe81a9 100644 --- a/src/components/navigation.js +++ b/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 diff --git a/src/routes/plugin-hub.js b/src/routes/plugin-hub.js index 54b43a83c..95c27caad 100644 --- a/src/routes/plugin-hub.js +++ b/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 = ({

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) + }} />
@@ -117,7 +131,11 @@ const PluginHub = ({
{externalPlugins.map(plugin => ( - + ))}