From f5ed405c7997b9b6cf822663273c3fb5e4c3ee69 Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Fri, 27 Sep 2024 13:30:13 -0600
Subject: [PATCH] diffs in htlm

---
 .../context/DraggingContextProvider.tsx       |  1 -
 .../services/utils/htmlIsCloseEnough.test.ts  | 11 +++++++++
 .../src/services/utils/htmlIsCloseEnough.ts   | 24 +++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 nextjs/src/services/utils/htmlIsCloseEnough.test.ts
 create mode 100644 nextjs/src/services/utils/htmlIsCloseEnough.ts

diff --git a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
index 331b87c..0d38bf3 100644
--- a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
+++ b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
@@ -186,7 +186,6 @@ export default function DraggingContextProvider({
       updateQuizMutation,
     ]
   );
-  console.log("rerender");
 
   return (
     <DraggingContext.Provider
diff --git a/nextjs/src/services/utils/htmlIsCloseEnough.test.ts b/nextjs/src/services/utils/htmlIsCloseEnough.test.ts
new file mode 100644
index 0000000..a8ee444
--- /dev/null
+++ b/nextjs/src/services/utils/htmlIsCloseEnough.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { htmlIsCloseEnough, removeHtmlDetails } from "./htmlIsCloseEnough";
+
+describe("html can be close enough", () => {
+  it("scenario 1", () => {
+    const localHTML = `<h2>Local Development Environment</h2><p>Integrate your api </p><ol><li>Set up a docker compose file for local development inside your react frontend git repo.<ul><li>Have two services, one for the client and the other for the api</li><li>Reference the <code>:latest</code> image for your api container</li></ul></li><li>Be sure to mount your react client code as a volume to enable hot reloading</li><li>Configure vite to proxy <code>/api</code> requests to the api container</li><li>Your api should still persist the data, even if the container gets re-created (use a volume)</li></ol><h2>Calling Your API from React</h2><p>Create an <code>apiService.ts</code> file to store all functions that make api calls. Have your inventory item context load your items from the api on startup. Use the api calls for all CRUD operations on your app. When modifying the list of items, ensure the item is modified on the api before you show the modified value on the client.</p><h2>Submission</h2><p>Submit screenshots of code relating to each rubric item. Include 1+ questions you would like to ask a the beginning of class</p>`;
+    const canvasHTML = `<link rel="stylesheet" href="https://instructure-uploads-2.s3.amazonaws.com/account_20000000000010/attachments/162497727/DesignPlus%20Mobile%20%25282024%20May%2013%2529.css"><h2>Local Development Environment</h2><p>Integrate your api </p><ol><li>Set up a docker compose file for local development inside your react frontend git repo.<ul><li>Have two services, one for the client and the other for the api</li><li>Reference the <code>:latest</code> image for your api container</li></ul></li><li>Be sure to mount your react client code as a volume to enable hot reloading</li><li>Configure vite to proxy <code>/api</code> requests to the api container</li><li>Your api should still persist the data, even if the container gets re-created (use a volume)</li></ol><h2>Calling Your API from React</h2><p>Create an <code>apiService.ts</code> file to store all functions that make api calls. Have your inventory item context load your items from the api on startup. Use the api calls for all CRUD operations on your app. When modifying the list of items, ensure the item is modified on the api before you show the modified value on the client.</p><h2>Submission</h2><p>Submit screenshots of code relating to each rubric item. Include 1+ questions you would like to ask a the beginning of class</p><script src="https://instructure-uploads-2.s3.amazonaws.com/account_20000000000010/attachments/162497726/DesignPlus%20Mobile%20Java%20%25282024%20May%2013%2529.js"></script>`;
+
+    expect(removeHtmlDetails(localHTML)).toBe(removeHtmlDetails(canvasHTML));
+  });
+});
diff --git a/nextjs/src/services/utils/htmlIsCloseEnough.ts b/nextjs/src/services/utils/htmlIsCloseEnough.ts
new file mode 100644
index 0000000..36aa402
--- /dev/null
+++ b/nextjs/src/services/utils/htmlIsCloseEnough.ts
@@ -0,0 +1,24 @@
+const scriptRegex = /<script.*?<\/script>/g;
+const linkTagRegex = /<link\s+rel="[^"]*"\s+href="[^"]*"[^>]*>/g;
+
+export const removeHtmlDetails = (html: string) => {
+  return html
+    .replaceAll(scriptRegex, "")
+    .replaceAll(linkTagRegex, "")
+    .replaceAll(/<hr\s*\/?>/g, "<hr>")
+    .replaceAll(/<br\s*\/?>/g, "<br>")
+    .replaceAll(/&gt;/g, "")
+    .replaceAll(/&lt;/g, "")
+    .replaceAll(/>/g, "")
+    .replaceAll(/</g, "")
+    .replaceAll(/&quot;/g, "")
+    .replaceAll(/"/g, "")
+    .replaceAll(/&amp;/g, "")
+    .replaceAll(/&/g, "");
+};
+
+export const htmlIsCloseEnough = (html1: string, html2: string) => {
+  const simple1 = removeHtmlDetails(html1);
+  const simple2 = removeHtmlDetails(html2);
+  return simple1 === simple2;
+};