add Sortparam and UsersPage.useUsers

src/common/Table/helpers.ts

@@ -4,7 +4,7 @@ import {
 } from './TableFooter';
 
 export const validateRowsPerPage = (
-  rowsPerPage: number = ROWS_PER_PAGE_DEFAULT,
+  rowsPerPage: number | null = ROWS_PER_PAGE_DEFAULT,
   rowsPerPageOptions: Array<
     number | { value: number; label: string }
   > = ROWS_PER_PAGE_OPTIONS_DEFAULT

src/features/UsersPage/UsersPage.tsx

@@ -1,4 +1,20 @@
+import useUsers from './UsersPage.useUsers';
+import { NumberParam, useQueryParams, withDefault } from 'use-query-params';
+import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
+import { validateRowsPerPage } from 'common/Table/helpers';
+
+const DEFAULT_SORT = decodeSort('id DESC');
+
 const UsersPage = () => {
+  const [{ page, sort, ...rest }, setQuery] = useQueryParams({
+    limit: NumberParam,
+    page: withDefault(NumberParam, 0),
+    sort: withDefault(SortParam, DEFAULT_SORT),
+  });
+  const limit = validateRowsPerPage(rest.limit);
+  const data = useUsers(page, limit, sort.toString());
+  console.log(data);
+
   return <div>UsersPage</div>;
 };
 

src/features/UsersPage/UsersPage.useUsers.ts

@@ -1,11 +1,27 @@
 import { useQuery } from '@apollo/client';
 import { QUERY_USERS } from './queries';
-import { Query, QueryUsersArgs } from '../../libs/graphql/types';
+import { Query, QueryUsersArgs } from 'libs/graphql/types';
 
-const useUsers = () => {
-  const {} = useQuery<Pick<Query, 'users'>, QueryUsersArgs>(QUERY_USERS, {
-    fetchPolicy: 'cache-and-network',
-  });
+const useUsers = (page: number, limit: number, sort: string) => {
+  const { data, loading } = useQuery<Pick<Query, 'users'>, QueryUsersArgs>(
+    QUERY_USERS,
+    {
+      fetchPolicy: 'cache-and-network',
+      variables: {
+        offset: page * limit,
+        sort: [sort],
+        limit,
+      },
+    }
+  );
+
+  return {
+    users: data?.users.items ?? [],
+    get loading() {
+      return this.users.length === 0 || loading;
+    },
+    total: data?.users.total ?? 0,
+  };
 };
 
 export default useUsers;

src/features/UsersPage/queries.ts

@@ -7,7 +7,6 @@ export const QUERY_USERS = gql`
     $filter: UserFilter
     $sort: [String!]
   ) {
-    query
     users(offset: $offset, limit: $limit, filter: $filter, sort: $sort) {
       total
       items {

src/libs/serialize-query-params/SortParam.ts

@@ -0,0 +1,57 @@
+import { QueryParamConfig } from 'use-query-params';
+
+export type DecodedSort = {
+  orderBy: string;
+  orderDirection?: 'asc' | 'desc';
+  toString: () => string;
+};
+
+const validateOrderDirection = (od: string): DecodedSort['orderDirection'] => {
+  od = od.toLowerCase();
+  return od === 'asc' ? 'asc' : od === 'desc' ? 'desc' : 'asc';
+};
+
+const isDecoded = (obj: any): obj is DecodedSort => {
+  return (
+    typeof obj.orderBy === 'string' &&
+    typeof obj.toString === 'function' &&
+    (!obj.orderDirection || ['asc', 'desc'].includes(obj.orderDirection))
+  );
+};
+
+export const decodeSort = (value: string): DecodedSort => {
+  const [orderBy, orderDirection] = value.split(' ');
+  return {
+    orderBy,
+    orderDirection: validateOrderDirection(orderDirection),
+    toString(): string {
+      return this.orderBy + ' ' + this.orderDirection;
+    },
+  };
+};
+
+const SortParam: QueryParamConfig<string, DecodedSort | undefined> = {
+  encode(value: string): string {
+    return value;
+  },
+
+  decode(
+    value:
+      | string
+      | (string | DecodedSort | null)[]
+      | null
+      | undefined
+      | DecodedSort
+  ): DecodedSort | undefined {
+    const v = Array.isArray(value) ? value[0] : value;
+    if (!v) {
+      return undefined;
+    }
+    if (isDecoded(v)) {
+      return v;
+    }
+    return decodeSort(v);
+  },
+};
+
+export default SortParam;