From 23910d3bb25f93a56002169221e266b915799289 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sat, 19 Mar 2022 21:46:30 +0530
Subject: [PATCH] feat: request body selector

---
 renderer/components/Dropdown/StyledWrapper.js |  6 ++
 .../RequestPane/HttpRequestPane/index.js      |  3 +-
 .../RequestBodyMode/StyledWrapper.js          | 26 ++++++++
 .../RequestBody/RequestBodyMode/index.js      | 66 +++++++++++++++++++
 .../RequestPane/RequestBody/StyledWrapper.js  |  6 ++
 .../RequestPane/RequestBody/index.js          | 12 ++++
 renderer/styles/globals.css                   |  2 +-
 7 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 renderer/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
 create mode 100644 renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js
 create mode 100644 renderer/components/RequestPane/RequestBody/StyledWrapper.js
 create mode 100644 renderer/components/RequestPane/RequestBody/index.js

diff --git a/renderer/components/Dropdown/StyledWrapper.js b/renderer/components/Dropdown/StyledWrapper.js
index 1ab423ec..e314363b 100644
--- a/renderer/components/Dropdown/StyledWrapper.js
+++ b/renderer/components/Dropdown/StyledWrapper.js
@@ -21,6 +21,12 @@ const Wrapper = styled.div`
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
 
+      .label-item {
+        display: flex;
+        align-items: center;
+        padding: .35rem .6rem;
+      }
+
       .dropdown-item {
         display: flex;
         align-items: center;
diff --git a/renderer/components/RequestPane/HttpRequestPane/index.js b/renderer/components/RequestPane/HttpRequestPane/index.js
index 43748c08..f6a19ca3 100644
--- a/renderer/components/RequestPane/HttpRequestPane/index.js
+++ b/renderer/components/RequestPane/HttpRequestPane/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import QueryParams from 'components/RequestPane/QueryParams';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
+import RequestBody from 'components/RequestPane/RequestBody';
 import StyledWrapper from './StyledWrapper';
 
 const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
@@ -18,7 +19,7 @@ const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
           <QueryParams />
         </TabPanel>
         <TabPanel>
-          <div>Body</div>
+          <RequestBody />
         </TabPanel>
         <TabPanel>
           <RequestHeaders item={item} collection={collection}/>
diff --git a/renderer/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js b/renderer/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
new file mode 100644
index 00000000..74fd0468
--- /dev/null
+++ b/renderer/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.8125rem;
+
+  .body-mode-selector {
+    background: #efefef;
+    border-radius: 3px;
+
+    .dropdown-item {
+      padding: .2rem .6rem !important;
+      padding-left: 1.5rem !important;
+    }
+
+    .label-item  {
+      padding: .2rem .6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+`;
+
+export default Wrapper;
diff --git a/renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js b/renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js
new file mode 100644
index 00000000..a57cb537
--- /dev/null
+++ b/renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js
@@ -0,0 +1,66 @@
+import React, { useRef, forwardRef } from 'react';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import StyledWrapper from './StyledWrapper';
+
+const RequestBodyMode = () => {
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
+
+  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}/>
+      </div>
+    );
+  });
+
+  return(
+    <StyledWrapper>
+      <div className="inline-flex items-center cursor-pointer body-mode-selector">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement='bottom-start'>
+          <div className="label-item font-medium">
+            Form
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            Multipart Form
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            Form Url Encoded
+          </div>
+          <div className="label-item font-medium">
+            Raw
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            JSON
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            XML
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            TEXT
+          </div>
+          <div className="label-item font-medium">
+            Other
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            No Body
+          </div>
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default RequestBodyMode;
diff --git a/renderer/components/RequestPane/RequestBody/StyledWrapper.js b/renderer/components/RequestPane/RequestBody/StyledWrapper.js
new file mode 100644
index 00000000..42da81d6
--- /dev/null
+++ b/renderer/components/RequestPane/RequestBody/StyledWrapper.js
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+`;
+
+export default Wrapper;
diff --git a/renderer/components/RequestPane/RequestBody/index.js b/renderer/components/RequestPane/RequestBody/index.js
new file mode 100644
index 00000000..50c8ead6
--- /dev/null
+++ b/renderer/components/RequestPane/RequestBody/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import RequestBodyMode from './RequestBodyMode';
+import StyledWrapper from './StyledWrapper';
+
+const RequestBody = () => {
+  return(
+    <StyledWrapper className="mt-3">
+      <RequestBodyMode />
+    </StyledWrapper>
+  );
+};
+export default RequestBody;
diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css
index 1e499e5a..8870e0b6 100644
--- a/renderer/styles/globals.css
+++ b/renderer/styles/globals.css
@@ -25,7 +25,7 @@ html, body {
   margin: 0;
   padding: 0;
   font-size: 1rem;
-  color: rgb(48 48 48);
+  color: rgb(52 52 52);
 
   font-kerning: none;
   text-rendering: optimizeSpeed;