From 20923f53c701f33b7242d73a711c796cb0ee820c Mon Sep 17 00:00:00 2001
From: Dave Samojlenko <dave.samojlenko@cds-snc.ca>
Date: Tue, 22 Oct 2024 10:18:09 -0400
Subject: [PATCH] Get it basically working

---
 .../[id]/components/dialogs/APIKeyDialog.tsx  | 138 +++++++++---------
 .../settings/api/components/client/ApiKey.tsx |  20 +--
 lib/hooks/useCustomEvent.tsx                  |  26 ++--
 3 files changed, 94 insertions(+), 90 deletions(-)

diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/APIKeyDialog.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/APIKeyDialog.tsx
index 9e9325443a..067bb8e02e 100644
--- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/APIKeyDialog.tsx	
+++ b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/APIKeyDialog.tsx	
@@ -3,86 +3,80 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "@i18n/client";
 import { Button } from "@clientComponents/globals";
 import { Dialog, useDialogRef } from "@formBuilder/components/shared/Dialog";
-import { useCustomEvent } from "@lib/hooks/useCustomEvent";
+import {
+  APIKeyCustomEventDetails,
+  CustomEventDetails,
+  EventKeys,
+  useCustomEvent,
+} from "@lib/hooks/useCustomEvent";
 
 interface ApiKeyEvents extends CustomEvent {
-    detail: {
-        onDownload: () => void;
-    };
+  detail: {
+    onDownload: () => void;
+  };
 }
 
-
 export const ApiKeyDialog = () => {
-    const dialog = useDialogRef();
-    const { Event } = useCustomEvent();
-    const { t } = useTranslation("form-builder");
-    const [handler, setHandler] = useState<ApiKeyEvents | null>(null);
+  const dialog = useDialogRef();
+  const { Event } = useCustomEvent();
+  const { t } = useTranslation("form-builder");
+  const [handler, setHandler] = useState<APIKeyCustomEventDetails | null>(null);
 
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-    const handleClose = () => {
-        dialog.current?.close();
-        setIsOpen(false);
-    };
+  const handleClose = () => {
+    dialog.current?.close();
+    setIsOpen(false);
+  };
 
-    const handleOpenDialog = useCallback((detail: ApiKeyEvents) => {
-        if (detail) {
-            setHandler(detail);
-            setIsOpen(true);
-        }
-    }, []);
+  const handleOpenDialog = useCallback((detail: CustomEventDetails) => {
+    if (detail) {
+      setHandler(detail);
+      setIsOpen(true);
+    }
+  }, []);
 
-    useEffect(() => {
-        Event.on("open-api-key-dialog", handleOpenDialog({
-            detail: {
-                onDownload: () => {
-                    alert("Download");
-                }
-            },
-        }));
-        return () => {
-            Event.off("open-api-key-dialog", handleOpenDialog());
-        };
-    }, [Event, handleOpenDialog]);
+  const handleSave = () => {
+    handler?.download();
+    handleClose();
+  };
+
+  useEffect(() => {
+    Event.on(EventKeys.openApiKeyDialog, handleOpenDialog);
+    return () => {
+      Event.off(EventKeys.openApiKeyDialog, handleOpenDialog);
+    };
+  }, [Event, handleOpenDialog]);
 
-    const actions = (
-        <>
-            <Button
-                theme="secondary"
-                onClick={() => {
-                    dialog.current?.close();
-                    handleClose && handleClose();
-                }}
-            >
-                {t("dynamicRow.dialog.cancel")}
-            </Button>
-            <Button
-                className="ml-5"
-                theme="primary"
-                onClick={() => {
-                    alert("Save");
-                }}
-                dataTestId="confirm-delete"
-            >
-                {t("dynamicRow.dialog.save")}
-            </Button>
-        </>
-    );
+  const actions = (
+    <>
+      <Button
+        theme="secondary"
+        onClick={() => {
+          dialog.current?.close();
+          handleClose && handleClose();
+        }}
+      >
+        {t("dynamicRow.dialog.cancel")}
+      </Button>
+      <Button className="ml-5" theme="primary" onClick={handleSave} dataTestId="confirm-delete">
+        {t("dynamicRow.dialog.save")}
+      </Button>
+    </>
+  );
 
-    return (
-        <>
-            {isOpen && (
-                <Dialog
-                    handleClose={handleClose}
-                    dialogRef={dialog}
-                    actions={actions}
-                    title={t("dynamicRow.dialog.title")}
-                >
-                    <div className="p-5">
-                        Body
-                    </div>
-                </Dialog>
-            )}
-        </>
-    );
-};
\ No newline at end of file
+  return (
+    <>
+      {isOpen && (
+        <Dialog
+          handleClose={handleClose}
+          dialogRef={dialog}
+          actions={actions}
+          title={t("dynamicRow.dialog.title")}
+        >
+          <div className="p-5">Body</div>
+        </Dialog>
+      )}
+    </>
+  );
+};
diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/api/components/client/ApiKey.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/api/components/client/ApiKey.tsx
index e3c35fcf34..7aaebbd602 100644
--- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/api/components/client/ApiKey.tsx	
+++ b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/api/components/client/ApiKey.tsx	
@@ -9,7 +9,7 @@ import {
 } from "../../actions";
 import { useParams } from "next/navigation";
 import { useState } from "react";
