From 8026533a066b5cbfdf0f9b9e781e82a38d226829 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 24 Jun 2021 12:53:45 +0200 Subject: [PATCH] Added search bar --- Dockerfile | 2 +- Dockerfile.multiarch | 2 +- README.md | 17 ++++++++ client/.env | 2 +- client/src/components/Home/Home.tsx | 6 +++ .../components/SearchBox/SearchBox.module.css | 17 ++++++++ client/src/components/SearchBox/SearchBox.tsx | 29 ++++++++++++++ .../Settings/OtherSettings/OtherSettings.tsx | 14 +++++++ client/src/interfaces/Forms.ts | 1 + client/src/interfaces/Query.ts | 5 +++ client/src/interfaces/index.ts | 3 +- client/src/utility/index.ts | 3 +- client/src/utility/searchParser.ts | 22 +++++++++++ client/src/utility/searchQueries.json | 39 +++++++++++++++++++ db.js | 2 +- middleware/multer.js | 6 ++- package.json | 1 - utils/initialConfig.json | 4 ++ 18 files changed, 166 insertions(+), 9 deletions(-) create mode 100644 client/src/components/SearchBox/SearchBox.module.css create mode 100644 client/src/components/SearchBox/SearchBox.tsx create mode 100644 client/src/interfaces/Query.ts create mode 100644 client/src/utility/searchParser.ts create mode 100644 client/src/utility/searchQueries.json diff --git a/Dockerfile b/Dockerfile index ac2a11a..95ddea4 100644 --- a/Dockerfile +++ b/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 \ diff --git a/Dockerfile.multiarch b/Dockerfile.multiarch index c379e7b..808b815 100644 --- a/Dockerfile.multiarch +++ b/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 \ diff --git a/README.md b/README.md index 9c86503..cca0f49 100644 --- a/README.md +++ b/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. diff --git a/client/.env b/client/.env index c86ae30..70acd43 100644 --- a/client/.env +++ b/client/.env @@ -1 +1 @@ -REACT_APP_VERSION=1.4.4 \ No newline at end of file +REACT_APP_VERSION=1.5.0 \ No newline at end of file diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index 3742234..2682d50 100644 --- a/client/src/components/Home/Home.tsx +++ b/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 ( + {searchConfig('hideSearch', 0) !== 1 + ? + :
+ } + {searchConfig('hideHeader', 0) !== 1 ? (
diff --git a/client/src/components/SearchBox/SearchBox.module.css b/client/src/components/SearchBox/SearchBox.module.css new file mode 100644 index 0000000..d9fbb4e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/client/src/components/SearchBox/SearchBox.tsx b/client/src/components/SearchBox/SearchBox.tsx new file mode 100644 index 0000000..ebc0cc6 --- /dev/null +++ b/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(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/components/Settings/OtherSettings/OtherSettings.tsx b/client/src/components/Settings/OtherSettings/OtherSettings.tsx index b3e4c3e..329b068 100644 --- a/client/src/components/Settings/OtherSettings/OtherSettings.tsx +++ b/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 */}

Modules

+ + + +