dify/web/app/components/workflow/nodes/http/use-config.ts

import type { Var } from '../../types'
import type { Authorization, Body, HttpNodeType, Method, Timeout } from './types'
import { useBoolean } from 'ahooks'
import { produce } from 'immer'
import { useCallback, useEffect, useState } from 'react'
import { useNodesReadOnly } from '@/app/components/workflow/hooks'
import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
import { useStore } from '../../store'
import { VarType } from '../../types'
import useVarList from '../_base/hooks/use-var-list'
import useKeyValueList from './hooks/use-key-value-list'
import { BodyType } from './types'
import { transformToBodyPayload } from './utils'

const useConfig = (id: string, payload: HttpNodeType) => {
  const { nodesReadOnly: readOnly } = useNodesReadOnly()

  const defaultConfig = useStore((s) => s.nodesDefaultConfigs?.[payload.type])

  const { inputs, setInputs } = useNodeCrud<HttpNodeType>(id, payload)

  const { handleVarListChange, handleAddVariable } = useVarList<HttpNodeType>({
    inputs,
    setInputs,
  })

  const [isDataReady, setIsDataReady] = useState(false)

  useEffect(() => {
    const isReady = defaultConfig && Object.keys(defaultConfig).length > 0
    if (isReady) {
      const newInputs = {
        ...defaultConfig,
        ...inputs,
      }
      const bodyData = newInputs.body.data
      if (typeof bodyData === 'string') {
        newInputs.body = {
          ...newInputs.body,
          data: transformToBodyPayload(
            bodyData,
            [BodyType.formData, BodyType.xWwwFormUrlencoded].includes(newInputs.body.type),
          ),
        }
      } else if (!bodyData) {
        newInputs.body = {
          ...newInputs.body,
          data: [],
        }
      }

      setInputs(newInputs)
      setIsDataReady(true)
    }
  }, [defaultConfig])

  const handleMethodChange = useCallback(
    (method: Method) => {
      const newInputs = produce(inputs, (draft: HttpNodeType) => {
        draft.method = method
      })
      setInputs(newInputs)
    },
    [inputs, setInputs],
  )

  const handleUrlChange = useCallback(
    (url: string) => {
      const newInputs = produce(inputs, (draft: HttpNodeType) => {
        draft.url = url
      })
      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, handleFieldChange('headers'))

  const {
    list: params,
    setList: setParams,
    addItem: addParam,
    isKeyValueEdit: isParamKeyValueEdit,
    toggleIsKeyValueEdit: toggleIsParamKeyValueEdit,
  } = useKeyValueList(inputs.params, handleFieldChange('params'))

  const setBody = useCallback(
    (data: Body) => {
      const newInputs = produce(inputs, (draft: HttpNodeType) => {
        draft.body = data
      })
      setInputs(newInputs)
    },
    [inputs, setInputs],
  )

  // authorization
  const [isShowAuthorization, { setTrue: showAuthorization, setFalse: hideAuthorization }] =
    useBoolean(false)

  const setAuthorization = useCallback(
    (authorization: Authorization) => {
      const newInputs = produce(inputs, (draft: HttpNodeType) => {
        draft.authorization = authorization
      })
      setInputs(newInputs)
    },
    [inputs, setInputs],
  )

  const setTimeout = useCallback(
    (timeout: Timeout) => {
      const newInputs = produce(inputs, (draft: HttpNodeType) => {
        draft.timeout = timeout
      })
      setInputs(newInputs)
    },
    [inputs, setInputs],
  )

  const filterVar = useCallback((varPayload: Var) => {
    return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
  }, [])

  // curl import panel
  const [isShowCurlPanel, { setTrue: showCurlPanel, setFalse: hideCurlPanel }] = useBoolean(false)

  const handleCurlImport = useCallback(
    (newNode: HttpNodeType) => {
      const newInputs = produce(inputs, (draft: HttpNodeType) => {
        draft.method = newNode.method
        draft.url = newNode.url
        draft.headers = newNode.headers
        draft.params = newNode.params
        draft.body = newNode.body
      })
      setInputs(newInputs)
    },
    [inputs, setInputs],
  )

  const handleSSLVerifyChange = useCallback(
    (checked: boolean) => {
      const newInputs = produce(inputs, (draft: HttpNodeType) => {
        draft.ssl_verify = checked
      })
      setInputs(newInputs)
    },
    [inputs, setInputs],
  )

  return {
    readOnly,
    isDataReady,
    inputs,
    handleVarListChange,
    handleAddVariable,
    filterVar,
    handleMethodChange,
    handleUrlChange,
    // headers
    headers,
    setHeaders,
    addHeader,
    isHeaderKeyValueEdit,
    toggleIsHeaderKeyValueEdit,
    // params
    params,
    setParams,
    addParam,
    isParamKeyValueEdit,
    toggleIsParamKeyValueEdit,
    // body
    setBody,
    // ssl verify
    handleSSLVerifyChange,
    // authorization
    isShowAuthorization,
    showAuthorization,
    hideAuthorization,
    setAuthorization,
    setTimeout,
    // curl import
    isShowCurlPanel,
    showCurlPanel,
    hideCurlPanel,
    handleCurlImport,
  }
}

export default useConfig