implement search bar feature

Author: medyo

src/App.css

@@ -89,7 +89,6 @@ a {
 .extras {
 
   flex-direction: row;
-  margin-left: auto;
   margin-right: 16px;
   align-content: center;
 
@@ -403,7 +402,6 @@ a {
   align-self: flex-start;
   display: flex;
   flex-direction: row;
-  margin-top: 6px;
   flex-wrap: wrap;
   gap: 4px;
 }
@@ -705,6 +703,26 @@ Producthunt item
   background-color: var(--tooltip-accent-color);
 }
 
+.searchBar {
+  position: relative;
+  margin: 0 auto;
+  margin-top: 6px;
+}
+.searchBarIcon {
+  position: absolute;
+  height: 46px;
+  margin: 0 16px;
+}
+.searchBarInput {
+  border-radius: 50px;
+  border:1px solid var(--card-border-color);
+  box-shadow: 0 0 20px var(--card-border-color);
+  height: 42px;
+  padding:0 32px 0 40px;
+  width:600px;
+  background-color: var(--card-header-background-color);
+}
+
 .tooltipLoading {
   display: flex;
   justify-content: center;
@@ -770,9 +788,15 @@ Producthunt item
     width: 0px;
     background: transparent; 
   }
+  .searchBar {
+    display: none;
+  }
   .slogan {
     display: none;
   }
+  .tags {
+    margin-top: 6px;
+  }
   .changelogButton {
     display: none;
   }

src/App.js

@@ -37,6 +37,7 @@ function App() {
       theme: getOSMode(),
       openLinksNewTab: true,
       listingMode: 'normal',
+      searchEngine: 'Google',
       cards: [
         { id: 0, name: 'github' },
         { id: 1, name: 'hackernews' },

src/Constants.js

@@ -109,6 +109,32 @@ export const SUPPORTED_CARDS = [
   },
 ]
 
+export const SUPPORTED_SEARCH_ENGINES = [
+  {
+    label: 'Google',
+    url: 'https://google.com/search?q=',
+  },
+  {
+    label: 'DuckDuckGo',
+    url: 'https://duckduckgo.com?q=',
+  },
+  {
+    label: 'Bing',
+    url: 'https://bing.com/search?q=',
+  },
+  {
+    label: 'Yahoo',
+    url: 'https://search.yahoo.com/search?p=',
+  },
+  {
+    label: 'Baidu',
+    url: 'https://baidu.com/s?wd=',
+  },
+  {
+    label: 'Yandex',
+    url: 'https://yandex.ru/search/?text=',
+  },
+]
 export const LS_PREFERENCES_KEY = 'hackerTabPrefs'
 export const LS_ANALYTICS_ID_KEY = 'hackerTabAnalyticsId'
 

src/components/Header.js

@@ -4,13 +4,43 @@ import { CgTab } from 'react-icons/cg';
 import { BsFillBookmarksFill } from "react-icons/bs"
 import { ReactComponent as HackertabLogo } from '../logo.svg';
 import UserTags from "./UserTags";
-import { APP } from '../Constants';
-import SettingsModal from "../settings/SettingsModal";
+import { SUPPORTED_SEARCH_ENGINES } from '../Constants'
+import SettingsModal from '../settings/SettingsModal'
 import { BsMoon } from 'react-icons/bs'
 import { IoMdSunny } from 'react-icons/io'
-import { trackThemeChange } from '../utils/Analytics'
+import { trackThemeChange, trackSearch } from '../utils/Analytics'
 import Changelog from './Changelog'
+import { GoSearch } from 'react-icons/go'
 
+function SearchBar({ state }) {
+  const keywordsInputRef = React.useRef(null)
+  const userSearchEngine = SUPPORTED_SEARCH_ENGINES.find(
+    (engine) => engine.label == state.searchEngine
+  )
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    const keywords = e.target.children[1].value
+    trackSearch(userSearchEngine.label)
+    window.open(`${userSearchEngine.url}${keywords}`, '_self')
+  }
+
+  useEffect(() => {
+    keywordsInputRef.current.focus()
+  }, [])
+
+  return (
+    <form className="searchBar" onSubmit={handleSubmit}>
+      <GoSearch className="searchBarIcon" size={20} />
+      <input
+        ref={keywordsInputRef}
+        type="text"
+        className="searchBarInput"
+        placeholder={`Search on ${userSearchEngine.label}`}
+      />
+    </form>
+  )
+}
 function Header({ state, dispatcher, showSideBar, setShowSideBar, showSettings, setShowSettings }) {
   const [themeIcon, setThemeIcon] = useState(<BsMoon />)
   const isFirstRun = useRef(true)
@@ -68,7 +98,7 @@ function Header({ state, dispatcher, showSideBar, setShowSideBar, showSettings,
           <HackertabLogo className="logoText" />
           <Changelog />
         </span>
-        <div className="slogan">{APP.slogan}</div>
+        <SearchBar state={state} />
         <div className="extras">
           <button className="extraBtn" onClick={onSettingsClick}>
             <BsFillGearFill />

src/preferences/AppReducer.js

@@ -51,6 +51,9 @@ const AppReducer = (state, action) => {
         (bm) => bm.source !== value.source || bm.url !== value.url
       )
       break
+    case 'setSearchEngine':
+      newState = { ...newState, searchEngine: value.label }
+      break
     default:
       throw new Error()
   }
@@ -63,6 +66,7 @@ const AppReducer = (state, action) => {
     listingMode: newState.listingMode,
     changelogMeta: newState.changelogMeta,
     userBookmarks: newState.userBookmarks,
+    searchEngine: newState.searchEngine,
   }
   AppStorage.setItem(LS_PREFERENCES_KEY, storageData)
   return newState

src/settings/SettingsModal.js

@@ -8,17 +8,23 @@ import '../App.css';
 import './settings.css';
 import PreferencesContext from '../preferences/PreferencesContext';
 import ConfigurationContext from '../configuration/ConfigurationContext';
-import { SUPPORTED_CARDS, APP } from '../Constants'
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { trackAddLanguage, trackRemoveLanguage, trackAddCard, trackRemoveCard,
-  trackOpenLinksNewTab, trackListingModeChange } from "../utils/Analytics"
+import { SUPPORTED_CARDS, SUPPORTED_SEARCH_ENGINES, APP } from '../Constants'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import {
+  trackAddLanguage,
+  trackRemoveLanguage,
+  trackAddCard,
+  trackRemoveCard,
+  trackOpenLinksNewTab,
+  trackListingModeChange,
+} from '../utils/Analytics'
 
 function SettingsModal({ showSettings, setShowSettings }) {
-
   const { supportedTags } = useContext(ConfigurationContext)
   const preferences = useContext(PreferencesContext)
-  const { dispatcher, cards, userSelectedTags, openLinksNewTab, listingMode, theme } = preferences
+  const { dispatcher, cards, userSelectedTags, openLinksNewTab, listingMode, theme, searchEngine } =
+    preferences
   const [selectedCards, setSelectedCards] = useState(cards)
 
   const handleCloseModal = () => {
@@ -73,6 +79,10 @@ function SettingsModal({ showSettings, setShowSettings }) {
     dispatcher({ type: 'setCards', value: newCards })
   }
 
+  const onSearchEngineSelectChange = (value) => {
+    dispatcher({ type: 'setSearchEngine', value })
+  }
+
   const onOpenLinksNewTabChange = (e) => {
     const checked = e.target.checked
     trackOpenLinksNewTab(checked)
@@ -171,6 +181,27 @@ function SettingsModal({ showSettings, setShowSettings }) {
             />
           </div>
         </div>
+
+        <div className="settingRow">
+          <p className="settingTitle">Favorite search engine</p>
+          <div className="settingContent">
+            <Select
+              options={SUPPORTED_SEARCH_ENGINES}
+              value={SUPPORTED_SEARCH_ENGINES.find((e) => e.label == searchEngine)}
+              isMulti={false}
+              isClearable={false}
+              isSearchable={false}
+              classNamePrefix={'hackertab'}
+              onChange={onSearchEngineSelectChange}
+            />
+            <p className="settingHint">
+              Missing a search engine? create an issue{' '}
+              <a href="#" onClick={(e) => window.open(APP.supportLink, '_blank')}>
+                here
+              </a>
+            </p>
+          </div>
+        </div>
       </div>
       <ToastContainer />
     </ReactModal>