Sanitize Updated

This commit is contained in:
Connor Yoh 2025-08-12 17:05:01 +01:00
parent 184a1dd9ed
commit bb94334406

View File

@ -1,15 +1,10 @@
import { useEffect } from "react";
import { Button, Stack, Text } from "@mantine/core";
import { Stack } from "@mantine/core";
import { useTranslation } from "react-i18next";
import DownloadIcon from "@mui/icons-material/Download";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
import { useToolFileSelection } from "../contexts/FileSelectionContext";
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
import OperationButton from "../components/tools/shared/OperationButton";
import ErrorNotification from "../components/tools/shared/ErrorNotification";
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
import ResultsPreview from "../components/tools/shared/ResultsPreview";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
import SanitizeSettings from "../components/tools/sanitize/SanitizeSettings";
import { useSanitizeParameters } from "../hooks/tools/sanitize/useSanitizeParameters";
@ -55,6 +50,7 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleSettingsReset = () => {
sanitizeOperation.resetResults();
onPreviewFile?.(null);
setCurrentMode('sanitize');
};
const handleThumbnailClick = (file: File) => {
@ -66,100 +62,42 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const hasFiles = selectedFiles.length > 0;
const hasResults = sanitizeOperation.files.length > 0;
const filesCollapsed = hasFiles;
const settingsCollapsed = hasResults;
const settingsCollapsed = !hasFiles || hasResults;
return (
<ToolStepContainer>
<Stack gap="sm" p="sm" style={{ height: '100vh', overflow: 'auto' }}>
{/* Files Step */}
<ToolStep
title={t('sanitize.steps.files', 'Files')}
isVisible={true}
isCollapsed={filesCollapsed}
isCompleted={filesCollapsed}
completedMessage={hasFiles ?
selectedFiles.length === 1
? t('fileSelected', 'Selected: {{filename}}', { filename: selectedFiles[0].name })
: t('filesSelected', 'Selected: {{count}} files', { count: selectedFiles.length })
: undefined}
>
<FileStatusIndicator
selectedFiles={selectedFiles}
placeholder={t('sanitize.files.placeholder', 'Select a PDF file in the main view to get started')}
/>
</ToolStep>
{/* Settings Step */}
<ToolStep
title={t('sanitize.steps.settings', 'Settings')}
isVisible={hasFiles}
isCollapsed={settingsCollapsed}
isCompleted={settingsCollapsed}
onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
completedMessage={settingsCollapsed ? t('sanitize.completed', 'Sanitization completed') : undefined}
>
<Stack gap="sm">
{createToolFlow({
files: {
selectedFiles,
isCollapsed: filesCollapsed,
placeholder: t('sanitize.files.placeholder', 'Select a PDF file in the main view to get started')
},
steps: [{
title: t('sanitize.steps.settings', 'Settings'),
isCollapsed: settingsCollapsed,
onCollapsedClick: settingsCollapsed ? handleSettingsReset : undefined,
content: (
<SanitizeSettings
parameters={sanitizeParams.parameters}
onParameterChange={sanitizeParams.updateParameter}
disabled={endpointLoading}
/>
<OperationButton
onClick={handleSanitize}
isLoading={sanitizeOperation.isLoading}
disabled={!sanitizeParams.validateParameters() || !hasFiles || !endpointEnabled}
loadingText={t("loading")}
submitText={t("sanitize.submit", "Sanitize PDF")}
/>
</Stack>
</ToolStep>
{/* Results Step */}
<ToolStep
title={t('sanitize.steps.results', 'Results')}
isVisible={hasResults}
>
<Stack gap="sm">
{sanitizeOperation.status && (
<Text size="sm" c="dimmed">{sanitizeOperation.status}</Text>
)}
<ErrorNotification
error={sanitizeOperation.errorMessage}
onClose={sanitizeOperation.clearError}
/>
{sanitizeOperation.downloadUrl && (
<Button
component="a"
href={sanitizeOperation.downloadUrl}
download={sanitizeOperation.downloadFilename}
leftSection={<DownloadIcon />}
color="green"
fullWidth
mb="md"
>
{sanitizeOperation.files.length === 1
? t("download", "Download")
: t("downloadZip", "Download ZIP")
)
}],
executeButton: {
text: t("sanitize.submit", "Sanitize PDF"),
loadingText: t("loading"),
onClick: handleSanitize,
disabled: !sanitizeParams.validateParameters() || !hasFiles || !endpointEnabled
},
results: {
isVisible: hasResults,
operation: sanitizeOperation,
title: t("sanitize.sanitizationResults", "Sanitization Results"),
onFileClick: handleThumbnailClick
}
</Button>
)}
<ResultsPreview
files={sanitizeOperation.files.map((file, index) => ({
file,
thumbnail: sanitizeOperation.thumbnails[index]
}))}
onFileClick={handleThumbnailClick}
isGeneratingThumbnails={sanitizeOperation.isGeneratingThumbnails}
title={t("sanitize.sanitizationResults", "Sanitization Results")}
/>
})}
</Stack>
</ToolStep>
</Stack>
</ToolStepContainer>
);
}