feat: support for sending xml and text request body (resolves #10)

renderer/components/CodeEditor/index.js

@@ -31,7 +31,7 @@ export default class QueryEditor extends React.Component {
       lineNumbers: true,
       lineWrapping: true,
       tabSize: 2,
-      mode: 'application/ld+json',
+      mode: this.props.mode || 'application/ld+json',
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
@@ -89,6 +89,7 @@ export default class QueryEditor extends React.Component {
     ) {
       this.cachedValue = this.props.value;
       this.editor.setValue(this.props.value);
+      this.editor.setOption("mode", this.props.mode);
     }
     this.ignoreChangeEvent = false;
   }

renderer/components/RequestPane/HttpRequestPane/index.js

@@ -67,7 +67,7 @@ const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
         {/* <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>Auth</div> */}
         {focusedTab.requestPaneTab === 'body' ? (
           <div className="flex flex-grow justify-end items-center">
-            <RequestBodyMode />
+            <RequestBodyMode item={item} collection={collection}/>
           </div>
         ) : null }
       </div>

renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js

@@ -1,20 +1,35 @@
 import React, { useRef, forwardRef } from 'react';
+import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
+import { useDispatch } from 'react-redux';
+import { updateRequestBodyMode } from 'providers/ReduxStore/slices/collections';
+import { humanizeRequestBodyMode } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 
-const RequestBodyMode = () => {
+const RequestBodyMode = ({item, collection}) => {
+  const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
+  const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
+
 
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none">
-        JSON <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2}/>
+        {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2}/>
       </div>
     );
   });
 
+  const onModeChange = (value) => {
+    dispatch(updateRequestBodyMode({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      mode: value
+    }));
+  };
+
   return(
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer body-mode-selector">
@@ -24,11 +39,13 @@ const RequestBodyMode = () => {
           </div>
           <div className="dropdown-item" onClick={() => {
             dropdownTippyRef.current.hide();
+            onModeChange('multipartForm');
           }}>
             Multipart Form
           </div>
           <div className="dropdown-item" onClick={() => {
             dropdownTippyRef.current.hide();
+            onModeChange('formUrlEncoded');
           }}>
             Form Url Encoded
           </div>
@@ -37,16 +54,19 @@ const RequestBodyMode = () => {
           </div>
           <div className="dropdown-item" onClick={() => {
             dropdownTippyRef.current.hide();
+            onModeChange('json');
           }}>
             JSON
           </div>
           <div className="dropdown-item" onClick={() => {
             dropdownTippyRef.current.hide();
+            onModeChange('xml');
           }}>
             XML
           </div>
           <div className="dropdown-item" onClick={() => {
             dropdownTippyRef.current.hide();
+            onModeChange('text');
           }}>
             TEXT
           </div>
@@ -55,6 +75,7 @@ const RequestBodyMode = () => {
           </div>
           <div className="dropdown-item" onClick={() => {
             dropdownTippyRef.current.hide();
+            onModeChange('none');
           }}>
             No Body
           </div>

renderer/components/RequestPane/RequestBody/index.js

@@ -7,11 +7,11 @@ import StyledWrapper from './StyledWrapper';
 
 const RequestBody = ({item, collection}) => {
   const dispatch = useDispatch();
-  const bodyContent = item.draft ? get(item, 'draft.request.body.content') : get(item, 'request.body.content');
+  const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
+  const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
 
   const onEdit = (value) => {
     dispatch(updateRequestBody({
-      mode: 'json',
       content: value,
       itemUid: item.uid,
       collectionUid: collection.uid,
@@ -19,11 +19,37 @@ const RequestBody = ({item, collection}) => {
   };
 
   const onRun = () => dispatch(sendRequest(item, collection.uid));;
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));;
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  if(['json', 'xml', 'text'].includes(bodyMode)) {
+    let codeMirrorMode = {
+      json: 'application/ld+json',
+      text: 'application/text',
+      xml: 'application/xml'
+    };
+
+    let bodyContent = {
+      json: body.json,
+      text: body.text,
+      xml: body.xml
+    };
+
+    return(
+      <StyledWrapper className="w-full">
+        <CodeEditor
+          value={bodyContent[bodyMode] || ''}
+          onEdit={onEdit}
+          onRun={onRun}
+          onSave={onSave}
+          mode={codeMirrorMode[bodyMode]}
+        />
+      </StyledWrapper>
+    );
+  }
 
   return(
     <StyledWrapper className="w-full">
-      <CodeEditor value={bodyContent || ''} onEdit={onEdit} onRun={onRun} onSave={onSave}/>
+      No Body
     </StyledWrapper>
   );
 };