Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 01:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: PluginStoreDialog refactor: plugins (#1047)

Browse source 
* fix(PluginStoreDialog) can't search on page 2/3.. & reset to page 1 when install and unistall

* var fix

* removed plugins that aren't working

* remove prompt perfect beacuase it isn't working

* fix(PluginStoreItem) set page 1 and reset search when dialog is close
This commit is contained in:
Marco Beretta 2023-10-13 00:53:35 +02:00 • committed by GitHub
parent 5145121eb7
commit 909cbb8529
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

31
client/src/components/Plugins/Store/PluginStoreDialog.tsx
View file

@ -36,6 +36,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
const [showPluginAuthForm, setShowPluginAuthForm] = useState<boolean>(false);
const [error, setError] = useState<boolean>(false);
const [errorMessage, setErrorMessage] = useState<string>('');
const [searchChanged, setSearchChanged] = useState(false);
const handleInstallError = (error: TError) => {
setError(true);
@ -127,6 +128,12 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
const filteredPlugins = availablePlugins?.filter((plugin) =>
plugin.name.toLowerCase().includes(searchValue.toLowerCase()),
);
const handleSearch = (e) => {
setSearchValue(e.target.value);
setSearchChanged(true);
};
useEffect(() => {
if (user && user.plugins) {
setUserPlugins(user.plugins);
@ -134,16 +141,27 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
if (filteredPlugins) {
setMaxPage(Math.ceil(filteredPlugins.length / itemsPerPage));
setCurrentPage(1); // Reset the current page to 1 whenever the filtered list changes
if (searchChanged) {
setCurrentPage(1);
setSearchChanged(false);
}
}
}, [availablePlugins, itemsPerPage, user, searchValue]); // Add searchValue to the dependency list
}, [availablePlugins, itemsPerPage, user, searchValue, filteredPlugins, searchChanged]);
const handleChangePage = (page: number) => {
setCurrentPage(page);
};
return (
<Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-[102]">
<Dialog
open={isOpen}
onClose={() => {
setIsOpen(false);
setCurrentPage(1);
setSearchValue('');
}}
className="relative z-[102]"
>
{/* The backdrop, rendered as a fixed sibling to the panel container */}
<div className="fixed inset-0 bg-gray-500/90 transition-opacity dark:bg-gray-800/90" />
{/* Full-screen container to center the panel */}
@ -163,7 +181,10 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
<div>
<div className="sm:mt-0">
<button
onClick={() => setIsOpen(false)}
onClick={() => {
setIsOpen(false);
setCurrentPage(1);
}}
className="inline-block text-gray-500 hover:text-gray-100"
tabIndex={0}
>
@ -194,7 +215,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
<input
type="text"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
onChange={handleSearch}
placeholder={localize('com_nav_plugin_search')}
style={{
width: '100%',