feat(nui): WIP manual pagination

overextended · Jan 4, 2022 · 7560099 · 7560099
1 parent 3a1462e
commit 7560099
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 57 deletions.
diff --git a/src/logger/index.ts b/src/logger/index.ts
@@ -48,12 +48,14 @@ RegisterCommand(
   true
 );
 
-onNet(`oxmysql:fetchResource`, (resource: string) => {
-  if (typeof resource !== 'string') return;
+onNet(`oxmysql:fetchResource`, (data: {resource: string, pageIndex: number}) => {
+  if (typeof data.resource !== 'string') return;
 
-  const queries = logStorage[resource];
+  const queries = logStorage[data.resource].slice(data.pageIndex * 12, data.pageIndex + 12)
+
+  const pageCount = Math.ceil(logStorage[data.resource].length / 12)
 
   if (!queries) return;
 
-  emitNet(`oxmysql:loadResource`, source, queries);
+  emitNet(`oxmysql:loadResource`, source, {queries, pageCount});
 });
diff --git a/ui.lua b/ui.lua
@@ -1,12 +1,8 @@
 RegisterNetEvent('oxmysql:openUi', function(data)
     SendNUIMessage({
-        action = 'init',
+        action = 'openUI',
         data = data
     })
-    SendNUIMessage({
-        action = 'setVisible',
-        data = true
-    })
     SetNuiFocus(true, true)
 end)
 
@@ -15,8 +11,8 @@ RegisterNUICallback('exit', function(_, cb)
     SetNuiFocus(false, false)
 end)
 
-RegisterNUICallback('fetchResource', function(resource, cb)
-    TriggerServerEvent('oxmysql:fetchResource', resource)
+RegisterNUICallback('fetchResource', function(data, cb)
+    TriggerServerEvent('oxmysql:fetchResource', data)
     cb(true)
 end)
 

diff --git a/ui/src/components/App.tsx b/ui/src/components/App.tsx
@@ -23,27 +23,24 @@ const App: React.FC = () => {
 
   return (
     <Center w="100%" h="100%">
-      {visible && (
-        <MotionBox
-          animate={{ y: [100, 0] }}
-          width="60%"
-          height="50%"
-          backgroundColor="#191E26"
-          borderRadius="1vh"
-          color="white"
-          fontFamily="Poppins"
-          userSelect="none"
-        >
-          <TopBar />
-          <LeftBar />
-          <RightBar />
-          <MainContent>
-            <Routes>
-              <Route path="/:resource" element={<Resource />} />
-            </Routes>
-          </MainContent>
-        </MotionBox>
-      )}
+      <Box
+        width="60%"
+        height="50%"
+        backgroundColor="#191E26"
+        borderRadius="1vh"
+        color="white"
+        fontFamily="Poppins"
+        userSelect="none"
+      >
+        <TopBar />
+        <LeftBar />
+        <RightBar />
+        <MainContent>
+          <Routes>
+            <Route path="/:resource" element={<Resource />} />
+          </Routes>
+        </MainContent>
+      </Box>
     </Center>
   );
 };

diff --git a/ui/src/components/NavBars/LeftBar.tsx b/ui/src/components/NavBars/LeftBar.tsx
@@ -19,7 +19,7 @@ const LeftBar: React.FC = () => {
 
   const [initData, setInitData] = useState<InitData>({ resources: [''], totalQueries: 0, totalTime: 0 });
 
-  useNuiEvent<InitData>('init', (data) => {
+  useNuiEvent<InitData>('openUI', (data) => {
     setInitData(data);
   });
 

diff --git a/ui/src/components/NavBars/RightBar.tsx b/ui/src/components/NavBars/RightBar.tsx
@@ -8,7 +8,9 @@ const RightBar: React.FC = () => {
 
   // Debug data defined in LeftBar.tsx
 
-  useNuiEvent<InitData>('init', (data) => setInitData(data));
+  useNuiEvent<InitData>('openUI', (data) => {
+    setInitData(data);
+  });
 
   return (
     <Box float="right" w="20%" h="max" p="1.2vh">

diff --git a/ui/src/components/Resource.tsx b/ui/src/components/Resource.tsx
@@ -25,6 +25,11 @@ interface TableData {
   executionTime: number;
 }
 
+interface NuiData {
+  queries: QueryData[];
+  pageCount: number;
+}
+
 const Resource: React.FC = () => {
   let { resource } = useParams();
   const [resourceData, setResourceData] = useState<QueryData[]>([
@@ -34,24 +39,11 @@ const Resource: React.FC = () => {
       executionTime: 0,
     },
   ]);
+  const [totalPages, setTotalPages] = useState(1);
 
-  useEffect(() => {
-    fetchNui('fetchResource', resource);
-    debugData([
-      {
-        action: 'loadResource',
-        data: [
-          { query: 'SELECT * FROM `users`', executionTime: 5 },
-          { query: 'SELECT * FROM `owned_vehicles`', executionTime: 2 },
-          { query: 'SELECT * FROM `properties`', executionTime: 7 },
-          { query: 'SELECT * FROM `phone_messages`', executionTime: 13 },
-        ],
-      },
-    ]);
-  }, [resource]);
-
-  useNuiEvent<QueryData[]>('loadResource', (data) => {
-    setResourceData(data);
+  useNuiEvent<NuiData>('loadResource', (data) => {
+    setResourceData(data.queries);
+    setTotalPages(data.pageCount);
   });
 
   const data = useMemo<TableData[]>(() => resourceData, [resourceData]);
@@ -84,9 +76,30 @@ const Resource: React.FC = () => {
     previousPage,
     state: { pageIndex },
     prepareRow,
-  } = useTable({ columns, data, initialState: { pageSize: 12 } }, useSortBy, usePagination);
+  } = useTable(
+    { columns, data, initialState: { pageSize: 12 }, manualPagination: true, pageCount: totalPages },
+    useSortBy,
+    usePagination
+  );
+
+  useEffect(() => {
+    fetchNui('fetchResource', { resource, pageIndex });
+    debugData([
+      {
+        action: 'loadResource',
+        data: {
+          pageCount: 1,
+          queries: [
+            { query: 'SELECT * FROM `users`', executionTime: 5 },
+            { query: 'SELECT * FROM `owned_vehicles`', executionTime: 2 },
+            { query: 'SELECT * FROM `properties`', executionTime: 7 },
+            { query: 'SELECT * FROM `phone_messages`', executionTime: 13 },
+          ],
+        },
+      },
+    ]);
+  }, [resource, pageIndex]);
 
-  // Todo: pagination
   return (
     <>
       <Table {...getTableProps} size="sm">

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './components/App';
-import { VisibilityProvider } from "./providers/VisibilityProvider";
-import { ChakraProvider } from '@chakra-ui/react'
+import { VisibilityProvider } from './providers/VisibilityProvider';
+import { ChakraProvider } from '@chakra-ui/react';
 
 ReactDOM.render(
   <React.StrictMode>

diff --git a/ui/src/providers/VisibilityProvider.tsx b/ui/src/providers/VisibilityProvider.tsx
@@ -14,7 +14,7 @@ interface VisibilityProviderValue {
 export const VisibilityProvider: React.FC = ({ children }) => {
   const [visible, setVisible] = useState(false);
 
-  useNuiEvent<boolean>('setVisible', setVisible);
+  useNuiEvent<boolean>('openUI', setVisible);
 
   // Handle pressing escape/backspace
   useEffect(() => {