fix(web/radial): go back to correct more page when going back from sub

overextended · Feb 25, 2023 · 709d512 · 709d512 · Moozdzn · Feb 25, 2023
1 parent b3b49b1
commit 709d512
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/resource/interface/client/radial.lua b/resource/interface/client/radial.lua
@@ -24,6 +24,9 @@ local menuHistory = {}
 ---@type RadialMenuProps?
 local currentRadial = nil
 
+---@type number | nil
+local menuPage = nil
+
 ---Open a the global radial menu or a registered radial submenu with the given id.
 ---@param id string?
 local function showRadial(id)
@@ -113,7 +116,7 @@ function lib.hideRadial()
 
     SendNUIMessage({
         action = 'openRadialMenu',
-        data = false
+        data = menuPage or false
     })
 
     SetNuiFocus(false, false)
@@ -229,8 +232,11 @@ lib.addKeybind({
     defaultKey = 'z',
     onPressed = function()
         if isOpen then
+            menuPage = 1
             return lib.hideRadial()
         end
+
+        menuPage = nil
 
         if #menuItems == 0 or IsNuiFocused() or IsPauseMenuActive() then return end
 

diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx
@@ -84,11 +84,19 @@ const RadialMenu: React.FC = () => {
     setMenuItems(items);
   }, [menu.items, menu.page]);
 
-  useNuiEvent('openRadialMenu', async (data: { items: RadialMenuItem[]; sub?: boolean } | false) => {
-    if (!data) return setVisible(false);
-    setMenu({ ...data, page: 1 });
-    setVisible(true);
-  });
+  useNuiEvent(
+    'openRadialMenu',
+    async (data: { items: RadialMenuItem[]; sub?: boolean; page?: number } | false | number) => {
+      if (!data || typeof data === 'number') {
+        setVisible(false);
+        if (typeof data === 'number') setMenu((ps) => ({ ...ps, page: data }));
+        return;
+      }
+      // data.page currently unused but might need later?
+      setMenu((state) => ({ ...data, page: data.page || state.page }));
+      setVisible(true);
+    }
+  );
 
   useNuiEvent('refreshItems', (data: RadialMenuItem[]) => {
     setMenu({ ...menu, items: data });
@@ -99,8 +107,8 @@ const RadialMenu: React.FC = () => {
       <Box
         className={classes.wrapper}
         onContextMenu={async () => {
-          if (menu.page > 1) await changePage();
-          else if (menu.sub) fetchNui('radialBack');
+          if (menu.sub) fetchNui('radialBack');
+          else if (menu.page > 1) await changePage();
         }}
       >
         <ScaleFade visible={visible}>
@@ -158,13 +166,11 @@ const RadialMenu: React.FC = () => {
             <g
               transform={`translate(175, 175)`}
               onClick={async () => {
-                if (menu.page > 1) await changePage();
+                if (menu.sub) fetchNui('radialBack');
+                else if (menu.page > 1) await changePage();
                 else {
-                  if (menu.sub) fetchNui('radialBack');
-                  else {
-                    setVisible(false);
-                    fetchNui('radialClose');
-                  }
+                  setVisible(false);
+                  fetchNui('radialClose');
                 }
               }}
             >