chore: move fetching in data-table-users

apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useTransition } from 'react';
+import { useEffect, useState, useTransition } from 'react';
 
 import Link from 'next/link';
 
@@ -11,6 +11,12 @@ import { Document, Role, Subscription } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useDebouncedValue } from '~/hooks/use-debounced-value';
+
+import { search } from './fetch-users.actions';
 
 interface User {
   id: number;
@@ -29,15 +35,19 @@ type SubscriptionLite = Pick<
 type DocumentLite = Pick<Document, 'id'>;
 
 type UsersDataTableProps = {
-  users: User[];
   perPage: number;
   page: number;
-  totalPages: number;
 };
 
-export const UsersDataTable = ({ users, perPage, page, totalPages }: UsersDataTableProps) => {
+export const UsersDataTable = ({ perPage, page }: UsersDataTableProps) => {
+  const { toast } = useToast();
+
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
+  const [data, setData] = useState<User[]>([]);
+  const [searchString, setSearchString] = useState('');
+  const [totalPages, setTotalPages] = useState<number>(0);
+  const debouncedSearchString = useDebouncedValue(searchString, 500);
 
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
@@ -48,8 +58,48 @@ export const UsersDataTable = ({ users, perPage, page, totalPages }: UsersDataTa
     });
   };
 
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const result = await search(debouncedSearchString, page, perPage);
+        setData(result.users);
+        setTotalPages(result.totalPages);
+
+        if (result.totalPages < page) {
+          startTransition(() => {
+            updateSearchParams({
+              page: 1,
+              perPage,
+            });
+          });
+        }
+      } catch (err) {
+        throw new Error(err);
+      }
+    };
+
+    fetchData().catch(() => {
+      toast({
+        title: 'Something went wrong',
+        description: 'Please try again',
+        variant: 'destructive',
+      });
+    });
+  }, [debouncedSearchString, page, perPage]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchString(e.target.value);
+  };
+
   return (
     <div className="relative">
+      <Input
+        className="my-6 flex flex-row gap-4"
+        type="text"
+        placeholder="Search by name or email"
+        value={searchString}
+        onChange={handleChange}
+      />
       <DataTable
         columns={[
           {
@@ -125,7 +175,7 @@ export const UsersDataTable = ({ users, perPage, page, totalPages }: UsersDataTa
             },
           },
         ]}
-        data={users}
+        data={data}
         perPage={perPage}
         currentPage={page}
         totalPages={totalPages}

apps/web/src/app/(dashboard)/admin/users/fetch-users.actions.ts

@@ -0,0 +1,9 @@
+'use server';
+
+import { findUsers } from '@documenso/lib/server-only/user/get-all-users';
+
+export async function search(search: string, page: number, perPage: number) {
+  const results = await findUsers({ username: search, email: search, page, perPage });
+
+  return results;
+}

apps/web/src/app/(dashboard)/admin/users/page.tsx

@@ -1,6 +1,4 @@
-import { findUsers } from '@documenso/lib/server-only/user/get-all-users';
-
-import { Users } from './users';
+import { UsersDataTable } from './data-table-users';
 
 type AdminManageUsersProps = {
   searchParams?: {
@@ -13,18 +11,10 @@ export default function AdminManageUsers({ searchParams = {} }: AdminManageUsers
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 10;
 
-  async function search(search: string) {
-    'use server';
-
-    const results = await findUsers({ username: search, email: search, page, perPage });
-
-    return results;
-  }
-
   return (
     <div>
       <h2 className="text-4xl font-semibold">Manage users</h2>
-      <Users search={search} page={page} perPage={perPage} />
+      <UsersDataTable page={page} perPage={perPage} />
     </div>
   );
 }

apps/web/src/app/(dashboard)/admin/users/users.tsx

@@ -1,91 +0,0 @@
-'use client';
-
-import { useEffect, useState, useTransition } from 'react';
-
-import { Loader } from 'lucide-react';
-
-import { Document, Role, Subscription } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-import { Input } from '@documenso/ui/primitives/input';
-
-import { useDebouncedValue } from '~/hooks/use-debounced-value';
-
-import { UsersDataTable } from './data-table-users';
-
-export type SubscriptionLite = Pick<
-  Subscription,
-  'id' | 'status' | 'planId' | 'priceId' | 'createdAt' | 'periodEnd'
->;
-export type DocumentLite = Pick<Document, 'id'>;
-
-export type User = {
-  id: number;
-  name: string | null;
-  email: string;
-  roles: Role[];
-  Subscription: SubscriptionLite[];
-  Document: DocumentLite[];
-};
-
-export type UsersProps = {
-  search: (_search: string) => Promise<{ users: User[]; totalPages: number }>;
-  perPage: number;
-  page: number;
-};
-
-export const Users = ({ search, perPage, page }: UsersProps) => {
-  const [data, setData] = useState<User[]>([]);
-  const [totalPages, setTotalPages] = useState<number>(0);
-  const [isPending, startTransition] = useTransition();
-  const [searchString, setSearchString] = useState('');
-  const debouncedSearchString = useDebouncedValue(searchString, 500);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const result = await search(debouncedSearchString);
-        setData(result.users);
-        setTotalPages(result.totalPages);
-      } catch (err) {
-        throw new Error(err);
-      }
-    };
-
-    fetchData();
-  }, [debouncedSearchString, search]);
-
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    startTransition(async () => {
-      const result = await search(debouncedSearchString);
-      setData(result.users);
-    });
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchString(e.target.value);
-  };
-
-  return (
-    <>
-      <form className="my-6 flex flex-row gap-4" onSubmit={onSubmit}>
-        <Input
-          type="text"
-          placeholder="Search by name or email and press enter"
-          value={searchString}
-          onChange={handleChange}
-        />
-        <Button type="submit">Search</Button>
-      </form>
-      <div className="mt-8">
-        {data.length === 0 || isPending ? (
-          <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-            <Loader className="h-8 w-8 animate-spin text-gray-500" />
-          </div>
-        ) : (
-          <UsersDataTable users={data} perPage={perPage} page={page} totalPages={totalPages} />
-        )}
-      </div>
-    </>
-  );
-};