Added warning about unsupported prefix. Added support for Spotify search. Edited README file

README.md

@@ -82,7 +82,11 @@ Follow instructions from wiki: [Installation without Docker](https://github.com/
 
 ## Usage
 ### Search bar
-> While opening links, module will follow `Open all links in the same tab` setting
+#### Searching
+To use search bar you need to type your search query with selected prefix. For example, to search for "what is docker" using google search you would type: `/g what is docker`.
+
+> You can change where to open search results (same/new tab) in the settings
+
 #### Supported search engines
 | Name       | Prefix | Search URL                          |
 |------------|--------|-------------------------------------|
@@ -94,7 +98,8 @@ Follow instructions from wiki: [Installation without Docker](https://github.com/
 | Name               | Prefix | Search URL                                    |
 |--------------------|--------|-----------------------------------------------|
 | IMDb               | /im    | https://www.imdb.com/find?q=                  |
-| Reddit             | /r     | -https://www.reddit.com/search?q=             |
+| Reddit             | /r     | https://www.reddit.com/search?q=              |
+| Spotify            | /sp    | https://open.spotify.com/search/              |
 | The Movie Database | /mv    | https://www.themoviedb.org/search?query=      |
 | Youtube            | /yt    | https://www.youtube.com/results?search_query= |
 

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=1.5.0
+REACT_APP_VERSION=1.5.1

client/src/components/Home/Home.tsx

@@ -22,7 +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';
+import SearchBar from '../SearchBar/SearchBar';
 
 // Functions
 import { greeter } from './functions/greeter';
@@ -89,7 +89,7 @@ const Home = (props: ComponentProps): JSX.Element => {
   return (
     <Container>
       {searchConfig('hideSearch', 0) !== 1
-        ? <SearchBox />
+        ? <SearchBar />
         : <div></div>
       }
 

client/src/components/SearchBar/SearchBar.module.css

@@ -1,4 +1,4 @@
-.SearchBox {
+.SearchBar {
   width: 100%;
   padding: 10px 0;
   color: var(--color-primary);
@@ -11,7 +11,7 @@
   transition: all 0.2s;
 }
 
-.SearchBox:focus {
+.SearchBar:focus {
   opacity: 1;
   outline: none;
 }

client/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,50 @@
+import { useRef, useEffect, KeyboardEvent } from 'react';
+
+// Redux
+import { connect } from 'react-redux';
+import { createNotification } from '../../store/actions';
+
+// Typescript
+import { NewNotification } from '../../interfaces';
+
+// CSS
+import classes from './SearchBar.module.css';
+
+// Utils
+import { searchParser } from '../../utility';
+
+interface ComponentProps {
+  createNotification: (notification: NewNotification) => void;
+}
+
+const SearchBar = (props: ComponentProps): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [])
+
+  const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === 'Enter') {
+      const prefixFound = searchParser(inputRef.current.value);
+
+      if (!prefixFound) {
+        props.createNotification({
+          title: 'Error',
+          message: 'Prefix not found'
+        })
+      }
+    }
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type='text'
+      className={classes.SearchBar}
+      onKeyDown={(e) => searchHandler(e)}
+    />
+  )
+}
+
+export default connect(null, { createNotification })(SearchBar);

client/src/components/SearchBox/SearchBox.tsx

@@ -1,29 +0,0 @@
-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/utility/searchParser.ts

@@ -3,7 +3,7 @@ import { Query } from '../interfaces';
 
 import { searchConfig } from '.';
 
-export const searchParser = (searchQuery: string): void => {
+export const searchParser = (searchQuery: string): boolean => {
   const space = searchQuery.indexOf(' ');
   const prefix = searchQuery.slice(1, space);
   const search = encodeURIComponent(searchQuery.slice(space + 1));
@@ -18,5 +18,9 @@ export const searchParser = (searchQuery: string): void => {
     } else {
       window.open(`${query.template}${search}`);
     }
+
+    return true;
   }
+
+  return false;
 }

client/src/utility/searchQueries.json

@@ -34,6 +34,11 @@
       "name": "The Movie Database",
       "prefix": "mv",
       "template": "https://www.themoviedb.org/search?query="
+    },
+    {
+      "name": "Spotify",
+      "prefix": "sp",
+      "template": "https://open.spotify.com/search/"
     }
   ]
 }

middleware/multer.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const multer = require('multer');
 
 if (!fs.existsSync('data/uploads')) {
-  fs.mkdirSync('data/uploads');
+  fs.mkdirSync('data/uploads', { recursive: true });
 }
 
 const storage = multer.diskStorage({