fix: preview form data payload in a table (#92)

src/components/WebLogView/RequestDetails/FormPayloadPreview.tsx

@@ -0,0 +1,31 @@
+import { safeJsonParse } from '@/utils/json'
+import { Table } from '@radix-ui/themes'
+
+export function FormPayloadPreview({
+  payloadJsonString,
+}: {
+  payloadJsonString: string
+}) {
+  const contentObject = safeJsonParse<Record<string, string>>(payloadJsonString)
+
+  return (
+    <Table.Root size="1" variant="surface">
+      <Table.Header>
+        <Table.Row>
+          <Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
+          <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {contentObject &&
+          Object.entries(contentObject).map(([key, value]) => (
+            <Table.Row key={key}>
+              <Table.Cell>{key}</Table.Cell>
+              <Table.Cell>{value}</Table.Cell>
+            </Table.Row>
+          ))}
+      </Table.Body>
+    </Table.Root>
+  )
+}

src/components/WebLogView/RequestDetails/Payload.tsx

@@ -4,9 +4,12 @@ import { ProxyData } from '@/types'
 
 import { ReadOnlyEditor } from '../../Monaco/ReadOnlyEditor'
 import { parseParams } from './utils'
+import { getContentType } from '@/utils/headers'
+import { FormPayloadPreview } from './FormPayloadPreview'
 
 export function Payload({ data }: { data: ProxyData }) {
   const content = parseParams(data)
+  const contentType = getContentType(data.request?.headers ?? [])
 
   if (!content) {
     return (
@@ -16,5 +19,9 @@ export function Payload({ data }: { data: ProxyData }) {
     )
   }
 
+  if (contentType === 'application/x-www-form-urlencoded') {
+    return <FormPayloadPreview payloadJsonString={content} />
+  }
+
   return <ReadOnlyEditor language="javascript" value={content} />
 }

src/proxy.ts

@@ -68,7 +68,7 @@ export const launchProxy = (
       return
     }
 
-    const proxyData: ProxyData = safeJsonParse(data)
+    const proxyData = safeJsonParse<ProxyData>(data)
     if (proxyData) {
       browserWindow.webContents.send('proxy:data', proxyData)
     }

src/rules/shared.ts

@@ -32,7 +32,7 @@ export const setJsonObjectFromPath = (
   value: string
 ) => {
   const jsonObject = safeJsonParse(json)
-  set(jsonObject, path, value)
+  set(jsonObject ?? {}, path, value)
   return JSON.stringify(jsonObject)
 }
 

src/utils/json.ts

@@ -1,6 +1,6 @@
-export function safeJsonParse(value: string) {
+export function safeJsonParse<T extends object>(value: string) {
   try {
-    return JSON.parse(value)
+    return JSON.parse(value) as T
   } catch (error) {
     console.error('Failed to parse JSON', error)
     return undefined