change content type to x-www-form-urlencoded as needed

Author: NathanielBAdams

src/client/components/composer/NewRequest/BodyTypeSelect.jsx

@@ -20,9 +20,9 @@ const BodyTypeSelect = (props) => {
       if (!dropdownEl.current.contains(event.target)) {
         setDropdownIsActive(false);
       }
-    }
-    document.addEventListener('click', closeDropdown);
-    return () => document.removeEventListener('click', closeDropdown);
+    };
+    document.addEventListener("click", closeDropdown);
+    return () => document.removeEventListener("click", closeDropdown);
   }, []);
 
   const removeContentTypeHeader = () => {
@@ -33,65 +33,94 @@ const BodyTypeSelect = (props) => {
       headersArr: filtered,
       count: filtered.length,
     });
-  }
+  };
 
   const setNewBodyType = (bodyTypeStr) => {
     setNewRequestBody({
       ...newRequestBody,
       bodyType: bodyTypeStr,
-    })
-  }
+    });
+  };
 
-  return (
-    <div ref={dropdownEl} className={`mt-1 mb- dropdown ${dropdownIsActive ? 'is-active' : ''}`}>
+  const setContentTypeHeader = (newBodyType) => {
+    const headersCopy = JSON.parse(JSON.stringify(newRequestHeaders));
+    headersCopy.headersArr[0] = {
+      id: Math.random() * 1000000,
+      active: true,
+      key: "Content-type",
+      value: newBodyType,
+    };
+    setNewRequestHeaders({
+      headersArr: headersCopy.headersArr,
+    });
+  };
 
+  return (
+    <div
+      ref={dropdownEl}
+      className={`mt-1 mb- dropdown ${dropdownIsActive ? "is-active" : ""}`}
+    >
       <div className="dropdown-trigger">
-        <button className="button is-small is-outlined is-primary mr-3 add-header-or-cookie-button" aria-haspopup="true" aria-controls="dropdown-menu"
+        <button
+          className="button is-small is-outlined is-primary mr-3 add-header-or-cookie-button"
+          aria-haspopup="true"
+          aria-controls="dropdown-menu"
           onClick={() => setDropdownIsActive(!dropdownIsActive)}
         >
           <span>{newRequestBody.bodyType}</span>
           <span className="icon is-small">
-          <img src={dropDownArrow}  className="is-awesome-icon" aria-hidden="true" />
+            <img
+              src={dropDownArrow}
+              className="is-awesome-icon"
+              aria-hidden="true"
+            />
           </span>
         </button>
       </div>
 
       <div className="dropdown-menu">
         <ul className="dropdown-content">
-          {newRequestBody.bodyType !== 'raw' &&
-            <a 
+          {newRequestBody.bodyType !== "raw" && (
+            <a
               onClick={() => {
-                setDropdownIsActive(false); 
-                setNewBodyType("raw")
-              }} 
-              className="dropdown-item" 
-            >raw</a>
-          }
-          {newRequestBody.bodyType !== 'x-www-form-urlencoded' &&
+                setDropdownIsActive(false);
+                setNewBodyType("raw");
+                setContentTypeHeader("text/plain");
+              }}
+              className="dropdown-item"
+            >
+              raw
+            </a>
+          )}
+          {newRequestBody.bodyType !== "x-www-form-urlencoded" && (
             <a
               onClick={() => {
                 setDropdownIsActive(false);
-                setNewBodyType('x-www-form-urlencoded'); 
-              }} 
-              className="dropdown-item" 
-            >x-www-form-urlencoded</a>
-          }
-          {newRequestBody.bodyType !== 'none' &&
+                setContentTypeHeader("x-www-form-urlencoded");
+                setNewBodyType("x-www-form-urlencoded");
+              }}
+              className="dropdown-item"
+            >
+              x-www-form-urlencoded
+            </a>
+          )}
+          {newRequestBody.bodyType !== "none" && (
             <a
               onClick={() => {
                 setDropdownIsActive(false);
-                setNewBodyType('none')
+                setNewBodyType("none");
                 removeContentTypeHeader();
-              }} 
-              className="dropdown-item" 
-            >none</a>
-          }
+              }}
+              className="dropdown-item"
+            >
+              none
+            </a>
+          )}
         </ul>
       </div>
     </div>
-    );
-  }
-
+  );
+};
 
 BodyTypeSelect.propTypes = {
   newRequestBody: PropTypes.object.isRequired,