[Good First Front End Issue] Add sorting to the Team members table

[reecexlm]

Add sorting to columns Email and Status using the following field IDs: email (string) and is_active (boolean).

Instructions

Update useUsers query (/apiQueries/useUsers.ts) to handle sorting.

URL Query Parameters:

• sort string
  Possible values: [email, is_active]
  Default value: email
  Field used to sort users

• direction string
  Possible values: [asc, desc]
  Default value: asc
  Direction for sorting users.

example: ?sort=email&direction=asc

Table component has built-in functionality to handle sorting. To enable that functionality, do the following:

1. Use useSort hook (in /hooks/useSort) to get/set sortBy, sortDir, and handleSort by passing in the method that handles the sorting (update state parameter in TanStack Query in this case).
2. Add the following to the Table.HeaderCell component:
   a. sortDirection property is used to set the sorting direction.
   b. onSort method triggers the sorting using handleSort method from the useSort hook (passing in the field ID to sort by).

Example:

// Keep track of sortBy field and direction in component state

const onSort = () => {
  // Set/reset sortBy field and direction
}

const { sortBy, sortDir, handleSort } = useSort(onSort);

<Table.HeaderCell
  sortDirection={sortBy === "name" ? sortDir : "default"}
  onSort={() => handleSort("name")}
>
  Column name
</Table.HeaderCell>

Working implementation in /components/DisbursementsTable.tsx.

Testing

If sorting is enabled on a table column, up and down arrows will be displayed next to the column name. Clicking once on the column will sort in ascending order (the up arrow will be highlighted). Clicking a second time on the same column will sort in descending order (the down arrow will be highlighted). Clicking the third time will clear the sorting. API call should be called every time the sorting field or order is changed, as all the sorting is done on the server. Frontend only displays the data.

Please make sure the sorting works as expected and try clicking different columns if sorting is enabled on multiple fields.

[reecexlm]

duplicate from FE Repo stellar/stellar-disbursement-platform-frontend#52