feat(client/nui): Ability to display custom metadata

Author: LukeWasTakenn

modules/items/client.lua

@@ -1,5 +1,15 @@
 local Items = shared.items
 
+local function displayMetadata(metadata, value)
+	local data = metadata
+	if type(metadata) == 'string' and value then data = { [metadata] = value } end
+	SendNUIMessage({
+		action = 'displayMetadata',
+		data = data
+	})
+end
+exports('displayMetadata', displayMetadata)
+
 local function GetItem(item)
 	if item then
 		item = string.lower(item)

web/src/components/App.tsx

@@ -36,6 +36,9 @@ debugData([
               durability: 100,
               description: `# Testing something  \n**Yes**`,
               serial: 'SUPERCOOLWATER9725',
+              mustard: '60%',
+              ketchup: '30%',
+              mayo: '10%',
             },
             count: 5,
           },

web/src/components/inventory/InventoryGrid.tsx

@@ -12,10 +12,19 @@ import { createPortal } from 'react-dom';
 import useNuiEvent from '../../hooks/useNuiEvent';
 import useKeyPress from '../../hooks/useKeyPress';
 import { setClipboard } from '../../utils/setClipboard';
+import { debugData } from '../../utils/debugData';
+
+// debugData([
+//   {
+//     action: 'displayMetadata',
+//     data: { ['mustard']: 'Mustard', ['ketchup']: 'Ketchup' },
+//   },
+// ]);
 
 const InventoryGrid: React.FC<{ inventory: Inventory }> = ({ inventory }) => {
   const [currentItem, setCurrentItem] = React.useState<SlotWithItem>();
   const [contextVisible, setContextVisible] = React.useState<boolean>(false);
+  const [additionalMetadata, setAdditionalMetadata] = React.useState<{ [key: string]: any }>({});
 
   const isControlPressed = useKeyPress('Control');
   const isCopyPressed = useKeyPress('c');
@@ -46,6 +55,10 @@ const InventoryGrid: React.FC<{ inventory: Inventory }> = ({ inventory }) => {
     ReactTooltip.rebuild();
   });
 
+  useNuiEvent<{ [key: string]: any }>('displayMetadata', (data) =>
+    setAdditionalMetadata((oldMetadata) => ({ ...oldMetadata, ...data }))
+  );
+
   return (
     <>
       <div className="column-wrapper">
@@ -131,6 +144,15 @@ const InventoryGrid: React.FC<{ inventory: Inventory }> = ({ inventory }) => {
                   {Locale.ui_tint}: {currentItem.metadata.weapontint}
                 </p>
               )}
+              {Object.keys(additionalMetadata).map((data: string, index: number) => (
+                <React.Fragment key={`metadata-${index}`}>
+                  {currentItem.metadata && currentItem.metadata[data] && (
+                    <p>
+                      {additionalMetadata[data]}: {currentItem.metadata[data]}
+                    </p>
+                  )}
+                </React.Fragment>
+              ))}
             </>
           </ReactTooltip>
         )}