@availity/mui-spaces 0.1.0

package/src/lib/Spaces.test.tsx

@@ -0,0 +1,265 @@
+import '@testing-library/jest-dom';
+import { useState } from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces, useSpaces, useSpacesContext } from '..';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '../../../mock/src/lib/server';
+import { NormalizedSpace } from './spaces-types';
+
+beforeAll(() => {
+  // Start the interception.
+  server.listen();
+});
+
+afterEach(() => {
+  // Remove any handlers you may have added
+  // in individual tests (runtime handlers).
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  // Disable request interception and clean up.
+  server.close();
+});
+
+describe('Spaces', () => {
+  it('provides correct spaces from props and from avWebQL', async () => {
+    const queryClient = new QueryClient();
+    // Create a space component that renders "Space <id-here> is in provider" if the space is in the provider and "Space <id-here> is not in provider" if it is not the provider
+    const SpaceComponent = ({ spaceId }: { spaceId: string }) => {
+      const space = useSpaces(spaceId);
+      return (
+        <div>
+          <span id={`space-for-${spaceId}`}>
+            {space && space.length > 0 ? `Space ${spaceId} is in provider` : `Space ${spaceId} is not in provider`}
+          </span>
+        </div>
+      );
+    };
+    // Create component that renders a SpaceComponent for ids 1, 2, and 3
+    const MyComponent = () => {
+      const [spaceIds, setSpaceIds] = useState(['1', '3']);
+      return (
+        <QueryClientProvider client={queryClient}>
+          <Spaces
+            spaceIds={spaceIds}
+            spaces={[{ id: '3', configurationId: '3', type: 'space', name: 'Space 3' }]}
+            clientId="my-client-id"
+          >
+            <SpaceComponent spaceId="1" />
+            <SpaceComponent spaceId="2" />
+            <SpaceComponent spaceId="3" />
+            <button type="button" id="add-spaceid-btn" onClick={() => setSpaceIds(['1', '2', '3'])}>
+              Add
+            </button>
+          </Spaces>
+        </QueryClientProvider>
+      );
+    };
+    const { container, getByText } = render(<MyComponent />);
+    // Check that space 1 (fetched from avWebQL) is accessible by spaces provider
+    await waitFor(() => getByText('Space 1 is in provider'));
+    expect(getByText('Space 1 is in provider')).toBeDefined();
+    // Check that space 2 (not provided) is not accessible by spaces provider
+    await waitFor(() => getByText('Space 2 is not in provider'));
+    expect(getByText('Space 2 is not in provider')).toBeDefined();
+    // Check that space 3 (provided by props) is accessible by spaces provider
+    await waitFor(() => getByText('Space 3 is in provider'));
+    expect(getByText('Space 3 is in provider')).toBeDefined();
+    // Check that avWebQL was only queried for space 1 because space 3 was provided by props
+    // Click button that adds another space id, "2", to the provider
+    const button = container.querySelector('#add-spaceid-btn');
+    if (button) fireEvent.click(button);
+    // // Check that space 1 (fetched from avWebQL) is still accessible by spaces provider
+    await waitFor(() => getByText('Space 1 is in provider'));
+    expect(getByText('Space 1 is in provider')).toBeDefined();
+    // // Check that space 2 (now fetched from avWebQL) is now accessible by spaces provider
+    await waitFor(() => getByText('Space 2 is in provider'));
+    expect(getByText('Space 2 is in provider')).toBeDefined();
+    // // Check that space 3 (provided by props) is still accessible by spaces provider
+    await waitFor(() => getByText('Space 3 is in provider'));
+    expect(getByText('Space 3 is in provider')).toBeDefined();
+  });
+});
+
+it('toggles whether the spaces provider is loading', async () => {
+  const queryClient = new QueryClient();
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const fn = jest.fn();
+  // Create component to call mock function
+  const SpaceComponent = ({ spaceId }: { spaceId: string }) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+    const space = useSpaces(spaceId);
+    const { loading } = useSpacesContext();
+
+    if (loading) fn();
+
+    // Should be called when we fetch spaces from avWebQL gets executed
+    return loading ? null : (
+      <span id={`space-for-${spaceId}`}>{space?.[0] ? `Space ${space[0].id}` : 'No Space '}</span>
+    );
+  };
+
+  // Create component that renders a SpaceComponent for the current space id
+  const MyComponent = () => {
+    const [spaceId, setSpaceId] = useState(['1']);
+
+    return (
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={spaceId} clientId="my-client-id">
+          <SpaceComponent spaceId={spaceId[0]} />
+
+          <button type="button" id="add-spaceid-btn" onClick={() => setSpaceId(['2'])}>
+            Add
+          </button>
+        </Spaces>
+      </QueryClientProvider>
+    );
+  };
+
+  const { container, getByText } = render(<MyComponent />);
+
+  expect(fn).toHaveBeenCalled();
+
+  await waitFor(() => getByText('Space 1'));
+
+  // Add a space id
+  const button = container.querySelector('#add-spaceid-btn');
+  if (button) fireEvent.click(button);
+
+  expect(fn).toHaveBeenCalled();
+
+  await waitFor(() => getByText('Space 2'));
+});
+
+describe('useSpaces', () => {
+  // Create a spaces component that renders ids passed in
+  const SpacesComponent = ({ ids = [] }: { ids?: string[] }) => {
+    const spaces = useSpaces(...ids) || [];
+
+    const dataTestIdSuffix = ids && ids.length > 0 ? ids.join('-') : 'all-spaces';
+    return (
+      <div>
+        <span id={`spaces-for-${dataTestIdSuffix}`}>{spaces.map((spc) => `Id: ${spc.id} `)}</span>
+      </div>
+    );
+  };
+
+  it('returns spaces by id', async () => {
+    const queryClient = new QueryClient();
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['1', '2', '3']} clientId="test-client-id">
+          <SpacesComponent />
+          <SpacesComponent ids={['2', '3']} />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    // Check that all spaces get returned when no ids get passed to useSpaces hook
+    const allSpaces = await waitFor(() => container.querySelector('#spaces-for-all-spaces'));
+    await waitFor(() => expect(allSpaces?.textContent).toBe('Id: 1 Id: 2 Id: 3 '));
+
+    // Check that spaces for ids get returned when ids passed to useSpaces hook
+    const specificSpaces = await waitFor(() => container.querySelector('#spaces-for-2-3'));
+    expect(specificSpaces?.textContent).toBe('Id: 2 Id: 3 ');
+  });
+
+  it('returns spaces by configurationId', async () => {
+    const queryClient = new QueryClient();
+    const { getByText } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['11', '22', '33']} clientId="test-client-id">
+          <SpacesComponent />
+          <SpacesComponent ids={['22', '33']} />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    // Check that all spaces get returned when no configurationIds get passed to useSpaces hook
+    await waitFor(() => getByText('Id: 1 Id: 2 Id: 3'));
+
+    // Check that spaces for configurationIds get returned when configurationIds passed to useSpaces hook
+    await waitFor(() => getByText('Id: 2 Id: 3'));
+  });
+
+  it('returns all matching spaces when searching by payerId', async () => {
+    const queryClient = new QueryClient();
+    const { getByText } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces payerIds={['a', 'b', 'c']} clientId="test-client-id">
+          <SpacesComponent ids={['b']} />
+          <SpacesComponent ids={['c']} />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    // Check that spaces for payer ids get returned when ids passed to useSpaces hook
+    await waitFor(() => getByText('Id: 1 Id: 2'));
+    await waitFor(() => getByText('Id: 1 Id: 2 Id: 3'));
+  });
+
+  it('renders with warning when returning all spaces because no ids were passed in', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const SpacesComponent = ({ ids = [] }) => {
+      const spaces = useSpaces(...ids) || [];
+
+      const dataTestIdSuffix = ids && ids.length > 0 ? ids.join('-') : 'all-spaces';
+      return (
+        <div>
+          <span id={`spaces-for-${dataTestIdSuffix}`}>{spaces.map((spc) => `Id: ${spc && spc.id} `)}</span>
+        </div>
+      );
+    };
+
+    const queryClient = new QueryClient();
+
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['1', '2']} clientId="test-client-id">
+          <SpacesComponent />
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => container.querySelector('#spaces-for-all-spaces'));
+
+    expect(consoleWarnMock).toHaveBeenCalled();
+    expect(consoleWarnMock.mock.calls[0][0]).toBe('You did not pass in an ID to find a space, returning all spaces.');
+
+    consoleWarnMock.mockRestore();
+  });
+});
+
+it('returns first payer space with when no spaceId passed', async () => {
+  // Create component that renders a SpaceComponent for the current space id
+  const SpaceComponent = () => {
+    const spaces = useSpaces() || [];
+
+    return (
+      <div id={`space-${spaces[0]?.id}`}>
+        <span>{spaces[0]?.name}</span>
+      </div>
+    );
+  };
+
+  const queryClient = new QueryClient();
+
+  const { container, getByText } = render(
+    <QueryClientProvider client={queryClient}>
+      <Spaces spaceIds={['1']} clientId="my-client-id">
+        <SpaceComponent />
+      </Spaces>
+    </QueryClientProvider>
+  );
+
+  const spc1 = await waitFor(() => container.querySelector('#space-1'));
+  const spc2 = await waitFor(() => getByText('Space 1'));
+
+  expect(spc1).toBeDefined();
+  expect(spc2).toBeDefined();
+});

