Move value parsing logic to separate class

request-cluster.ts

@@ -4,6 +4,7 @@ import ExtendedRequest from "./extended-request";
 export type Sources = "cookie" | "pathname" | "queryparams" | "header";
 
 import { TCString, TCModel } from "@iabtcf/core";
+import { isJSONObject, isURL, parseToObject } from "./util";
 
 const id = (function* id() {
   let i = 0;
@@ -49,6 +50,33 @@ export class StolenDataEntry {
   hasValue(value: string) {
     return this.value === value;
   }
+
+  static parseValue(value: unknown): string | Record<string, unknown> {
+    if (isJSONObject(value)) {
+      const object = parseToObject(value);
+      return object;
+    } else if (isURL(value)) {
+      const url = new URL(value);
+      const object = {
+        host: url.host,
+        path: url.pathname,
+        ...Object.fromEntries(
+          (
+            url.searchParams as unknown as {
+              entries: () => Iterable<[string, string]>;
+            }
+          ).entries()
+        ),
+      };
+      return object;
+    } else {
+      return value.toString();
+    }
+  }
+
+  getParsedValue(): string | Record<string, unknown> {
+    return StolenDataEntry.parseValue(this.value);
+  }
 }
 
 export class MergedStolenDataEntry {
@@ -84,6 +112,10 @@ export class MergedStolenDataEntry {
   getValues() {
     return Array.from(new Set(this.entries.map((e) => e.value)));
   }
+
+  getParsedValues() {
+    return Array.from(new Set(this.entries.map((e) => e.getParsedValue())));
+  }
 }
 
 export class RequestCluster extends EventEmitter {

stolen-data-row.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import memory from "./memory";
-import { Sources } from "./request-cluster";
-import { hyphenate, isJSONObject, isURL, parseToObject } from "./util";
+import { Sources, StolenDataEntry } from "./request-cluster";
+import { hyphenate } from "./util";
 
 function StolenDataValueTable({
   object,
@@ -18,7 +18,7 @@ function StolenDataValueTable({
             <th>{hyphenate(key)}</th>
             <td>
               <StolenDataValue
-                value={value}
+                value={StolenDataEntry.parseValue(value)}
                 prefixKey={`${prefixKey}.${key}`}
               />
             </td>
@@ -33,33 +33,16 @@ function StolenDataValue({
   value,
   prefixKey = "",
 }: {
-  value: unknown;
+  value: string | Record<string, unknown>;
   prefixKey?: string;
 }) {
   if (!value) {
     return <></>;
   }
-  console.log("parsing value!", value);
-  if (isJSONObject(value)) {
-    const object = parseToObject(value);
-    return <StolenDataValueTable object={object} prefixKey={prefixKey} />;
-  } else if (isURL(value)) {
-    const url = new URL(value);
-    const object = {
-      host: url.host,
-      path: url.pathname,
-      ...Object.fromEntries(
-        (
-          url.searchParams as unknown as {
-            entries: () => Iterable<[string, string]>;
-          }
-        ).entries()
-      ),
-    };
-    return <StolenDataValueTable object={object} prefixKey={prefixKey} />;
-  } else {
-    return <>{value.toString()}</>;
+  if (typeof value === "string") {
+    return <>{value}</>;
   }
+  return <StolenDataValueTable object={value} prefixKey={prefixKey} />;
 }
 
 export default function StolenDataRow({
@@ -108,7 +91,7 @@ export default function StolenDataRow({
                 </th>
                 <td>{entry.getSources().map((source) => icons[source])}</td>
                 <td style={{ wordWrap: "anywhere" as any }}>
-                  <StolenDataValue value={entry.getValues()[0]} />
+                  <StolenDataValue value={entry.getParsedValues()[0]} />
                 </td>
               </tr>
             ))}