ed

resources/[tools]/ps-banking/web/src/utils/debugData.ts

@@ -0,0 +1,30 @@
+import {isEnvBrowser} from "./misc";
+
+interface DebugEvent<T = any> {
+  action: string;
+  data: T;
+}
+
+/**
+ * Emulates dispatching an event using SendNuiMessage in the lua scripts.
+ * This is used when developing in browser
+ *
+ * @param events - The event you want to cover
+ * @param timer - How long until it should trigger (ms)
+ */
+export const debugData = <P>(events: DebugEvent<P>[], timer = 1000): void => {
+  if (isEnvBrowser()) {
+    for (const event of events) {
+      setTimeout(() => {
+        window.dispatchEvent(
+          new MessageEvent("message", {
+            data: {
+              action: event.action,
+              data: event.data,
+            },
+          })
+        );
+      }, timer);
+    }
+  }
+};

resources/[tools]/ps-banking/web/src/utils/fetchNui.ts

@@ -0,0 +1,27 @@
+/**
+* @param eventName - The endpoint eventname to target
+* @param data - Data you wish to send in the NUI Callback
+*
+* @return returnData - A promise for the data sent back by the NuiCallbacks CB argument
+*/
+
+export async function fetchNui<T = any>(
+  eventName: string,
+  data: unknown = {}
+): Promise<T> {
+  const options = {
+    method: "post",
+    headers: {
+      "Content-Type": "application/json; charset=UTF-8",
+    },
+    body: JSON.stringify(data),
+  };
+
+  const resourceName = (window as any).GetParentResourceName
+    ? (window as any).GetParentResourceName()
+    : "nui-frame-app";
+
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+
+  return await resp.json();
+}

resources/[tools]/ps-banking/web/src/utils/misc.ts

@@ -0,0 +1 @@
+export const isEnvBrowser = (): boolean => !(window as any).invokeNative;

resources/[tools]/ps-banking/web/src/utils/useNuiEvent.ts

@@ -0,0 +1,51 @@
+import { onDestroy } from "svelte";
+
+interface NuiMessage<T = unknown> {
+  action: string;
+  data: T;
+}
+
+/**
+ * A function that manage events listeners for receiving data from the client scripts
+ * @param action The specific `action` that should be listened for.
+ * @param handler The callback function that will handle data relayed by this function
+ *
+ * @example
+ * useNuiEvent<{visibility: true, wasVisible: 'something'}>('setVisible', (data) => {
+ *   // whatever logic you want
+ * })
+ *
+ **/
+
+type NuiEventHandler<T = any> = (data: T) => void;
+
+const eventListeners = new Map<string, NuiEventHandler[]>();
+
+const eventListener = (event: MessageEvent<NuiMessage>) => {
+  const { action, data } = event.data;
+  const handlers = eventListeners.get(action);
+
+  if (handlers) {
+    handlers.forEach((handler) => handler(data));
+  }
+};
+
+window.addEventListener("message", eventListener);
+
+export function useNuiEvent<T = unknown>(
+  action: string,
+  handler: NuiEventHandler<T>
+) {
+  const handlers = eventListeners.get(action) || [];
+  handlers.push(handler);
+  eventListeners.set(action, handlers);
+
+  onDestroy(() => {
+    const handlers = eventListeners.get(action) || [];
+
+    eventListeners.set(
+      action,
+      handlers.filter((h) => h !== handler)
+    );
+  });
+}