Search bar bug fixes

CHANGELOG.md

@@ -1,3 +1,7 @@
+### v1.7.1 (TBA)
+- Fixed search action not being triggered by Numpad Enter
+- Fixed search bar not redirecting to valid URL if it starts with capital letter ([#118](https://github.com/pawelmalak/flame/issues/118))
+
 ### v1.7.0 (2021-10-11)
 - Search bar will now redirect if valid URL or IP is provided ([#67](https://github.com/pawelmalak/flame/issues/67))
 - Users can now add their custom search providers ([#71](https://github.com/pawelmalak/flame/issues/71))

client/src/components/SearchBar/SearchBar.tsx

@@ -27,6 +27,11 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
     inputRef.current.focus();
   }, []);
 
+  const clearSearch = () => {
+    inputRef.current.value = '';
+    setLocalSearch('');
+  };
+
   const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
     const { isLocal, search, query, isURL, sameTab } = searchParser(
       inputRef.current.value
@@ -36,31 +41,39 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
       setLocalSearch(search);
     }
 
-    if (e.code === 'Enter') {
+    if (e.code === 'Enter' || e.code === 'NumpadEnter') {
       if (!query.prefix) {
+        // Prefix not found -> emit notification
         createNotification({
           title: 'Error',
           message: 'Prefix not found',
         });
       } else if (isURL) {
+        // URL or IP passed -> redirect
         const url = urlParser(inputRef.current.value)[1];
         redirectUrl(url, sameTab);
       } else if (isLocal) {
+        // Local query -> filter apps and bookmarks
         setLocalSearch(search);
       } else {
+        // Valid query -> redirect to search results
         const url = `${query.template}${search}`;
         redirectUrl(url, sameTab);
       }
+    } else if (e.code === 'Escape') {
+      clearSearch();
     }
   };
 
   return (
-    <input
-      ref={inputRef}
-      type="text"
-      className={classes.SearchBar}
-      onKeyUp={(e) => searchHandler(e)}
-    />
+    <div className={classes.SearchContainer}>
+      <input
+        ref={inputRef}
+        type="text"
+        className={classes.SearchBar}
+        onKeyUp={(e) => searchHandler(e)}
+      />
+    </div>
   );
 };
 

client/src/store/reducers/theme.ts

@@ -7,20 +7,22 @@ export interface State {
 
 const initialState: State = {
   theme: {
-    name: 'blues',
+    name: 'tron',
     colors: {
-      background: '#2B2C56',
-      primary: '#EFF1FC',
-      accent: '#6677EB'
-    }
-  }
-}
+      background: '#242B33',
+      primary: '#EFFBFF',
+      accent: '#6EE2FF',
+    },
+  },
+};
 
 const themeReducer = (state = initialState, action: Action) => {
   switch (action.type) {
-    case ActionTypes.setTheme: return { theme: action.payload };
-    default: return state;
+    case ActionTypes.setTheme:
+      return { theme: action.payload };
+    default:
+      return state;
   }
-}
+};
 
-export default themeReducer;
+export default themeReducer;

client/src/utility/searchParser.ts

@@ -20,7 +20,7 @@ export const searchParser = (searchQuery: string): SearchResult => {
 
   // Check if url or ip was passed
   const urlRegex =
-    /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
+    /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/i;
 
   result.isURL = urlRegex.test(searchQuery);