@availity/mui-pagination 0.2.11 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-pagination@0.2.12...@availity/mui-pagination@0.3.0) (2024-09-24)
+
+### Dependency Updates
+
+* `mui-list` updated to version `0.2.12`
+* `@availity/mock` updated to version `0.2.12`
+
+### Features
+
+* **mui-pagination:** create useResourcePagination hook ([be908a2](https://github.com/Availity/element/commit/be908a26c621ffbfaeab9f543803b28c299a19da))
+
+## [0.2.12](https://github.com/Availity/element/compare/@availity/mui-pagination@0.2.11...@availity/mui-pagination@0.2.12) (2024-08-08)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `0.2.11`
 ## [0.2.11](https://github.com/Availity/element/compare/@availity/mui-pagination@0.2.10...@availity/mui-pagination@0.2.11) (2024-08-05)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-pagination",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "description": "Availity MUI Pagination Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -32,7 +32,7 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
-    "@availity/mui-icon": "0.10.0",
+    "@availity/mui-icon": "0.10.1",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -40,7 +40,7 @@
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@availity/mui-icon": "0.10.0",
+    "@availity/mui-icon": "0.10.1",
     "@mui/material": "^5.11.9",
     "react": ">=16.3.0"
   },

package/src/lib/ResourcePagination.stories.tsx

@@ -0,0 +1,64 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from '@availity/mui-layout';
+import { avOrganizationsApi } from '@availity/api-axios';
+import { List, ListItem, ListItemText } from '@availity/mui-list';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { Pagination } from './Pagination';
+import { useResourcePagination } from './ResourcePagination';
+import { useState } from 'react';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Components/Pagination/useResourcePagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={new QueryClient()}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+  args: {
+    count: 10,
+  },
+};
+
+export default meta;
+
+export const _useResourcePagination: StoryObj<typeof Pagination> = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    const itemsPerPage = 10;
+    const resp = useResourcePagination({
+      page,
+      resource: avOrganizationsApi,
+      getResult: (result) => result.organizations,
+      itemsPerPage,
+    });
+
+    if (resp.isLoading) {
+      return <div>Loading...</div>;
+    }
+
+    return resp.data ? (
+      <Box>
+        <List>
+          {resp.data?.items.map((item) => (
+            <ListItem>
+              <ListItemText primary={item.name} secondary={item.customerId} />
+            </ListItem>
+          ))}
+        </List>
+        <Pagination
+          page={page}
+          count={Math.ceil(Math.abs(resp.data.totalCount / itemsPerPage))}
+          onChange={(event, newPage) => setPage(newPage)}
+        />
+      </Box>
+    ) : (
+      <div>Error</div>
+    );
+  },
+};

package/src/lib/ResourcePagination.test.tsx

@@ -0,0 +1,60 @@
+import { render, waitForElementToBeRemoved } from '@testing-library/react';
+import { useResourcePagination } from './ResourcePagination';
+import { avOrganizationsApi } from '@availity/api-axios';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import organizations from '@availity/mock/src/lib/data/organizations.json';
+
+beforeAll(() => {
+  // Start the interception.
+  server.listen();
+});
+
+afterEach(() => {
+  // Remove any handlers you may have added
+  // in individual tests (runtime handlers).
+  server.resetHandlers();
+});
+
+const client = new QueryClient();
+
+const ResourcePaginationComponent = (): JSX.Element => {
+  const resp = useResourcePagination({
+    page: 1,
+    resource: avOrganizationsApi,
+    getResult: (result) => result.organizations,
+  });
+
+  if (resp.isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <>
+      <div data-testid="response">{JSON.stringify(resp?.data?.items)}</div>
+      <div data-testid="totalCount">{JSON.stringify(resp?.data?.totalCount)}</div>
+    </>
+  );
+};
+
+describe('ResourcePagination', () => {
+  test('should render successfully', async () => {
+    const { getByText, getByTestId } = render(
+      <QueryClientProvider client={client}>
+        <ResourcePaginationComponent />
+      </QueryClientProvider>
+    );
+
+    await waitForElementToBeRemoved(() => getByText('Loading...'));
+
+    const data = getByTestId('response').innerHTML;
+
+    expect(JSON.parse(data)).toStrictEqual(organizations.organizations.slice(0, 10));
+
+    const totalCount = getByTestId('totalCount').innerHTML;
+
+    expect(totalCount).toStrictEqual(JSON.stringify(organizations.totalCount));
+  });
+});

package/src/lib/ResourcePagination.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from '@tanstack/react-query';
+
+type Resource<TData> = {
+  postGet: (
+    request: { limit: number; offset: number } & Record<string, unknown>,
+    config: unknown
+  ) => Promise<{ data: TData & { totalCount: number } }>;
+  getResult: string | ((result: TData) => unknown[]);
+  addParams: (data: Record<string, unknown>, config: Record<string, unknown>) => unknown;
+};
+
+export type LoadPageProps<TData> = {
+  page: number;
+  /** When a function, the function is called with the response body from the API call and is expected to return an array containing the list of items for the page. When a string, the string is expected to be a simple key used to get the value from the response. ("simple" means dot notation is not supported for grabbing values from nested objects. If your result is deeply nested, provide a function) */
+  getResult: string | ((result: TData) => unknown[]);
+  /** If array, defaults `totalCount` to the length of the array, and page values are sliced from the Array. If a function, it is called with the current page as an argument and expects an array of items to be returned. */
+  itemsPerPage?: number;
+  /** Object use to create querystring parameters in the request. */
+  parameters?: { params?: Record<string, unknown> } & Record<string, unknown>;
+  /** Availity API resource (see [@availity/api-axios](https://github.com/Availity/sdk-js/tree/master/packages/api-axios)).  */
+  resource: Resource<TData>;
+};
+
+const loadPage = async <TData,>({
+  page,
+  itemsPerPage = 10,
+  parameters = {},
+  getResult,
+  resource,
+}: LoadPageProps<TData>): Promise<{ items: TData[]; totalCount: number }> => {
+  const data = {
+    limit: itemsPerPage,
+    offset: (page - 1) * itemsPerPage,
+    ...parameters.params,
+  };
+
+  const config = resource.addParams(data, parameters);
+
+  const resp = await resource.postGet(data, config);
+
+  const useGetResult = getResult || resource.getResult;
+
+  const items =
+    (typeof useGetResult === 'function'
+      ? useGetResult.call(resource, resp.data)
+      : (resp.data as Record<string, unknown>)[useGetResult]) || resp.data;
+
+  if (!Array.isArray(items)) {
+    throw new TypeError(
+      `Expected data to be an array but got \`${typeof items}\`. Use the \`getResult\` prop to specify how to get the data from the API response.`
+    );
+  }
+
+  return {
+    items,
+    totalCount: resp.data.totalCount,
+  };
+};
+
+export const useResourcePagination = <TData,>({
+  page,
+  itemsPerPage,
+  parameters,
+  getResult,
+  resource,
+}: LoadPageProps<TData>) =>
+  useQuery(['resource', page], () => loadPage({ page, itemsPerPage, parameters, getResult, resource }));