tweak(client/utils): Add and tweak various fetch utils for refactor

phone/src/utils/fetchNui.ts

@@ -0,0 +1,26 @@
+/**
+ * Simple wrapper around fetch API tailored for CEF/NUI use.
+ * @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
+ */
+import LogDebugEvent from '../os/debug/LogDebugEvents';
+
+export async function fetchNui<T = any>(eventName: string, data?: any): Promise<T> {
+  const options = {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8',
+    },
+    body: JSON.stringify(data),
+  };
+
+  LogDebugEvent({ data, action: 'fetchNui' });
+
+  const resourceName = (window as any)?.GetParentResourceName() || 'npwd';
+
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+
+  return await resp.json();
+}

resources/client/cl_utils.ts

@@ -1,4 +1,5 @@
 import { uuidv4 } from '../utils/fivem';
+import { ClUtils } from './client';
 
 interface ISettings {
   promiseTimeout: number;
@@ -42,20 +43,54 @@ export default class ClientUtils {
 
       emitNet(eventName, listenEventName, ...args);
 
-      const handleListenEvent = (data: T, err: unknown) => {
+      const handleListenEvent = (data: T) => {
         removeEventListener(listenEventName, handleListenEvent);
         if (hasTimedOut) return;
-        if (err) reject(err);
         resolve(data);
       };
       onNet(listenEventName, handleListenEvent);
     });
   }
 }
 
-export const NuiCallback = (event: string, callback: Function) => {
-  RegisterRawNuiCallback(event, (data: any) => {
-    const parsed = JSON.parse(data?.body);
-    callback(parsed);
+type CallbackFn<T> = (data: T, cb: Function) => void;
+
+/**
+ * A wrapper for handling NUI Callbacks
+ *  @param event - The event name to listen for
+ *  @param callback - The callback function
+ */
+export const RegisterNuiCB = <T = any>(event: string, callback: CallbackFn<T>) => {
+  RegisterNuiCallbackType(event);
+  on(`__cfx_nui:${event}`, callback);
+};
+
+/**
+ *  Will Register an NUI event listener that will immediately
+ *  proxy to a server side event of the same name and wait
+ *  for the response.
+ *  @param event - The event name to listen for
+ */
+export const RegisterNuiProxy = <T = any>(event: string) => {
+  RegisterNuiCallbackType(event);
+  on(`__cfx_nui:${event}`, async (data: unknown, cb: Function) => {
+    try {
+      const res = await ClUtils.emitNetPromise(event, data);
+      cb(res);
+    } catch (e) {
+      console.error('Error encountered while listening to resp. Error:', e);
+      cb({ err: e });
+    }
   });
 };
+
+type WrapperNetEventCb = <T extends any[]>(...args: T) => void;
+
+/**
+ * Wrapped onNet so we can use generic types on return values from server
+ * @param event - The event name to listen to
+ * @param cb - The callback function to execute
+ */
+export const onNpwdEvent = <T = any>(event: string, cb: WrapperNetEventCb) => {
+  onNet(event, cb);
+};