Added redirect function to search bar

CHANGELOG.md

@@ -1,6 +1,8 @@
 ### v1.7.0 (TBA)
+- Search bar will now redirect if valid URL or IP is provided ([#67](https://github.com/pawelmalak/flame/issues/67))
 - Fixed bug related to creating new apps/bookmarks with custom icon ([#83](https://github.com/pawelmalak/flame/issues/83))
 - URL can now be assigned to notifications. Clicking on "New version is available" popup will now redirect to changelog ([#86](https://github.com/pawelmalak/flame/issues/86))
+- Added static fonts ([#94](https://github.com/pawelmalak/flame/issues/94))
 
 ### v1.6.7 (2021-10-04)
 - Add multiple labels to Docker Compose ([#90](https://github.com/pawelmalak/flame/issues/90))

client/src/components/SearchBar/SearchBar.tsx

@@ -11,7 +11,7 @@ import { NewNotification } from '../../interfaces';
 import classes from './SearchBar.module.css';
 
 // Utils
-import { searchParser } from '../../utility';
+import { searchParser, urlParser, redirectUrl } from '../../utility';
 
 interface ComponentProps {
   createNotification: (notification: NewNotification) => void;
@@ -28,28 +28,28 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
   }, []);
 
   const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
-    const searchResult = searchParser(inputRef.current.value);
+    const { isLocal, search, query, isURL, sameTab } = searchParser(
+      inputRef.current.value
+    );
 
-    if (searchResult.isLocal) {
-      setLocalSearch(searchResult.search);
+    if (isLocal) {
+      setLocalSearch(search);
     }
 
     if (e.code === 'Enter') {
-      if (!searchResult.query.prefix) {
+      if (!query.prefix) {
         createNotification({
           title: 'Error',
           message: 'Prefix not found',
         });
-      } else if (searchResult.isLocal) {
-        setLocalSearch(searchResult.search);
+      } else if (isURL) {
+        const url = urlParser(inputRef.current.value)[1];
+        redirectUrl(url, sameTab);
+      } else if (isLocal) {
+        setLocalSearch(search);
       } else {
-        if (searchResult.sameTab) {
-          document.location.replace(
-            `${searchResult.query.template}${searchResult.search}`
-          );
-        } else {
-          window.open(`${searchResult.query.template}${searchResult.search}`);
-        }
+        const url = `${query.template}${search}`;
+        redirectUrl(url, sameTab);
       }
     }
   };

client/src/interfaces/SearchResult.ts

@@ -2,6 +2,7 @@ import { Query } from './Query';
 
 export interface SearchResult {
   isLocal: boolean;
+  isURL: boolean;
   sameTab: boolean;
   search: string;
   query: Query;

client/src/utility/index.ts

@@ -3,4 +3,5 @@ export * from './urlParser';
 export * from './searchConfig';
 export * from './checkVersion';
 export * from './sortData';
-export * from './searchParser';
+export * from './searchParser';
+export * from './redirectUrl';

client/src/utility/redirectUrl.ts

@@ -0,0 +1,7 @@
+export const redirectUrl = (url: string, sameTab: boolean) => {
+  if (sameTab) {
+    document.location.replace(url);
+  } else {
+    window.open(url);
+  }
+};

client/src/utility/searchParser.ts

@@ -6,6 +6,7 @@ import { searchConfig } from '.';
 export const searchParser = (searchQuery: string): SearchResult => {
   const result: SearchResult = {
     isLocal: false,
+    isURL: false,
     sameTab: false,
     search: '',
     query: {
@@ -15,6 +16,13 @@ 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])$/;
+
+  result.isURL = urlRegex.test(searchQuery);
+
+  // Match prefix and query
   const splitQuery = searchQuery.match(/^\/([a-z]+)[ ](.+)$/i);
 
   const prefix = splitQuery
@@ -27,6 +35,7 @@ export const searchParser = (searchQuery: string): SearchResult => {
 
   const query = queries.find((q: Query) => q.prefix === prefix);
 
+  // If search provider was found
   if (query) {
     result.query = query;
     result.search = search;