From 4d5792c1503bebd78451772d74743442abfb4d3d Mon Sep 17 00:00:00 2001 From: DapperMickie Date: Fri, 12 Apr 2024 10:21:00 +0200 Subject: [PATCH 1/3] Added urls for searching I'm definitely not happy with the current state of it as the goal is to fix https://github.com/runelite/runelite.net/issues/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 | 7 ++++++- src/components/external-plugin.js | 10 +++++++++- src/components/navigation.js | 2 +- src/routes/plugin-hub.js | 24 +++++++++++++++++++++--- 4 files changed, 37 insertions(+), 6 deletions(-) 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 => ( - + ))}
From 99eaa93372294bfd6e432e1acac729ac9b0a4d87 Mon Sep 17 00:00:00 2001 From: DapperMickie Date: Sat, 13 Apr 2024 05:13:16 +0200 Subject: [PATCH 2/3] Use query strings --- src/components/app.js | 6 +----- src/components/external-plugin.js | 9 ++------- src/components/navigation.js | 2 +- src/routes/plugin-hub.js | 28 +++++++++++++++------------- 4 files changed, 19 insertions(+), 26 deletions(-) diff --git a/src/components/app.js b/src/components/app.js index 0c558949a..c62bd8636 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -34,11 +34,7 @@ const App = ({ loading, navbarDark, login, logout, loggedIn, username }) => ( /> import('../routes/pulse')} /> import('../routes/plugin-hub')} - /> - import('../routes/plugin-hub')} /> {displayName}
- + { const PluginHub = ({ author, - search, + s, externalPlugins, pluginFilter, pluginSorting, @@ -53,14 +53,12 @@ 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') } + pluginFilter.name = s + return ( { if (author) { - route(`/plugin-hub/author/${author}/${e.target.value}`) + route( + `/plugin-hub/${author}${ + e.target.value ? '?s=' + e.target.value : '' + }` + ) } else { - route(`/plugin-hub/search/${e.target.value}`) + route( + `/plugin-hub/${ + e.target.value ? '?s=' + e.target.value : '' + }` + ) } handleChange(e, setPluginFilter) }} @@ -131,11 +137,7 @@ const PluginHub = ({
{externalPlugins.map(plugin => ( - + ))}
From 0281165bc12e3883a6dcc2b131581321a45ce609 Mon Sep 17 00:00:00 2001 From: DapperMickie Date: Sun, 14 Apr 2024 12:16:42 +0200 Subject: [PATCH 3/3] Search param 's' to filter plugins is now working --- src/routes/plugin-hub.js | 53 +++++++++++++++++++++++----------------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/src/routes/plugin-hub.js b/src/routes/plugin-hub.js index 4355a565f..fde495fab 100644 --- a/src/routes/plugin-hub.js +++ b/src/routes/plugin-hub.js @@ -29,12 +29,22 @@ 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, @@ -48,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) @@ -57,8 +77,6 @@ const PluginHub = ({ sortChoices.push('installed') } - pluginFilter.name = s - return ( { - if (author) { - route( - `/plugin-hub/${author}${ - e.target.value ? '?s=' + e.target.value : '' - }` - ) - } else { - route( - `/plugin-hub/${ - e.target.value ? '?s=' + e.target.value : '' - }` - ) - } - handleChange(e, setPluginFilter) + handleChange(e, author, setPluginFilter) }} /> @@ -146,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(