Add check for empty url

client/src/components/Footer.js

@@ -6,10 +6,10 @@ const Footer = () => {
 
     <div className="social-links">
 
-    <a className="social-icons" href="#"><i class="fa-brands fa-google"></i></a>
-    <a className="social-icons" href="#"><i class="social-icon fa-brands fa-facebook-f"></i></a>
-    <a className="social-icons" href="#"><i class="social-icon fa-brands fa-twitter"></i></a>
-    <a className="social-icons" href="#"><i class="social-icon fa-brands fa-instagram"></i></a>
+    <a className="social-icons" href="#"><i className="fa-brands fa-google"></i></a>
+    <a className="social-icons" href="#"><i className="social-icon fa-brands fa-facebook-f"></i></a>
+    <a className="social-icons" href="#"><i className="social-icon fa-brands fa-twitter"></i></a>
+    <a className="social-icons" href="#"><i className="social-icon fa-brands fa-instagram"></i></a>
 
 
     {/* <div class="downloads col-lg-6">

client/src/components/Toaster.js

@@ -0,0 +1,45 @@
+import React, {useRef, useEffect} from 'react'
+import '../css/navbar.css'
+import {Toast} from 'bootstrap/dist/js/bootstrap'
+
+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('')
+  }
+
+  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' 
+            className={'btn-close btn-close-white me-2 m-auto'} 
+            aria-label='Close'
+            onClick={clearToastMessage}
+          >
+          </button>
+        </div>
+      </div>
+    </div>
+ )   
+}

client/src/css/home.css

@@ -8,6 +8,7 @@ Table Of Contents:
 - Input Shortener
 - Output Shortener
 - Text and Body
+- Toaster
 - Media Queries  
 ******************************************/
 
@@ -120,6 +121,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   */
 /**********************/
@@ -151,6 +169,9 @@ body {
     width: 90vw;
     margin: auto;
   }
+  .toast {
+    width: 70%;
+  }
 }
 /* Code from here*/
 
@@ -600,3 +621,23 @@ body {
   }
 
 }
+/**********************/
+/*    Toaster         */
+/**********************/
+
+.toast-container {
+  position: absolute;
+  width: 100%;
+  top:0;
+  display: flex;
+  justify-content: center;
+}
+
+.toast {
+  background-color: rgba(66, 133, 244, 0.8);
+}
+
+.btn-close {
+  outline: none;
+  border: transparent;
+}

client/src/pages/Home.jsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import InputURL from "./Sections/InputURL";
 import ShowQR from "./Sections/ShowQR";
 import ShowSMS from "./Sections/ShowSMS";
+import Toaster  from "../components/Toaster";
 import Result from './Sections/Result';
 import animatedLoading from '../assets/loading-animated.svg';
 import "../css/home.css";
@@ -11,6 +12,7 @@ export default function Home() {
 
   /* States Center */
   const [ url, setUrl ] = useState("");
+  const [toastMessage, setToastMessage] = useState(""); 
   const [ narrowURL, setNarrowURL ] = useState("");
   const [ status, setStatus ] = useState("idle");
   const [ showQR, setShowQR ] = useState(false);
@@ -31,8 +33,15 @@ export default function Home() {
 
   // Input Link Function
   async function ShortenURL(e) {
-    setStatus("loading");
+    e.preventDefault();
+    // Check if the URL entered is blank
+    url !== "" ? getNarrowLink() : setToastMessage('URL to shortern cannot be blank. Please enter valid URL.'); 
+  };
 
+  const getNarrowLink = async () => {
+    // Clear Toster if present 
+    setToastMessage("");
+    setStatus("loading");
     const response = await fetch(
       "https://nrly.herokuapp.com/api/url/narrowurl",
       {
@@ -86,6 +95,10 @@ export default function Home() {
           <Result narrowURL={narrowURL} setShowSMS={setShowSMS} setShowQR={setShowQR} />
         }
       </section>
+      {toastMessage && <Toaster
+        message = {toastMessage}
+        setMessage = {setToastMessage}
+      />}
     </>
   );
 };

client/src/pages/Sections/InputURL.jsx

@@ -4,10 +4,10 @@ import '../../css/InputURL.css';
 export default function InputURL({ url, URLInput, HandleEnter, ShortenURL }) {
   return (
     <section className='input-container h-25 animated-fadeIn'>
-      <div className='input-form'>
+      <form className='input-form'>
         <input type='text' aria-label='Paste your URL to shorten' id='inputUrl' placeholder='Paste your URL to shorten' value={url} onChange={URLInput} onKeyUp={HandleEnter} />
         <button type='submit' onClick={ShortenURL} data-testid='narrow' aria-label='Narrow Link'> Shorten </button>
-      </div>
+      </form>
     </section>
   );
 }