From 768e1cd93a88f85b73d46704c6623abda490b36d Mon Sep 17 00:00:00 2001
From: Jack Casstles-Jones <jackcasstlesjones@gmail.com>
Date: Tue, 17 Dec 2024 15:28:05 +0000
Subject: [PATCH 1/2] refactor: remove nested submitbutton component

---
 .../add-tool/components/AddToolInputs.tsx     | 173 +++++++++---------
 1 file changed, 88 insertions(+), 85 deletions(-)

diff --git a/src/app/toolkit/add-tool/components/AddToolInputs.tsx b/src/app/toolkit/add-tool/components/AddToolInputs.tsx
index 453d793a..be16b662 100644
--- a/src/app/toolkit/add-tool/components/AddToolInputs.tsx
+++ b/src/app/toolkit/add-tool/components/AddToolInputs.tsx
@@ -29,91 +29,81 @@ export default function Inputs() {
   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.name || formState.name.trim() === "") {
-        setNameErrorModalOpen(true);
+  const handleSubmit = async () => {
+    console.log(`Validating form with state: ${JSON.stringify(formState)}`);
+
+    if (!formState.name || formState.name.trim() === "") {
+      setNameErrorModalOpen(true);
+      return;
+    }
+
+    if (formState.categories.length === 0) {
+      setCategoryErrorModal(true);
+      return;
+    }
+
+    if (formState.infoUrl) {
+      const infoUrlValidation = validateUrl(formState.infoUrl, "Info URL");
+      if (!infoUrlValidation.isValid) {
+        console.error(`Info URL validation failed: ${infoUrlValidation.error}`);
+        setSubmitErrorMessage(infoUrlValidation.error || "");
+        setInfoUrlErrorModal(true);
         return;
       }
-
-      if (formState.categories.length === 0) {
-        setCategoryErrorModal(true);
-        return;
-      }
-
-      if (formState.infoUrl) {
-        const infoUrlValidation = validateUrl(formState.infoUrl, "Info URL");
-        if (!infoUrlValidation.isValid) {
-          console.error(
-            `Info URL validation failed: ${infoUrlValidation.error}`
-          );
-          setSubmitErrorMessage(infoUrlValidation.error || "");
-          setInfoUrlErrorModal(true);
-          return;
-        }
-        console.log(
-          `Info URL validated successfully: ${infoUrlValidation.url}`
-        );
-      }
-
-      if (formState.imageUrl) {
-        const imageUrlValidation = validateUrl(formState.imageUrl, "Image URL");
-        if (!imageUrlValidation.isValid) {
-          console.error(
-            `Image URL validation failed: ${imageUrlValidation.error}`
-          );
-          setSubmitErrorMessage(imageUrlValidation.error || "");
-          setImageUrlErrorModal(true);
-          return;
-        }
-        console.log(
-          `Image URL validated successfully: ${imageUrlValidation.url}`
+      console.log(`Info URL validated successfully: ${infoUrlValidation.url}`);
+    }
+
+    if (formState.imageUrl) {
+      const imageUrlValidation = validateUrl(formState.imageUrl, "Image URL");
+      if (!imageUrlValidation.isValid) {
+        console.error(
+          `Image URL validation failed: ${imageUrlValidation.error}`
         );
+        setSubmitErrorMessage(imageUrlValidation.error || "");
+        setImageUrlErrorModal(true);
+        return;
       }
-
-      try {
-        for (const category of formState.pendingCategories) {
-          if (formState.categories.includes(category)) {
+      console.log(
+        `Image URL validated successfully: ${imageUrlValidation.url}`
+      );
+    }
+
+    try {
+      for (const category of formState.pendingCategories) {
+        if (formState.categories.includes(category)) {
+          await database.addCategories(category);
+        } else {
+          await setUnusedCategoryModalOpen(true);
+          if (saveUnusedCategory) {
+            console.log("I am saving the unused category");
+            setUnusedCategory(unusedCategory.concat(category));
             await database.addCategories(category);
-          } else {
-            await setUnusedCategoryModalOpen(true);
-            if (saveUnusedCategory) {
-              setUnusedCategory(unusedCategory.concat(category));
-              await database.addCategories(category);
-            }
           }
         }
-
-        await database.addToDb("toolkit_items", {
-          id: crypto.randomUUID(),
-          name: formState.name,
-          categories: formState.categories,
-          description: formState.description,
-          checked: false,
-          infoUrl: formState.infoUrl,
-          imageUrl: formState.imageUrl,
-          timestamp: new Date().toISOString(),
-        });
-
-        console.log(`Created ${formState.name} in the database`);
-
-        setConfirmationModalOpen(true);
-      } catch (error) {
-        console.error("Error submitting form:", error);
-        setSubmitErrorMessage(
-          error instanceof Error ? error.message : "Unknown error"
-        );
-        setSubmitErrorModal(true);
       }
-    };
 
-    return ( <Button label="Add Tool"
-      onClick={handleSubmit}
-      className="w-full mt-3 bg-twd-primary-purple"
-    /> );
-  }
+      await database.addToDb("toolkit_items", {
+        id: crypto.randomUUID(),
+        name: formState.name,
+        categories: formState.categories,
+        description: formState.description,
+        checked: false,
+        infoUrl: formState.infoUrl,
+        imageUrl: formState.imageUrl,
+        timestamp: new Date().toISOString(),
+      });
+
+      console.log(`Created ${formState.name} in the database`);
+
+      setConfirmationModalOpen(true);
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      setSubmitErrorMessage(
+        error instanceof Error ? error.message : "Unknown error"
+      );
+      setSubmitErrorModal(true);
+    }
+  };
 
   return (
     <div className="flex-col flex gap-6 p-4">
@@ -122,10 +112,15 @@ export default function Inputs() {
       <AddDescription />
       <AddImageUrl />
       <AddInfoUrl />
-      
-      <SubmitButton />
 
-      <Modal title="Tool Added"
+      <Button
+        label="Add Tool"
+        onClick={handleSubmit}
+        className="w-full mt-3 bg-twd-primary-purple"
+      />
+
+      <Modal
+        title="Tool Added"
         modalOpen={confirmationModalOpen}
         forwardButton={{
           label: "Continue",
@@ -136,7 +131,8 @@ export default function Inputs() {
         }}
       />
 
-      <Modal title="Name is required"
+      <Modal
+        title="Name is required"
         modalOpen={nameErrorModalOpen}
         forwardButton={{
           label: "OK",
@@ -144,7 +140,8 @@ export default function Inputs() {
         }}
       />
 
-      <Modal title="You created an unused tag. What would you like to save?"
+      <Modal
+        title="You created an unused tag. What would you like to save?"
         modalOpen={unusedCategoryModalOpen}
         forwardButton={{
           label: "Tool & Tag",
@@ -162,7 +159,8 @@ export default function Inputs() {
         }}
       />
 
-      <Modal title="Please select at least one tag"
+      <Modal
+        title="Please select at least one tag"
         modalOpen={categoryErrorModal}
         forwardButton={{
           label: "OK",
@@ -170,21 +168,26 @@ export default function Inputs() {
         }}
       />
 
-      <Modal title={submitErrorMessage} modalOpen={infoUrlErrorModal}
+      <Modal
+        title={submitErrorMessage}
+        modalOpen={infoUrlErrorModal}
         forwardButton={{
           label: "OK",
           action: () => setInfoUrlErrorModal(false),
         }}
       />
 
-      <Modal title={submitErrorMessage} modalOpen={imageUrlErrorModal}
+      <Modal
+        title={submitErrorMessage}
+        modalOpen={imageUrlErrorModal}
         forwardButton={{
           label: "OK",
           action: () => setImageUrlErrorModal(false),
         }}
       />
 
-      <Modal title={`Failed to save tool: ${submitErrorMessage}`}
+      <Modal
+        title={`Failed to save tool: ${submitErrorMessage}`}
         modalOpen={submitErrorModal}
         forwardButton={{
           label: "OK",

From 93180c4a026ea90abb88642c0aee198e2a8c3d4c Mon Sep 17 00:00:00 2001
From: Jack Casstles-Jones <jackcasstlesjones@gmail.com>
Date: Tue, 17 Dec 2024 16:19:36 +0000
Subject: [PATCH 2/2] fix: bug where selecting to save an unused category
 wasn't working

---
 .../add-tool/components/AddToolInputs.tsx     | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/toolkit/add-tool/components/AddToolInputs.tsx b/src/app/toolkit/add-tool/components/AddToolInputs.tsx
index be16b662..cd89ed58 100644
--- a/src/app/toolkit/add-tool/components/AddToolInputs.tsx
+++ b/src/app/toolkit/add-tool/components/AddToolInputs.tsx
@@ -21,7 +21,6 @@ export default function Inputs() {
   const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
   const [unusedCategoryModalOpen, setUnusedCategoryModalOpen] = useState(false);
   const [unusedCategory, setUnusedCategory] = useState([""]);
-  const [saveUnusedCategory, setSaveUnusedCategory] = useState(false);
   const [categoryErrorModal, setCategoryErrorModal] = useState(false);
   const [infoUrlErrorModal, setInfoUrlErrorModal] = useState(false);
   const [imageUrlErrorModal, setImageUrlErrorModal] = useState(false);
@@ -68,17 +67,13 @@ export default function Inputs() {
       );
     }
 
+    // Submit categories
     try {
       for (const category of formState.pendingCategories) {
         if (formState.categories.includes(category)) {
           await database.addCategories(category);
         } else {
-          await setUnusedCategoryModalOpen(true);
-          if (saveUnusedCategory) {
-            console.log("I am saving the unused category");
-            setUnusedCategory(unusedCategory.concat(category));
-            await database.addCategories(category);
-          }
+          setUnusedCategoryModalOpen(true);
         }
       }
 
@@ -105,6 +100,14 @@ export default function Inputs() {
     }
   };
 
+  const saveUnusedCategory = async () => {
+    for (const category of formState.pendingCategories) {
+      console.log("I am saving the unused category");
+      setUnusedCategory(unusedCategory.concat(category));
+      await database.addCategories(category);
+    }
+  };
+
   return (
     <div className="flex-col flex gap-6 p-4">
       <AddName />
@@ -146,14 +149,13 @@ export default function Inputs() {
         forwardButton={{
           label: "Tool & Tag",
           action: () => {
-            setSaveUnusedCategory(true);
+            saveUnusedCategory();
             setUnusedCategoryModalOpen(false);
           },
         }}
         backButton={{
           label: "Tool",
           action: () => {
-            setSaveUnusedCategory(false);
             setUnusedCategoryModalOpen(false);
           },
         }}