Added new search bar shortcut. Fixed bug with forms still being visible after logout. Fixed bug with config fetching order

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`.
+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`.
-
-> You can change where to open search results (same/new tab) in the settings
 
 For list of supported search engines, shortcuts and more about searching functionality visit [project wiki](https://github.com/pawelmalak/flame/wiki/Search-bar).
 

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<any>(getConfig());
+
+// Validate token
+if (localStorage.token) {
+  store.dispatch<any>(autoLogin());
+}
+
 export const App = (): JSX.Element => {
   const dispath = useDispatch();
-  const {
+  const { fetchQueries, setTheme, logout, createNotification } =
-    fetchQueries,
+    bindActionCreators(actionCreators, dispath);
-    getConfig,
-    setTheme,
-    logout,
-    createNotification,
-    autoLogin,
-  } = 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);

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);

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);
   };

client/src/components/Bookmarks/Form/CategoryForm.tsx

@@ -60,10 +60,10 @@ export const CategoryForm = ({
       addCategory(formData);
     } else {
       updateCategory(category.id, formData);
+    }
 
     setFormData(newCategoryTemplate);
     modalHandler();
-    }
   };
 
   return (

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 = () => {