Add custom alias functionality

src/components/App/ShortenUrlForm.tsx

@@ -9,10 +9,12 @@ interface ErrorMessageProps {
 
 interface ShortenUrlFormProps {
     url: string;
+    alias: string;
     error: string | null;
     clearError: () => void;
     setUrl: (url: string) => void;
-    onSubmit: (url: string) => void;
+    setAlias: (alias: string) => void;
+    onSubmit: (url: string, alias: string) => void;
     loading: boolean;
 }
 
@@ -43,22 +45,36 @@ const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
     );
 };
 
-const ShortenUrlForm: React.FC<ShortenUrlFormProps> = ({ url, setUrl, onSubmit, error, clearError, loading }) => {
+const ShortenUrlForm: React.FC<ShortenUrlFormProps> = ({
+    url,
+    alias,
+    setUrl,
+    setAlias,
+    onSubmit,
+    error,
+    clearError,
+    loading,
+}) => {
     const handleSubmit = (e: FormEvent) => {
         e.preventDefault();
         const formData = new FormData(e.target as HTMLFormElement);
         const url = formData.get('URL') as string | null;
 
         if (!url) return;
 
-        onSubmit(url);
+        onSubmit(url, alias || '');
     };
 
     const handleUrlChange = (e: ChangeEvent<HTMLInputElement>) => {
         setUrl(e.target.value);
         clearError();
     };
 
+    const handleAliasChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setAlias(e.target.value);
+        clearError();
+    };
+
     const inputErrorClass = error ? 'border-2 border-red-500 text-red-500' : 'text-black';
     const buttonErrorClass = error || !url ? 'opacity-70 cursor-not-allowed' : 'hover:scale-105 active:scale-95';
 
@@ -81,6 +97,15 @@ const ShortenUrlForm: React.FC<ShortenUrlFormProps> = ({ url, setUrl, onSubmit,
                             onChange={handleUrlChange}
                             className={`p-5 rounded-lg focus:outline-none h-12 text-lg ${inputErrorClass} w-80 sm:w-96 lg:w-[28rem]`}
                         />
+
+                        <input
+                            name="Alias"
+                            type="text"
+                            value={alias}
+                            placeholder="Enter Alias (Optional)"
+                            onChange={handleAliasChange}
+                            className="p-5 rounded-lg focus:outline-none h-12 text-lg w-80 sm:w-96 lg:w-[28rem]"
+                        />
                         <div className="h-6 w-full mb-1">{error && <ErrorMessage message={error} />}</div>
                     </div>
                     <Button

src/pages/app/index.tsx

@@ -14,6 +14,7 @@ import validateUrl from '@/utils/validateUrl';
 
 const App = () => {
     const [url, setUrl] = useState<string>('');
+    const [alias, setAlias] = useState<string>('');
     const [shortUrl, setShortUrl] = useState<string>('');
     const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
     const [showOutputModal, setShowOutputModal] = useState<boolean>(false);
@@ -40,12 +41,13 @@ const App = () => {
 
     const createNewHandler = () => {
         setUrl('');
+        setAlias('');
         setShortUrl('');
         setShowOutputModal(false);
         setError(null);
     };
 
-    const createShortenedUrl = (originalUrl: string) => {
+    const createShortenedUrl = (originalUrl: string, customAlias: string) => {
         if (!isLoggedIn) {
             setShowLoginModal(true);
             localStorage.setItem('url', originalUrl);
@@ -60,7 +62,7 @@ const App = () => {
             setError(validationResult.errorMessage);
             return;
         }
-        mutation.mutate({ originalUrl: formattedUrl, userData });
+        mutation.mutate({ originalUrl: formattedUrl, userData, shortUrl: customAlias });
     };
 
     const clearError = () => setError(null);
@@ -80,10 +82,12 @@ const App = () => {
             <div className="-mt-44 w-full">
                 <ShortenUrlForm
                     url={url}
+                    alias={alias}
                     error={error}
                     setUrl={setUrl}
+                    setAlias={setAlias}
                     clearError={clearError}
-                    onSubmit={createShortenedUrl}
+                    onSubmit={(url, alias) => createShortenedUrl(url, alias)}
                     loading={mutation.status === 'loading'}
                 />
             </div>

src/services/api.tsx

@@ -9,6 +9,7 @@ interface ShortenUrlRequest {
     Comment: string;
     CreatedBy: string;
     UserId: number;
+    ShortUrl?: string;
 }
 
 interface ShortenUrlResponse {
@@ -18,6 +19,7 @@ interface ShortenUrlResponse {
 interface MutationParams {
     originalUrl: string;
     userData: User;
+    shortUrl?: string;
 }
 
 export interface ApiError {
@@ -73,14 +75,15 @@ const useShortenUrlMutation = ({ onSuccess, onError }: useShortenUrlMutationArgs
     MutationParams
 > => {
     return useMutation(
-        async ({ originalUrl, userData }: MutationParams) => {
+        async ({ originalUrl, userData, shortUrl }: MutationParams) => {
             const response = await axios.post(
                 `${TINY_API_URL}/tinyurl`,
                 {
                     OriginalUrl: originalUrl,
                     Comment: '',
                     CreatedBy: userData?.data?.userName,
                     UserId: userData?.data?.id,
+                    ShortUrl: shortUrl,
                 } as ShortenUrlRequest,
                 {
                     withCredentials: true,