Added search bar

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=1.4.4
+REACT_APP_VERSION=1.5.0

client/src/components/Home/Home.tsx

@@ -22,6 +22,7 @@ import classes from './Home.module.css';
 import AppGrid from '../Apps/AppGrid/AppGrid';
 import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
 import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
+import SearchBox from '../SearchBox/SearchBox';
 
 // Functions
 import { greeter } from './functions/greeter';
@@ -87,6 +88,11 @@ const Home = (props: ComponentProps): JSX.Element => {
   
   return (
     <Container>
+      {searchConfig('hideSearch', 0) !== 1
+        ? <SearchBox />
+        : <div></div>
+      }
+
       {searchConfig('hideHeader', 0) !== 1
         ? (
           <header className={classes.Header}>

client/src/components/SearchBox/SearchBox.module.css

@@ -0,0 +1,17 @@
+.SearchBox {
+  width: 100%;
+  padding: 10px 0;
+  color: var(--color-primary);
+  /* font-size: 20px; */
+  margin-bottom: 20px;
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid var(--color-accent);
+  opacity: 0.5;
+  transition: all 0.2s;
+}
+
+.SearchBox:focus {
+  opacity: 1;
+  outline: none;
+}

client/src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,29 @@
+import { useRef, useEffect, KeyboardEvent } from 'react';
+
+import classes from './SearchBox.module.css';
+import { searchParser } from '../../utility';
+
+const SearchBox = (): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [])
+
+  const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === 'Enter') {
+      searchParser(inputRef.current.value);
+    }
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type='text'
+      className={classes.SearchBox}
+      onKeyDown={(e) => searchHandler(e)}
+    />
+  )
+}
+
+export default SearchBox;

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -34,6 +34,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     hideHeader: 0,
     hideApps: 0,
     hideCategories: 0,
+    hideSearch: 0,
     useOrdering: 'createdAt',
     openSameTab: 0
   })
@@ -47,6 +48,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
       hideHeader: searchConfig('hideHeader', 0),
       hideApps: searchConfig('hideApps', 0),
       hideCategories: searchConfig('hideCategories', 0),
+      hideSearch: searchConfig('hideSearch', 0),
       useOrdering: searchConfig('useOrdering', 'createdAt'),
       openSameTab: searchConfig('openSameTab', 0)
     })
@@ -151,6 +153,18 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
 
       {/* MODULES OPTIONS */}
       <h2 className={classes.SettingsSection}>Modules</h2>
+      <InputGroup>
+        <label htmlFor='hideSearch'>Hide search bar</label>
+        <select
+          id='hideSearch'
+          name='hideSearch'
+          value={formData.hideSearch}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
       <InputGroup>
         <label htmlFor='hideHeader'>Hide greeting and date</label>
         <select

client/src/interfaces/Forms.ts

@@ -12,6 +12,7 @@ export interface SettingsForm {
   hideHeader: number;
   hideApps: number;
   hideCategories: number;
+  hideSearch: number;
   useOrdering: string;
   openSameTab: number;
 }

client/src/interfaces/Query.ts

@@ -0,0 +1,5 @@
+export interface Query {
+  name: string;
+  prefix: string;
+  template: string;
+}

client/src/interfaces/index.ts

@@ -7,4 +7,5 @@ export * from './Bookmark';
 export * from './Category';
 export * from './Notification';
 export * from './Config';
-export * from './Forms';
+export * from './Forms';
+export * from './Query';

client/src/utility/index.ts

@@ -2,4 +2,5 @@ export * from './iconParser';
 export * from './urlParser';
 export * from './searchConfig';
 export * from './checkVersion';
-export * from './sortData';
+export * from './sortData';
+export * from './searchParser';

client/src/utility/searchParser.ts

@@ -0,0 +1,22 @@
+import { queries } from './searchQueries.json';
+import { Query } from '../interfaces';
+
+import { searchConfig } from '.';
+
+export const searchParser = (searchQuery: string): void => {
+  const space = searchQuery.indexOf(' ');
+  const prefix = searchQuery.slice(1, space);
+  const search = encodeURIComponent(searchQuery.slice(space + 1));
+
+  const query = queries.find((q: Query) => q.prefix === prefix);
+
+  if (query) {
+    const sameTab = searchConfig('openSameTab', false);
+
+    if (sameTab) {
+      document.location.replace(`${query.template}${search}`);
+    } else {
+      window.open(`${query.template}${search}`);
+    }
+  }
+}

client/src/utility/searchQueries.json

@@ -0,0 +1,39 @@
+{
+  "queries": [
+    {
+      "name": "Google",
+      "prefix": "g",
+      "template": "https://www.google.com/search?q="
+    },
+    {
+      "name": "DuckDuckGo",
+      "prefix": "d",
+      "template": "https://duckduckgo.com/?q="
+    },
+    {
+      "name": "Disroot",
+      "prefix": "ds",
+      "template": "http://search.disroot.org/search?q="
+    },
+    {
+      "name": "YouTube",
+      "prefix": "yt",
+      "template": "https://www.youtube.com/results?search_query="
+    },
+    {
+      "name": "Reddit",
+      "prefix": "r",
+      "template": "https://www.reddit.com/search?q="
+    },
+    {
+      "name": "IMDb",
+      "prefix": "im",
+      "template": "https://www.imdb.com/find?q="
+    },
+    {
+      "name": "The Movie Database",
+      "prefix": "mv",
+      "template": "https://www.themoviedb.org/search?query="
+    }
+  ]
+}