package/src/lib/Spaces.tsx

@@ -0,0 +1,202 @@
+import { createContext, useContext, useReducer, useEffect } from 'react';
+import { useQueries } from '@tanstack/react-query';
+import { normalizeSpaces, spacesReducer, fetchAllSpaces } from './spaces-data';
+import { Space, SpacesProps, SpacesContextType } from './spaces-types';
+import configurationFindMany from './configurationFindMany';
+
+export const INITIAL_STATE = {
+  loading: true,
+};
+
+export const SpacesContext = createContext<SpacesContextType>(INITIAL_STATE);
+
+export const useSpacesContext = () => useContext(SpacesContext);
+
+export const Spaces = ({
+  query = configurationFindMany,
+  variables = { types: ['PAYERSPACE'] },
+  clientId,
+  children,
+  payerIds,
+  spaceIds,
+  spaces: spacesFromProps,
+}: SpacesProps): JSX.Element => {
+  const [{ previousSpacesMap, previousSpacesByConfigMap, previousSpacesByPayerMap, loading, error }, dispatch] =
+    useReducer(spacesReducer, INITIAL_STATE);
+
+  const spacesMap: Map<string, Space> = new Map(previousSpacesMap);
+  const configIdsMap: Map<string, Space> = new Map(previousSpacesByConfigMap);
+  const payerIdsMap: Map<string, Space[]> = new Map(previousSpacesByPayerMap);
+  const spaceIdsToQuery: Set<string> = new Set();
+  const payerIdsToQuery: Set<string> = new Set();
+
+  if (spacesFromProps && spacesFromProps.length > 0) {
+    for (const space of spacesFromProps) {
+      if (space.id && !spacesMap.has(space.id)) {
+        spacesMap.set(space.id, space);
+      }
+
+      if (space.configurationId && !configIdsMap.has(space.configurationId)) {
+        configIdsMap.set(space.configurationId, space);
+      }
+
+      if (space.payerIDs) {
+        for (const pId of space.payerIDs) {
+          const currentSpacesForPayerId = payerIdsMap.get(pId);
+          if (currentSpacesForPayerId) {
+            payerIdsMap.set(pId, [...currentSpacesForPayerId, space]);
+          } else {
+            payerIdsMap.set(pId, [space]);
+          }
+        }
+      }
+    }
+  }
+
+  if (spaceIds && spaceIds.length > 0) {
+    for (const id of spaceIds) {
+      if (!(spacesMap.has(id) || configIdsMap.has(id))) {
+        spaceIdsToQuery.add(id);
+      }
+    }
+  }
+
+  if (payerIds && payerIds.length > 0) {
+    for (const pid of payerIds) {
+      if (!payerIdsMap.has(pid)) {
+        payerIdsToQuery.add(pid);
+      }
+    }
+  }
+
+  const spaceIdVars = { ...variables, ids: [...spaceIdsToQuery.keys()] };
+
+  const payerIdVars = { ...variables, payerIds: [...payerIdsToQuery.keys()] };
+
+  const [
+    { data: spacesBySpaceIds, isFetching: isLoadingBySpaceIds, error: errorBySpaceIds },
+    { data: spacesByPayerIds, isFetching: isLoadingByPayerIds, error: errorByPayerIds },
+  ] = useQueries({
+    queries: [
+      {
+        queryKey: ['id', spaceIdVars],
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: spaceIdVars }),
+        enabled: spaceIdsToQuery.size > 0,
+      },
+      {
+        queryKey: ['id', payerIdVars],
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: payerIdVars }),
+        enabled: payerIdsToQuery.size > 0,
+      },
+    ],
+  });
+
+  useEffect(() => {
+    if (errorByPayerIds || errorBySpaceIds) {
+      dispatch({
+        type: 'ERROR',
+        error: errorByPayerIds?.message || errorBySpaceIds?.message,
+        loading: false,
+      });
+    }
+  }, [errorByPayerIds, errorBySpaceIds]);
+
+  useEffect(() => {
+    dispatch({
+      type: 'LOADING',
+      loading: true,
+    });
+    if (spaceIdsToQuery.size === 0 && payerIdsToQuery.size === 0) {
+      dispatch({
+        type: 'LOADING',
+        loading: false,
+      });
+      return;
+    }
+    if (spacesBySpaceIds) {
+      for (const space of spacesBySpaceIds) {
+        if (!spacesMap.has(space.id)) {
+          spacesMap.set(space.id, space);
+        }
+
+        if (!configIdsMap.has(space.configurationId)) {
+          configIdsMap.set(space.configurationId, space);
+        }
+
+        if (space.payerIDs) {
+          for (const pId of space.payerIDs) {
+            const currentSpacesForPayerId = payerIdsMap.get(pId);
+            if (currentSpacesForPayerId) {
+              payerIdsMap.set(pId, [...currentSpacesForPayerId, space]);
+            } else {
+              payerIdsMap.set(pId, [space]);
+            }
+          }
+        }
+      }
+    }
+    if (payerIdsToQuery.size > 0) {
+      if (spacesByPayerIds) {
+        for (const space of spacesByPayerIds) {
+          if (!spacesMap.has(space.id)) {
+            spacesMap.set(space.id, space);
+          }
+
+          if (!configIdsMap.has(space.configurationId)) {
+            configIdsMap.set(space.configurationId, space);
+          }
+
+          if (space.payerIDs) {
+            for (const pId of space.payerIDs) {
+              const currentSpacesForPayerId = payerIdsMap.get(pId);
+              if (currentSpacesForPayerId) {
+                payerIdsMap.set(pId, [...currentSpacesForPayerId, space]);
+              } else {
+                payerIdsMap.set(pId, [space]);
+              }
+            }
+          }
+        }
+      }
+    }
+    dispatch({
+      type: 'SPACES',
+      spaces: spacesMap,
+      spacesByConfig: configIdsMap,
+      spacesByPayer: payerIdsMap,
+      loading: false,
+    });
+  }, [spacesBySpaceIds, spacesByPayerIds, payerIds, spaceIds]);
+
+  // const hasParentModalProvider = useModal() !== undefined;
+  return (
+    <SpacesContext.Provider
+      children={children}
+      value={{
+        spaces: spacesMap,
+        spacesByConfig: configIdsMap,
+        spacesByPayer: payerIdsMap,
+        loading: loading || isLoadingByPayerIds || isLoadingBySpaceIds,
+        error,
+      }}
+    />
+  );
+};
+
+export const useSpaces = (...ids: string[]) => {
+  const { spaces, spacesByConfig, spacesByPayer } = useSpacesContext();
+
+  const idsIsEmpty = !ids || ids.length === 0;
+  const callerIsExpectingFirstSpace = ids?.length === 1 && ids[0] === undefined;
+  const shouldReturnAllSpaces = idsIsEmpty || callerIsExpectingFirstSpace;
+
+  if (shouldReturnAllSpaces) {
+    console.warn(`You did not pass in an ID to find a space, returning all spaces.`);
+    return spaces && normalizeSpaces([...spaces.values()]);
+  }
+
+  const matchedSpaces = ids.map((id) => spaces?.get(id) || spacesByConfig?.get(id) || spacesByPayer?.get(id));
+  const normalized = normalizeSpaces(matchedSpaces);
+
+  return normalized;
+};

