Fix render of diff text for log changes (#42)

pijng · Oct 28, 2024 · 5f22b8e · 5f22b8e
1 parent 576a262
commit 5f22b8e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/internal/api/swagger.yaml b/internal/api/swagger.yaml
@@ -9,7 +9,7 @@ info:
   license:
     name: Apache 2.0
     url: http://www.apache.org/licenses/LICENSE-2.0.html
-  version: 1.14.0
+  version: 1.14.1
 externalDocs:
   description: Find out more about spec
   url: 'https://moonlogs.pages.dev'

diff --git a/web/src/shared/ui/diff-text/index.ts b/web/src/shared/ui/diff-text/index.ts
@@ -4,39 +4,41 @@ import { Store, createEffect, createEvent, restore, sample } from "effector";
 import { h, list, node, remap, spec } from "forest";
 import { triggerTooltip } from "../general-tooltip";
 
+type ComparePayload = { oldText: string | undefined; newText: string | undefined };
+
 export const DiffText = ({ oldText, newText }: { oldText: Store<string>; newText: Store<string> }) => {
-  const compareFx = createEffect(
-    ({ oldText, newText }: { oldText: string | undefined; newText: string | undefined }): Change[] => {
-      return diffWords(oldText || "", newText || "");
-    },
-  );
+  h("div", () => {
+    const compareFx = createEffect(({ oldText, newText }: ComparePayload): Change[] => {
+      return diffWords(JSON.stringify(oldText), JSON.stringify(newText));
+    });
 
-  const triggerDiff = createEvent();
+    const triggerDiff = createEvent();
 
-  const diffFx = sample({
-    source: [oldText, newText],
-    clock: triggerDiff,
-    fn: ([oldText, newText]) => ({ oldText, newText }),
-    target: compareFx,
-  });
+    const diffFx = sample({
+      source: [oldText, newText],
+      clock: triggerDiff,
+      fn: ([oldText, newText]) => ({ oldText, newText }),
+      target: compareFx,
+    });
 
-  const $before = restore(diffFx, []).map((parts) => parts.filter((p) => !p.added));
-  const $after = restore(diffFx, []).map((parts) => parts.filter((p) => !p.removed));
+    const $before = restore(diffFx, []).map((parts) => parts.filter((p) => !p.added));
+    $before.watch((b) => console.log(`BEFORE: ${b.map((p) => p.value).join("")}`));
+    const $after = restore(diffFx, []).map((parts) => parts.filter((p) => !p.removed));
+    $after.watch((b) => console.log(`AFTER: ${b.map((p) => p.value).join("")}`));
 
-  const beforeClicked = createEvent<MouseEvent>();
-  const afterClicked = createEvent<MouseEvent>();
-  const copyTextFx = createEffect((clickedText: string) => {
-    return navigator.clipboard.writeText(clickedText);
-  });
+    const beforeClicked = createEvent<MouseEvent>();
+    const afterClicked = createEvent<MouseEvent>();
+    const copyTextFx = createEffect((clickedText: string) => {
+      return navigator.clipboard.writeText(clickedText);
+    });
 
-  sample({
-    source: i18n("miscellaneous.copied_to_clipboard"),
-    clock: copyTextFx.done,
-    fn: (text) => ({ text: text }),
-    target: triggerTooltip,
-  });
+    sample({
+      source: i18n("miscellaneous.copied_to_clipboard"),
+      clock: copyTextFx.done,
+      fn: (text) => ({ text: text }),
+      target: triggerTooltip,
+    });
 
-  h("div", () => {
     spec({ classList: ["grid", "grid-cols-2"] });
 
     h("div", () => {