From 0ed51ed32562670957ff700bfdc67aa0fcd156b1 Mon Sep 17 00:00:00 2001
From: Wayne <wayne.lee@2fi-solutions.com.hk>
Date: Sun, 15 Dec 2024 18:35:00 +0900
Subject: [PATCH] Wait for no custom errors before submitting

---
 .../TimeLeaveModal/TimeLeaveInputTable.tsx    |  5 +++-
 .../TimeLeaveModal/TimeLeaveModal.tsx         | 10 +++++--
 src/components/utils/waitFor.ts               | 30 +++++++++++++++++++
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/components/utils/waitFor.ts

diff --git a/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx b/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
index 5df4577..3eb6ef3 100644
--- a/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
+++ b/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
@@ -637,7 +637,10 @@ const TimeLeaveInputTable: React.FC<Props> = ({
     setValue(day, newEntries);
 
     if (entries.some((e) => e._isNew)) {
-      setError(day, { message: "There are some unsaved entries." });
+      setError(day, {
+        message: "There are some unsaved entries.",
+        type: "custom",
+      });
     } else {
       clearErrors(day);
     }
diff --git a/src/components/TimeLeaveModal/TimeLeaveModal.tsx b/src/components/TimeLeaveModal/TimeLeaveModal.tsx
index f7a170b..36aaab9 100644
--- a/src/components/TimeLeaveModal/TimeLeaveModal.tsx
+++ b/src/components/TimeLeaveModal/TimeLeaveModal.tsx
@@ -39,6 +39,7 @@ import DateHoursList from "../DateHoursTable/DateHoursList";
 import TimeLeaveInputTable from "./TimeLeaveInputTable";
 import TimeLeaveMobileEntry from "./TimeLeaveMobileEntry";
 import { Task } from "@/app/api/tasks";
+import waitForCondition from "../utils/waitFor";
 
 interface Props {
   isOpen: boolean;
@@ -240,9 +241,14 @@ const TimeLeaveModal: React.FC<Props> = ({
                 <Button
                   variant="contained"
                   startIcon={<Check />}
-                  type="submit"
-                  onClick={() => {
+                  onClick={async () => {
+                    await waitForCondition(async () => {
+                      return !Object.values(formProps.formState.errors).some(
+                        (err) => err?.type === "custom",
+                      );
+                    });
                     formProps.clearErrors();
+                    formProps.handleSubmit(onSubmit)();
                   }}
                 >
                   {t("Save")}
diff --git a/src/components/utils/waitFor.ts b/src/components/utils/waitFor.ts
new file mode 100644
index 0000000..14884ac
--- /dev/null
+++ b/src/components/utils/waitFor.ts
@@ -0,0 +1,30 @@
+/**
+ * Wait until a condition to be true with a default timeout of 1 second (and checking every 100ms).
+ */
+export const waitForCondition = async (
+  condition: () => Promise<boolean>,
+  waitOptions: {
+    timeout: number;
+    interval: number;
+  } = { timeout: 1000, interval: 100 },
+) => {
+  const startTime = Date.now();
+
+  const check = async () => {
+    if (await condition()) {
+      return;
+    } else {
+      if (Date.now() - startTime < waitOptions.timeout) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(check());
+          }, waitOptions.interval);
+        });
+      }
+    }
+  };
+
+  return check();
+};
+
+export default waitForCondition;