From 67de047122e88b6d6ae7ee68234e1625bf3905af Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 19 Mar 2024 14:42:54 +0800
Subject: [PATCH] fix: http not pass headers and so on

---
 .../nodes/http/components/edit-body/index.tsx     |  7 ++++++-
 .../nodes/http/hooks/use-key-value-list.ts        | 10 ++++++++--
 .../components/workflow/nodes/http/use-config.ts  | 15 ++++++++++++---
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 6cf7eb69b3..fafa153f50 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -56,7 +56,12 @@ const EditBody: FC<Props> = ({
     addItem: addBody,
     isKeyValueEdit: isBodyKeyValueEdit,
     toggleIsKeyValueEdit: toggleIsBodyKeyValueEdit,
-  } = useKeyValueList(payload.data)
+  } = useKeyValueList(payload.data, (value) => {
+    const newBody = produce(payload, (draft: Body) => {
+      draft.data = value
+    })
+    onChange(newBody)
+  })
 
   const isCurrentKeyValue = type === BodyType.formData || type === BodyType.xWwwFormUrlencoded
 
diff --git a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
index 78493bbd22..93f5c2a559 100644
--- a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
+++ b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import type { KeyValue } from '../types'
 
@@ -9,9 +9,15 @@ const strToKeyValueList = (value: string) => {
   })
 }
 
-const useKeyValueList = (value: string) => {
+const useKeyValueList = (value: string, onChange: (value: string) => void) => {
   const [list, setList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
+  useEffect(() => {
+    const newValue = list.filter(item => item.key && item.value).map(item => `${item.key}: ${item.value}`).join('\n')
+    if (newValue !== value)
+      onChange(newValue)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list])
   const addItem = useCallback(() => {
     setList(prev => [...prev, { key: '', value: '' }])
   }, [])
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
index a097bd4db7..dc0a5743e3 100644
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -12,7 +12,7 @@ import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-s
 const useConfig = (id: string, payload: HttpNodeType) => {
   const { inputs, setInputs } = useNodeCrud<HttpNodeType>(id, payload)
 
-  // console.log(inputs)
+  console.log(inputs)
   const { handleVarListChange, handleAddVariable } = useVarList<HttpNodeType>({
     inputs,
     setInputs,
@@ -32,13 +32,22 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const handleFieldChange = useCallback((field: string) => {
+    return (value: string) => {
+      const newInputs = produce(inputs, (draft: HttpNodeType) => {
+        (draft as any)[field] = value
+      })
+      setInputs(newInputs)
+    }
+  }, [inputs, setInputs])
+
   const {
     list: headers,
     setList: setHeaders,
     addItem: addHeader,
     isKeyValueEdit: isHeaderKeyValueEdit,
     toggleIsKeyValueEdit: toggleIsHeaderKeyValueEdit,
-  } = useKeyValueList(inputs.headers)
+  } = useKeyValueList(inputs.headers, handleFieldChange('headers'))
 
   const {
     list: params,
@@ -46,7 +55,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     addItem: addParam,
     isKeyValueEdit: isParamKeyValueEdit,
     toggleIsKeyValueEdit: toggleIsParamKeyValueEdit,
-  } = useKeyValueList(inputs.params)
+  } = useKeyValueList(inputs.params, handleFieldChange('params'))
 
   const setBody = useCallback((data: Body) => {
     const newInputs = produce(inputs, (draft: HttpNodeType) => {