From 3034a329551c4fbe23336919d5e5ce06b1a33305 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Fri, 17 Jun 2022 20:29:40 +0200
Subject: [PATCH] refactor(dialog/alert): allow defining cancel button

Using the same promise type of API that the input dialog is using, if the user closes the dialog via esc or the cancel button the promise will resolve `cancel` otherwise the promise will resolve `confirm`
---
 resource/interface/client/alert.lua     | 11 ++++++++++-
 web/src/features/dialog/AlertDialog.tsx | 20 ++++++++++++++++----
 web/src/providers/LocaleProvider.tsx    |  2 ++
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/resource/interface/client/alert.lua b/resource/interface/client/alert.lua
index 8af45e9..8531c4f 100644
--- a/resource/interface/client/alert.lua
+++ b/resource/interface/client/alert.lua
@@ -1,14 +1,23 @@
+local alert = nil
+
 function lib.alertDialog(data)
+    if alert then return end
+    alert = promise.new()
+
     SetNuiFocus(true, true)
     SendNUIMessage({
         action = 'sendAlert',
         data = data
     })
+
+    return Citizen.Await(alert)
 end
 
-RegisterNUICallback('closeAlert', function(_, cb)
+RegisterNUICallback('closeAlert', function(data, cb)
     cb(1)
     SetNuiFocus(false, false)
+    alert:resolve(data)
+    alert = nil
 end)
 
 RegisterNetEvent('ox_lib:alertDialog', lib.alertDialog)
diff --git a/web/src/features/dialog/AlertDialog.tsx b/web/src/features/dialog/AlertDialog.tsx
index 3081d32..2e125ac 100644
--- a/web/src/features/dialog/AlertDialog.tsx
+++ b/web/src/features/dialog/AlertDialog.tsx
@@ -19,6 +19,7 @@ interface DialogProps {
   header: string;
   content: string;
   centered?: boolean;
+  cancel?: boolean;
 }
 
 debugData<DialogProps>([
@@ -28,6 +29,7 @@ debugData<DialogProps>([
       header: "Hello there",
       content: "General kenobi  \n Markdown works",
       centered: true,
+      cancel: true,
     },
   },
 ]);
@@ -41,9 +43,9 @@ const AlertDialog: React.FC = () => {
     content: "",
   });
 
-  const closeAlert = () => {
+  const closeAlert = (button: string) => {
     onClose();
-    fetchNui("closeAlert");
+    fetchNui("closeAlert", button);
   };
 
   useNuiEvent("sendAlert", (data: DialogProps) => {
@@ -59,7 +61,7 @@ const AlertDialog: React.FC = () => {
         isOpen={isOpen}
         isCentered={dialogData.centered}
         closeOnOverlayClick={false}
-        onEsc={closeAlert}
+        onEsc={() => closeAlert("cancel")}
       >
         <AlertDialogOverlay />
         <AlertDialogContent fontFamily="Inter">
@@ -70,7 +72,17 @@ const AlertDialog: React.FC = () => {
             <ReactMarkdown>{dialogData.content}</ReactMarkdown>
           </AlertDialogBody>
           <AlertDialogFooter>
-            <Button onClick={closeAlert}>{locale.ui.confirm}</Button>
+            {dialogData.cancel && (
+              <Button onClick={() => closeAlert("cancel")} mr={3}>
+                {locale.ui.cancel}
+              </Button>
+            )}
+            <Button
+              colorScheme={dialogData.cancel ? "blue" : undefined}
+              onClick={() => closeAlert("confirm")}
+            >
+              {locale.ui.confirm}
+            </Button>
           </AlertDialogFooter>
         </AlertDialogContent>
       </Dialog>
diff --git a/web/src/providers/LocaleProvider.tsx b/web/src/providers/LocaleProvider.tsx
index afb8706..835b304 100644
--- a/web/src/providers/LocaleProvider.tsx
+++ b/web/src/providers/LocaleProvider.tsx
@@ -47,6 +47,7 @@ interface Locale {
       title: string;
       language: string;
     };
+    cancel: string;
     close: string;
     confirm: string;
   };
@@ -67,6 +68,7 @@ const LocaleProvider: React.FC = ({ children }) => {
         title: "",
         language: "",
       },
+      cancel: "",
       close: "",
       confirm: "",
     },