From 0c3a27febda3277df9fc4db0109047d96456aed7 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 25 Jun 2021 10:42:44 +0200 Subject: [PATCH] Added warning about unsupported prefix. Added support for Spotify search. Edited README file --- README.md | 9 +++- client/.env | 2 +- client/src/components/Home/Home.tsx | 4 +- .../SearchBar.module.css} | 4 +- client/src/components/SearchBar/SearchBar.tsx | 50 +++++++++++++++++++ client/src/components/SearchBox/SearchBox.tsx | 29 ----------- client/src/utility/searchParser.ts | 6 ++- client/src/utility/searchQueries.json | 5 ++ middleware/multer.js | 2 +- 9 files changed, 73 insertions(+), 38 deletions(-) rename client/src/components/{SearchBox/SearchBox.module.css => SearchBar/SearchBar.module.css} (89%) create mode 100644 client/src/components/SearchBar/SearchBar.tsx delete mode 100644 client/src/components/SearchBox/SearchBox.tsx diff --git a/README.md b/README.md index cca0f49..63c10de 100644 --- a/README.md +++ b/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= | diff --git a/client/.env b/client/.env index 70acd43..6079712 100644 --- a/client/.env +++ b/client/.env @@ -1 +1 @@ -REACT_APP_VERSION=1.5.0 \ No newline at end of file +REACT_APP_VERSION=1.5.1 \ No newline at end of file diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index 2682d50..ece4a8a 100644 --- a/client/src/components/Home/Home.tsx +++ b/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 ( {searchConfig('hideSearch', 0) !== 1 - ? + ? :
} diff --git a/client/src/components/SearchBox/SearchBox.module.css b/client/src/components/SearchBar/SearchBar.module.css similarity index 89% rename from client/src/components/SearchBox/SearchBox.module.css rename to client/src/components/SearchBar/SearchBar.module.css index d9fbb4e..1a1492b 100644 --- a/client/src/components/SearchBox/SearchBox.module.css +++ b/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; } \ No newline at end of file diff --git a/client/src/components/SearchBar/SearchBar.tsx b/client/src/components/SearchBar/SearchBar.tsx new file mode 100644 index 0000000..029f175 --- /dev/null +++ b/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(document.createElement('input')); + + useEffect(() => { + inputRef.current.focus(); + }, []) + + const searchHandler = (e: KeyboardEvent) => { + if (e.code === 'Enter') { + const prefixFound = searchParser(inputRef.current.value); + + if (!prefixFound) { + props.createNotification({ + title: 'Error', + message: 'Prefix not found' + }) + } + } + } + + return ( + searchHandler(e)} + /> + ) +} + +export default connect(null, { createNotification })(SearchBar); \ No newline at end of file diff --git a/client/src/components/SearchBox/SearchBox.tsx b/client/src/components/SearchBox/SearchBox.tsx deleted file mode 100644 index ebc0cc6..0000000 --- a/client/src/components/SearchBox/SearchBox.tsx +++ /dev/null @@ -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(document.createElement('input')); - - useEffect(() => { - inputRef.current.focus(); - }, []) - - const searchHandler = (e: KeyboardEvent) => { - if (e.code === 'Enter') { - searchParser(inputRef.current.value); - } - } - - return ( - searchHandler(e)} - /> - ) -} - -export default SearchBox; \ No newline at end of file diff --git a/client/src/utility/searchParser.ts b/client/src/utility/searchParser.ts index 4bea43f..6cba533 100644 --- a/client/src/utility/searchParser.ts +++ b/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; } \ No newline at end of file diff --git a/client/src/utility/searchQueries.json b/client/src/utility/searchQueries.json index 47739c9..6e23503 100644 --- a/client/src/utility/searchQueries.json +++ b/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/" } ] } \ No newline at end of file diff --git a/middleware/multer.js b/middleware/multer.js index 8119477..b1314a9 100644 --- a/middleware/multer.js +++ b/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({