improvement: add pagination/sort to org members table

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -1,6 +1,13 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { useRouter } from "next/router";
-import { faEllipsis, faMagnifyingGlass, faUsers } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowDown,
+  faArrowUp,
+  faEllipsis,
+  faMagnifyingGlass,
+  faSearch,
+  faUsers
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -14,7 +21,9 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   EmptyState,
+  IconButton,
   Input,
+  Pagination,
   Select,
   SelectItem,
   Table,
@@ -33,6 +42,7 @@ import {
   useSubscription,
   useUser
 } from "@app/context";
+import { usePagination, useResetPageHelper } from "@app/hooks";
 import {
   useAddUsersToOrg,
   useFetchServerStatus,
@@ -40,6 +50,7 @@ import {
   useGetOrgUsers,
   useUpdateOrgMembership
 } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
@@ -54,6 +65,11 @@ type Props = {
   setCompleteInviteLinks: (links: Array<{ email: string; link: string }> | null) => void;
 };
 
+enum OrgMembersOrderBy {
+  Name = "firstName",
+  Email = "email"
+}
+
 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Props) => {
   const router = useRouter();
   const { subscription } = useSubscription();
@@ -64,10 +80,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
 
   const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(orgId);
 
-  const [searchMemberFilter, setSearchMemberFilter] = useState("");
-
   const { data: serverDetails } = useFetchServerStatus();
-  const { data: members, isLoading: isMembersLoading } = useGetOrgUsers(orgId);
+  const { data: members = [], isLoading: isMembersLoading } = useGetOrgUsers(orgId);
 
   const { mutateAsync: addUsersMutateAsync } = useAddUsersToOrg();
   const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
@@ -144,24 +158,75 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
     [roles]
   );
 
-  const filterdUser = useMemo(
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    orderBy,
+    setOrderBy,
+    setOrderDirection,
+    toggleOrderDirection
+  } = usePagination<OrgMembersOrderBy>(OrgMembersOrderBy.Name);
+
+  const filteredUsers = useMemo(
     () =>
-      members?.filter(
+      members
+        ?.filter(
           ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+            u?.firstName?.toLowerCase().includes(search.toLowerCase()) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+            u?.lastName?.toLowerCase().includes(search.toLowerCase()) ||
-          u?.username?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+            u?.username?.toLowerCase().includes(search.toLowerCase()) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+            u?.email?.toLowerCase().includes(search.toLowerCase()) ||
-          inviteEmail?.includes(searchMemberFilter.toLowerCase())
+            inviteEmail?.toLowerCase().includes(search.toLowerCase())
-      ),
+        )
-    [members, searchMemberFilter]
+        .sort((a, b) => {
+          const [memberOne, memberTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+          let valueOne: string;
+          let valueTwo: string;
+
+          switch (orderBy) {
+            case OrgMembersOrderBy.Email:
+              valueOne = memberOne.user.email || memberOne.inviteEmail;
+              valueTwo = memberTwo.user.email || memberTwo.inviteEmail;
+              break;
+            case OrgMembersOrderBy.Name:
+            default:
+              valueOne = memberOne.user.firstName;
+              valueTwo = memberTwo.user.firstName;
+          }
+
+          return valueOne.toLowerCase().localeCompare(valueTwo.toLowerCase());
+        }),
+    [members, search, orderDirection, orderBy]
   );
 
+  const handleSort = (column: OrgMembersOrderBy) => {
+    if (column === orderBy) {
+      toggleOrderDirection();
+      return;
+    }
+
+    setOrderBy(column);
+    setOrderDirection(OrderByDirection.ASC);
+  };
+
+  useResetPageHelper({
+    totalCount: filteredUsers.length,
+    offset,
+    setPage
+  });
+
   return (
     <div>
       <Input
-        value={searchMemberFilter}
+        value={search}
-        onChange={(e) => setSearchMemberFilter(e.target.value)}
+        onChange={(e) => setSearch(e.target.value)}
         leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         placeholder="Search members..."
       />
@@ -169,8 +234,46 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
         <Table>
           <THead>
             <Tr>
-              <Th>Name</Th>
+              <Th className="w-1/3">
-              <Th>Username</Th>
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className={`ml-2 ${orderBy === OrgMembersOrderBy.Name ? "" : "opacity-30"}`}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(OrgMembersOrderBy.Name)}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        orderDirection === OrderByDirection.DESC &&
+                        orderBy === OrgMembersOrderBy.Name
+                          ? faArrowUp
+                          : faArrowDown
+                      }
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Email
+                  <IconButton
+                    variant="plain"
+                    className={`ml-2 ${orderBy === OrgMembersOrderBy.Email ? "" : "opacity-30"}`}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(OrgMembersOrderBy.Email)}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        orderDirection === OrderByDirection.DESC &&
+                        orderBy === OrgMembersOrderBy.Email
+                          ? faArrowUp
+                          : faArrowDown
+                      }
+                    />
+                  </IconButton>
+                </div>
+              </Th>
               <Th>Role</Th>
               <Th className="w-5" />
             </Tr>
@@ -178,8 +281,18 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
           <TBody>
             {isLoading && <TableSkeleton columns={5} innerKey="org-members" />}
             {!isLoading &&
-              filterdUser?.map(
+              filteredUsers
-                ({ user: u, inviteEmail, role, roleId, id: orgMembershipId, status, isActive }) => {
+                .slice(offset, perPage * page)
+                .map(
+                  ({
+                    user: u,
+                    inviteEmail,
+                    role,
+                    roleId,
+                    id: orgMembershipId,
+                    status,
+                    isActive
+                  }) => {
                     const name = u && u.firstName ? `${u.firstName} ${u.lastName}` : "-";
                     const email = u?.email || inviteEmail;
                     const username = u?.username ?? inviteEmail ?? "-";
@@ -376,14 +489,23 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                 )}
           </TBody>
         </Table>
-        {!isLoading && filterdUser?.length === 0 && (
+        {Boolean(filteredUsers.length) && (
+          <Pagination
+            count={filteredUsers.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={setPerPage}
+          />
+        )}
+        {!isMembersLoading && !filteredUsers?.length && (
           <EmptyState
             title={
-              members?.length === 0
+              members.length
-                ? "No organization members found"
+                ? "No organization members match search..."
-                : "No organization members match search"
+                : "No organization members found"
             }
-            icon={faUsers}
+            icon={members.length ? faSearch : faUsers}
           />
         )}
       </TableContainer>