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

Extract extensions group header

Browse Source
This commit is contained in:
schroda
2025-04-21 01:58:33 +02:00
parent 91beeb2fb5
commit e0567fac5d
1 changed files with 65 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,6 +52,63 @@ import { ExtensionOptions } from '@/modules/extension/components/ExtensionOption
const LANGUAGE = 0; const LANGUAGE = 0;
const EXTENSIONS = 1; const EXTENSIONS = 1;
const GroupHeader = ({
groupName,
isFirstItem,
groupExtensionIds,
isUpdateGroup,
updatingExtensionIds,
setUpdatingExtensionIds,
handleExtensionUpdate,
}: {
groupName: string;
isFirstItem: boolean;
groupExtensionIds: TExtension['pkgName'][];
isUpdateGroup: boolean;
updatingExtensionIds: TExtension['pkgName'][];
setUpdatingExtensionIds: (ids: TExtension['pkgName'][]) => void;
handleExtensionUpdate: () => void;
}) => {
const { t } = useTranslation();
return (
<StyledGroupHeader
key={groupName}
isFirstItem={isFirstItem}
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={() => {
setUpdatingExtensionIds(groupExtensionIds);
requestManager
.updateExtensions(groupExtensionIds, { update: true })
.response.then(() => handleExtensionUpdate())
.catch((e) =>
makeToast(
t(EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP[ExtensionAction.UPDATE], {
count: groupExtensionIds.length,
}),
'error',
getErrorMessage(e),
),
)
.finally(() => setUpdatingExtensionIds([]));
}}
>
{t('extension.action.label.update_all')}
</Button>
)}
</StyledGroupHeader>
);
};
export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) { export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { setAction } = useNavBarContext(); const { setAction } = useNavBarContext();
@@ -253,44 +310,15 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING; const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING;
return ( return (
<StyledGroupHeader <GroupHeader
key={groupName} groupName={groupName}
isFirstItem={index === 0} isFirstItem={index === 0}
sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', pr: 1 }} groupExtensionIds={groupExtensions.map((extension) => extension.pkgName)}
> isUpdateGroup={isUpdateGroup}
<Typography variant="h5" component="h2"> updatingExtensionIds={updatingExtensionIds}
{translateExtensionLanguage(groupName)} setUpdatingExtensionIds={setUpdatingExtensionIds}
</Typography> handleExtensionUpdate={handleExtensionUpdate}
{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((e) =>
makeToast(
t(
EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP[
ExtensionAction.UPDATE
],
{ count: extensionIds.length },
),
'error',
getErrorMessage(e),
),
)
.finally(() => setUpdatingExtensionIds([]));
}}
>
{t('extension.action.label.update_all')}
</Button>
)}
</StyledGroupHeader>
); );
}} }}
computeItemKey={computeItemKey} computeItemKey={computeItemKey}