From f92d63261deefbddc17341c8e1ab993a8aab8899 Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 15 Feb 2025 14:14:30 +0000
Subject: [PATCH] Implement space member search (#731)

* Hide pagination buttons if there is nothing to paginate
* Create reusable hook for search and pagination
---
 apps/client/src/components/common/paginate.tsx  |  4 ++++
 .../src/components/common/search-input.tsx      |  5 +++--
 .../features/space/components/space-members.tsx | 10 +++++++---
 .../features/space/services/space-service.ts    |  2 +-
 .../components/workspace-members-table.tsx      | 13 ++++---------
 .../src/hooks/use-paginate-and-search.tsx       | 17 +++++++++++++++++
 .../database/repos/space/space-member.repo.ts   | 12 +++++++++++-
 7 files changed, 47 insertions(+), 16 deletions(-)
 create mode 100644 apps/client/src/hooks/use-paginate-and-search.tsx

diff --git a/apps/client/src/components/common/paginate.tsx b/apps/client/src/components/common/paginate.tsx
index 4f632c95..0a01de12 100644
--- a/apps/client/src/components/common/paginate.tsx
+++ b/apps/client/src/components/common/paginate.tsx
@@ -16,6 +16,10 @@ export default function Paginate({
 }: PagePaginationProps) {
   const { t } = useTranslation();
 
+  if (!hasPrevPage && !hasNextPage) {
+    return null;
+  }
+
   return (
     <Group mt="md">
       <Button
diff --git a/apps/client/src/components/common/search-input.tsx b/apps/client/src/components/common/search-input.tsx
index e1b64df8..08cbbee0 100644
--- a/apps/client/src/components/common/search-input.tsx
+++ b/apps/client/src/components/common/search-input.tsx
@@ -24,10 +24,11 @@ export function SearchInput({
   }, [debouncedValue, onSearch]);
 
   return (
-    <Group mb="md">
+    <Group mb="sm">
       <TextInput
+        size="sm"
         placeholder={placeholder || t("Search...")}
-        leftSection={<IconSearch size={14} />}
+        leftSection={<IconSearch size={16} />}
         value={value}
         onChange={(e) => setValue(e.currentTarget.value)}
       />
diff --git a/apps/client/src/features/space/components/space-members.tsx b/apps/client/src/features/space/components/space-members.tsx
index b1c0e026..88033337 100644
--- a/apps/client/src/features/space/components/space-members.tsx
+++ b/apps/client/src/features/space/components/space-members.tsx
@@ -1,5 +1,5 @@
 import { Group, Table, Text, Menu, ActionIcon } from "@mantine/core";
-import React, { useState } from "react";
+import React from "react";
 import { IconDots } from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
@@ -18,6 +18,8 @@ import {
 import { formatMemberCount } from "@/lib";
 import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
+import { SearchInput } from "@/components/common/search-input.tsx";
+import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
 
 type MemberType = "user" | "group";
 
@@ -31,10 +33,11 @@ export default function SpaceMembersList({
   readOnly,
 }: SpaceMembersProps) {
   const { t } = useTranslation();
-  const [page, setPage] = useState(1);
+  const { search, page, setPage, handleSearch } = usePaginateAndSearch();
   const { data, isLoading } = useSpaceMembersQuery(spaceId, {
     page,
-    limit: 100,
+    limit: 1,
+    query: search,
   });
   const removeSpaceMember = useRemoveSpaceMemberMutation();
   const changeSpaceMemberRoleMutation = useChangeSpaceMemberRoleMutation();
@@ -102,6 +105,7 @@ export default function SpaceMembersList({
 
   return (
     <>
+      <SearchInput onSearch={handleSearch} />
       <Table.ScrollContainer minWidth={500}>
         <Table highlightOnHover verticalSpacing={8}>
           <Table.Thead>
diff --git a/apps/client/src/features/space/services/space-service.ts b/apps/client/src/features/space/services/space-service.ts
index 74dc57f9..48ec3a50 100644
--- a/apps/client/src/features/space/services/space-service.ts
+++ b/apps/client/src/features/space/services/space-service.ts
@@ -41,7 +41,7 @@ export async function getSpaceMembers(
   spaceId: string,
   params?: QueryParams,
 ): Promise<IPagination<ISpaceMember>> {
-  const req = await api.post<any>("/spaces/members", { spaceId, params });
+  const req = await api.post<any>("/spaces/members", { spaceId, ...params });
   return req.data;
 }
 
diff --git a/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx b/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
index ed5f8172..83d9af8c 100644
--- a/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
+++ b/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
@@ -4,7 +4,7 @@ import {
   useWorkspaceMembersQuery,
 } from "@/features/workspace/queries/workspace-query.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import React, { useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import RoleSelectMenu from "@/components/ui/role-select-menu.tsx";
 import {
   getUserRoleLabel,
@@ -16,11 +16,11 @@ import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
 import { SearchInput } from "@/components/common/search-input.tsx";
 import NoTableResults from "@/components/common/no-table-results.tsx";
+import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
 
 export default function WorkspaceMembersTable() {
   const { t } = useTranslation();
-  const [page, setPage] = useState(1);
-  const [search, setSearch] = useState(undefined);
+  const { search, page, setPage, handleSearch } = usePaginateAndSearch();
   const { data, isLoading } = useWorkspaceMembersQuery({
     page,
     limit: 100,
@@ -52,12 +52,7 @@ export default function WorkspaceMembersTable() {
 
   return (
     <>
-      <SearchInput
-        onSearch={(debouncedSearch) => {
-          setSearch(debouncedSearch);
-          setPage(1);
-        }}
-      />
+      <SearchInput onSearch={handleSearch} />
       <Table.ScrollContainer minWidth={500}>
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Thead>
diff --git a/apps/client/src/hooks/use-paginate-and-search.tsx b/apps/client/src/hooks/use-paginate-and-search.tsx
new file mode 100644
index 00000000..fbdb49b9
--- /dev/null
+++ b/apps/client/src/hooks/use-paginate-and-search.tsx
@@ -0,0 +1,17 @@
+import { useState, useRef, useCallback } from "react";
+
+export function usePaginateAndSearch(initialQuery: string = "") {
+  const [search, setSearch] = useState(initialQuery);
+  const [page, setPage] = useState(1);
+  const prevSearchRef = useRef(search);
+
+  const handleSearch = useCallback((newQuery: string) => {
+    if (prevSearchRef.current !== newQuery) {
+      prevSearchRef.current = newQuery;
+      setSearch(newQuery);
+      setPage(1);
+    }
+  }, []);
+
+  return { search, page, setPage, handleSearch };
+}
diff --git a/apps/server/src/database/repos/space/space-member.repo.ts b/apps/server/src/database/repos/space/space-member.repo.ts
index e4ce4cc7..b59df33c 100644
--- a/apps/server/src/database/repos/space/space-member.repo.ts
+++ b/apps/server/src/database/repos/space/space-member.repo.ts
@@ -97,7 +97,7 @@ export class SpaceMemberRepo {
     spaceId: string,
     pagination: PaginationOptions,
   ) {
-    const query = this.db
+    let query = this.db
       .selectFrom('spaceMembers')
       .leftJoin('users', 'users.id', 'spaceMembers.userId')
       .leftJoin('groups', 'groups.id', 'spaceMembers.groupId')
@@ -116,6 +116,16 @@ export class SpaceMemberRepo {
       .where('spaceId', '=', spaceId)
       .orderBy('spaceMembers.createdAt', 'asc');
 
+    if (pagination.query) {
+      query = query.where((eb) =>
+        eb('users.name', 'ilike', `%${pagination.query}%`).or(
+          'groups.name',
+          'ilike',
+          `%${pagination.query}%`,
+        ),
+      );
+    }
+
     const result = await executeWithPagination(query, {
       page: pagination.page,
       perPage: pagination.limit,