-import { useCustomEvent } from "@lib/hooks/useCustomEvent";
+import { EventKeys, useCustomEvent } from "@lib/hooks/useCustomEvent";
 import { ApiKeyType } from "@lib/types/form-builder-types";
 
 const _createKey = async (templateId: string) => {
@@ -48,10 +48,10 @@ export const ApiKey = ({ keyExists }: { keyExists?: boolean }) => {
   if (Array.isArray(id)) return null;
 
   const openDialog = () => {
-    Event.fire("open-api-key-dialog", {
+    Event.fire(EventKeys.openApiKeyDialog, {
       download: () => {
         downloadKey(JSON.stringify(key), id);
-      }
+      },
     });
   };
 
@@ -75,12 +75,14 @@ export const ApiKey = ({ keyExists }: { keyExists?: boolean }) => {
             </Button>
           </>
         ) : (
-          <Button theme="primary" onClick={async () => {
-            const key = await _createKey(id);
-            setKey(key);
-            openDialog();
-          }
-          }>
+          <Button
+            theme="primary"
+            onClick={async () => {
+              // const key = await _createKey(id);
+              setKey({ type: "", keyId: "", userId: "", key: "" });
+              openDialog();
+            }}
+          >
             {t("settings.api.generateKey")}
           </Button>
         )}
diff --git a/lib/hooks/useCustomEvent.tsx b/lib/hooks/useCustomEvent.tsx
index a71fcf37d0..b22df66381 100644
--- a/lib/hooks/useCustomEvent.tsx
+++ b/lib/hooks/useCustomEvent.tsx
@@ -11,16 +11,25 @@ import { useRef } from "react";
  * }
  */
 
-export type CustomEventDetails<T = undefined> = T;
-type FireFunction = <T>(eventName: string, detail?: CustomEventDetails<T>) => void;
+export const EventKeys = {
+  openApiKeyDialog: "open-api-key-dialog",
+} as const;
 
-
-type Event = {
-  fire: FireFunction;
-  on: <T>(eventName: string, callback: (detail: CustomEventDetails<T>) => void) => void;
-  off: <T>(eventName: string, callback: (detail: CustomEventDetails<T>) => void) => void;
+export type APIKeyCustomEventDetails = {
+  download: () => void;
 };
 
+export type CustomEventDetails = APIKeyCustomEventDetails | undefined;
+
+// export type CustomEventDetails<T = undefined> = T;
+// type FireFunction = <T>(eventName: string, detail?: CustomEventDetails<T>) => void;
+
+// type Event = {
+//   fire: FireFunction;
+//   on: <T>(eventName: string, callback: (detail: CustomEventDetails<T>) => void) => void;
+//   off: <T>(eventName: string, callback: (detail: CustomEventDetails<T>) => void) => void;
+// };
+
 export const useCustomEvent = () => {
   // Attach listeners to a documentRef instead of document directly
   // https://www.preciousorigho.com/articles/a-better-way-to-create-event-listeners-in-react
@@ -30,14 +39,13 @@ export const useCustomEvent = () => {
     documentRef.current = window.document;
   }
 
-
   const Event = {
     /**
      * Fire an event, pass an optional payload
      * @param eventName string
      * @param data CustomEventDetails
      */
-    fire: (eventName, detail) => {
+    fire: (eventName: string, detail: CustomEventDetails = undefined) => {
       const event = new CustomEvent(eventName, { detail });
       documentRef.current && documentRef.current.dispatchEvent(event);
     },