From 07cd725d4a90ad0664da7db4c47f64801b14e34f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Malak?= Date: Sun, 14 Nov 2021 23:20:37 +0100 Subject: [PATCH] Added new search bar shortcut. Fixed bug with forms still being visible after logout. Fixed bug with config fetching order --- README.md | 18 +++++------- client/src/App.tsx | 29 ++++++++----------- client/src/components/Apps/Apps.tsx | 8 +++++ client/src/components/Bookmarks/Bookmarks.tsx | 8 +++++ .../Bookmarks/Form/CategoryForm.tsx | 6 ++-- client/src/components/SearchBar/SearchBar.tsx | 9 ++++-- 6 files changed, 46 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 74da10b133f1dfe624e0b8f5e41ca11926532481..ba640e54284a2b80d6d860665774e670e7975321 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,13 @@ docker pull pawelmalak/flame:multiarch docker pull pawelmalak/flame:2.0.0 ``` +#### Deployment + +```sh +# run container +docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password flame +``` + #### Building images ```sh @@ -45,13 +52,6 @@ docker buildx build \ -t flame:multiarch . ``` -#### Deployment - -```sh -# run container -docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password flame -``` - #### Docker-Compose ```yaml @@ -130,9 +130,7 @@ Visit [project wiki](https://github.com/pawelmalak/flame/wiki/Authentication) to #### 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 +The default search setting is to search through all your apps and bookmarks. If you want to search using specific search engine, 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`. For list of supported search engines, shortcuts and more about searching functionality visit [project wiki](https://github.com/pawelmalak/flame/wiki/Search-bar). diff --git a/client/src/App.tsx b/client/src/App.tsx index d7668a8f47ed4d760c12b90a300b631fa7f4bbf5..2e4c72e257627de12e24d8934cc9d33971be26cd 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,5 +1,6 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'; -import { actionCreators } from './store'; +import { autoLogin, getConfig } from './store/action-creators'; +import { actionCreators, store } from './store'; import 'external-svg-loader'; // Utils @@ -15,23 +16,20 @@ import { useDispatch } from 'react-redux'; import { bindActionCreators } from 'redux'; import { useEffect } from 'react'; +// Get config +store.dispatch(getConfig()); + +// Validate token +if (localStorage.token) { + store.dispatch(autoLogin()); +} + export const App = (): JSX.Element => { const dispath = useDispatch(); - const { - fetchQueries, - getConfig, - setTheme, - logout, - createNotification, - autoLogin, - } = bindActionCreators(actionCreators, dispath); + const { fetchQueries, setTheme, logout, createNotification } = + bindActionCreators(actionCreators, dispath); useEffect(() => { - // login if token exists - if (localStorage.token) { - autoLogin(); - } - // check if token is valid const tokenIsValid = setInterval(() => { if (localStorage.token) { @@ -48,9 +46,6 @@ export const App = (): JSX.Element => { } }, 1000); - // load app config - getConfig(); - // set theme if (localStorage.theme) { setTheme(localStorage.theme); diff --git a/client/src/components/Apps/Apps.tsx b/client/src/components/Apps/Apps.tsx index 2d2d588d4ffa14437d98783c2899a3d076d55bd1..9ccb0d48b48ab9ed3c662afb620ccc286fa4d07e 100644 --- a/client/src/components/Apps/Apps.tsx +++ b/client/src/components/Apps/Apps.tsx @@ -48,6 +48,14 @@ export const Apps = (props: Props): JSX.Element => { } }, []); + // observe if user is authenticated -> set default view if not + useEffect(() => { + if (!isAuthenticated) { + setIsInEdit(false); + setModalIsOpen(false); + } + }, [isAuthenticated]); + const toggleModal = (): void => { setModalIsOpen(!modalIsOpen); setIsInUpdate(false); diff --git a/client/src/components/Bookmarks/Bookmarks.tsx b/client/src/components/Bookmarks/Bookmarks.tsx index cee07fe3c15954a84faf376c38afad9b44fb4aaf..62a2e1597f7ed238d2754cd0709025eec9cdaf02 100644 --- a/client/src/components/Bookmarks/Bookmarks.tsx +++ b/client/src/components/Bookmarks/Bookmarks.tsx @@ -60,6 +60,14 @@ export const Bookmarks = (props: Props): JSX.Element => { } }, []); + // observe if user is authenticated -> set default view if not + useEffect(() => { + if (!isAuthenticated) { + setIsInEdit(false); + setModalIsOpen(false); + } + }, [isAuthenticated]); + const toggleModal = (): void => { setModalIsOpen(!modalIsOpen); }; diff --git a/client/src/components/Bookmarks/Form/CategoryForm.tsx b/client/src/components/Bookmarks/Form/CategoryForm.tsx index 3daa68f8f3c6cfbf24a1ba9e92075b992af31a94..c7e01052b229eb461b6d08f76c7db5f5b139bb73 100644 --- a/client/src/components/Bookmarks/Form/CategoryForm.tsx +++ b/client/src/components/Bookmarks/Form/CategoryForm.tsx @@ -60,10 +60,10 @@ export const CategoryForm = ({ addCategory(formData); } else { updateCategory(category.id, formData); - - setFormData(newCategoryTemplate); - modalHandler(); } + + setFormData(newCategoryTemplate); + modalHandler(); }; return ( diff --git a/client/src/components/SearchBar/SearchBar.tsx b/client/src/components/SearchBar/SearchBar.tsx index 46f0bfd29545df376b8f4f9efc57f6a9882cce46..9920073058d579ce8f50a0e0eba662e974d08dd1 100644 --- a/client/src/components/SearchBar/SearchBar.tsx +++ b/client/src/components/SearchBar/SearchBar.tsx @@ -45,12 +45,17 @@ export const SearchBar = (props: Props): JSX.Element => { if (key === 'Escape') { clearSearch(); + } else if (document.activeElement !== inputRef.current) { + if (key === '`') { + inputRef.current.focus(); + clearSearch(); + } } }; - window.addEventListener('keydown', keyOutsideFocus); + window.addEventListener('keyup', keyOutsideFocus); - return () => window.removeEventListener('keydown', keyOutsideFocus); + return () => window.removeEventListener('keyup', keyOutsideFocus); }, []); const clearSearch = () => {