improvement: org user groups tables search fixed and col sort added and group add users pagination fixed and search improved to include first and last name

frontend/src/hooks/api/groups/queries.tsx

@@ -10,13 +10,13 @@ export const groupKeys = {
     slug,
     offset,
     limit,
-    username
+    search
   }: {
     slug: string;
     offset: number;
     limit: number;
-    username: string;
-  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, username }] as const
+    search: string;
+  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, search }] as const
 };
 
 type TUser = {
@@ -33,27 +33,28 @@ export const useListGroupUsers = ({
   groupSlug,
   offset = 0,
   limit = 10,
-  username
+  search
 }: {
   id: string;
   groupSlug: string;
   offset: number;
   limit: number;
-  username: string;
+  search: string;
 }) => {
   return useQuery({
     queryKey: groupKeys.specificGroupUserMemberships({
       slug: groupSlug,
       offset,
       limit,
-      username
+      search
     }),
     enabled: Boolean(groupSlug),
+    keepPreviousData: true,
     queryFn: async () => {
       const params = new URLSearchParams({
         offset: String(offset),
         limit: String(limit),
-        username
+        search
       });
 
       const { data } = await apiRequest.get<{ users: TUser[]; totalCount: number }>(

frontend/src/hooks/index.ts

@@ -3,6 +3,7 @@ export { useLeaveConfirm } from "./useLeaveConfirm";
 export { usePagination } from "./usePagination";
 export { usePersistentState } from "./usePersistentState";
 export { usePopUp } from "./usePopUp";
+export { useResetPageHelper } from "./useResetPageHelper";
 export { useSyntaxHighlight } from "./useSyntaxHighlight";
 export { useTimedReset } from "./useTimedReset";
 export { useToggle } from "./useToggle";

frontend/src/hooks/useResetPageHelper.ts

@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+
+export const useResetPageHelper = ({
+  totalCount,
+  offset,
+  setPage
+}: {
+  totalCount: number;
+  offset: number;
+  setPage: Dispatch<SetStateAction<number>>;
+}) => {
+  useEffect(() => {
+    // reset page if no longer valid
+    if (totalCount <= offset) setPage(1);
+  }, [totalCount]);
+};