Update navigation on tools

This commit is contained in:
Reece Browne 2025-08-20 19:30:32 +01:00
parent 9c49f329e2
commit 7328cc6922
10 changed files with 35 additions and 18 deletions

View File

@ -20,6 +20,8 @@ export type ModeType =
| 'ocr'
| 'convert'
| 'addPassword'
| 'addWatermark'
| 'removePassword'
| 'changePermissions'
| 'sanitize';

View File

@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
import { useToolFileSelection } from "../contexts/FileContext";
import { useNavigationActions } from "../contexts/NavigationContext";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
@ -16,6 +17,7 @@ import { BaseToolProps } from "../types/tool";
const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
const { actions } = useNavigationActions();
const { selectedFiles } = useToolFileSelection();
const [collapsedPermissions, setCollapsedPermissions] = useState(true);
@ -28,6 +30,11 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
// Endpoint validation
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(addPasswordParams.getEndpointName());
// Set URL mode when component loads
useEffect(() => {
actions.setMode("addPassword");
}, [actions]);
useEffect(() => {
addPasswordOperation.resetResults();
onPreviewFile?.(null);

View File

@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
import { useToolFileSelection } from "../contexts/FileContext";
import { useNavigationActions } from "../contexts/NavigationContext";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
@ -24,6 +25,7 @@ import { BaseToolProps } from "../types/tool";
const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
const { actions } = useNavigationActions();
const { selectedFiles } = useToolFileSelection();
const [collapsedType, setCollapsedType] = useState(false);
@ -41,6 +43,11 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
// Endpoint validation
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("add-watermark");
// Set URL mode when component loads
useEffect(() => {
actions.setMode("addWatermark");
}, [actions]);
useEffect(() => {
watermarkOperation.resetResults();
onPreviewFile?.(null);

View File

@ -16,7 +16,6 @@ import { BaseToolProps } from "../types/tool";
const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
const { actions } = useNavigationActions();
const setCurrentMode = actions.setMode;
const { selectedFiles } = useToolFileSelection();
const changePermissionsParams = useChangePermissionsParameters();
@ -49,13 +48,13 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "changePermissions");
setCurrentMode("viewer");
actions.setMode("viewer");
};
const handleSettingsReset = () => {
changePermissionsOperation.resetResults();
onPreviewFile?.(null);
setCurrentMode("changePermissions");
actions.setMode("changePermissions");
};
const hasFiles = selectedFiles.length > 0;

View File

@ -16,7 +16,6 @@ import { useCompressTips } from "../components/tooltips/useCompressTips";
const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
const { actions } = useNavigationActions();
const setCurrentMode = actions.setMode;
const { selectedFiles } = useToolFileSelection();
const compressParams = useCompressParameters();
@ -47,13 +46,13 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "compress");
setCurrentMode("viewer");
actions.setMode("viewer");
};
const handleSettingsReset = () => {
compressOperation.resetResults();
onPreviewFile?.(null);
setCurrentMode("compress");
actions.setMode("compress");
};
const hasFiles = selectedFiles.length > 0;

View File

@ -17,7 +17,6 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
const { selectors } = useFileState();
const { actions } = useNavigationActions();
const setCurrentMode = actions.setMode;
const activeFiles = selectors.getFiles();
const { selectedFiles } = useToolFileSelection();
const scrollContainerRef = useRef<HTMLDivElement>(null);
@ -89,13 +88,13 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "convert");
setCurrentMode("viewer");
actions.setMode("viewer");
};
const handleSettingsReset = () => {
convertOperation.resetResults();
onPreviewFile?.(null);
setCurrentMode("convert");
actions.setMode("convert");
};
return createToolFlow({

View File

@ -17,7 +17,6 @@ import { useOCRTips } from "../components/tooltips/useOCRTips";
const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
const { actions } = useNavigationActions();
const setCurrentMode = actions.setMode;
const { selectedFiles } = useToolFileSelection();
const ocrParams = useOCRParameters();
@ -67,13 +66,13 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "ocr");
setCurrentMode("viewer");
actions.setMode("viewer");
};
const handleSettingsReset = () => {
ocrOperation.resetResults();
onPreviewFile?.(null);
setCurrentMode("ocr");
actions.setMode("ocr");
};
const settingsCollapsed = expandedStep !== "settings";

View File

@ -2,6 +2,7 @@ import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
import { useToolFileSelection } from "../contexts/FileContext";
import { useNavigationActions } from "../contexts/NavigationContext";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
@ -14,6 +15,7 @@ import { BaseToolProps } from "../types/tool";
const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
const { actions } = useNavigationActions();
const { selectedFiles } = useToolFileSelection();
const removePasswordParams = useRemovePasswordParameters();
@ -23,6 +25,11 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
// Endpoint validation
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(removePasswordParams.getEndpointName());
// Set URL mode when component loads
useEffect(() => {
actions.setMode("removePassword");
}, [actions]);
useEffect(() => {
removePasswordOperation.resetResults();
onPreviewFile?.(null);

View File

@ -16,7 +16,6 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { selectedFiles } = useToolFileSelection();
const { actions } = useNavigationActions();
const setCurrentMode = actions.setMode;
const sanitizeParams = useSanitizeParameters();
const sanitizeOperation = useSanitizeOperation();
@ -45,13 +44,13 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleSettingsReset = () => {
sanitizeOperation.resetResults();
onPreviewFile?.(null);
setCurrentMode("sanitize");
actions.setMode("sanitize");
};
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "sanitize");
setCurrentMode("viewer");
actions.setMode("viewer");
};
const hasFiles = selectedFiles.length > 0;

View File

@ -14,7 +14,6 @@ import { BaseToolProps } from "../types/tool";
const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
const { actions } = useNavigationActions();
const setCurrentMode = actions.setMode;
const { selectedFiles } = useToolFileSelection();
const splitParams = useSplitParameters();
@ -43,13 +42,13 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "split");
setCurrentMode("viewer");
actions.setMode("viewer");
};
const handleSettingsReset = () => {
splitOperation.resetResults();
onPreviewFile?.(null);
setCurrentMode("split");
actions.setMode("split");
};
const hasFiles = selectedFiles.length > 0;