From 881b2ddbf6ca26df1838e7dcbc6cd5bf843612c1 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 19 Nov 2024 20:39:26 -0500
Subject: [PATCH] adding onClick event for submit button, adding keyDown
 functionality for enter button in input field, removing mouseUp/mouseDown, as
 it complicated the onClick event

---
 frontend/src/components/Footer/Footer.tsx | 28 +++++++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index 6a60e3e9..e64e5183 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -1,14 +1,30 @@
 // Footer.js
 
-import { useState } from "react";
+import { useState, useRef, KeyboardEvent } from "react";
 import { Link } from "react-router-dom";
 import "../../App.css"; // Import the common Tailwind CSS styles
 
 function Footer() {
   const [isPressed, setIsPressed] = useState(false);
+  const emailInputRef =useRef<HTMLInputElement>(null);
 
-  const handleMouseDown = () => setIsPressed(true);
-  const handleMouseUp = () => setIsPressed(false);
+  const handleKeyDown = (event:KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      document.getElementById('submitButton')?.click();
+    }
+  };
+
+  //TODO - actually add email addresses to a mailing list, when available. for now, just logging in console, then clearing the input.
+  const handleSubmit = () => {
+    const email = emailInputRef.current?.value;
+    if (email){
+      setIsPressed(true) //TODO - any async function that would require us to display "Loading..."
+      console.log(email);
+      emailInputRef.current.value = '';
+      setIsPressed(false)
+    }
+  }
 
   return (
     // <div className="xl:px-50 mx-auto hidden h-20 items-center justify-between border-t border-gray-300 bg-white  px-4 sm:px-6 md:px-8 lg:flex lg:px-8 2xl:px-56">
@@ -58,19 +74,21 @@ function Footer() {
             <input
               type="email"
               id="email"
+              ref={emailInputRef}
               className="input md:w-[570px]"
               placeholder="Subscribe to our newsletter for the latest updates and insights."
+              onKeyDown={handleKeyDown}
             />
           </div>
           <div className="ml-2 ">
             <button
+              id="submitButton"
               type="submit"
               className={`btnBlue ${
                 isPressed &&
                 "transition-transform focus:outline-none focus:ring focus:ring-blue-200"
               }`}
-              onMouseDown={handleMouseDown}
-              onMouseUp={handleMouseUp}
+              onClick={handleSubmit}
             >
               {isPressed ? (
                 <div className="flex items-center justify-center">