diff --git a/src/pages/Notarize/index.tsx b/src/pages/Notarize/index.tsx index 4e5c282c..cd98f583 100644 --- a/src/pages/Notarize/index.tsx +++ b/src/pages/Notarize/index.tsx @@ -6,7 +6,7 @@ import React, { ReactEventHandler, useEffect, useRef, - useMemo + useMemo, } from 'react'; import { useNavigate, useParams } from 'react-router'; import { notarizeRequest, useRequest } from '../../reducers/requests'; @@ -290,54 +290,60 @@ export function HideResponseStep(props: { const params = useParams<{ requestId: string }>(); const req = useRequest(params.requestId); const [responseText, setResponseText] = useState(''); - const [redactedRanges, setRedactedRanges] = useState<{start: number, end: number}[]>([]); + const [redactedRanges, setRedactedRanges] = useState< + { start: number; end: number }[] + >([]); const [isRedactMode, setIsRedactMode] = useState(true); const taRef = useRef(null); - const onSelectionChange: React.MouseEventHandler = useCallback( - (e) => { - const ta = e.currentTarget; - - if (isRedactMode && ta.selectionEnd > ta.selectionStart) { - const newRange: {start: number, end: number} = { - start: ta.selectionStart, - end: ta.selectionEnd, - }; - - setRedactedRanges((prevRanges) => { - let updatedRanges = [...prevRanges, newRange].sort((a, b) => a.start - b.start); - updatedRanges = mergeRanges(updatedRanges); - - const secretResps = updatedRanges - .map(({ start, end }) => responseText.substring(start, end)) - .filter((d) => !!d); - props.setSecretResps(secretResps); - - return updatedRanges; - }); - } else if (!isRedactMode) { - const clickPosition = ta.selectionStart; - setRedactedRanges((prevRanges) => { - const updatedRanges = prevRanges.filter( - ({ start, end }) => clickPosition < start || clickPosition > end - ); - - const secretResps = updatedRanges - .map(({ start, end }) => responseText.substring(start, end)) - .filter((d) => !!d); - props.setSecretResps(secretResps); - - return updatedRanges; - }); - } - }, - [responseText, props, isRedactMode] - ); - + const onSelectionChange: React.MouseEventHandler = + useCallback( + (e) => { + const ta = e.currentTarget; + + if (isRedactMode && ta.selectionEnd > ta.selectionStart) { + const newRange: { start: number; end: number } = { + start: ta.selectionStart, + end: ta.selectionEnd, + }; + + setRedactedRanges((prevRanges) => { + let updatedRanges = [...prevRanges, newRange].sort( + (a, b) => a.start - b.start, + ); + updatedRanges = mergeRanges(updatedRanges); + + const secretResps = updatedRanges + .map(({ start, end }) => responseText.substring(start, end)) + .filter((d) => !!d); + props.setSecretResps(secretResps); + + return updatedRanges; + }); + } else if (!isRedactMode) { + const clickPosition = ta.selectionStart; + setRedactedRanges((prevRanges) => { + const updatedRanges = prevRanges.filter( + ({ start, end }) => clickPosition < start || clickPosition > end, + ); + + const secretResps = updatedRanges + .map(({ start, end }) => responseText.substring(start, end)) + .filter((d) => !!d); + props.setSecretResps(secretResps); + + return updatedRanges; + }); + } + }, + [responseText, props, isRedactMode], + ); - const mergeRanges = (ranges: {start: number, end: number}[]): {start: number, end: number}[] => { + const mergeRanges = ( + ranges: { start: number; end: number }[], + ): { start: number; end: number }[] => { if (ranges.length === 0) return []; - const mergedRanges: {start: number, end: number}[] = [ranges[0]]; + const mergedRanges: { start: number; end: number }[] = [ranges[0]]; for (let i = 1; i < ranges.length; i++) { const lastRange = mergedRanges[mergedRanges.length - 1]; @@ -364,7 +370,7 @@ export function HideResponseStep(props: { } return acc; }, - {} + {}, ), body: req.requestBody, }; @@ -390,7 +396,6 @@ export function HideResponseStep(props: { if (!req) return <>; - const shieldedText = responseText.split(''); redactedRanges.forEach(({ start, end }) => { for (let i = start; i < end; i++) { @@ -401,10 +406,13 @@ export function HideResponseStep(props: { return (
- Step 2 of 2: {isRedactMode ? 'Highlight text to redact selected portions' : 'Click redacted text to unredact'} + Step 2 of 2:{' '} + {isRedactMode + ? 'Highlight text to redact selected portions' + : 'Click redacted text to unredact'}
-