fix(): Handle invalid URL format error with proper response message

frontend/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "frontend",
+  "name": "shortenit",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
+      "name": "shortenit",
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.17.0",

frontend/src/components/URLShortener/URLShortener.tsx

@@ -35,23 +35,66 @@ export default function URLShortener() {
       const api_url = `${config.url}${api_endpoint}`;
 
       // Send the POST request to the backend
-      await axios
+      const response = await axios.post(api_url , {url: url})
-        .post(api_url , {
+      if (response.data.url) {
-          url: url
+        const shortUrl: string = response.data.url;
-        })
+        setShortenedUrl(shortUrl);
-        .then((response) => {
+        setShowInput(true);
-          if (response) {
+        toast.success("URL Shortened Successfully", {
-            const shortUrl: string = response.data.url;
+          position: "top-right",
-            setShortenedUrl(shortUrl);
+          autoClose: 5000,
-            setShowInput(true);
+          hideProgressBar: false,
-          }
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "dark",
+          className: "custom-toast",
         });
+      } else {
+        toast.error("Something went wrong while shortening the URL", {
+          position: "top-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "dark",
+          className: "custom-toast",
+        });
+      }
 
       setTimeout(() => {
         setShowInput(false);
       }, 900000);
-    } catch (error) {
+    } catch (error : any) {
-      console.log(error);
+      if (error.response) {
+        const errorMessage : string = error.response.data.msg || "An error occurred. Please try again.";
+        toast.error(errorMessage, {
+          position: "top-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "dark",
+          className: "custom-toast",
+        });
+      } else {
+        toast.error("Network error. Please check your connection and try again.", {
+          position: "top-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "dark",
+          className: "custom-toast",
+        });
+      }
     }
   }
 
@@ -76,39 +119,42 @@ export default function URLShortener() {
     }
   }
   return (
-    <div className="URLShortener-component">
+    <>
-      <div className="left-side">
+      <div className="URLShortener-component">
-        <h1>Paste the URL</h1>
+        <div className="left-side">
-        <form className="url-input" onSubmit={ShortenIt}>
+          <h1>Paste the URL</h1>
-          <input
+          <form className="url-input" onSubmit={ShortenIt}>
-            type="text"
+            <input
-            placeholder="https://www.example.com"
+              type="text"
-            aria-label="URL input field"
+              placeholder="https://www.example.com"
-            value={url}
+              aria-label="URL input field"
-            onChange={(e) => setUrl(e.target.value)}
+              value={url}
-          />
+              onChange={(e) => setUrl(e.target.value)}
-          <button type="submit">Shorten It</button>
+            />
-        </form>
+            <button type="submit">Shorten It</button>
+          </form>
 
-        {shortenedUrl && showInput && (
+          {shortenedUrl && showInput && (
-          <div className="url-input shortened">
+            <div className="url-input shortened">
-            <input type="text" readOnly value={shortenedUrl} />
+              <input type="text" readOnly value={shortenedUrl} />
-            <button onClick={copyURL}>Copy</button>
+              <button onClick={copyURL}>Copy</button>
+            </div>
+          )}
+        </div>
+        <div className="right-side">
+          <div className="right-side-title">
+            <h1>Shorten It</h1>
+          </div>
+          <div className="right-side-content">
+            <p>
+              Shortenit is a free and open-source URL shortening service designed
+              for simplicity and efficiency.
+            </p>
           </div>
-        )}
-      </div>
-      <div className="right-side">
-        <div className="right-side-title">
-          <h1>Shorten It</h1>
-        </div>
-        <div className="right-side-content">
-          <p>
-            Shortenit is a free and open-source URL shortening service designed
-            for simplicity and efficiency.
-          </p>
         </div>
+        
       </div>
       <ToastContainer />
-    </div>
+    </>
   );
 }

shortenit/web.py

@@ -80,7 +80,7 @@ class SiteHandler:
             data = self.shortenit_load_format(data)
         except Exception as e:
             self.logger.error(e)
-            return {}, 400
+            return {"msg" : "Invalid URL format"}, 400
             self.logger.error(e)
             abort(400)
         try: