Move away from using toast in the plugin search (#6441)

This commit is contained in:
Helder Sepulveda 2024-06-10 13:00:58 -04:00 committed by GitHub
parent 8f3e6a4d8c
commit a637921160
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 34 deletions

View file

@ -93,25 +93,20 @@ export const HomePage = () => {
if (!pluginsSocket) {
return
}
pluginsSocket?.emit('search', searchParams)
pluginsSocket!.on('results:search', (data: {
results: PluginDef[]
}) => {
if (Array.isArray(data.results) && data.results.length > 0) {
setPlugins(data.results)
} else {
useStore.getState().setToastState({
open: true,
title: "Error retrieving plugins",
success: false
})
}
setPlugins(data.results)
})
pluginsSocket!.on('results:searcherror', (data: {error: string}) => {
console.log(data.error)
useStore.getState().setToastState({
open: true,
title: "Error retrieving plugins",
success: false
})
})
}, [searchParams, pluginsSocket]);
const uninstallPlugin = (pluginName: string)=>{
@ -125,7 +120,6 @@ export const HomePage = () => {
setPlugins(plugins.filter(plugin=>plugin.name !== pluginName))
}
useDebounce(()=>{
setSearchParams({
...searchParams,
@ -161,12 +155,12 @@ export const HomePage = () => {
</td>
</tr>
})}
</tbody>
</table>
</tbody>
</table>
<h2><Trans i18nKey="admin_plugins.available"/></h2>
<SearchField onChange={v=>{setSearchTerm(v.target.value)}} placeholder={t('admin_plugins.available_search.placeholder')} value={searchTerm}/>
<h2><Trans i18nKey="admin_plugins.available"/></h2>
<SearchField onChange={v=>{setSearchTerm(v.target.value)}} placeholder={t('admin_plugins.available_search.placeholder')} value={searchTerm}/>
<table id="available-plugins">
<thead>
@ -179,17 +173,21 @@ export const HomePage = () => {
</tr>
</thead>
<tbody style={{overflow: 'auto'}}>
{plugins.map((plugin) => {
return <tr key={plugin.name}>
<td><a rel="noopener noreferrer" href={`https://npmjs.com/${plugin.name}`} target="_blank">{plugin.name}</a></td>
<td>{plugin.description}</td>
<td>{plugin.version}</td>
<td>{plugin.time}</td>
<td>
<IconButton icon={<Download/>} onClick={() => installPlugin(plugin.name)} title={<Trans i18nKey="admin_plugins.available_install.value"/>}/>
</td>
</tr>
})}
{(plugins.length > 0) ?
plugins.map((plugin) => {
return <tr key={plugin.name}>
<td><a rel="noopener noreferrer" href={`https://npmjs.com/${plugin.name}`} target="_blank">{plugin.name}</a></td>
<td>{plugin.description}</td>
<td>{plugin.version}</td>
<td>{plugin.time}</td>
<td>
<IconButton icon={<Download/>} onClick={() => installPlugin(plugin.name)} title={<Trans i18nKey="admin_plugins.available_install.value"/>}/>
</td>
</tr>
})
:
<tr><td colSpan={5}>{searchTerm == '' ? <Trans i18nKey="pad.loading"/>: <Trans i18nKey="admin_plugins.available_not-found"/>}</td></tr>
}
</tbody>
</table>
</div>