diff --git a/package-lock.json b/package-lock.json index da7863e..36025b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,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", @@ -7184,9 +7185,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ { @@ -11010,6 +11011,14 @@ "node": ">=6" } }, + "node_modules/punycode-esm": { + "version": "1.0.14", + "resolved": "https://registry.npmjs.org/punycode-esm/-/punycode-esm-1.0.14.tgz", + "integrity": "sha512-pKUd7mE81Sm2c363H+znT92N78Xjsb01gqboYj2fFmD+7HveGyVlpLzP38MrfbIcIN9KjN7LCzMcncW1tIsweA==", + "engines": { + "node": ">=20" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", diff --git a/package.json b/package.json index 583c0cb..b643ae4 100644 --- a/package.json +++ b/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", diff --git a/src/components/SearchForm.tsx b/src/components/SearchForm.tsx index 60bae08..c7fd92f 100644 --- a/src/components/SearchForm.tsx +++ b/src/components/SearchForm.tsx @@ -2,8 +2,9 @@ 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(); @@ -11,6 +12,7 @@ const SearchForm = () => { const navigate = useNavigate(); const inputRef = useRef(null); const { historyPush } = useHistoryModal(); + const [transformedDomain, setTransformedDomain] = useState(''); const [isValid, setIsValid] = useState(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): 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); }; diff --git a/src/helpers/domain/domainPipe.ts b/src/helpers/domain/domainPipe.helper.ts similarity index 100% rename from src/helpers/domain/domainPipe.ts rename to src/helpers/domain/domainPipe.helper.ts diff --git a/src/helpers/domain/extractDomain.ts b/src/helpers/domain/extractFromUrl.helper.ts similarity index 68% rename from src/helpers/domain/extractDomain.ts rename to src/helpers/domain/extractFromUrl.helper.ts index 329dd55..8941558 100644 --- a/src/helpers/domain/extractDomain.ts +++ b/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] : ''; diff --git a/src/helpers/domain/punyEncode.helper.ts b/src/helpers/domain/punyEncode.helper.ts new file mode 100644 index 0000000..dd26502 --- /dev/null +++ b/src/helpers/domain/punyEncode.helper.ts @@ -0,0 +1,3 @@ +import { toASCII } from 'punycode-esm'; + +export const punyEncode = (domain: string): string => toASCII(domain);