Added search bar

Author: pawelmalak

Dockerfile

@@ -10,7 +10,7 @@ RUN npm install --production
 
 COPY . .
 
-RUN mkdir -p ./public ./data ./data/uploads \
+RUN mkdir -p ./public ./data \
     && cd ./client \
     && npm install --production \
     && npm run build \

Dockerfile.multiarch

@@ -11,7 +11,7 @@ RUN apk --no-cache --virtual build-dependencies add python make g++ \
 
 COPY . .
 
-RUN mkdir -p ./public ./data ./data/uploads \
+RUN mkdir -p ./public ./data \
     && cd ./client \
     && npm install --production \
     && npm run build \

README.md

@@ -81,6 +81,23 @@ Follow instructions from wiki: [Installation without Docker](https://github.com/
 ![Homescreen screenshot](./github/_themes.png)
 
 ## Usage
+### Search bar
+> While opening links, module will follow `Open all links in the same tab` setting
+#### Supported search engines
+| Name       | Prefix | Search URL                          |
+|------------|--------|-------------------------------------|
+| Disroot    | /ds    | http://search.disroot.org/search?q= |
+| DuckDuckGo | /d     | https://duckduckgo.com/?q=          |
+| Google     | /g     | https://www.google.com/search?q=    |
+
+#### Supported services
+| Name               | Prefix | Search URL                                    |
+|--------------------|--------|-----------------------------------------------|
+| IMDb               | /im    | https://www.imdb.com/find?q=                  |
+| Reddit             | /r     | -https://www.reddit.com/search?q=             |
+| The Movie Database | /mv    | https://www.themoviedb.org/search?query=      |
+| Youtube            | /yt    | https://www.youtube.com/results?search_query= |
+
 ### Setting up weather module
 1. Obtain API Key from [Weather API](https://www.weatherapi.com/pricing.aspx).
    > Free plan allows for 1M calls per month. Flame is making less then 3K API calls per month.

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;
+}