package/src/lib/configurationFindMany.tsx

@@ -0,0 +1,105 @@
+export default `query configurationFindMany($ids: [String!], $payerIDs: [ID!], $types: [TypeEnum!]) {
+  configurationPagination(filter: { ids: $ids, payerIds: $payerIDs, types: $types }) {
+    pageInfo {
+      hasNextPage
+      currentPage
+    }
+    items {
+      ... on Configuration {
+        configurationId
+        name
+        shortName
+        type
+        activeDate
+        isNew
+        description
+        payerIDs
+        parentIDs
+        metadataPairs {
+          name
+          value
+        }
+      }
+
+      ... on Node {
+        id
+      }
+
+      ... on Alert {
+        link {
+          text
+          target
+          url
+        }
+      }
+
+      ... on Container {
+        link {
+          text
+          target
+          url
+        }
+        images {
+          tile
+          promotional
+          logo
+          billboard
+        }
+      }
+
+      ... on PayerSpace {
+        link {
+          text
+          target
+          url
+        }
+        images {
+          tile
+          logo
+          billboard
+        }
+        url
+      }
+
+      ... on Application {
+        link {
+          text
+          target
+          url
+        }
+      }
+
+      ... on Resource {
+        link {
+          text
+          target
+          url
+        }
+      }
+
+      ... on Navigation {
+        icons {
+          dashboard
+          navigation
+        }
+        images {
+          promotional
+        }
+      }
+
+      ... on Learning {
+        images {
+          promotional
+        }
+      }
+
+      ... on Proxy {
+        url
+      }
+
+      ... on File {
+        url
+      }
+    }
+  }
+}`;

