From 44368851ed5f16a4c20650ad92afa995b92d99f0 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Fri, 11 Mar 2022 22:19:11 +0530 Subject: [PATCH] feat: CollectionTitleBar Component --- .../CollectionTitleBar/StyledWrapper.js | 6 + .../RequestTabs/CollectionTitleBar/index.js | 18 +++ renderer/components/RequestTabs/index.js | 119 +++++++++++------- renderer/pageComponents/Main/index.js | 17 +-- 4 files changed, 99 insertions(+), 61 deletions(-) create mode 100644 renderer/components/RequestTabs/CollectionTitleBar/StyledWrapper.js create mode 100644 renderer/components/RequestTabs/CollectionTitleBar/index.js diff --git a/renderer/components/RequestTabs/CollectionTitleBar/StyledWrapper.js b/renderer/components/RequestTabs/CollectionTitleBar/StyledWrapper.js new file mode 100644 index 000000000..195b0632f --- /dev/null +++ b/renderer/components/RequestTabs/CollectionTitleBar/StyledWrapper.js @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` +`; + +export default StyledWrapper; \ No newline at end of file diff --git a/renderer/components/RequestTabs/CollectionTitleBar/index.js b/renderer/components/RequestTabs/CollectionTitleBar/index.js new file mode 100644 index 000000000..1aa4458f7 --- /dev/null +++ b/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 ( + +
+ + anoop/{collection.name} + + from anoop/notebase +
+ + ) +}; + +export default CollectionTitleBar; diff --git a/renderer/components/RequestTabs/index.js b/renderer/components/RequestTabs/index.js index 1d4e33915..f6a6eb445 100644 --- a/renderer/components/RequestTabs/index.js +++ b/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 ( - - {requestTabs && requestTabs.length ? ( - + +
  • +
    + + + +
    +
    • + + + ) : null}     ); diff --git a/renderer/pageComponents/Main/index.js b/renderer/pageComponents/Main/index.js index 7bc98ff4c..939041845 100644 --- a/renderer/pageComponents/Main/index.js +++ b/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} />
    -
    - - spacex - - main -
    - +