mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00

Better tool flow for reusability Pinning Styling of tool flow consumption of files after tooling --------- Co-authored-by: Connor Yoh <connor@stirlingpdf.com> Co-authored-by: James Brunton <jbrunton96@gmail.com>
99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
|
|
import { useFileContext } from "../contexts/FileContext";
|
|
import { useToolFileSelection } from "../contexts/FileSelectionContext";
|
|
|
|
import { createToolFlow } from "../components/tools/shared/createToolFlow";
|
|
|
|
import CompressSettings from "../components/tools/compress/CompressSettings";
|
|
|
|
import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
|
|
import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
|
|
import { BaseToolProps } from "../types/tool";
|
|
import { useCompressTips } from "../components/tooltips/useCompressTips";
|
|
|
|
const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
|
const { t } = useTranslation();
|
|
const { setCurrentMode } = useFileContext();
|
|
const { selectedFiles } = useToolFileSelection();
|
|
|
|
const compressParams = useCompressParameters();
|
|
const compressOperation = useCompressOperation();
|
|
const compressTips = useCompressTips();
|
|
|
|
// Endpoint validation
|
|
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("compress-pdf");
|
|
|
|
useEffect(() => {
|
|
compressOperation.resetResults();
|
|
onPreviewFile?.(null);
|
|
}, [compressParams.parameters]);
|
|
|
|
const handleCompress = async () => {
|
|
try {
|
|
await compressOperation.executeOperation(compressParams.parameters, selectedFiles);
|
|
if (compressOperation.files && onComplete) {
|
|
onComplete(compressOperation.files);
|
|
}
|
|
} catch (error) {
|
|
if (onError) {
|
|
onError(error instanceof Error ? error.message : "Compress operation failed");
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleThumbnailClick = (file: File) => {
|
|
onPreviewFile?.(file);
|
|
sessionStorage.setItem("previousMode", "compress");
|
|
setCurrentMode("viewer");
|
|
};
|
|
|
|
const handleSettingsReset = () => {
|
|
compressOperation.resetResults();
|
|
onPreviewFile?.(null);
|
|
setCurrentMode("compress");
|
|
};
|
|
|
|
const hasFiles = selectedFiles.length > 0;
|
|
const hasResults = compressOperation.files.length > 0 || compressOperation.downloadUrl !== null;
|
|
const settingsCollapsed = !hasFiles || hasResults;
|
|
|
|
return createToolFlow({
|
|
files: {
|
|
selectedFiles,
|
|
isCollapsed: hasFiles && !hasResults,
|
|
},
|
|
steps: [
|
|
{
|
|
title: "Settings",
|
|
isCollapsed: settingsCollapsed,
|
|
onCollapsedClick: settingsCollapsed ? handleSettingsReset : undefined,
|
|
tooltip: compressTips,
|
|
content: (
|
|
<CompressSettings
|
|
parameters={compressParams.parameters}
|
|
onParameterChange={compressParams.updateParameter}
|
|
disabled={endpointLoading}
|
|
/>
|
|
),
|
|
},
|
|
],
|
|
executeButton: {
|
|
text: t("compress.submit", "Compress"),
|
|
isVisible: !hasResults,
|
|
loadingText: t("loading"),
|
|
onClick: handleCompress,
|
|
disabled: !compressParams.validateParameters() || !hasFiles || !endpointEnabled,
|
|
},
|
|
review: {
|
|
isVisible: hasResults,
|
|
operation: compressOperation,
|
|
title: t("compress.title", "Compression Results"),
|
|
onFileClick: handleThumbnailClick,
|
|
},
|
|
});
|
|
};
|
|
|
|
export default Compress;
|