WiP bodyTypes

RESTEDClient · May 26, 2017 · 51cc78e · 51cc78e
1 parent 86c4e33
commit 51cc78e
Show file tree

Hide file tree

Showing 10 changed files with 1,468 additions and 153 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "test:watch": "jest --watchman --watchAll --config test/jest.conf.js",
     "test:snapshot": "jest --update-snapshot --config test/jest.conf.js",
     "test:debugger": "node --debug-brk --inspect ./node_modules/.bin/jest -i --config test/jest.conf.js",
+    "load": "web-ext run --no-reload",
     "eslint": "eslint src test",
     "eslint:fix": "eslint --fix src test",
     "start": "npm run dev",
@@ -78,6 +79,7 @@
     "redux-devtools": "^3.3.2",
     "redux-devtools-dock-monitor": "^1.1.1",
     "redux-devtools-log-monitor": "^1.2.0",
+    "web-ext": "^1.9.1",
     "webpack": "^2.3.2",
     "whatwg-fetch": "^2.0.3"
   }

diff --git a/src/components/Request/BodyField.js b/src/components/Request/BodyField.js
@@ -1,14 +1,15 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { Field, FieldArray } from 'redux-form';
-import { FormGroup, FormControl, Checkbox, Row, Col } from 'react-bootstrap';
+import { FormGroup, FormControl, Row, Col, ControlLabel } from 'react-bootstrap';
 
 import Fonticon from 'components/Fonticon';
 import Collapsable from 'components/Collapsable';
 import IconButton from 'components/IconButton';
 import * as RequestActions from 'store/request/actions';
+import { getBodyType } from 'store/request/selectors';
 
