Merge pull request #7 from yessGlory17/change-search-engine

search engine settings

Author: yessGlory17

package-lock.json

@@ -36,6 +36,10 @@ const BrowserCollapse = ({name, tabUrl, tabId}) => {
     webviewRef.current.canGoForward() && webviewRef.current.goForward()
   }
 
+  const refresh = (e) => {
+    e.preventDefault();
+    webviewRef.current.isLoading() ? webviewRef.current.stop() : webviewRef.current.reload();
+  }
 
   const getTitle = () => {
     if(webviewRef.current === undefined){
@@ -67,7 +71,19 @@ const BrowserCollapse = ({name, tabUrl, tabId}) => {
               onClick={(e)=>forward(e)}
               icon={<AiOutlineRight _hover={{color:'red'}} />}
             />
+            <IconButton
+              backgroundColor="#32363e"
+              marginRight='10px'
+              _hover={{ bg: '#32363e' }}
+              size='xs'
+              onClick={(e) => refresh(e)}
+              icon={
+                <RepeatIcon
+                  _hover={{ color: 'yellow' }}
 
+                />
+              }
+            />
             <IconButton
               backgroundColor="#32363e"
               _hover={{ bg: '#32363e' }}

src/renderer/components/BrowserCollapse.tsx

@@ -5,13 +5,21 @@ import {
   InputGroup,
   InputLeftAddon,
   InputRightElement,
-  HStack
+  HStack,
+  Select
 } from '@chakra-ui/react';
-import {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 '../App.css';
+import SearchEngineModal from './Settings/SearchEngineModal';
+
 const Searchbar = ({}) => {
 
+  const [isModalOpen, setModal] = useState(false);
+
+  const onClose = () => setModal(!isModalOpen);
+
   const {
     url,
     setUrl,
@@ -21,12 +29,27 @@ const Searchbar = ({}) => {
     search
   } = useContext(SearchContext);
 
+
+  const handleSetSearchEngineShortcut = useCallback((event)=>{
+    if(event.ctrlKey && (event.key === 'E' || event.key === 'e')){
+      onClose();
+    }
+  })
+
+  useEffect(()=>{
+    document.addEventListener('keydown',handleSetSearchEngineShortcut);
+
+    return () => {
+      document.removeEventListener('keydown',handleSetSearchEngineShortcut);
+    }
+  },[])
+
   return (
     <>
       <HStack w='95vw' >
         <InputGroup size='md' h='40px' id='search-bar-container'
         >
-          {/* <InputLeftAddon h='40px' children='Google' color='white' backgroundColor='teal' /> */}
+          <InputLeftAddon h='40px' children={<FcGoogle />} color='white' backgroundColor='#32363e' border='none'  onClick={onClose} />
           <Input variant='filled' placeholder='Search' autoFocus
             onKeyDown={e => e.key === 'Enter' && search()}
             onChange={onChange}
@@ -54,7 +77,7 @@ const Searchbar = ({}) => {
         </InputGroup>
 
       </HStack>
-
+      <SearchEngineModal isOpen={isModalOpen} onClose={onClose} />
     </>
   );
 }

src/renderer/components/Searchbar.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useContext } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  Select,
+} from '@chakra-ui/react';
+
+import { SearchContext } from '../../context/SearchContext';
+
+// eslint-disable-next-line react/prop-types
+const SearchEngineModal = ({ isOpen, onClose }) => {
+  const {
+    url,
+    setUrl,
+    keyword,
+    setKeyword,
+    onChange,
+    search,
+    setSearchEngine,
+    searchEngine
+  } = useContext(SearchContext);
+
+  const onChangeSelect = (event) => setSearchEngine(event.target.value);
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay  />
+        <ModalContent
+          backgroundColor="#32363e"
+          onChange={(e) => onChangeSelect(e)}
+        >
+          <ModalHeader>Search Engine Settings</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody marginBottom='20px' >
+            <Select
+              value={searchEngine}
+              backgroundColor={{ backgroundColor: '#32363e' }}
+            >
+              <option value='https://www.google.com/search?q=' style={{backgroundColor:'#32363e'}} > Google</option>
+              <option value='https://duckduckgo.com/?q=' style={{backgroundColor:'#32363e'}}>DucDuckGo</option>
+              <option value='https://yandex.com.tr/search/?text=' style={{backgroundColor:'#32363e'}}>Yandex</option>
+            </Select>
+          </ModalBody>
+
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+export default SearchEngineModal;