From b28f3633914ccea1bd359b90ae61fec22bdf0f49 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 26 May 2023 13:46:54 +0100
Subject: [PATCH] Handle submit button disabling

---
 src/app/components/home/NewPortfolioModal.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/components/home/NewPortfolioModal.tsx b/src/app/components/home/NewPortfolioModal.tsx
index 0e560d3e..08b9e078 100644
--- a/src/app/components/home/NewPortfolioModal.tsx
+++ b/src/app/components/home/NewPortfolioModal.tsx
@@ -48,6 +48,7 @@ export default function NewPortfolioModal({
   const [selectedOutcome, setSelectedOutcome] = useState<string | null>(
     "Nothing Specific"
   );
+  const [buttonDisabled, setButtonDisabled] = useState(true);
 
   function closeModal() {
     setIsOpen(false);
@@ -58,6 +59,15 @@ export default function NewPortfolioModal({
     console.log("create portfolio");
   }
 
+  function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.value.length > 0) {
+      setButtonDisabled(false);
+    } else {
+      setButtonDisabled(true);
+    }
+    setPortfolioName(e.target.value);
+  }
+
   return (
     <>
       <Transition appear show={isOpen} as={Fragment}>
@@ -107,7 +117,7 @@ export default function NewPortfolioModal({
                         placeholder="My new portfolio"
                         required
                         value={portfolioName}
-                        onChange={(e) => setPortfolioName(e.target.value)}
+                        onChange={(e) => handlePortfolioNameChange(e)}
                         className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
                       />
                     </div>
@@ -166,8 +176,9 @@ export default function NewPortfolioModal({
                     </button>
                     <button
                       type="button"
-                      className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-grey-900 hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-grey-900 hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:bg-gray-300 disabled:opacity-50"
                       onClick={createPortfolio}
+                      disabled={buttonDisabled}
                     >
                       Create
                     </button>