react-native-xenon/lib/module/ui/components/details/NetworkRequestDetails.js

A powerful in-app debugging tool for React Native.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = NetworkRequestDetails;
var _react = require("react");
var _reactNative = require("react-native");
var _contexts = require("../../../contexts");
var _utils = require("../../../core/utils");
var _colors = _interopRequireDefault(require("../../../theme/colors"));
var _NetworkRequestDetailsItem = _interopRequireDefault(require("../items/NetworkRequestDetailsItem"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function NetworkRequestDetails({
  item
}) {
  const {
    debuggerState: {
      detailsData
    }
  } = (0, _react.useContext)(_contexts.MainContext);
  const beautified = (0, _react.useRef)(null);
  const shouldBeautifiedRefUpdate = beautified.current !== detailsData?.beautified;
  const {
    isHttp,
    requestUrl,
    overviewShown,
    headersShown,
    requestShown,
    responseShown,
    messagesShown
  } = (0, _utils.getNetworkUtils)(item);
  const content = (0, _react.useRef)({
    overview: null,
    headers: null,
    request: null,
    response: null,
    messages: null
  });
  if (overviewShown && !content.current.overview) {
    content.current.overview = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Request Type",
        content: item.type
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Request URL",
        content: item.url
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Request Method",
        content: (0, _utils.formatRequestMethod)(isHttp ? item.method : undefined)
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Duration",
        content: (0, _utils.formatRequestDuration)(item.duration)
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Status Code",
        content: (0, _utils.formatRequestStatusCode)(item.status)
      })]
    });
  }
  if (headersShown && !content.current.headers) {
    content.current.headers = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [!isHttp && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Headers",
        content: (0, _utils.limitChar)(item.options?.headers)
      }), isHttp && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Request Headers",
        content: item.requestHeadersString
      }), isHttp && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Response Headers",
        content: item.responseHeaders
      })]
    });
  }
  if (requestShown && shouldBeautifiedRefUpdate) {
    const queryStringParameters = [];
    requestUrl.searchParams.forEach((value, name) => {
      queryStringParameters.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Query String",
        content: (0, _utils.keyValueToString)(name, value, null)
      }, (0, _utils.keyValueToString)(name, value, null)));
    });
    content.current.request = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [queryStringParameters, /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
        label: "Body",
        content: (0, _utils.beautify)(item.body, detailsData?.beautified ?? false)
      })]
    });
  }
  if (responseShown && shouldBeautifiedRefUpdate) {
    content.current.response = /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
      label: "Response",
      content: (0, _utils.beautify)(item.response, detailsData?.beautified ?? false)
    });
  }
  if (messagesShown && !content.current.messages) {
    content.current.messages = /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetailsItem.default, {
      label: "Messages",
      content: `\n${item.messages}`
    });
  }
  if (shouldBeautifiedRefUpdate) {
    beautified.current = detailsData?.beautified ?? false;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
    style: styles.container,
    contentContainerStyle: styles.contentContainer,
    children: content.current[detailsData.selectedTab]
  });
}
const styles = _reactNative.StyleSheet.create({
  container: {
    flex: 1
  },
  contentContainer: {
    paddingHorizontal: 8
  },
  divider: {
    height: _reactNative.StyleSheet.hairlineWidth,
    backgroundColor: _colors.default.gray
  },
  text: {
    fontSize: 14,
    color: _colors.default.black
  },
  label: {
    fontSize: 14,
    fontWeight: 'bold',
    color: _colors.default.black
  },
  buttonContent: {
    padding: 8,
    borderRadius: 4,
    borderWidth: 1,
    alignItems: 'center'
  }
});
//# sourceMappingURL=NetworkRequestDetails.js.map