ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add option to update all updatable extensions

Browse Source
This commit is contained in:
schroda
2024-11-04 01:26:58 +01:00
parent 63caf74e36
commit e90d705610
7 changed files with 153 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/modules/extension/components/ExtensionCard.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useState } from 'react';
import { useEffect, useState } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
@@ -37,6 +37,7 @@ interface IProps {
extension: TExtension;
handleUpdate: () => void;
showSourceRepo: boolean;
forcedState?: ExtensionState;
}
export function ExtensionCard(props: IProps) {
@@ -46,10 +47,16 @@ export function ExtensionCard(props: IProps) {
extension: { name, lang, versionName, isInstalled, hasUpdate, isObsolete, pkgName, iconUrl, isNsfw, repo },
handleUpdate,
showSourceRepo,
forcedState,
} = props;
const [installedState, setInstalledState] = useState<InstalledStates>(
const [localInstalledState, setInstalledState] = useState<InstalledStates>(
getInstalledState(isInstalled, isObsolete, hasUpdate),
);
const installedState = forcedState ?? localInstalledState;
useEffect(() => {
setInstalledState(getInstalledState(isInstalled, isObsolete, hasUpdate));
}, [getInstalledState(isInstalled, isObsolete, hasUpdate)]);
const langPress = lang === 'all' ? t('extension.language.all') : lang.toUpperCase();
@@ -77,7 +84,7 @@ export function ExtensionCard(props: IProps) {
handleUpdate();
} catch (e) {
setInstalledState(getInstalledState(isInstalled, isObsolete, hasUpdate));
makeToast(t(EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP[action]), 'error');
makeToast(t(EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP[action], { count: 1 }), 'error');
}
};
@@ -175,7 +182,10 @@ export function ExtensionCard(props: IProps) {
</Box>
<Button
variant="outlined"
sx={{ color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit', flexShrink: 0 }}
sx={{
color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit',
flexShrink: 0,
}}
onClick={() => handleButtonClick()}
>
{t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}

47
src/modules/extension/screens/Extensions.tsx
View File

@@ -37,6 +37,8 @@ import {
isExtensionStateOrLanguage,
translateExtensionLanguage,
} from '@/modules/extension/Extensions.utils.ts';
import { ExtensionAction, ExtensionGroupState, ExtensionState } from '@/modules/extension/Extensions.types.ts';
import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/modules/extension/Extensions.constants.ts';
const LANGUAGE = 0;
const EXTENSIONS = 1;
@@ -64,6 +66,8 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
requestManager.useExtensionListFetch();
const allExtensions = data?.fetchExtensions?.extensions;
const [updatingExtensionIds, setUpdatingExtensionIds] = useState<string[]>([]);
const handleExtensionUpdate = useCallback(() => setRefetchExtensions({}), []);
useEffect(() => {
@@ -235,11 +239,45 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
overscan={window.innerHeight * 0.5}
groupCounts={groupCounts}
groupContent={(index) => {
const [groupName] = filteredGroupedExtensions[index];
const [groupName, groupExtensions] = filteredGroupedExtensions[index];
const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING;
return (
<StyledGroupHeader key={groupName} variant="h5" component="h2" isFirstItem={index === 0}>
{translateExtensionLanguage(groupName)}
<StyledGroupHeader
key={groupName}
isFirstItem={index === 0}
sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', pr: 1 }}
>
<Typography variant="h5" component="h2">
{translateExtensionLanguage(groupName)}
</Typography>
{isUpdateGroup && (
<Button
disabled={!!updatingExtensionIds.length}
variant="contained"
onClick={() => {
const extensionIds = groupExtensions.map((extension) => extension.pkgName);
setUpdatingExtensionIds(extensionIds);
requestManager
.updateExtensions(extensionIds, { update: true })
.response.then(() => handleExtensionUpdate())
.catch(() =>
makeToast(
t(
EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP[
ExtensionAction.UPDATE
],
{ count: groupedExtensions.length },
),
),
)
.finally(() => setUpdatingExtensionIds([]));
}}
>
{t('extension.action.label.update_all')}
</Button>
)}
</StyledGroupHeader>
);
}}
@@ -253,6 +291,9 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
extension={item}
handleUpdate={handleExtensionUpdate}
showSourceRepo={areMultipleReposInUse}
forcedState={
updatingExtensionIds.includes(item.pkgName) ? ExtensionState.UPDATING : undefined
}
/>
</StyledGroupItemWrapper>
);