package/src/lib/helpers.test.tsx

@@ -0,0 +1,26 @@
+import { updateUrl, getUrl } from './helpers';
+
+describe('updateUrl', () => {
+  it('should parse the given url return the existing and new params in alphabetical order', () => {
+    let updatedUrl = updateUrl('http://www.example.com?foo=bar#hashme', 'fakeKey', 'fakeValue');
+    expect(updatedUrl).toBe('http://www.example.com?fakeKey=fakeValue&foo=bar%23hashme');
+
+    updatedUrl = updateUrl('http://www.example.com', 'fakeKey', 'fakeValue');
+    expect(updatedUrl).toBe('http://www.example.com?fakeKey=fakeValue');
+
+    updatedUrl = updateUrl('http://www.example.com?foo=bar', 'fakeKey', 'fakeValue');
+    expect(updatedUrl).toBe('http://www.example.com?fakeKey=fakeValue&foo=bar');
+  });
+});
+
+describe('getUrl', () => {
+  it('should return an absolute url', () => {
+    const url = getUrl('http://www.availity.com', false, true);
+    expect(url).toBe('http://www.availity.com');
+  });
+
+  it('should return a relative url', () => {
+    const url = getUrl('/path/to/my/app', true, false);
+    expect(url).toBe('/public/apps/home/#!/loadApp?appUrl=%2Fpath%2Fto%2Fmy%2Fapp');
+  });
+});

