control tabs with keyboard

Author: yessGlory17

package.json

@@ -15,6 +15,7 @@
     "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
     "package:win": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --win",
     "package:linux": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --linux",
+    "deploy": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish always",
     "prepare": "husky install",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",

src/renderer/App.tsx

@@ -29,6 +29,7 @@ import List from './components/List';
 import Searchbar from './components/Searchbar';
 import Webview from './components/Webview';
 import {SearchContextProvider } from './context/SearchContext';
+import { TabContextProvider } from './context/TabContext';
 
 
 const Hello = () => {
@@ -38,8 +39,10 @@ const Hello = () => {
       {/* Searchbar */}
       <SearchContextProvider>
         <Container centerContent paddingTop='10px'>
-          <Searchbar />
-          <List />
+          <TabContextProvider>
+            <Searchbar />
+            <List />
+          </TabContextProvider>
         </Container>
       </SearchContextProvider>
     </div>

src/renderer/components/BrowserCollapse.tsx

@@ -21,13 +21,16 @@ import { SearchContext } from 'renderer/context/SearchContext';
 import { AiOutlineLeft, AiOutlineRight, AiOutlineClose } from 'react-icons/ai';
 import Webview from './Webview';
 
-const BrowserCollapse = ({ name, tabUrl, tabId }) => {
+const BrowserCollapse = ({ name, tabUrl, tabId, onOpen, index }) => {
   const webviewRef = useRef();
 
   const [collapseName, setCollapseName] = useState(name);
 
   const { closeTab } = useContext(SearchContext);
 
+
+
+
   const close = (id: any) => closeTab(id);
 
   const back = (e: MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -55,9 +58,9 @@ const BrowserCollapse = ({ name, tabUrl, tabId }) => {
     return webviewRef.current.getTitle();
   };
   return (
-    <AccordionItem border="none">
+    <AccordionItem border="none"  >
       <h2>
-        <AccordionButton _expanded={{ bg: '#03c9d7', color: 'white' }}>
+        <AccordionButton _expanded={{ bg: '#03c9d7', color: 'white' }} onClick={()=> onOpen(index)} >
           <IconButton
             backgroundColor="#32363e"
             _hover={{ bg: '#32363e' }}

src/renderer/components/List.tsx

@@ -1,18 +1,36 @@
 import { Accordion } from "@chakra-ui/react";
-import { useContext } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { SearchContext } from "renderer/context/SearchContext";
+import { TabContext } from "renderer/context/TabContext";
 import BrowserCollapse from "./BrowserCollapse";
 
 const List = () => {
 
   const {tabs} = useContext(SearchContext);
 
+  const {
+    currentTabIndex,
+    setTabIndex
+  } = useContext(TabContext);
+
+  const onOpen = (index) => {
+
+    if(currentTabIndex == index) {
+      setTabIndex(null)
+    }else{
+      setTabIndex(index)
+    }
+
+    console.log(tabs);
+  }
+
+
   return (
     <div>
-     <Accordion width='95vw' allowToggle _hover={{}}
+     <Accordion width='95vw' allowToggle _hover={{}} index={currentTabIndex}
       border='none' backgroundColor='#32363e' margin='10px' overflowY='scroll' >
         {tabs.map((tab,index)=>(
-            <BrowserCollapse key={index} name={tab.keyword} tabUrl={tab.url} tabId={tab.tabId}/>
+            <BrowserCollapse key={index} name={tab.keyword} tabUrl={tab.url} tabId={tab.tabId} onOpen={onOpen} index={index}/>
           ))}
       </Accordion>
     </div>

src/renderer/components/Searchbar.tsx

@@ -6,94 +6,103 @@ import {
   InputLeftAddon,
   InputRightElement,
   HStack,
-  Select
+  Select,
 } from '@chakra-ui/react';
-import {useCallback, useContext, useEffect,useState} from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { SearchContext } from 'renderer/context/SearchContext';
-import {FcGoogle} from 'react-icons/fc';
-import {SiDuckduckgo} from 'react-icons/si';
-import {FaYandexInternational} from 'react-icons/fa';
+import { FcGoogle } from 'react-icons/fc';
+import { SiDuckduckgo } from 'react-icons/si';
+import { FaYandexInternational } from 'react-icons/fa';
 import '../App.css';
+import { TabContext } from 'renderer/context/TabContext';
 import SearchEngineModal from './Settings/SearchEngineModal';
 
 const Searchbar = ({}) => {
-
   const [isModalOpen, setModal] = useState(false);
 
   const onClose = () => setModal(!isModalOpen);
 
-  const {
-    url,
-    setUrl,
-    keyword,
-    setKeyword,
-    onChange,
-    search,
-    searchEngine
-  } = useContext(SearchContext);
+  const { url, setUrl, keyword, setKeyword, onChange, search, searchEngine } =
+    useContext(SearchContext);
 
+  const { nexTab,setTabIndex } = useContext(TabContext);
 
-  const handleSetSearchEngineShortcut = useCallback((event)=>{
-    if(event.ctrlKey && (event.key === 'E' || event.key === 'e')){
+  const handleSetSearchEngineShortcut = useCallback((event) => {
+    if (event.ctrlKey && (event.key === 'E' || event.key === 'e')) {
       onClose();
     }
-  })
 
-  useEffect(()=>{
-    document.addEventListener('keydown',handleSetSearchEngineShortcut);
+    nexTab(event);
+
+
+
+  });
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleSetSearchEngineShortcut);
 
     return () => {
-      document.removeEventListener('keydown',handleSetSearchEngineShortcut);
-    }
-  },[])
+      document.removeEventListener('keydown', handleSetSearchEngineShortcut);
+    };
+  }, []);
 
   const getEngineIcon = () => {
-      switch(searchEngine){
-        case "https://www.google.com/search?q=":
-          return <FcGoogle />
-        case "https://yandex.com.tr/search/?text=":
-          return <FaYandexInternational/>
-        case "https://duckduckgo.com/?q=":
-          return <SiDuckduckgo />
-      }
-  }
+    switch (searchEngine) {
+      case 'https://www.google.com/search?q=':
+        return <FcGoogle />;
+      case 'https://yandex.com.tr/search/?text=':
+        return <FaYandexInternational />;
+      case 'https://duckduckgo.com/?q=':
+        return <SiDuckduckgo />;
+    }
+  };
 
   return (
     <>
-      <HStack w='95vw' >
-        <InputGroup size='md' h='40px' id='search-bar-container'
-        >
-          <InputLeftAddon h='40px' children={getEngineIcon()} color='white' backgroundColor='#32363e' border='none'  onClick={onClose} />
-          <Input variant='filled' placeholder='Search' autoFocus
-            onKeyDown={e => e.key === 'Enter' && search()}
+      <HStack w="95vw">
+        <InputGroup size="md" h="40px" id="search-bar-container">
+          <InputLeftAddon
+            h="40px"
+            children={getEngineIcon()}
+            color="white"
+            backgroundColor="#32363e"
+            border="none"
+            onClick={onClose}
+          />
+          <Input
+            variant="filled"
+            placeholder="Search"
+            autoFocus
+            onKeyDown={(e) => e.key === 'Enter' && search()}
             onChange={onChange}
-            backgroundColor='#32363e'
-            _focus={{backgroundColor:'#32363e'}}
-            _hover={{backgroundColor:'#32363e'}}
-            />
+            backgroundColor="#32363e"
+            _focus={{ backgroundColor: '#32363e' }}
+            _hover={{ backgroundColor: '#32363e' }}
+          />
 
           <InputRightElement>
-            <Button h='40px' w='40px' size='sm'
+            <Button
+              h="40px"
+              w="40px"
+              size="sm"
               leftIcon={<SearchIcon />}
-              backgroundColor='#32363e'
-              variant='solid'
+              backgroundColor="#32363e"
+              variant="solid"
               onClick={search}
               _hover={{
-                backgroundColor:'#32363e',
+                backgroundColor: '#32363e',
               }}
               _focus={{
-                backgroundColor:'#32363e',
-                outline:'none'
+                backgroundColor: '#32363e',
+                outline: 'none',
               }}
-            >
-            </Button>
+            />
           </InputRightElement>
         </InputGroup>
-
       </HStack>
       <SearchEngineModal isOpen={isModalOpen} onClose={onClose} />
     </>
   );
-}
+};
 
 export default Searchbar;

src/renderer/context/TabContext.tsx

@@ -0,0 +1,43 @@
+import { createContext, useCallback, useContext, useState } from 'react';
+import { SearchContext } from './SearchContext';
+
+export const TabContext = createContext();
+
+export const TabContextProvider = (props) => {
+  const [currentTabIndex, setTabIndex] = useState(0);
+
+  const { closeTab, tabs } = useContext(SearchContext);
+
+  const nexTab = (event) => {
+
+    if (event.ctrlKey && isFinite(event.key)) {
+      // if (Number(event.key) - 1 == currentTabIndex) {
+      //   setTabIndex(null);
+      // } else {
+      //   setTabIndex(Number(event.key) - 1);
+      // }
+
+
+
+      setTabIndex(Number(event.key) - 1);
+
+    }
+
+    if (event.altKey && (event.key === 'X' || event.key === 'x')) {
+      console.log('tab id', tabs);
+      //closeTab(tabs)
+    }
+  };
+
+  return (
+    <TabContext.Provider
+      value={{
+        currentTabIndex,
+        setTabIndex,
+        nexTab,
+      }}
+    >
+      {props.children}
+    </TabContext.Provider>
+  );
+};