From e5cba605fa2623b20124e86da24201de89d0557d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Wed, 13 Oct 2021 13:31:01 +0200
Subject: [PATCH] Search bar bug fixes

---
 CHANGELOG.md                                  |  4 +++
 client/src/components/SearchBar/SearchBar.tsx | 27 ++++++++++++++-----
 client/src/store/reducers/theme.ts            | 24 +++++++++--------
 client/src/utility/searchParser.ts            |  2 +-
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54c68e1..54d5274 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/client/src/components/SearchBar/SearchBar.tsx b/client/src/components/SearchBar/SearchBar.tsx
index 887a2ef..85175ff 100644
--- a/client/src/components/SearchBar/SearchBar.tsx
+++ b/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>
   );
 };
 
diff --git a/client/src/store/reducers/theme.ts b/client/src/store/reducers/theme.ts
index fabcc4b..6adc225 100644
--- a/client/src/store/reducers/theme.ts
+++ b/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;
\ No newline at end of file
+export default themeReducer;
diff --git a/client/src/utility/searchParser.ts b/client/src/utility/searchParser.ts
index 2befdd2..e14617c 100644
--- a/client/src/utility/searchParser.ts
+++ b/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);