package/src/lib/helpers.tsx

@@ -0,0 +1,15 @@
+import qs from 'qs';
+
+export const updateUrl = (url: string, key: string, value: string) => {
+  const [uri, queryString] = url.split('?');
+  const currentParams = qs.parse(queryString);
+  const newParams = qs.stringify({ ...currentParams, [key]: value }, { sort: (a, b) => a.localeCompare(b) });
+
+  return `${uri}?${newParams}`;
+};
+
+export const getUrl = (url = '', loadApp: boolean, absolute: boolean) => {
+  if (absolute || !loadApp) return url;
+
+  return `/public/apps/home/#!/loadApp?appUrl=${encodeURIComponent(url)}`;
+};

package/src/lib/spaces-data.test.tsx

@@ -0,0 +1,57 @@
+import { normalizeSpaces, fetchAllSpaces } from './spaces-data';
+import configurationFindMany from './configurationFindMany';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '../../../mock/src/lib/server';
+
+beforeAll(() => {
+  // Start the interception.
+  server.listen();
+});
+
+afterEach(() => {
+  // Remove any handlers you may have added
+  // in individual tests (runtime handlers).
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  // Disable request interception and clean up.
+  server.close();
+});
+
+describe('getAllSpaces', () => {
+  it('gets all spaces', async () => {
+    const spaces = await fetchAllSpaces({
+      query: configurationFindMany,
+      clientId: 'clientId',
+      variables: {
+        types: ['space'],
+      },
+    });
+    // Check correct spaces get returned
+    expect(spaces.length).toBe(10);
+    expect(spaces[0].id).toBe('1');
+    expect(spaces[spaces.length - 1].id).toBe('10');
+  });
+});
+
+describe('normalizeSpaces', () => {
+  it('normalizes space pairs', async () => {
+    const spaces = [
+      {
+        id: '1',
+        configurationId: '1',
+        type: 'space',
+        name: 'Space 1',
+        metadata: [
+          { name: 'a', value: '1' },
+          { name: 'b', value: '2' },
+        ],
+      },
+    ];
+
+    const sanitized = normalizeSpaces(spaces);
+
+    expect(sanitized[0].metadata).toEqual({ a: '1', b: '2' });
+  });
+});