From 2dab05c6f5d788dc646b389bd5267602411bb9fc Mon Sep 17 00:00:00 2001
From: Codetrauma <jtannershaw@gmail.com>
Date: Mon, 19 Aug 2024 18:55:19 -0300
Subject: [PATCH 1/2] feat: changing selection logic for redacted ranges in
 alpha.6

---
 src/pages/Notarize/index.tsx | 59 ++++++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/pages/Notarize/index.tsx b/src/pages/Notarize/index.tsx
index be11bc9f..6918dc6f 100644
--- a/src/pages/Notarize/index.tsx
+++ b/src/pages/Notarize/index.tsx
@@ -289,37 +289,54 @@ function HideResponseStep(props: {
   onNext: () => void;
   onCancel: () => void;
   setSecretResps: (secrets: string[]) => void;
-}): ReactElement {
+}): React.ReactElement {
   const params = useParams<{ requestId: string }>();
   const req = useRequest(params.requestId);
   const [responseText, setResponseText] = useState('');
-  const [selections, setSelections] = useState<Selection[]>([]);
+  const [redactedRanges, setRedactedRanges] = useState<Selection[]>([]);
   const taRef = useRef<HTMLTextAreaElement | null>(null);
 
   const onSelectionChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
     (e) => {
       const ta = e.currentTarget;
       if (ta.selectionEnd > ta.selectionStart) {
-        const newSelection: Selection = {
+        const newRange: Selection = {
           start: ta.selectionStart,
           end: ta.selectionEnd,
         };
 
-        setSelections((prevSelections) => {
-          const updatedSelections = [...prevSelections, newSelection];
-          // Extract and set secret responses based on updated selections
-          const secretResps = updatedSelections.map(({ start, end }) =>
-            responseText.substring(start, end)
-          ).filter((d) => !!d);
+        setRedactedRanges((prevRanges) => {
+          const updatedRanges = [...prevRanges, newRange].sort((a, b) => a.start - b.start);
+          const mergedRanges = mergeRanges(updatedRanges);
+
+          const secretResps = mergedRanges
+            .map(({ start, end }) => responseText.substring(start, end))
+            .filter((d) => !!d);
           props.setSecretResps(secretResps);
 
-          return updatedSelections;
+          return mergedRanges;
         });
       }
     },
     [responseText, props]
   );
 
+  const mergeRanges = (ranges: Selection[]): Selection[] => {
+    if (ranges.length === 0) return [];
+    const mergedRanges: Selection[] = [ranges[0]];
+
+    for (let i = 1; i < ranges.length; i++) {
+      const lastRange = mergedRanges[mergedRanges.length - 1];
+      if (ranges[i].start <= lastRange.end) {
+        lastRange.end = Math.max(lastRange.end, ranges[i].end);
+      } else {
+        mergedRanges.push(ranges[i]);
+      }
+    }
+
+    return mergedRanges;
+  };
+
   useEffect(() => {
     if (!req) return;
 
@@ -359,28 +376,23 @@ function HideResponseStep(props: {
 
   if (!req) return <></>;
 
-  let shieldedText = responseText;
-
-  if (selections.length > 0) {
-    let result = responseText.split('');
-    selections.forEach(({ start, end }) => {
-      for (let i = start; i < end; i++) {
-        result[i] = '*';
-      }
-    });
-    shieldedText = result.join('');
-  }
+  let shieldedText = responseText.split('');
+  redactedRanges.forEach(({ start, end }) => {
+    for (let i = start; i < end; i++) {
+      shieldedText[i] = '*';
+    }
+  });
 
   return (
     <div className="flex flex-col flex-nowrap flex-shrink flex-grow h-0">
       <div className="border bg-primary/[0.9] text-white border-slate-300 py-1 px-2 font-semibold">
-        Step 2 of 2: Highlight text to show only selected text from response
+        Step 2 of 2: Highlight text to redact selected portions from the response
       </div>
       <div className="flex flex-col flex-grow flex-shrink h-0 overflow-y-auto p-2">
         <textarea
           ref={taRef}
           className="flex-grow textarea bg-slate-100 font-mono"
-          value={shieldedText}
+          value={shieldedText.join('')}
           onSelect={onSelectionChange}
         />
       </div>
@@ -399,6 +411,7 @@ function HideResponseStep(props: {
   );
 }
 
+
 export function RedactBodyTextarea(props: {
   className?: string;
   onChange: (secretResponse: string[]) => void;

From 7a8129fbc99236f889c1d68c32f8ebd5a2c2451c Mon Sep 17 00:00:00 2001
From: Codetrauma <jtannershaw@gmail.com>
Date: Mon, 19 Aug 2024 19:00:56 -0300
Subject: [PATCH 2/2] chore: linting

---
 src/components/RequestDetail/index.tsx |  1 -
 src/pages/Notarize/index.tsx           | 57 ++++++++++++++------------
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/RequestDetail/index.tsx b/src/components/RequestDetail/index.tsx
index 919ed7e5..0363bc64 100644
--- a/src/components/RequestDetail/index.tsx
+++ b/src/components/RequestDetail/index.tsx
@@ -27,7 +27,6 @@ import {
 } from '../../utils/storage';
 import { MAX_RECV, MAX_SENT } from '../../utils/constants';
 
-
 type Props = {
   requestId: string;
 };
diff --git a/src/pages/Notarize/index.tsx b/src/pages/Notarize/index.tsx
index 6918dc6f..12890aca 100644
--- a/src/pages/Notarize/index.tsx
+++ b/src/pages/Notarize/index.tsx
@@ -296,30 +296,33 @@ function HideResponseStep(props: {
   const [redactedRanges, setRedactedRanges] = useState<Selection[]>([]);
   const taRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const onSelectionChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
-    (e) => {
-      const ta = e.currentTarget;
-      if (ta.selectionEnd > ta.selectionStart) {
-        const newRange: Selection = {
-          start: ta.selectionStart,
-          end: ta.selectionEnd,
-        };
-
-        setRedactedRanges((prevRanges) => {
-          const updatedRanges = [...prevRanges, newRange].sort((a, b) => a.start - b.start);
-          const mergedRanges = mergeRanges(updatedRanges);
-
-          const secretResps = mergedRanges
-            .map(({ start, end }) => responseText.substring(start, end))
-            .filter((d) => !!d);
-          props.setSecretResps(secretResps);
-
-          return mergedRanges;
-        });
-      }
-    },
-    [responseText, props]
-  );
+  const onSelectionChange: React.ChangeEventHandler<HTMLTextAreaElement> =
+    useCallback(
+      (e) => {
+        const ta = e.currentTarget;
+        if (ta.selectionEnd > ta.selectionStart) {
+          const newRange: Selection = {
+            start: ta.selectionStart,
+            end: ta.selectionEnd,
+          };
+
+          setRedactedRanges((prevRanges) => {
+            const updatedRanges = [...prevRanges, newRange].sort(
+              (a, b) => a.start - b.start,
+            );
+            const mergedRanges = mergeRanges(updatedRanges);
+
+            const secretResps = mergedRanges
+              .map(({ start, end }) => responseText.substring(start, end))
+              .filter((d) => !!d);
+            props.setSecretResps(secretResps);
+
+            return mergedRanges;
+          });
+        }
+      },
+      [responseText, props],
+    );
 
   const mergeRanges = (ranges: Selection[]): Selection[] => {
     if (ranges.length === 0) return [];
@@ -376,7 +379,7 @@ function HideResponseStep(props: {
 
   if (!req) return <></>;
 
-  let shieldedText = responseText.split('');
+  const shieldedText = responseText.split('');
   redactedRanges.forEach(({ start, end }) => {
     for (let i = start; i < end; i++) {
       shieldedText[i] = '*';
@@ -386,7 +389,8 @@ function HideResponseStep(props: {
   return (
     <div className="flex flex-col flex-nowrap flex-shrink flex-grow h-0">
       <div className="border bg-primary/[0.9] text-white border-slate-300 py-1 px-2 font-semibold">
-        Step 2 of 2: Highlight text to redact selected portions from the response
+        Step 2 of 2: Highlight text to redact selected portions from the
+        response
       </div>
       <div className="flex flex-col flex-grow flex-shrink h-0 overflow-y-auto p-2">
         <textarea
@@ -411,7 +415,6 @@ function HideResponseStep(props: {
   );
 }
 
-
 export function RedactBodyTextarea(props: {
   className?: string;
   onChange: (secretResponse: string[]) => void;