-import { UnstyledButton } from './StyledComponents';
+import { UnstyledButton, FormDataFields } from './StyledComponents';
 
 function renderField({ input, placeholder }) {
   return (
@@ -26,20 +27,9 @@ renderField.propTypes = {
 };
 
 function renderFormDataFields(props) {
-  const { fields, meta, setUseFormData } = props;
+  const { fields, meta } = props;
   return (
-    <Collapsable
-      title="Request body"
-      id="requestBody"
-    >
-      <Col xs={12}>
-        <Checkbox
-          checked
-          onChange={() => { setUseFormData(false); }}
-        >
-          Use form data
-        </Checkbox>
-      </Col>
+    <FormDataFields>
       {fields.map((field, key) => (
         <FormGroup
           key={key}
@@ -53,14 +43,14 @@ function renderFormDataFields(props) {
               placeholder="Name"
             />
           </Col>
-          <Col xs={6}>
+          <Col xs={5}>
             <Field
               name={`${field}.value`}
               component={renderField}
               placeholder="Value"
             />
           </Col>
-          <Col xs={1}>
+          <Col xs={2}>
             <IconButton
               id={`removeFormDataButton${key}`}
               tooltip="Remove form field"
@@ -82,13 +72,12 @@ function renderFormDataFields(props) {
           </UnstyledButton>
         </Col>
       </Row>
-    </Collapsable>
+    </FormDataFields>
   );
 }
 
 /* eslint-disable react/no-unused-prop-types */
 renderFormDataFields.propTypes = {
-  setUseFormData: PropTypes.func.isRequired,
   fields: PropTypes.shape({
     map: PropTypes.func.isRequired,
     remove: PropTypes.func.isRequired,
@@ -100,65 +89,97 @@ renderFormDataFields.propTypes = {
 };
 /* eslint-enable react/no-unused-prop-types */
 
-function renderDataField({ input, setUseFormData }) {
+function renderSingleField({ input }) {
   return (
-    <Collapsable
-      title="Request body"
-      id="requestBody"
-    >
-      <Col xs={12}>
-        <Checkbox
-          onChange={() => { setUseFormData(true); }}
-        >
-          Use form data
-        </Checkbox>
+    <Col xs={12}>
+      <FormGroup controlId="requestBody">
+        <FormControl
+          componentClass="textarea"
+          rows={10}
+          {...input}
+        />
+      </FormGroup>
+    </Col>
+  );
+}
+
+renderSingleField.propTypes = {
+  input: PropTypes.shape({}).isRequired,
+};
+
+function renderBodyType({ input, changeBodyType }) {
+  return (
+    <FormGroup controlId="bodyType">
+      <Col componentClass={ControlLabel} xs={2}>
+        Type
       </Col>
 
-      <Col xs={12}>
-        <FormGroup controlId="requestBody">
-          <FormControl
-            componentClass="textarea"
-            rows={10}
-            {...input}
-          />
-        </FormGroup>
+      <Col xs={8}>
+        <FormControl
+          componentClass="select"
+          placeholder="Body type"
+          {...input}
+          onChange={newVal => {
+            changeBodyType(newVal.target.value);
+            input.onChange(newVal);
+          }}
+        >
+          <option value="custom">Custom</option>
+          <option value="json">JSON</option>
+          <option value="multipart">Multipart form data</option>
+          <option value="urlencoded">URLencoded form data</option>
+        </FormControl>
       </Col>
-    </Collapsable>
+    </FormGroup>
   );
 }
 
-renderDataField.propTypes = {
+renderBodyType.propTypes = {
   input: PropTypes.shape({}).isRequired,
-  setUseFormData: PropTypes.func.isRequired,
+  changeBodyType: PropTypes.func.isRequired,
 };
 
-export function BodyField({ useFormData, setUseFormData }) {
-  if (useFormData) {
-    return (
-      <FieldArray
-        name="formData"
-        component={renderFormDataFields}
-        setUseFormData={setUseFormData}
-      />
-    );
+function renderDataField(type) {
+  switch (type) {
+    case 'json':
+    case 'multipart':
+    case 'urlencoded':
+      return (
+        <FieldArray
+          name="formData"
+          component={renderFormDataFields}
+        />
+      );
+    default:
+      return (
+        <Field
+          name="data"
+          component={renderSingleField}
+        />
+      );
   }
+}
 
+export function BodyField({ bodyType, changeBodyType }) {
   return (
-    <Field
-      name="data"
-      component={renderDataField}
-      setUseFormData={setUseFormData}
-    />
+    <Collapsable title="Request body" id="requestBody">
+      <Field
+        name="bodyType"
+        component={renderBodyType}
+        changeBodyType={changeBodyType}
+      />
+      {renderDataField(bodyType)}
+    </Collapsable>
   );
 }
 
 BodyField.propTypes = {
-  useFormData: PropTypes.bool,
-  setUseFormData: PropTypes.func.isRequired,
+  bodyType: PropTypes.oneOf(['json', 'multipart', 'urlencoded', 'custom']).isRequired,
+  changeBodyType: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = ({ request: { useFormData } }) => ({
-  useFormData,
+const mapStateToProps = state => ({
+  bodyType: getBodyType(state),
 });
 
 export default connect(mapStateToProps, RequestActions)(BodyField);

diff --git a/src/components/Request/StyledComponents.js b/src/components/Request/StyledComponents.js
@@ -22,6 +22,10 @@ export const TrashButton = styled(IconButton)`
   height: 40px;
 `;
 
+export const FormDataFields = styled.div`
+  margin-top: 15px;
+`;
+
 export const SuggestWrapper = styled.div`
   .react-autosuggest__container {
     position: relative;

diff --git a/src/store/request/actions.js b/src/store/request/actions.js
@@ -3,7 +3,7 @@ import {
   EXECUTE_REQUEST,
   RECEIVE_RESPONSE,
   CLEAR_RESPONSE,
-  USE_FORM_DATA,
+  CHANGE_BODY_TYPE,
   SELECT_REQUESTED,
 } from './types';
 
@@ -19,8 +19,8 @@ export function clearRequest() {
   return { type: CLEAR_RESPONSE };
 }
 
-export function setUseFormData(useFormData) {
-  return { type: USE_FORM_DATA, useFormData };
+export function changeBodyType(bodyType) {
+  return { type: CHANGE_BODY_TYPE, bodyType };
 }
 
 export function selectRequest(request) {

diff --git a/src/store/request/reducer.js b/src/store/request/reducer.js
@@ -3,7 +3,7 @@ import {
   EXECUTE_REQUEST,
   RECEIVE_RESPONSE,
   CLEAR_RESPONSE,
-  USE_FORM_DATA,
+  CHANGE_BODY_TYPE,
 } from './types';
 
 const initialState = {
@@ -35,9 +35,11 @@ export default function (state = initialState, action) {
         loading: false,
       });
 
-    case USE_FORM_DATA:
+    case CHANGE_BODY_TYPE:
+      // Set Content-Type header to application/x-www-form-urlencoded
+      // Unset Content-Type when set to application/x-www-form-urlencoded
       return Object.assign({}, state, {
-        useFormData: action.useFormData,
+        bodyType: action.bodyType,
       });
 
     default: