@availity/hooks 5.2.0 → 6.0.0

package/src/useProviders.ts

@@ -0,0 +1,48 @@
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import { avProvidersApi } from '@availity/api-axios';
+import { AriesHookBase } from './types';
+
+export interface ProvidersResponse extends AriesHookBase {
+  data: AriesHookBase['data'] & {
+    providers: {
+      id: string;
+      lastName: string;
+      firstName: string;
+      middleName: string;
+      uiDisplayName: string;
+      atypical: boolean;
+      npi: string;
+      customerIds: string[];
+      roles: { code: string; value: string }[];
+      primarySpecialty: { code: string; value: string };
+      primaryFax: {
+        internationalCellularCode: string;
+        areaCode: string;
+        phoneNumber: string;
+      };
+      primaryAddress: {
+        line1: string;
+        line2: string;
+        city: string;
+        state: string;
+        stateCode: string;
+        zip: { code: string; addon: string };
+      };
+    }[];
+  };
+}
+
+export interface AvProvidersConfig {
+  customerId: string;
+  [key: string]: unknown;
+}
+
+const fetchProviders = async (config: AvProvidersConfig) =>
+  avProvidersApi.getProviders(config.customerId, config) as unknown as ProvidersResponse;
+
+export default function useProviders(
+  config: AvProvidersConfig,
+  options?: Omit<UseQueryOptions<ProvidersResponse, unknown>, 'queryKey' | 'queryFn'>
+): UseQueryResult<ProvidersResponse, unknown> {
+  return useQuery({ queryKey: ['providers', config], queryFn: () => fetchProviders(config), ...options });
+}

package/src/useStash.ts

@@ -0,0 +1,21 @@
+import { avStashApi } from '@availity/api-axios';
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+
+export type StashData = Record<string, unknown>;
+
+const fetchStash = async (sessionId: string) => {
+  const response = await avStashApi.get(sessionId);
+  return response?.data;
+};
+
+export default function useStash(
+  sessionId: string,
+  options?: Omit<UseQueryOptions<StashData, unknown>, 'queryKey' | 'queryFn'>
+): UseQueryResult<StashData, unknown> {
+  return useQuery({
+    queryKey: ['stash', sessionId],
+    queryFn: () => fetchStash(sessionId),
+    enabled: !!sessionId,
+    ...options,
+  });
+}

package/src/{useTimeout.js → useTimeout.ts}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-export default function useTimeout(ms = 0) {
+export default function useTimeout(ms = 0): boolean {
   const [ready, setReady] = useState(false);
 
   useEffect(() => {

package/src/{useToggle.js → useToggle.ts}

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
-export default function useToggle(initialState = false) {
+export default function useToggle(initialState = false): [boolean, (state?: boolean) => void] {
   const [state, setState] = useState(initialState);
-  const toggle = (newState) => {
+  const toggle = (newState?: boolean) => {
     if (newState !== undefined && newState !== state) {
       setState(newState);
     } else if (newState === undefined) {

package/src/{useUpdateNav.js → useUpdateNav.ts}

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import avMessage from '@availity/message-core';
 
-const useUpdateNav = () => {
+const useUpdateNav = (): void => {
   const location = useLocation();
 
   useEffect(() => {

package/src/{useWindowDimensions.js → useWindowDimensions.ts}

@@ -1,14 +1,16 @@
 import { useEffect, useState } from 'react';
 
-const getWindowDimensions = () => {
+export interface Dimensions {
+  width: number;
+  height: number;
+}
+
+const getWindowDimensions = (): Dimensions => {
   const { innerWidth: width, innerHeight: height } = window;
-  return {
-    width,
-    height,
-  };
+  return { width, height };
 };
 
-const useWindowDimensions = () => {
+export default function useWindowDimensions(): Dimensions {
   const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
 
   useEffect(() => {
@@ -21,6 +23,4 @@ const useWindowDimensions = () => {
   }, []);
 
   return windowDimensions;
-};
-
-export default useWindowDimensions;
+}

package/stories/ResourceComponent.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
 import { Card, CardBody, CardTitle } from 'reactstrap';
 
-type Props = {
-  data: Record<string, unknown>;
+type Props<TData> = {
+  data: TData;
   loading: boolean;
   title?: string;
 };
 
-const ResourceComponent = ({ data, loading, title = '' }: Props): JSX.Element => (
-  <Card body>
-    <CardTitle className="text-center" tag="h4">
-      {title}
-    </CardTitle>
-    <CardBody>{loading ? 'Loading...' : <pre>{JSON.stringify(data, null, 2)}</pre>}</CardBody>
-  </Card>
-);
+function ResourceComponent<TData>({ data, loading, title = '' }: Props<TData>) {
+  return (
+    <Card body>
+      <CardTitle className="text-center" tag="h4">
+        {title}
+      </CardTitle>
+      <CardBody>{loading ? 'Loading...' : <pre>{JSON.stringify(data, null, 2)}</pre>}</CardBody>
+    </Card>
+  );
+}
 
 export default ResourceComponent;

package/tests/useCurrentRegion.test.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { waitFor, cleanup } from '@testing-library/react';
+import { avRegionsApi } from '@availity/api-axios';
+import { QueryClient } from '@tanstack/react-query';
+import { useCurrentRegion } from '../src/index';
+import renderWithClient from './util';
+
+vi.mock('@availity/api-axios');
+
+let queryStates = [];
+beforeEach(() => {
+  queryStates = [];
+});
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+  queryClient.clear();
+  queryStates = [];
+});
+
+const pushState = (state) => {
+  queryStates.push(state);
+};
+
+const Component = ({ log }) => {
+  // Mirror testing methods from react-query instead of relying on timing or booleans
+  // https://github.com/tannerlinsley/react-query/blob/master/src/react/tests/useQuery.test.tsx
+  const state = useCurrentRegion({ gcTime: 0, retry: false });
+
+  // not directly used in assertions here, but useful for debugging purposes
+  if (log) log(state);
+
+  const { data, error, status } = state;
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error}</h1>
+    </div>
+  );
+};
+
+Component.propTypes = {
+  log: PropTypes.func,
+};
+
+describe('useCurrentRegion', () => {
+  test('handle error', async () => {
+    avRegionsApi.getCurrentRegion.mockRejectedValueOnce('An error occurred');
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText('Status: error');
+      expect(el).toBeDefined();
+    });
+    await waitFor(() => {
+      const el = getByText('Error: An error occurred');
+      expect(el).toBeDefined();
+    });
+  });
+
+  test('handle success', async () => {
+    avRegionsApi.getCurrentRegion.mockResolvedValueOnce({
+      config: { polling: false },
+      data: {
+        regions: [
+          {
+            id: 'FL',
+            value: 'Florida',
+          },
+        ],
+      },
+      status: 200,
+      statusText: 'Ok',
+    });
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText(
+        `Data: ${JSON.stringify({
+          code: 'FL',
+          value: 'Florida',
+        })}`
+      );
+      expect(el).toBeDefined();
+    });
+  });
+});

package/tests/useCurrentUser.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { waitFor, cleanup } from '@testing-library/react';
+import { avUserApi } from '@availity/api-axios';
+import { QueryClient } from '@tanstack/react-query';
+import { useCurrentUser } from '../src/index';
+import renderWithClient from './util';
+
+vi.mock('@availity/api-axios');
+
+let queryStates = [];
+beforeEach(() => {
+  queryStates = [];
+});
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+  queryClient.clear();
+  queryStates = [];
+});
+
+const pushState = (state) => {
+  queryStates.push(state);
+};
+
+const Component = ({ log }) => {
+  // Mirror testing methods from react-query instead of relying on timing or booleans
+  // https://github.com/tannerlinsley/react-query/blob/master/src/react/tests/useQuery.test.tsx
+  const state = useCurrentUser({ gcTime: 0, retry: false });
+
+  // not directly used in assertions here, but useful for debugging purposes
+  if (log) log(state);
+
+  const { data, error, status } = state;
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error}</h1>
+    </div>
+  );
+};
+
+Component.propTypes = {
+  log: PropTypes.func,
+};
+
+describe('useCurrentUser', () => {
+  test('should set error on rejected promise', async () => {
+    avUserApi.me.mockRejectedValueOnce('An error occurred');
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText('Status: error');
+      expect(el).toBeDefined();
+    });
+    await waitFor(() => {
+      const el = getByText('Error: An error occurred');
+      expect(el).toBeDefined();
+    });
+  });
+
+  test('should return user', async () => {
+    avUserApi.me.mockResolvedValueOnce({
+      id: 'aka12345',
+      userId: 'testExample',
+      akaname: 'aka12345',
+      lastName: 'Last',
+      firstName: 'First',
+    });
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText(
+        `Data: ${JSON.stringify({
+          id: 'aka12345',
+          userId: 'testExample',
+          akaname: 'aka12345',
+          lastName: 'Last',
+          firstName: 'First',
+        })}`
+      );
+      expect(el).toBeDefined();
+    });
+  });
+});

package/tests/useEffectAsync.test.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { render, waitFor, act, cleanup } from '@testing-library/react';
+import { useEffectAsync } from '../src/index';
+
+afterEach(cleanup);
+
+// eslint-disable-next-line react/prop-types
+const Component = ({ asyncFunc }) => {
+  const [state, setState] = useState('Hello');
+
+  useEffectAsync(async () => {
+    const newState = await asyncFunc();
+
+    act(() => setState(newState));
+  }, []);
+
+  return <div data-testid="effect-test">{state}</div>;
+};
+const asyncFunc = () => Promise.resolve('World');
+
+describe('useEffectAsync', () => {
+  test('should render "Hello" then "World"', async () => {
+    // Create Async Method
+    // Render
+    const { getByTestId } = render(<Component asyncFunc={asyncFunc} />);
+
+    // Expect the component to render "Hello"
+    expect(getByTestId('effect-test').textContent).toEqual('Hello');
+
+    // Wait for the Async Function to be called after mounting
+    await waitFor(() => getByTestId('effect-test'));
+
+    // Expect the component to render "World"
+    expect(getByTestId('effect-test').textContent).toEqual('World');
+  });
+});

