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 74da10b..ba640e5 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 d7668a8..2e4c72e 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 2d2d588..9ccb0d4 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 cee07fe..62a2e15 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 3daa68f..c7e0105 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 46f0bfd..9920073 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 = () => {