[MOC-198] find and replace (#153)

* store token and email in local storage then pass to extension on nest server * use reactor to apply edits sent from nest extension * cleanup * delete files --------- Co-authored-by: Kayla Fitzsimmons <[email protected]>
Mocksi · Aug 22, 2024 · 68b4db3 · 68b4db3
1 parent aac7b2b
commit 68b4db3
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 22 deletions.
diff --git a/apps/mocksi-lite-next/src/pages/background/index.ts b/apps/mocksi-lite-next/src/pages/background/index.ts
@@ -34,7 +34,11 @@ chrome.action.onClicked.addListener((tab) => {
 chrome.runtime.onMessage.addListener(
   (request, _sender, sendResponse): boolean => {
     console.log("Received message:", request);
-    sendResponse({ message: request.message, status: "ok" });
+    sendResponse({
+      data: request.data,
+      message: request.message,
+      status: "ok",
+    });
     return true;
   },
 );
@@ -63,7 +67,10 @@ chrome.runtime.onMessageExternal.addListener(
     } else {
       chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
         if (tabs[0].id) {
-          chrome.tabs.sendMessage(tabs[0].id, { message: request.message });
+          chrome.tabs.sendMessage(tabs[0].id, {
+            data: request.data,
+            message: request.message,
+          });
         } else {
           console.log("No active tab found, could not send message");
         }

diff --git a/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx b/apps/mocksi-lite-next/src/pages/content/mocksi-extension.tsx
@@ -34,32 +34,49 @@ chrome.runtime.onMessage.addListener((request) => {
     const Iframe = () => {
       const iframeRef = React.useRef<HTMLIFrameElement>(null);
 
-      React.useEffect(() => {
-        window.document.body.addEventListener("click", async (event) => {
-          const oldValue = "Engineering";
-          const newValue = "Cats";
-          const modification: ModificationRequest = {
-            description: `Change ${oldValue} to ${newValue}`,
-            modifications: [
-              {
-                action: "replaceAll",
-                content: `/${oldValue}/${newValue}/`,
-                selector: "body",
-              },
-            ],
-          };
-          const modifications = await reactor.pushModification(modification);
-          for (const modification of modifications) {
-            modification.setHighlight(true);
+      async function findReplaceAll(
+        find: string,
+        replace: string,
+        highlight: boolean,
+      ) {
+        const modification: ModificationRequest = {
+          description: `Change ${find} to ${replace}`,
+          modifications: [
+            {
+              action: "replaceAll",
+              content: `/${find}/${replace}/`,
+              selector: "body",
+            },
+          ],
+        };
+
+        const modifications = await reactor.pushModification(modification);
+        if (highlight) {
+          for (const mod of modifications) {
+            mod.setHighlight(true);
           }
-        });
+        }
+        console.log("mods in find and replace fn: ", modifications);
+        return modifications;
+      }
 
+      React.useEffect(() => {
         chrome.runtime.onMessage.addListener(
-          (request, _sender, sendResponse): boolean => {
+          async (request, _sender, sendResponse) => {
             // reactor
             if (request.message === "EDITING") {
               reactor.attach(document, getHighlighter());
             }
+            if (request.message === "NEW_EDIT") {
+              if (request.data) {
+                const { find, highlightEdits, replace } = request.data;
+                const modifications = await findReplaceAll(
+                  find,
+                  replace,
+                  highlightEdits,
+                );
+              }
+            }
             if (request.message === "STOP_EDITING") {
               reactor.detach();
             }
@@ -68,7 +85,6 @@ chrome.runtime.onMessage.addListener((request) => {
               let styles = {};
               switch (request.message) {
                 case "ANALYZING":
-                case "EDITING":
                 case "PLAY":
                 case "RECORDING":
                   styles = {