coder · Parkreiner · Nov 30, 2023 · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,6 +18,7 @@
     "coderdenttest",
     "coderdtest",
     "codersdk",
+    "contravariance",
     "cronstrue",
     "databasefake",
     "dbmem",

diff --git a/site/src/api/queries/audits.ts b/site/src/api/queries/audits.ts
@@ -0,0 +1,23 @@
+import { getAuditLogs } from "api/api";
+import { type AuditLogResponse } from "api/typesGenerated";
+import { useFilterParamsKey } from "components/Filter/filter";
+import { type UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+
+export function paginatedAudits(
+  searchParams: URLSearchParams,
+): UsePaginatedQueryOptions<AuditLogResponse, string> {
+  return {
+    searchParams,
+    queryPayload: () => searchParams.get(useFilterParamsKey) ?? "",
+    queryKey: ({ payload, pageNumber }) => {
+      return ["auditLogs", payload, pageNumber] as const;
+    },
+    queryFn: ({ payload, limit, offset }) => {
+      return getAuditLogs({
+        offset,
+        limit,
+        q: payload,
+      });
+    },
+  };
+}
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -1,6 +1,6 @@
 import { QueryClient, type UseQueryOptions } from "react-query";
 import * as API from "api/api";
-import {
+import type {
   AuthorizationRequest,
   GetUsersResponse,
   UpdateUserPasswordRequest,
@@ -10,11 +10,36 @@ import {
 } from "api/typesGenerated";
 import { getAuthorizationKey } from "./authCheck";
 import { getMetadataAsJSON } from "utils/metadata";
+import { type UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+import { prepareQuery } from "utils/filters";
+
+export function usersKey(req: UsersRequest) {
+  return ["users", req] as const;
+}
+
+export function paginatedUsers(): UsePaginatedQueryOptions<
+  GetUsersResponse,
+  UsersRequest
+> {
+  return {
+    queryPayload: ({ limit, offset, searchParams }) => {
+      return {
+        limit,
+        offset,
+        q: prepareQuery(searchParams.get("filter") ?? ""),
+      };
+    },
+
+    queryKey: ({ payload }) => usersKey(payload),
+    queryFn: ({ payload, signal }) => API.getUsers(payload, signal),
+  };
+}
 
 export const users = (req: UsersRequest): UseQueryOptions<GetUsersResponse> => {
   return {
-    queryKey: ["users", req],
+    queryKey: usersKey(req),
     queryFn: ({ signal }) => API.getUsers(req, signal),
+    cacheTime: 5 * 1000 * 60,
   };
 };
 

diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -45,7 +45,7 @@ type UseFilterConfig = {
   onUpdate?: (newValue: string) => void;
 };
 
-const useFilterParamsKey = "filter";
+export const useFilterParamsKey = "filter";
 
 export const useFilter = ({
   fallbackFilter = "",

diff --git a/site/src/hooks/hookPolyfills.ts b/site/src/hooks/hookPolyfills.ts
@@ -6,7 +6,7 @@
  * They do not have the same ESLinter exceptions baked in that the official
  * hooks do, especially for dependency arrays.
  */
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 
 /**
  * A DIY version of useEffectEvent.
@@ -35,7 +35,12 @@ export function useEffectEvent<TArgs extends unknown[], TReturn = unknown>(
   callback: (...args: TArgs) => TReturn,
 ) {
   const callbackRef = useRef(callback);
-  useEffect(() => {
+
+  // useLayoutEffect should be overkill here 99% of the time, but if this were
+  // defined as a regular effect, useEffectEvent would not be able to work with
+  // any layout effects at all; the callback sync here would fire *after* the
+  // layout effect that needs the useEffectEvent function
+  useLayoutEffect(() => {
     callbackRef.current = callback;
   }, [callback]);