forgeplus-react/src/forge/Settings/Webhooks/sub/historyContent.jsx

import React, { useEffect, useState } from 'react';
import { Menu } from 'antd';
import Nodata from '../../../Nodata';
import ReactJson from 'react-json-view';
import Editor from "../../../Component/Monaco";

function HistoryContent({request_content,payload_content,response_content}) {
  const [ key , setKey ] = useState("request");
  const [ requestHeader , setRequestHeader ] = useState(undefined);
  const [ responseHeader , setResponseHeader ] = useState(undefined);

  useEffect(()=>{
    if(request_content){
      let arr = [];
      Object.keys(request_content).map((item,key)=>{
        arr.push({name:item,value:request_content[item],k:key});
      })
      setRequestHeader(arr);
    }
  },[request_content])

  useEffect(()=>{
    if(response_content && response_content.headers){
      let arr = [];
      Object.keys(response_content.headers).map((item,key)=>{
        arr.push({name:item,value:response_content.headers[item],k:key});
      })
      setResponseHeader(arr);
    }
  },[response_content])

  function isJSON(str) {
    if (typeof str === 'string') {
      try {
        var obj=JSON.parse(str);
        if(typeof obj === 'object' && obj ){
          return true;
        }else{
          return false;
        }
      } catch(e) {
        return false;
      }
    }
  }

  

  return(
    <div className="contentPanel">
      <div>
        <Menu selectedKeys={[key]} onSelect={(e)=>setKey(e.key)} mode={"horizontal"} className="contentMenu">
          <Menu.Item key={"request"}><i className="iconfont icon-weixuanzhongqingqiuicon font-15 mr5"></i>请求</Menu.Item>
          <Menu.Item key={"response"}><i className="iconfont icon-xuanzhongxiangyingicon font-16 mr5"></i>响应</Menu.Item>
        </Menu>
      </div>
      <div style={{paddingLeft:"16px"}}>
        {
          key === "request" ?
          <div>
            {
            requestHeader && requestHeader.length > 0 &&
              <div>
                <p className="retitle">标题</p>
                <div className="con">
                  {
                    requestHeader.map((i,k)=>{
                      return(
                        <p><span>{i.name}: </span><span>{i.value}</span></p>
                      )
                    })
                  }
                </div>
              </div>
            }
            {
              payload_content &&
              <div>
                <p className="retitle">有效载荷</p>
                <div className="con">
                  <ReactJson 
                    src={payload_content} 
                    name={false} 
                    displayObjectSize={false} 
                    displayDataTypes={false}
                    enableClipboard={false}
                  />  
                </div>
              </div>
            }
          </div>
          :
          <div>
            {
              (!responseHeader && ((response_content && !response_content.body) || !response_content))?
                <Nodata _html="暂无数据~"/>
              :""
            }
            {
            responseHeader && responseHeader.length > 0 &&
              <div>
                <p className="retitle">标题</p>
                <div className="con">
                  {
                    responseHeader.map((i,k)=>{
                      return(
                        <p><span>{i.name}: </span><span>{i.value}</span></p>
                      )
                    })
                  }
                </div>
              </div>
            }
            {
              response_content && response_content.body && 
              <div>
                <p className="retitle">响应体</p>
                {
                  isJSON(response_content.body) ?
                  <div className="con">
                    <ReactJson 
                      enableClipboard={false}
                      src={JSON.parse(response_content.body)} 
                      name={false} 
                      displayObjectSize={false} 
                      displayDataTypes={false}
                    />  
                  </div>
                  :
                  <div className="conEditor">
                    <Editor value={response_content.body}/>
                  </div>
                }
              </div>
            }
          </div>
        }
      </div>
    </div>
  )
}
export default HistoryContent;