From dbfe8c2dc9dad43526ae59eca762497b6a1749cc Mon Sep 17 00:00:00 2001
From: Anthony Al Lazkani <anthonylazkani.22@gmail.com>
Date: Fri, 3 Jan 2025 00:09:24 +0200
Subject: [PATCH] fix(): Handle invalid URL format error with proper response
 message

---
 frontend/package-lock.json                    |   4 +-
 .../components/URLShortener/URLShortener.tsx  | 128 ++++++++++++------
 shortenit/web.py                              |   2 +-
 3 files changed, 90 insertions(+), 44 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f57d09a..1abe64b 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/src/components/URLShortener/URLShortener.tsx b/frontend/src/components/URLShortener/URLShortener.tsx
index 1712cff..1281741 100644
--- a/frontend/src/components/URLShortener/URLShortener.tsx
+++ b/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
-        .post(api_url , {
-          url: url
-        })
-        .then((response) => {
-          if (response) {
-            const shortUrl: string = response.data.url;
-            setShortenedUrl(shortUrl);
-            setShowInput(true);
-          }
+      const response = await axios.post(api_url , {url: url})
+      if (response.data.url) {
+        const shortUrl: string = response.data.url;
+        setShortenedUrl(shortUrl);
+        setShowInput(true);
+        toast.success("URL Shortened Successfully", {
+          position: "top-right",
+          autoClose: 5000,
+          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) {
-      console.log(error);
+    } catch (error : any) {
+      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">
-        <h1>Paste the URL</h1>
-        <form className="url-input" onSubmit={ShortenIt}>
-          <input
-            type="text"
-            placeholder="https://www.example.com"
-            aria-label="URL input field"
-            value={url}
-            onChange={(e) => setUrl(e.target.value)}
-          />
-          <button type="submit">Shorten It</button>
-        </form>
+    <>
+      <div className="URLShortener-component">
+        <div className="left-side">
+          <h1>Paste the URL</h1>
+          <form className="url-input" onSubmit={ShortenIt}>
+            <input
+              type="text"
+              placeholder="https://www.example.com"
+              aria-label="URL input field"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            />
+            <button type="submit">Shorten It</button>
+          </form>
 
-        {shortenedUrl && showInput && (
-          <div className="url-input shortened">
-            <input type="text" readOnly value={shortenedUrl} />
-            <button onClick={copyURL}>Copy</button>
+          {shortenedUrl && showInput && (
+            <div className="url-input shortened">
+              <input type="text" readOnly value={shortenedUrl} />
+              <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>
+    </>
   );
 }
diff --git a/shortenit/web.py b/shortenit/web.py
index c3d5363..e0e8406 100644
--- a/shortenit/web.py
+++ b/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: