Fix incomplete submit

frontend/modules/Home/index.tsx

@@ -21,6 +21,8 @@ const HomePage = () => {
     successDuration: 3000,
   });
   const toast = useToast();
+  const isAliasEmpty = alias === "";
+  const isUrlEmpty = url === "";
 
   const handleUrlType = (text: string) => {
     setUrl(text);
@@ -39,7 +41,6 @@ const HomePage = () => {
   const handleAliasType = (text: string) => {
     setAlias(text.split(" ").length > 1 ? text.split(" ").join("-") : text);
   };
-
   const handleSubmit = () => {
     setIsLoading(true);
     fetch("/api/shorten", {
@@ -72,11 +73,47 @@ const HomePage = () => {
         }
       });
   };
+  const handleEmpty = () => {
+    if (!isUrlValid)
+      toast({
+        title: "Error occured",
+        description: "Please enter a valid url",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    else if (isUrlEmpty && isAliasEmpty) {
+      toast({
+        title: "Long url and short url empty",
+        description: "Please enter long url and short url",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    } else if (isUrlEmpty) {
+      toast({
+        title: "Long url empty",
+        description: "Please enter long url",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    } else if (isAliasEmpty) {
+      toast({
+        title: "Short url empty",
+        description: "Please enter short url",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+  };
 
   useEffect(() => {
-    if (!!alias && isUrlValid) {
+    if (!!alias && isUrlValid && !isUrlEmpty) {
       return setIsAllowed(true);
     }
+
     setIsAllowed(false);
   }, [url, alias]);
 
@@ -134,7 +171,9 @@ const HomePage = () => {
           </div>
           <Button
             disabled={!isAllowed}
-            onClick={() => isAllowed && !isLoading && handleSubmit()}
+            onClick={() =>
+              isAllowed && !isLoading ? handleSubmit() : handleEmpty()
+            }
             isLoading={isLoading}
           >
             <div className=" font-semibold text-lg">Shorten!</div>