feat(ui): Implement sorting function (WIP)

overextended · Jan 8, 2022 · 3554ba2 · 3554ba2
1 parent 21ded71
commit 3554ba2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 34 deletions.
diff --git a/src/logger/index.ts b/src/logger/index.ts
@@ -48,15 +48,37 @@ RegisterCommand(
   true
 );
 
-onNet(`oxmysql:fetchResource`, (data: {resource: string, pageIndex: number}) => {
-  if (typeof data.resource !== 'string') return;
+const sortQueries = (queries: QueryData[], sort: { id: 'query' | 'executionTime'; desc: boolean }) => {
+  const sortedQueries = queries.sort((a, b) => {
+    switch (sort.id) {
+      case 'query':
+        return a.query > b.query ? 1 : -1;
+      case 'executionTime':
+        return a.executionTime - b.executionTime;
+      default:
+        return 0;
+    }
+  });
+
+  return sort.desc ? sortedQueries.reverse() : sortedQueries;
+};
 
-  const startRow = data.pageIndex * 12
-  const endRow = startRow + 12
-  const queries = logStorage[data.resource].slice(startRow, endRow)
-  const pageCount = Math.ceil(logStorage[data.resource].length / 12)
+onNet(
+  `oxmysql:fetchResource`,
+  (data: { resource: string; pageIndex: number; sortBy?: { id: 'query' | 'executionTime'; desc: boolean }[] }) => {
+    if (typeof data.resource !== 'string') return;
 
-  if (!queries) return;
+    const sort = data.sortBy ? data.sortBy[0] : false;
 
-  emitNet(`oxmysql:loadResource`, source, {queries, pageCount});
-});
+    const startRow = data.pageIndex * 12;
+    const endRow = startRow + 12;
+    const queries = sort
+      ? sortQueries(logStorage[data.resource], sort).slice(startRow, endRow)
+      : logStorage[data.resource].slice(startRow, endRow);
+    const pageCount = Math.ceil(logStorage[data.resource].length / 12);
+
+    if (!queries) return;
+
+    emitNet(`oxmysql:loadResource`, source, { queries, pageCount });
+  }
+);
diff --git a/ui/src/components/Resource.tsx b/ui/src/components/Resource.tsx
@@ -30,7 +30,8 @@ interface NuiData {
 }
 
 const Resource: React.FC = () => {
-  let { resource } = useParams();
+  const { resource } = useParams();
+
   const [isLoaded, setIsLoaded] = useState(false);
   const [resourceData, setResourceData] = useState<QueryData[]>([
     {
@@ -41,12 +42,6 @@ const Resource: React.FC = () => {
   ]);
   const [totalPages, setTotalPages] = useState(1);
 
-  useNuiEvent<NuiData>('loadResource', (data) => {
-    setResourceData(data.queries);
-    setTotalPages(data.pageCount);
-    setIsLoaded(true);
-  });
-
   const data = useMemo<TableData[]>(() => resourceData, [resourceData]);
 
   const columns = useMemo<Column<TableData>[]>(
@@ -75,14 +70,15 @@ const Resource: React.FC = () => {
     gotoPage,
     nextPage,
     previousPage,
-    state: { pageIndex },
+    state: { pageIndex, sortBy },
     prepareRow,
   } = useTable(
     {
       columns,
       data,
       initialState: { pageSize: 12 },
       manualPagination: true,
+      manualSortBy: true,
       pageCount: totalPages,
       autoResetPage: false,
     },
@@ -91,27 +87,19 @@ const Resource: React.FC = () => {
   );
 
   useEffect(() => {
-    fetchNui('fetchResource', { resource, pageIndex });
+    fetchNui('fetchResource', { resource, pageIndex, sortBy });
     setIsLoaded(false);
-    // 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]);
+  }, [resource, pageIndex, sortBy]);
+
+  useNuiEvent<NuiData>('loadResource', (data) => {
+    setResourceData(data.queries);
+    setTotalPages(data.pageCount);
+    setIsLoaded(true);
+  });
 
   return (
     <>
-      <Table {...getTableProps} size="sm">
+      <Table {...getTableProps()} size="sm">
         <Thead>
           {headerGroups.map((header): any => (
             <Tr {...header.getHeaderGroupProps()}>