refzctor

Real-Dev-Squad · Oct 4, 2023 · bb58620 · bb58620
1 parent 8269294
commit bb58620
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 40 deletions.
diff --git a/__tests__/components/InputBox.test.tsx b/__tests__/components/InputBox.test.tsx
@@ -2,7 +2,7 @@ import InputBox from '@/components/InputBox';
 import { fireEvent, render } from '@testing-library/react';
 
 describe('InputBox', () => {
-    it('should render', () => {
+    it('should render InputBox', () => {
         const { container } = render(
             <InputBox
                 type="text"

diff --git a/__tests__/pages/login.test.tsx b/__tests__/pages/login.test.tsx
@@ -10,13 +10,10 @@ describe('LoginPage', () => {
     it('should render username input', () => {
         const { getByLabelText } = render(<LoginPage />);
         const usernameInput = getByLabelText('Username') as HTMLInputElement;
+        const passwordInput = getByLabelText('Password') as HTMLInputElement;
+
         expect(usernameInput).toBeInTheDocument();
         expect(usernameInput).toHaveAttribute('type', 'text');
-    });
-
-    it('should render password input', () => {
-        const { getByLabelText } = render(<LoginPage />);
-        const passwordInput = getByLabelText('Password') as HTMLInputElement;
         expect(passwordInput).toBeInTheDocument();
         expect(passwordInput).toHaveAttribute('type', 'password');
     });
@@ -34,7 +31,7 @@ describe('LoginPage', () => {
         expect(forgotPasswordLink).toBeInTheDocument();
     });
 
-    it('should apply border styling for valid username', () => {
+    it('should apply border styling for valid usernamep', () => {
         const { getByLabelText } = render(<LoginPage />);
         const usernameInput = getByLabelText('Username') as HTMLInputElement;
         fireEvent.change(usernameInput, { target: { value: 'John_doe' } });

diff --git a/src/components/InputBox/index.tsx b/src/components/InputBox/index.tsx
@@ -5,37 +5,52 @@ import EyeCloseIcon from '../../../public/assets/icons/eyeClose';
 type Props = {
     type: string;
     name: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
-    required: boolean;
+    required?: boolean;
     className?: string;
+    disabled?: boolean;
+    value?: string | number | undefined;
+    hideLabel?: boolean;
 };
 
 const InputBox = (props: Props) => {
-    const [showPassword, setshowPassword] = useState<SetStateAction<boolean>>(false);
-    const { type, name, onChange, placeholder, required, className } = props;
-
+    const [showPassword, setShowPassword] = useState<SetStateAction<boolean>>(false);
+    const {
+        type = 'text',
+        name,
+        onChange = (e) => e,
+        placeholder,
+        required = false,
+        className,
+        disabled = false,
+        hideLabel = false,
+        value = '',
+    } = props;
+    const inputType = showPassword ? 'text' : type;
     return (
         <>
             <label htmlFor={name} className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                {name}
+                {!hideLabel && name}
             </label>
             <div className="relative container mx-auto">
                 <input
-                    type={type == 'password' ? (showPassword ? 'text' : 'password') : 'text'}
+                    value={value}
+                    disabled={disabled}
+                    type={inputType}
                     name={name}
                     id={name}
                     onChange={onChange}
                     className={className || ''}
                     placeholder={placeholder || ''}
                     required={required}
                 />
-                {name == 'Password' && (
+                {type == 'password' && (
                     <button
                         data-testid="password-toggle"
                         onClick={(e) => {
                             e.preventDefault();
-                            setshowPassword(!showPassword);
+                            setShowPassword(!showPassword);
                         }}
                         className="absolute inset-y-0 right-0 flex items-center justify-items-center h-inherit px-4"
                     >

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -11,14 +11,14 @@ type LayoutProps = {
 
 const Layout: FC<LayoutProps> = ({ title, children }) => {
     return (
-        <div>
+        <>
             <Head>
                 <title>{title}</title>
             </Head>
             <Navbar />
             <main className="bg-gray-900 flex flex-col justify-center items-center h-container">{children}</main>
             <Footer />
-        </div>
+        </>
     );
 };
 

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -3,6 +3,7 @@ import CopyIcon from '../../../public/assets/icons/copy';
 import AddIcon from '../../../public/assets/icons/add';
 import ReloadIcon from '../../../public/assets/icons/reload';
 import Layout from '@/components/Layout';
+import InputBox from '@/components/InputBox';
 
 const Dashboard = () => {
     const [url, getUrl] = useState('');
@@ -12,46 +13,47 @@ const Dashboard = () => {
         const randomString = Math.random().toString(36).substring(2, 7);
         return randomString;
     }
-
+    const handleUniqueUrl = () => {
+        const randomString = generateRandomString();
+        setUrl(`https://rds.li/${randomString}`);
+    };
     return (
         <Layout title="Home | URL Shortener">
             <div className="flex flex-col justify-center items-center space-y-4 w-[90%] max-w-3xl md:w-[80%] lg:w-[80%] h-screen">
                 <h1 className="text-4xl text-white font-semibold">URL Shortener</h1>
                 <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[100%]">
-                    <input
+                    <InputBox
                         type="text"
-                        placeholder="Enter the URL"
-                        className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                        value={url}
+                        hideLabel={true}
+                        className="w-full md:w-[100%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
                         onChange={(e) => {
                             getUrl(e.target.value);
                         }}
+                        value={url}
+                        placeholder="Enter the URL"
+                        name="URL"
                     />
                     <button
                         className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                        onClick={() => {
-                            const randomString = generateRandomString();
-                            setUrl(`https://rds.li/${randomString}`);
-                        }}
+                        onClick={() => handleUniqueUrl()}
                     >
                         Generate
                     </button>
                 </div>
-                <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
-                    <input
+                <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 w-[98%]">
+                    <InputBox
                         type="text"
-                        placeholder="Copy the URL"
-                        className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                        disabled
+                        name="URL"
+                        hideLabel={true}
+                        className="w-full md:w-[100%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
                         value={shortUrl}
+                        disabled={true}
+                        placeholder="Copy the URL"
                     />
                     <div className="flex flex-row justify-center items-center space-x-1">
                         <button
                             className="w-full md:w-auto bg-gray-200  px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                            onClick={() => {
-                                const randomString = generateRandomString();
-                                setUrl(`https://rds.li/${randomString}`);
-                            }}
+                            onClick={() => handleUniqueUrl()}
                         >
                             <ReloadIcon />
                         </button>

diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
@@ -4,9 +4,11 @@ import { ChangeEvent, SetStateAction, useState } from 'react';
 
 const LoginPage = () => {
     const [usernameBorder, setUsernameBorder] = useState<SetStateAction<string>>('');
+    const [usernameText, setUsernameText] = useState<string | number>('');
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
         const inputValue = (event.target as HTMLInputElement).value;
+        setUsernameText(inputValue);
         const regex = /^[a-zA-Z0-9_]+$/;
         if (regex.test(inputValue)) {
             setUsernameBorder(' border-2 border-green-500');
@@ -28,6 +30,7 @@ const LoginPage = () => {
                                     type="text"
                                     name="Username"
                                     onChange={handleChange}
+                                    value={usernameText}
                                     placeholder="John_Doe"
                                     className={`bg-gray-50  text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ${usernameBorder}`}
                                     required={true}
@@ -59,10 +62,7 @@ const LoginPage = () => {
                                         </label>
                                     </div>
                                 </div>
-                                <a
-                                    href="#"
-                                    className="text-sm font-medium text-gray-500 hover:underline dark:text-primary-500"
-                                >
+                                <a className="text-sm font-medium text-gray-500 hover:underline dark:text-primary-500">
                                     Forgot password?
                                 </a>
                             </div>