mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Apply suggestions for reducing renders

Browse source 
Co-authored-by: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com>
This commit is contained in:
Bill Thornton 2024-07-15 15:05:46 -04:00
parent 864b1a237a
commit 112f8627b5
1 changed files with 48 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/apps/dashboard/routes/plugins/plugin.tsx
View file

@ -13,7 +13,7 @@ import Typography from '@mui/material/Typography/Typography';
import Delete from '@mui/icons-material/Delete';
import Download from '@mui/icons-material/Download';
import Settings from '@mui/icons-material/Settings';
import React, { type FC, useEffect, useState, useCallback, useMemo } from 'react';
import React, { type FC, useState, useCallback, useMemo } from 'react';
import { useSearchParams, Link as RouterLink, useParams } from 'react-router-dom';
import { findBestConfigurationPage } from 'apps/dashboard/features/plugins/api/configurationPage';
@ -53,13 +53,12 @@ const PluginPage: FC = () => {
const installPlugin = useInstallPackage();
const uninstallPlugin = useUninstallPlugin();
const [ isLoading, setIsLoading ] = useState(true);
const [ isEnabledOverride, setIsEnabledOverride ] = useState<boolean>();
const [ isInstallConfirmOpen, setIsInstallConfirmOpen ] = useState(false);
const [ isUninstallConfirmOpen, setIsUninstallConfirmOpen ] = useState(false);
const [ pendingInstallVersion, setPendingInstallVersion ] = useState<VersionInfo>();
const [ pluginDetails, setPluginDetails ] = useState<PluginDetails>();
const [ pluginName, setPluginName ] = useState<string>();
const pluginName = searchParams.get('name') ?? undefined;
const {
data: configurationPages,
@ -82,6 +81,51 @@ const PluginPage: FC = () => {
isError: isPluginsError
} = usePlugins();
const isLoading =
isConfigurationPagesLoading || isPackageInfoLoading || isPluginsLoading;
const pluginDetails = useMemo<PluginDetails | undefined>(() => {
if (pluginId && !isPluginsLoading) {
const pluginInfo = findBestPluginInfo(pluginId, plugins);
let version;
if (pluginInfo) {
// Find the installed version
const repoVersion = packageInfo?.versions?.find(v => v.version === pluginInfo.Version);
version = repoVersion || {
version: pluginInfo.Version,
VersionNumber: pluginInfo.Version
};
} else {
// Use the latest version
version = packageInfo?.versions?.[0];
}
let imageUrl;
if (pluginInfo?.HasImage) {
imageUrl = api?.axiosInstance.getUri({
baseURL: api.basePath,
url: `/Plugins/${pluginInfo.Id}/${pluginInfo.Version}/Image`
});
}
return {
canUninstall: !!pluginInfo?.CanUninstall,
description: pluginInfo?.Description || packageInfo?.description || packageInfo?.overview,
id: pluginId,
imageUrl: imageUrl || packageInfo?.imageUrl || undefined,
isEnabled: (isEnabledOverride && pluginInfo?.Status === PluginStatus.Restart)
?? pluginInfo?.Status !== PluginStatus.Disabled,
name: pluginName || pluginInfo?.Name || packageInfo?.name,
owner: packageInfo?.owner,
status: pluginInfo?.Status,
configurationPage: findBestConfigurationPage(configurationPages || [], pluginId),
version,
versions: packageInfo?.versions || []
};
}
}, [api?.axiosInstance, api?.basePath, configurationPages, isEnabledOverride, isPluginsLoading, packageInfo?.description, packageInfo?.imageUrl, packageInfo?.name, packageInfo?.overview, packageInfo?.owner, packageInfo?.versions, pluginId, pluginName, plugins]);
const alertMessages = useMemo(() => {
const alerts: AlertMessage[] = [];
@ -245,56 +289,6 @@ const PluginPage: FC = () => {
setIsUninstallConfirmOpen(false);
}, []);
useEffect(() => {
setIsLoading(isConfigurationPagesLoading || isPackageInfoLoading || isPluginsLoading);
}, [ isConfigurationPagesLoading, isPackageInfoLoading, isPluginsLoading ]);
useEffect(() => {
setPluginName(searchParams.get('name') ?? undefined);
}, [ searchParams ]);
useEffect(() => {
if (pluginId && !isPluginsLoading) {
const pluginInfo = findBestPluginInfo(pluginId, plugins);
let version;
if (pluginInfo) {
// Find the installed version
const repoVersion = packageInfo?.versions?.find(v => v.version === pluginInfo.Version);
version = repoVersion || {
version: pluginInfo.Version,
VersionNumber: pluginInfo.Version
};
} else {
// Use the latest version
version = packageInfo?.versions?.[0];
}
let imageUrl;
if (pluginInfo?.HasImage) {
imageUrl = api?.axiosInstance.getUri({
baseURL: api.basePath,
url: `/Plugins/${pluginInfo.Id}/${pluginInfo.Version}/Image`
});
}
setPluginDetails({
canUninstall: !!pluginInfo?.CanUninstall,
description: pluginInfo?.Description || packageInfo?.description || packageInfo?.overview,
id: pluginId,
imageUrl: imageUrl || packageInfo?.imageUrl || undefined,
isEnabled: (isEnabledOverride && pluginInfo?.Status === PluginStatus.Restart)
?? pluginInfo?.Status !== PluginStatus.Disabled,
name: pluginName || pluginInfo?.Name || packageInfo?.name,
owner: packageInfo?.owner,
status: pluginInfo?.Status,
configurationPage: findBestConfigurationPage(configurationPages || [], pluginId),
version,
versions: packageInfo?.versions || []
});
}
}, [ api, configurationPages, isEnabledOverride, isPluginsLoading, pluginId, packageInfo, pluginName, plugins ]);
return (
<Page
id='addPluginPage'