feat: CollectionTitleBar Component

renderer/components/RequestTabs/CollectionTitleBar/StyledWrapper.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+`;
+
+export default StyledWrapper;

renderer/components/RequestTabs/CollectionTitleBar/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconStack, IconGitFork } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const CollectionTitleBar = ({collection}) => {
+  return (
+    <StyledWrapper>
+      <div className="flex items-center p-2">
+        <IconStack size={18} strokeWidth={1.5}/>
+        <span className="ml-2 mr-4 font-semibold">anoop<span style={{paddingInline: 2}}>/</span>{collection.name}</span>
+        <IconGitFork size={16} strokeWidth={1}/>
+        <span className="ml-1 text-xs">from anoop/notebase</span>
+      </div>
+    </StyledWrapper>
+  )
+};
+
+export default CollectionTitleBar;

renderer/components/RequestTabs/index.js

@@ -1,9 +1,22 @@
 import React from 'react';
+import find from 'lodash/find';
+import filter from 'lodash/filter';
 import classnames from 'classnames';
 import { IconHome2 } from '@tabler/icons';
+import { useStore } from 'providers/Store';
+import actions from 'providers/Store/actions';
+import CollectionTitleBar from './CollectionTitleBar';
 import StyledWrapper from './StyledWrapper';
 
-const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
+const RequestTabs = () => {
+  const [store, storeDispatch] = useStore();
+
+  const {
+    collections,
+    requestTabs,
+    activeRequestTabId
+  } = store;
+
   const getTabClassname = (tab, index) => {
     return classnames("request-tab select-none", {
       'active': tab.id === activeRequestTabId,
@@ -28,7 +41,7 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
   };
 
   const handleClick = (tab) => {
-    dispatch({
+    storeDispatch({
       type: actions.REQUEST_TAB_CLICK,
       requestTab: tab
     });
@@ -37,63 +50,77 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
   const handleCloseClick = (event, tab) => {
     event.stopPropagation();
     event.preventDefault();
-    dispatch({
+    storeDispatch({
       type: actions.REQUEST_TAB_CLOSE,
       requestTab: tab
     });
   };
 
   const createNewTab = () => {
-    dispatch({
+    storeDispatch({
       type: actions.ADD_NEW_HTTP_REQUEST
     });
   };
 
+  if(!activeRequestTabId) {
+    return null;
+  }
+
+  const activeRequestTab = find(requestTabs, (t) => t.id === activeRequestTabId);
+  const activeCollection = find(collections, (c) => c.id === activeRequestTab.collectionId);
+  const collectionRequestTabs = filter(requestTabs, (t) => t.collectionId === activeRequestTab.collectionId);
+  console.log(activeRequestTab);
+
   return (
-    <StyledWrapper className="mt-2 flex items-center">
+    <StyledWrapper>
-      {requestTabs && requestTabs.length ? (
+      {collectionRequestTabs && collectionRequestTabs.length ? (
-        <ul role="tablist">
+        <>
-          <li className="select-none new-tab mr-1" onClick={createNewTab}>
+          <CollectionTitleBar collection={activeCollection}/>
-            <div className="flex items-center home-icon-container">
+          <div className="mt-1 flex items-center">
-              <IconHome2 size={18} strokeWidth={1.5}/>
+            <ul role="tablist">
-            </div>
+              <li className="select-none new-tab mr-1" onClick={createNewTab}>
-          </li>
+                <div className="flex items-center home-icon-container">
-          {requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
+                  <IconHome2 size={18} strokeWidth={1.5}/>
-            return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
-              <div className="flex items-center justify-between tab-container px-1">
-                <div className="flex items-center tab-label pl-2">
-                  <span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
-                  <span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
                 </div>
-                <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
+              </li>
-                  {!rt.hasChanges ? (
+              {collectionRequestTabs && collectionRequestTabs.length ? collectionRequestTabs.map((rt, index) => {
-                    <svg focusable="false"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+                return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
-                      <path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
+                  <div className="flex items-center justify-between tab-container px-1">
-                    </svg>
+                    <div className="flex items-center tab-label pl-2">
-                  ) : (
+                      <span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
-                    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" class="has-changes-icon" viewBox="0 0 8 8">
+                      <span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
-                      <circle cx="4" cy="4" r="3"/>
+                    </div>
-                    </svg>
+                    <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
-                  ) }
+                      {!rt.hasChanges ? (
+                        <svg focusable="false"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+                          <path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
+                        </svg>
+                      ) : (
+                        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" class="has-changes-icon" viewBox="0 0 8 8">
+                          <circle cx="4" cy="4" r="3"/>
+                        </svg>
+                      ) }
+                    </div>
+                  </div>
+                </li>
+              }) : null}
+              <li className="select-none new-tab ml-1" onClick={createNewTab}>
+                <div className="flex items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"  viewBox="0 0 16 16">
+                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+                  </svg>
                 </div>
-              </div>
+              </li>
-            </li>
+              <li className="select-none new-tab choose-request">
-          }) : null}
+                <div className="flex items-center">
-          <li className="select-none new-tab ml-1" onClick={createNewTab}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-            <div className="flex items-center">
+                    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
-              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"  viewBox="0 0 16 16">
+                  </svg>
-                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+                </div>
-              </svg>
+              </li>
-            </div>
+            </ul>
-          </li>
+          </div>
-          <li className="select-none new-tab choose-request">
+        </>
-            <div className="flex items-center">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-                <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
-              </svg>
-            </div>
-          </li>
-        </ul>
       ) : null}
     </StyledWrapper>
   );

renderer/pageComponents/Main/index.js

@@ -3,11 +3,9 @@ import RequestTabs from 'components/RequestTabs';
 import RequestTabPanel from 'components/RequestTabPanel';
 import Sidebar from 'components/Sidebar';
 import actions from 'providers/Store/actions';
-import { useStore } from '../../providers/Store/index';
+import { useStore } from 'providers/Store';
 import StyledWrapper from './StyledWrapper';
 
-import { IconStack, IconGitFork } from '@tabler/icons';
-
 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 if(!SERVER_RENDERED) {
   require('codemirror/mode/javascript/javascript');
@@ -55,18 +53,7 @@ export default function Main() {
           activeRequestTabId={activeRequestTabId}
         />
         <section className='flex flex-grow flex-col'>
-          <div className="flex items-center" style={{padding: "8px", paddingBottom: "4px"}}>
+          <RequestTabs/>
-            <IconStack size={18} strokeWidth={1.5}/>
-            <span className="ml-2 mr-4 font-semibold">spacex</span>
-            <IconGitFork size={16} strokeWidth={1}/>
-            <span className="ml-1 text-xs">main</span>
-          </div>
-          <RequestTabs
-            requestTabs={requestTabs}
-            actions={actions}
-            dispatch={dispatch}
-            activeRequestTabId={activeRequestTabId}
-          />
           <RequestTabPanel
             actions={actions}
             dispatch={dispatch}