From 26dd4058ee7dbf11e6f4f92fb426429ec6b4a62d Mon Sep 17 00:00:00 2001
From: Jason Warren <contact.jwarren@gmail.com>
Date: Tue, 10 Dec 2024 13:00:18 +0000
Subject: [PATCH] style: :lipstick: replace alerts with modals

---
 .../add-tool/components/AddToolInputs.tsx     | 67 ++++++++++++++-----
 1 file changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/app/toolkit/add-tool/components/AddToolInputs.tsx b/src/app/toolkit/add-tool/components/AddToolInputs.tsx
index 93f07b1c..74514ed6 100644
--- a/src/app/toolkit/add-tool/components/AddToolInputs.tsx
+++ b/src/app/toolkit/add-tool/components/AddToolInputs.tsx
@@ -45,12 +45,18 @@ export default function Inputs() {
   const [unusedCategory, setUnusedCategory] = useState([""]);
   const [saveUnusedCategory, setSaveUnusedCategory] = useState(false);
 
+  const [categoryErrorModal, setCategoryErrorModal] = useState(false);
+  const [infoUrlErrorModal, setInfoUrlErrorModal] = useState(false);
+  const [imageUrlErrorModal, setImageUrlErrorModal] = useState(false);
+  const [submitErrorModal, setSubmitErrorModal] = useState(false);
+  const [submitErrorMessage, setSubmitErrorMessage] = useState("");
+
   function SubmitButton() {
     const handleSubmit = async () => {
       console.log(`Validating form with state: ${JSON.stringify(formState)}`);
   
       if (formState.categories.length === 0) {
-        alert("Please select at least one category");
+        setCategoryErrorModal(true);
         return;
       }
   
@@ -58,7 +64,8 @@ export default function Inputs() {
         const infoUrlValidation = validateUrl(formState.infoUrl, "Info URL");
         if (!infoUrlValidation.isValid) {
           console.error(`Info URL validation failed: ${infoUrlValidation.error}`);
-          alert(infoUrlValidation.error);
+          setSubmitErrorMessage(infoUrlValidation.error);
+          setInfoUrlErrorModal(true);
           return;
         }
         console.log(`Info URL validated successfully: ${infoUrlValidation.url}`);
@@ -67,15 +74,12 @@ export default function Inputs() {
       if (formState.imageUrl) {
         const imageUrlValidation = validateUrl(formState.imageUrl, "Image URL");
         if (!imageUrlValidation.isValid) {
-          console.error(
-            `Image URL validation failed: ${imageUrlValidation.error}`
-          );
-          alert(imageUrlValidation.error);
+          console.error(`Image URL validation failed: ${imageUrlValidation.error}`);
+          setSubmitErrorMessage(imageUrlValidation.error);
+          setImageUrlErrorModal(true);
           return;
         }
-        console.log(
-          `Image URL validated successfully: ${imageUrlValidation.url}`
-        );
+        console.log(`Image URL validated successfully: ${imageUrlValidation.url}`);
       }
   
       try {
@@ -107,11 +111,8 @@ export default function Inputs() {
         setConfirmationModalOpen(true);
       } catch (error) {
         console.error("Error submitting form:", error);
-        alert(
-          `Failed to save tool: ${
-            error instanceof Error ? error.message : "Unknown error"
-          }`
-        );
+        setSubmitErrorMessage(error instanceof Error ? error.message : "Unknown error");
+        setSubmitErrorModal(true);
       }
     };
   
@@ -119,7 +120,7 @@ export default function Inputs() {
       <Button
         label="Add Tool"
         onClick={handleSubmit}
-        className="w-full mt-4 bg-twd-primary-purple "
+        className="w-full mt-4 bg-twd-primary-purple"
       />
     );
   }
@@ -145,6 +146,42 @@ export default function Inputs() {
         forwardButton={unusedCategoryForwardButton}
         backButton={unusedCategoryBackButton}
       />
+
+      <Modal
+        title="Please select at least one category"
+        modalOpen={categoryErrorModal}
+        forwardButton={{
+          label: "OK",
+          action: () => setCategoryErrorModal(false)
+        }}
+      />
+
+      <Modal
+        title={submitErrorMessage}
+        modalOpen={infoUrlErrorModal}
+        forwardButton={{
+          label: "OK",
+          action: () => setInfoUrlErrorModal(false)
+        }}
+      />
+
+      <Modal
+        title={submitErrorMessage}
+        modalOpen={imageUrlErrorModal}
+        forwardButton={{
+          label: "OK",
+          action: () => setImageUrlErrorModal(false)
+        }}
+      />
+
+      <Modal
+        title={`Failed to save tool: ${submitErrorMessage}`}
+        modalOpen={submitErrorModal}
+        forwardButton={{
+          label: "OK",
+          action: () => setSubmitErrorModal(false)
+        }}
+      />
     </div>
   );
 }
\ No newline at end of file