Add check for empty url

client/src/components/Toaster.js

@@ -1,45 +1,45 @@
-import React from 'react'
+import React, {useRef, useEffect} from 'react'
 import '../css/navbar.css'
 import {Toast} from 'bootstrap/dist/js/bootstrap'
 
-class Toaster extends React.Component
-{  
-  constructor(){
-    super()
-    this.toast = React.createRef();   
-  }
-
-  componentDidMount()
-  {
-    let toastComponent = new Toast(this.toast.current, {autohide: false})
+export default function Toaster(props){  
+  const toast = useRef();
+  useEffect(()=>{
+    // Initialize toaster with autohide as false to prevent auto clearing for toaster message
+    let toastComponent = new Toast(
+      toast.current, {
+        autohide: false
+      })
     toastComponent.show()
+    })
+
+  const clearToastMessage = () =>{
+    // Clear toaster meessage
+    props.setMessage('')
   }
 
-  render(){
-    return(
-      <div className='toast-container'>
-        <div 
-          className= {'toast align-items-center text-white border-0'} 
-          role='alert' 
-          aria-live='assertive' 
-          aria-atomic='true' 
-          ref={this.toast}
-        >
-          <div className ={'d-flex'}>
-            <div className={'toast-body'}>
-              Hello, world! This is a toast message.
-            </div>
-            <button 
-              type='button' 
-              class={'btn-close btn-close-white me-2 m-auto'} 
-              data-bs-dismiss='toast' 
-              aria-label='Close'
-            >
-            </button>
+  return(
+    <div className='toast-container'>
+      <div 
+        className= {'toast align-items-center text-white border-0'} 
+        role='alert' 
+        aria-live='assertive' 
+        aria-atomic='true' 
+        ref={toast}
+      >
+        <div className ={'d-flex'}>
+          <div className={'toast-body'}>
+            {props.message}
           </div>
+          <button 
+            type='button' 
+            class={'btn-close btn-close-white me-2 m-auto'} 
+            aria-label='Close'
+            onClick={clearToastMessage}
+          >
+          </button>
         </div>
       </div>
-    )  
-    }
+    </div>
+ )   
 }
-export default Toaster

client/src/css/home.css

@@ -8,6 +8,7 @@ Table Of Contents:
 - Input Shortener
 - Output Shortener
 - Text and Body
+- Toaster
 - Media Queries  
 ******************************************/
 
@@ -118,6 +119,23 @@ body {
   scrollbar-width: none; /* Firefox */
 }
 
+/**********************/
+/*    Toaster         */
+/**********************/
+
+.toast-container {
+  position: absolute;
+  width: 100%;
+  top:0;
+  display: flex;
+  justify-content: center;
+}
+
+.toast {
+  background-color: rgba(66, 133, 244, 0.8);
+  width: 40%;
+}
+
 /**********************/
 /*    Media Queries   */
 /**********************/
@@ -149,20 +167,8 @@ body {
     width: 90vw;
     margin: auto;
   }
+  .toast {
+    width: 70%;
+  }
 }
 /* Code from here*/
-/**********************/
-/*    Toaster         */
-/**********************/
-
-.toast-container {
-  position: absolute;
-  width: 100%;
-  top:0;
-  display: flex;
-  justify-content: center;
-}
-
-.toast {
-  background-color: rgba(66, 133, 244, 0.8);
-}

client/src/pages/Home.js

@@ -8,11 +8,18 @@ import { InputUrl } from './Sections/InputUrl';
 const URLshortener = () => {
   // Request loading state
   const [loading, setLoading] = useState(false);
-
+  const [toastMessage, setToastMessage] = useState('');
   /*Input Link Function*/
   const [url, setUrl] = useState("");
-  const handleOnClick = async (e) => {
+  const handleOnClick = (e) => {
     e.preventDefault();
+    // Check if the url entered is blank
+    url === '' ? setToastMessage('URL to shortern cannot be empty. Please enter valid URL') : getNarrowURL();
+  };
+
+  const getNarrowURL = async () =>{
+    // If URL entered is valid remove the toaster message if already present
+    setToastMessage('');
     setLoading(true);
     setNarrowUrl("Loading...");
     const response = await fetch(
@@ -35,8 +42,7 @@ const URLshortener = () => {
     const getUrl = await fetch(`/${narrowUrl}`, {
       method: "GET",
     });
-  };
-
+  } 
   const handleChange = (event) => {
     setUrl(event.target.value);
   };
@@ -129,7 +135,11 @@ const URLshortener = () => {
           />
         </div>
       </div>
-      <Toaster />
+      {toastMessage && <Toaster  
+        message={toastMessage}
+        setMessage={setToastMessage}
+        />
+      }
     </>
   );
 };