package/tests/useMount.test.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { useMount } from '../src/index';
+
+afterEach(cleanup);
+
+// eslint-disable-next-line react/prop-types
+const Component = () => {
+  const [state, setState] = useState();
+
+  useMount(() => {
+    setState('test');
+  });
+
+  return <p data-testid="mount-test">{state}</p>;
+};
+
+describe('useMount', () => {
+  test('should render "test"', () => {
+    const { getByTestId } = render(<Component />);
+
+    expect(getByTestId('mount-test').textContent).toEqual('test');
+  });
+});

package/tests/useOrganizations.test.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { waitFor, cleanup } from '@testing-library/react';
+import { avOrganizationsApi } from '@availity/api-axios';
+import { QueryClient } from '@tanstack/react-query';
+import renderWithClient from './util';
+import { useOrganizations } from '../src/index';
+
+vi.mock('@availity/api-axios');
+
+let queryStates = [];
+beforeEach(() => {
+  queryStates = [];
+});
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+  queryClient.clear();
+  queryStates = [];
+});
+
+const pushState = (state) => {
+  queryStates.push(state);
+};
+
+const Component = ({ log }) => {
+  // Mirror testing methods from react-query instead of relying on timing or booleans
+  // https://github.com/tannerlinsley/react-query/blob/master/src/react/tests/useQuery.test.tsx
+  const state = useOrganizations({}, { gcTime: 0, retry: false });
+
+  // not directly used in assertions here, but useful for debugging purposes
+  if (log) log(state);
+
+  const { data, error, status } = state;
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error}</h1>
+    </div>
+  );
+};
+
+Component.propTypes = {
+  log: PropTypes.func,
+};
+
+describe('useOrganizations', () => {
+  test('should return an error', async () => {
+    avOrganizationsApi.getOrganizations.mockRejectedValueOnce('An error occurred');
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText('Status: error');
+      expect(el).toBeDefined();
+    });
+    await waitFor(() => {
+      const el = getByText('Error: An error occurred');
+      expect(el).toBeDefined();
+    });
+  });
+
+  test('should return organizations', async () => {
+    avOrganizationsApi.getOrganizations.mockResolvedValueOnce({
+      data: {
+        organizations: [
+          {
+            links: {
+              permissions: { href: 'test' },
+              patients: { href: 'test' },
+              self: { href: 'test' },
+              admin: { href: 'test' },
+              businessArrangements: { href: 'test' },
+              users: { href: 'test' },
+            },
+          },
+        ],
+      },
+    });
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText(
+        `Data: ${JSON.stringify({
+          data: {
+            organizations: [
+              {
+                links: {
+                  permissions: { href: 'test' },
+                  patients: { href: 'test' },
+                  self: { href: 'test' },
+                  admin: { href: 'test' },
+                  businessArrangements: { href: 'test' },
+                  users: { href: 'test' },
+                },
+              },
+            ],
+          },
+        })}`
+      );
+      expect(el).toBeDefined();
+    });
+  });
+});

package/tests/usePermissions.test.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { waitFor, cleanup } from '@testing-library/react';
+import { avPermissionsApi } from '@availity/api-axios';
+import { QueryClient } from '@tanstack/react-query';
+import renderWithClient from './util';
+import { usePermissions } from '../src/index';
+
+vi.mock('@availity/api-axios');
+
+let queryStates = [];
+beforeEach(() => {
+  queryStates = [];
+});
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+  queryClient.clear();
+  queryStates = [];
+});
+
+const pushState = (state) => {
+  queryStates.push(state);
+};
+
+const Component = ({ log }) => {
+  // Mirror testing methods from react-query instead of relying on timing or booleans
+  // https://github.com/tannerlinsley/react-query/blob/master/src/react/tests/useQuery.test.tsx
+  const state = usePermissions({}, { gcTime: 0, retry: false });
+
+  // not directly used in assertions here, but useful for debugging purposes
+  if (log) log(state);
+
+  const { data, error, status } = state;
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error}</h1>
+    </div>
+  );
+};
+
+Component.propTypes = {
+  log: PropTypes.func,
+};
+
+describe('usePermissions', () => {
+  test('should return an error', async () => {
+    avPermissionsApi.getPermissions.mockRejectedValueOnce('An error occurred');
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText('Status: error');
+      expect(el).toBeDefined();
+    });
+    await waitFor(() => {
+      const el = getByText('Error: An error occurred');
+      expect(el).toBeDefined();
+    });
+  });
+
+  test('should return permissions', async () => {
+    avPermissionsApi.getPermissions.mockResolvedValueOnce({
+      id: '44',
+      description: 'test',
+      links: { self: { href: 'test.com' } },
+    });
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText(
+        `Data: ${JSON.stringify({
+          id: '44',
+          description: 'test',
+          links: { self: { href: 'test.com' } },
+        })}`
+      );
+      expect(el).toBeDefined();
+    });
+  });
+});