Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/fac30/things-we-do into fea…
Browse files Browse the repository at this point in the history 
…ture/needs/delete-next-actions
  • Loading branch information
@JasonWarrenUK
JasonWarrenUK committed Dec 17, 2024
2 parents 1a77b6d + 28a4116 commit ecab97b
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 95 deletions.
187 changes: 95 additions & 92 deletions src/app/toolkit/add-tool/components/AddToolInputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,101 +21,92 @@ 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);
const [nameErrorModalOpen, setNameErrorModalOpen] = 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.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)) {
await database.addCategories(category);
} else {
await setUnusedCategoryModalOpen(true);
if (saveUnusedCategory) {
setUnusedCategory(unusedCategory.concat(category));
await database.addCategories(category);
}
}
console.log(
`Image URL validated successfully: ${imageUrlValidation.url}`
);
}

// Submit categories
try {
for (const category of formState.pendingCategories) {
if (formState.categories.includes(category)) {
await database.addCategories(category);
} else {
setUnusedCategoryModalOpen(true);
}

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);
}
};

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">
Expand All @@ -124,10 +115,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",
Expand All @@ -138,55 +134,62 @@ export default function Inputs() {
}}
/>

<Modal title="Name is required"
<Modal
title="Name is required"
modalOpen={nameErrorModalOpen}
forwardButton={{
label: "OK",
action: () => setNameErrorModalOpen(false),
}}
/>

<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",
action: () => {
setSaveUnusedCategory(true);
saveUnusedCategory();
setUnusedCategoryModalOpen(false);
},
}}
backButton={{
label: "Tool",
action: () => {
setSaveUnusedCategory(false);
setUnusedCategoryModalOpen(false);
},
}}
/>

<Modal title="Please select at least one tag"
<Modal
title="Please select at least one tag"
modalOpen={categoryErrorModal}
forwardButton={{
label: "OK",
action: () => setCategoryErrorModal(false),
}}
/>

<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",
Expand Down
16 changes: 13 additions & 3 deletions src/ui/shared/InfoButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,20 @@ export default function InfoButton({
className="flex items-center justify-center w-8 h-8 border-2 border-twd-background rounded-full text-white font-bold transition"
>
{/* <InformationCircleIcon className="text-white !important" /> */}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="size-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
/>
</svg>

</button>
{isPopupOpen && (
<div
Expand Down

0 comments on commit ecab97b

Please sign in to comment.