feat: spaces and groups search

apps/client/src/features/group/components/group-list.tsx

@@ -1,7 +1,6 @@
 import { Table, Group, Text, Anchor } from "@mantine/core";
 import { useGetGroupsQuery } from "@/features/group/queries/group-query";
 import { Link } from "react-router-dom";
-import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
 import { useTranslation } from "react-i18next";
 import { formatMemberCount } from "@/lib";
@@ -10,11 +9,14 @@ import Paginate from "@/components/common/paginate.tsx";
 import { queryClient } from "@/main.tsx";
 import { getGroupMembers } from "@/features/group/services/group-service.ts";
 import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.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 GroupList() {
   const { t } = useTranslation();
-  const { cursor, goNext, goPrev } = useCursorPaginate();
+  const { search, cursor, goNext, goPrev, handleSearch } = usePaginateAndSearch();
-  const { data, isLoading } = useGetGroupsQuery({ cursor });
+  const { data, isLoading } = useGetGroupsQuery({ cursor, query: search });
 
   const prefetchGroupMembers = (groupId: string) => {
     queryClient.prefetchQuery({
@@ -25,6 +27,7 @@ export default function GroupList() {
 
   return (
     <>
+      <SearchInput onSearch={handleSearch} />
       <Table.ScrollContainer minWidth={500}>
         <Table highlightOnHover verticalSpacing="sm" layout="fixed">
           <Table.Thead>
@@ -35,7 +38,8 @@ export default function GroupList() {
           </Table.Thead>
 
           <Table.Tbody>
-            {data?.items.map((group: IGroup, index: number) => (
+            {data?.items.length > 0 ? (
+            data?.items.map((group: IGroup, index: number) => (
               <Table.Tr key={index}>
                 <Table.Td onMouseEnter={() => prefetchGroupMembers(group.id)}>
                   <Anchor
@@ -77,7 +81,10 @@ export default function GroupList() {
                   </Anchor>
                 </Table.Td>
               </Table.Tr>
-            ))}
+            ))
+            ) : (
+              <NoTableResults colSpan={2} />
+            )}
           </Table.Tbody>
         </Table>
       </Table.ScrollContainer>

apps/client/src/features/space/components/space-list.tsx

@@ -1,6 +1,5 @@
 import { Group, Table, Text } from "@mantine/core";
 import React, { useState } from "react";
-import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
 import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
 import { useDisclosure } from "@mantine/hooks";
@@ -10,11 +9,14 @@ import Paginate from "@/components/common/paginate.tsx";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.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 SpaceList() {
   const { t } = useTranslation();
-  const { cursor, goNext, goPrev } = useCursorPaginate();
+  const { search, cursor, goNext, goPrev, handleSearch } = usePaginateAndSearch();
-  const { data, isLoading } = useGetSpacesQuery({ cursor });
+  const { data, isLoading } = useGetSpacesQuery({ cursor, query: search });
   const [opened, { open, close }] = useDisclosure(false);
   const [selectedSpaceId, setSelectedSpaceId] = useState<string>(null);
 
@@ -25,6 +27,7 @@ export default function SpaceList() {
 
   return (
     <>
+      <SearchInput onSearch={handleSearch} />
       <Table.ScrollContainer minWidth={500}>
         <Table highlightOnHover verticalSpacing="sm" layout="fixed">
           <Table.Thead>
@@ -35,7 +38,8 @@ export default function SpaceList() {
           </Table.Thead>
 
           <Table.Tbody>
-            {data?.items.map((space, index) => (
+            {data?.items.length > 0 ? (
+            data?.items.map((space, index) => (
               <Table.Tr
                 key={index}
                 style={{ cursor: "pointer" }}
@@ -66,7 +70,10 @@ export default function SpaceList() {
                   </Text>
                 </Table.Td>
               </Table.Tr>
-            ))}
+            ))
+            ) : (
+              <NoTableResults colSpan={2} />
+            )}
           </Table.Tbody>
         </Table>
       </Table.ScrollContainer>