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,28 +50,40 @@ 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">
-      {requestTabs && requestTabs.length ? (
+    <StyledWrapper>
+      {collectionRequestTabs && collectionRequestTabs.length ? (
+        <>
+          <CollectionTitleBar collection={activeCollection}/>
+          <div className="mt-1 flex items-center">
             <ul role="tablist">
               <li className="select-none new-tab mr-1" onClick={createNewTab}>
                 <div className="flex items-center home-icon-container">
                   <IconHome2 size={18} strokeWidth={1.5}/>
                 </div>
               </li>
-          {requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
+              {collectionRequestTabs && collectionRequestTabs.length ? collectionRequestTabs.map((rt, index) => {
                 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">
@@ -94,6 +119,8 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
                 </div>
               </li>
             </ul>
+          </div>
+        </>
       ) : 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"}}>
-            <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}
-          />
+          <RequestTabs/>
           <RequestTabPanel
             actions={actions}
             dispatch={dispatch}