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

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

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