13 missing punycode domain transformation

package.json

@@ -23,6 +23,7 @@
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
+    "punycode-esm": "^1.0.14",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",

src/components/SearchForm.tsx

@@ -2,15 +2,17 @@ import { FormEvent, useEffect, useRef, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useHistoryModal } from '../providers/HistoryProvider';
 import { isDomainValid } from '../helpers/domain/isDomainValid.helper';
-import { domainPipe } from '../helpers/domain/domainPipe';
-import { extractDomain } from '../helpers/domain/extractDomain';
+import { domainPipe } from '../helpers/domain/domainPipe.helper';
+import { extractDomainFromUrl } from '../helpers/domain/extractFromUrl.helper';
+import { punyEncode } from '../helpers/domain/punyEncode.helper';
 
 const SearchForm = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchQuery, setSearchQuery] = useState<string>('');
   const navigate = useNavigate();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const { historyPush } = useHistoryModal();
+  const [transformedDomain, setTransformedDomain] = useState<string>('');
   const [isValid, setIsValid] = useState<boolean>(true);
 
   const domain = searchParams.get('domain');
@@ -23,26 +25,32 @@ const SearchForm = () => {
 
   useEffect(() => {
     if (!searchQuery) {
-      setIsValid(true);
       return;
     }
-    const transformedDomain = domainPipe(extractDomain)(searchQuery);
 
-    setIsValid(isDomainValid(transformedDomain));
+    const pipeResult = domainPipe(
+      extractDomainFromUrl,
+      punyEncode
+    )(searchQuery);
+    setTransformedDomain(pipeResult);
   }, [searchQuery]);
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
     event.preventDefault();
 
-    const transformedDomain = domainPipe(extractDomain)(searchQuery);
     const isValid = isDomainValid(transformedDomain);
-    if (domain === transformedDomain || !isValid) {
+
+    if (!isValid) {
+      setIsValid(false);
+      return;
+    } else if (domain === transformedDomain) {
       return;
     }
 
     historyPush(transformedDomain);
     setSearchParams({ domain: transformedDomain });
     setSearchQuery('');
+    setIsValid(true);
     navigate(`/results?domain=${encodeURIComponent(transformedDomain)}`);
     setTimeout(() => window.scroll(0, 0), 50);
   };

src/helpers/domain/extractDomain.ts → src/helpers/domain/extractFromUrl.helper.ts

@@ -1,4 +1,4 @@
-export const extractDomain = (url: string): string => {
+export const extractDomainFromUrl = (url: string): string => {
   const domainRegex = /^(?:https?:\/\/)?(?:www\.)?([^/?#]+)/;
   const match = url.match(domainRegex);
   return match ? match[1] : '';

src/helpers/domain/punyEncode.helper.ts

@@ -0,0 +1,3 @@
+import { toASCII } from 'punycode-esm';
+
+export const punyEncode = (domain: string): string => toASCII(domain);