17 extend valid inputs enhance validation

src/components/NotAvailableMarker.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../helpers/cn.helper';
+import { cn } from '../helpers/className/cn.helper';
 
 const NotAvailableMarker: React.FC<{
   className?: string;

src/components/SearchForm.tsx

@@ -1,15 +1,17 @@
 import { FormEvent, useEffect, useRef, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useHistoryModal } from '../providers/HistoryProvider';
-import { isDomainValid } from '../helpers/isDomainValid.helper';
+import { isDomainValid } from '../helpers/domain/isDomainValid.helper';
+import { domainPipe } from '../helpers/domain/domainPipe';
+import { extractDomain } from '../helpers/domain/extractDomain';
 
 const SearchForm = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchQuery, setSearchQuery] = useState<string>('');
   const navigate = useNavigate();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const { historyPush } = useHistoryModal();
-  const [isValid, setIsValid] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean>(true);
 
   useEffect(() => {
     window.addEventListener('keyup', handleKeyUp);
@@ -18,18 +20,27 @@ const SearchForm = () => {
   }, []);
 
   useEffect(() => {
-    setIsValid(false);
+    if (!searchQuery) {
+      setIsValid(true);
+      return;
+    }
+    const transformedDomain = domainPipe(extractDomain)(searchQuery);
 
-    if (isDomainValid(searchQuery)) setIsValid(true);
+    setIsValid(isDomainValid(transformedDomain));
   }, [searchQuery]);
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
     event.preventDefault();
-    if (searchParams.get('domain') === searchQuery && !isValid) return;
 
-    historyPush(searchQuery);
-    setSearchParams({ domain: searchQuery });
-    navigate(`/results?domain=${encodeURIComponent(searchQuery)}`);
+    const transformedDomain = domainPipe(extractDomain)(searchQuery);
+    const isValid = isDomainValid(transformedDomain);
+    if (searchParams.get('domain') === transformedDomain || !isValid) {
+      return;
+    }
+
+    historyPush(transformedDomain);
+    setSearchParams({ domain: transformedDomain });
+    navigate(`/results?domain=${encodeURIComponent(transformedDomain)}`);
     setTimeout(() => window.scroll(0, 0), 50);
   };
 
@@ -42,13 +53,15 @@ const SearchForm = () => {
   return (
     <form className="flex gap-2 w-[30rem]" onSubmit={handleSubmit}>
       <label
-        className="flex items-center input input-sm input-bordered w-full"
+        className={`flex items-center input input-sm input-bordered w-full ${
+          !isValid ? 'input-error' : ''
+        }`}
         style={{ outline: 'none', boxShadow: 'none' }}
       >
         <input
           type="text"
           className="grow placeholder:text-xs "
-          placeholder="Type a domain..."
+          placeholder="Type a valid domain..."
           autoFocus
           value={searchQuery}
           onChange={event => setSearchQuery(event.target.value.toLowerCase())}
@@ -59,7 +72,7 @@ const SearchForm = () => {
       <button
         className="btn btn-sm btn-primary"
         type="submit"
-        disabled={searchQuery && isValid ? false : true}
+        disabled={searchQuery ? false : true}
       >
         Accio!
       </button>

src/components/ShortKeys.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IoReturnDownBackSharp } from 'react-icons/io5';
 import { Shortcut } from '../enums/Shortcut.enum';
-import { cn } from '../helpers/cn.helper';
+import { cn } from '../helpers/className/cn.helper';
 
 const ShortKeys: React.FC<{ keys: Shortcut[]; className?: string }> = ({
   keys,

src/components/SslTable.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { getDays } from '../helpers/getDays';
+import { getDays } from '../helpers/date/getDays';
 import { SslStatus } from '../enums/SslStatus.enum';
 import Loading from './Loading';
 

src/components/WhoisTable.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { getDays } from '../helpers/getDays';
+import { getDays } from '../helpers/date/getDays';
 import Loading from './Loading';
 const WhoisTable: React.FC<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/helpers/domain/domainPipe.ts

@@ -0,0 +1,6 @@
+import { PipeFunction } from '../../types/PipeFunction';
+
+export const domainPipe =
+  <T>(...fns: PipeFunction<T>[]) =>
+  (x: T): T =>
+    fns.reduce((result, nextFn) => nextFn(result), x);

src/helpers/domain/extractDomain.ts

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

src/hoc/H1.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { cn } from '../helpers/cn.helper';
+import { cn } from '../helpers/className/cn.helper';
 
 export const H1: React.FC<{ children: ReactNode; className?: string }> = ({
   className,

src/hoc/ViewContainer.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { cn } from '../helpers/cn.helper';
+import { cn } from '../helpers/className/cn.helper';
 
 const ViewContainer: React.FC<{ children: ReactNode; className?: string }> = ({
   children,

src/types/PipeFunction.ts

@@ -0,0 +1 @@
+export type PipeFunction<T> = (input: T) => T;

tailwind.config.js

@@ -4,7 +4,21 @@ export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   plugins: [daisyui],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        // Define the keyframes for the animation
+        shake: {
+          '0%, 100%': { transform: 'translateX(0)' },
+          '25%': { transform: 'translateX(-4px)' },
+          '50%': { transform: 'translateX(4px)' },
+          '75%': { transform: 'translateX(-4px)' },
+        },
+      },
+      animation: {
+        // Create a class for the animation
+        shake: 'shake 0.5s ease-in-out',
+      },
+    },
   },
   daisyui: {
     themes: [