From 568189bfea9848fcaf5555157bf7309055f7e249 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 16 Mar 2024 16:02:57 +0100
Subject: [PATCH] feat(home): user can connect to a sub with search bar

---
 src/views/home/home.tsx | 40 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 4059e0de..bf14821d 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -1,6 +1,7 @@
+import { useRef } from 'react';
 import styles from './home.module.css';
 import useTheme from '../../hooks/use-theme';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import { useEffect } from 'react';
@@ -44,12 +45,45 @@ const LanguageSettings = () => {
   );
 };
 
+const isValidAddress = (address: string): boolean => {
+  if (address.includes('/') || address.includes('\\') || address.includes(' ')) {
+    return false;
+  }
+  return true;
+};
+
 const SearchBar = () => {
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const handleSearchSubmit = () => {
+    const inputValue = searchInputRef.current?.value;
+    if (inputValue && isValidAddress(inputValue)) {
+      navigate(`/p/${inputValue}`);
+    } else {
+      alert('invalid address');
+    }
+  };
+
   return (
     <div className={styles.searchBar}>
-      <input type='text' placeholder={`"board.eth" ${t('or')} "12D3KooW..."`} />
-      <button>{t('go')}</button>
+      <input
+        autoCorrect='off'
+        autoComplete='off'
+        spellCheck='false'
+        autoCapitalize='off'
+        type='text'
+        placeholder={`"board.eth/.sol" ${t('or')} "12D3KooW..."`}
+        ref={searchInputRef}
+        onSubmit={handleSearchSubmit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            handleSearchSubmit();
+          }
+        }}
+      />
+      <button onClick={handleSearchSubmit}>{t('go')}</button>
     </div>
   );
 };