Merge pull request #276 from HuolalaTech/optimize/form-data-payload

Optimize the network payload if meet the application/x-www-form-urlencoded
HuolalaTech · Oct 22, 2024 · a46836d · a46836d
2 parents d75cf22 + 0f349de
commit a46836d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/components/NetworkTable/NetworkDetail/index.tsx b/src/components/NetworkTable/NetworkDetail/index.tsx
@@ -106,12 +106,24 @@ const TABS: TabItem[] = [
       return !!requestPayload?.length || validEntries(getData);
     },
     content: (data) => {
-      const { getData, requestPayload } = data;
+      const { getData, requestPayload, requestHeader } = data;
+      const isFormUrlencoded = requestHeader?.some(([name, value]) => {
+        if (
+          name.toLowerCase() === 'content-type' &&
+          value.includes('application/x-www-form-urlencoded')
+        )
+          return true;
+        return false;
+      });
+
       return (
         <>
           {/* Request Payload */}
           {!!requestPayload?.length && (
-            <RequestPayloadBlock data={requestPayload} />
+            <RequestPayloadBlock
+              data={requestPayload}
+              urlencoded={isFormUrlencoded}
+            />
           )}
 
           {/* Query String Parametes */}

diff --git a/src/components/NetworkTable/RequestPayloadBlock/index.tsx b/src/components/NetworkTable/RequestPayloadBlock/index.tsx
@@ -5,13 +5,18 @@ import { EntriesBody } from '@/components/EntriesBody';
 
 export const RequestPayloadBlock: React.FC<{
   data: string | [string, string][];
-}> = ({ data }) => {
+  urlencoded?: boolean;
+}> = ({ data, urlencoded = false }) => {
   const content = useMemo(() => {
     if (isString(data)) {
+      if (urlencoded) {
+        const params = new URLSearchParams(data);
+        return <EntriesBody data={[...params]} />;
+      }
       return <ReactJsonView source={data} defaultExpand />;
     }
     return <EntriesBody data={data} />;
-  }, [data]);
+  }, [data, urlencoded]);
   return (
     <div className="detail-block">
       <b className="detail-block__label">Request Payload</b>