@availity/mui-spaces 0.1.0

package/src/lib/spaces-data.tsx

@@ -0,0 +1,116 @@
+import { avWebQLApi } from '@availity/api-axios';
+import {
+  Space,
+  NameValuePair,
+  NormalizedSpace,
+  NormalizedPairField,
+  PairFields,
+  FetchSpacesProps,
+  FetchAllSpacesProps,
+  SpacesContextType,
+  SpacesReducerAction,
+} from './spaces-types';
+
+export const actions = {
+  SPACES: (
+    currentState: SpacesContextType,
+    { spaces, spacesByConfig, spacesByPayer }: SpacesReducerAction
+  ): SpacesContextType => ({
+    previousSpacesMap: spaces,
+    previousSpacesByConfigMap: spacesByConfig,
+    previousSpacesByPayerMap: spacesByPayer,
+    error: undefined,
+    loading: false,
+  }),
+  ERROR: (state: SpacesContextType, { error }: SpacesReducerAction): SpacesContextType => ({
+    ...state,
+    loading: false,
+    error,
+  }),
+  LOADING: (state: SpacesContextType, { loading }: SpacesReducerAction): SpacesContextType => ({
+    ...state,
+    loading: loading !== undefined ? loading : !state.loading,
+  }),
+};
+
+export const spacesReducer = (state: SpacesContextType, action: SpacesReducerAction): SpacesContextType => {
+  const { type } = action;
+  return actions[type](state, action);
+};
+
+export const normalizeSpaces = (spaces: (Space | Space[] | undefined)[]): NormalizedSpace[] => {
+  // if spaces coming in is array of an array of spaces objects,
+  // then we matched by payerId and should unravel that first level of array
+  let spacesToReduce = spaces;
+  if (Array.isArray(spaces[0])) {
+    spacesToReduce = spaces[0];
+  }
+  // Normalize space pairs ( [{ name: 'foo'', value: 'bar' }] => { foo: 'bar' } )
+  const pairFields: PairFields = ['images', 'metadata', 'colors', 'icons', 'mapping'];
+  return spacesToReduce.reduce((accum: NormalizedSpace[], spc: Space): NormalizedSpace[] => {
+    if (!spc) return accum;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { images, metadata, colors, icons, mapping, ...rest } = spc;
+    const normalizedSpace: NormalizedSpace = { ...rest };
+
+    for (const field of pairFields) {
+      if (spc[field] && Array.isArray(spc[field])) {
+        normalizedSpace[field] = spc[field]?.reduce((_accum: NormalizedPairField, { name, value }: NameValuePair) => {
+          _accum[name] = value;
+          return _accum;
+        }, {});
+      }
+    }
+
+    accum.push(normalizedSpace);
+    return accum;
+  }, []);
+};
+
+export const fetchSpaces = async ({ query, clientId, variables }: FetchSpacesProps) => {
+  // eslint-disable-next-line no-useless-catch
+  const {
+    data: {
+      data: { configurationPagination },
+    },
+  } = await avWebQLApi.create(
+    {
+      query,
+      variables: { ...variables },
+    },
+    { headers: { 'X-Client-ID': clientId } }
+  );
+
+  const {
+    pageInfo: { currentPage, hasNextPage },
+    items,
+  } = configurationPagination;
+
+  return {
+    items,
+    currentPage,
+    hasNextPage,
+  };
+};
+
+export const fetchAllSpaces = async ({
+  query,
+  clientId,
+  variables,
+  _spaces = [],
+}: FetchAllSpacesProps): Promise<Space[]> => {
+  const { items, currentPage, hasNextPage } = await fetchSpaces({ query, clientId, variables });
+
+  _spaces.push(...items);
+
+  if (hasNextPage) {
+    const vars = {
+      ...variables,
+      page: currentPage + 1,
+    };
+    return fetchAllSpaces({ query, clientId, variables: vars, _spaces });
+  }
+
+  return _spaces;
+};

package/src/lib/spaces-types.tsx

@@ -0,0 +1,136 @@
+export type Link = {
+  /** Contains a URL or URL Fragment that the hyperlink points to. */
+  url: string;
+  /** Specifies where to open the linked URL. */
+  target: string;
+};
+
+export type NameValuePair = {
+  /** The key of the of the data. */
+  name: string;
+  /** The value of the data. */
+  value: string;
+};
+
+export type PairFields = ('images' | 'metadata' | 'colors' | 'icons' | 'mapping')[];
+
+export type Space = {
+  /** The name of the content or configuration. */
+  name: string;
+  /** The configuration type. */
+  type: string;
+  /** Globally unique ID associated with the configuration object. */
+  id: string;
+  /** The ID used to identify the configuration. */
+  configurationId: string;
+  /** A list of payerIds for the configuration or content. */
+  payerIDs?: string[];
+  /** The images associated with the configuration. */
+  images?: NameValuePair[];
+  /** Key-value data for a configuration. */
+  metadata?: NameValuePair[];
+  /** The feature box colors associated with the Payer Space. */
+  colors?: NameValuePair[];
+  /** Contains URL fragments that point to icons. */
+  icons?: NameValuePair[];
+  /** The key-value mapping pairs. */
+  mapping?: NameValuePair[];
+};
+
+export type NormalizedPairField = { [key: string]: string };
+
+export interface NormalizedSpace extends Omit<Space, 'images' | 'metadata' | 'colors' | 'icons' | 'mapping'> {
+  /** The images associated with the configuration. */
+  images?: NormalizedPairField;
+  /** The feature box colors associated with the Payer Space. */
+  colors?: NormalizedPairField;
+  /** Contains URL fragments that point to icons. */
+  icons?: NormalizedPairField;
+  /** Key-value data for a configuration. */
+  metadata?: NormalizedPairField;
+  /** The key-value mapping pairs. */
+  mapping?: NormalizedPairField;
+  /** URL metadata for the configuration. */
+  link?: {
+    /** Contains a URL or URL Fragment that the hyperlink points to. */
+    url: string;
+    /** Specifies where to open the linked URL. */
+    target: string;
+  };
+}
+
+export type FetchSpacesProps = {
+  /** The query sent to the avWebQL endpoint. */
+  query: string;
+  /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
+  clientId: string;
+  /** The variables sent to the avWebQL endpoint. */
+  variables?: object;
+  /** The page sent to the avWebQL endpoint. */
+  page?: string;
+};
+
+export type FetchAllSpacesProps = {
+  /** The query sent to the avWebQL endpoint. */
+  query: string;
+  /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
+  clientId: string;
+  /** The variables sent to the avWebQL endpoint. */
+  variables?: object;
+  /** Array of spaces to be passed into the Spaces provider. */
+  _spaces?: Space[];
+};
+
+export type SpacesContextType = {
+  /** Array of spaces to be passed into the Spaces provider. */
+  spaces?: Map<string, Space>;
+  /** Array of spaces from previous page load. */
+  previousSpacesMap?: Map<string, Space>;
+  /** Array of spaces organized by configurationId. */
+  spacesByConfig?: Map<string, Space>;
+  /** Array of spaces organized by configurationId from previous page load. */
+  previousSpacesByConfigMap?: Map<string, Space>;
+  /** Array of spaces organized by payerId. */
+  spacesByPayer?: Map<string, Space[]>;
+  /** Array of spaces organized by payerId from previous page load. */
+  previousSpacesByPayerMap?: Map<string, Space[]>;
+  /** Whether or not spaces are loading. */
+  loading: boolean;
+  /** Errors associated with fetching spaces. */
+  error?: string;
+  /** Items that live within the spaces component and can access SpacesContext. */
+  children?: React.ReactNode;
+};
+
+export interface SpacesReducerAction extends SpacesContextType {
+  /** Action to take on SpacesContext state. */
+  type: 'SPACES' | 'ERROR' | 'LOADING';
+}
+
+export type ChildrenProps = {
+  /** Array of spaces to be passed into the Spaces provider. */
+  spaces: NormalizedSpace[];
+};
+
+export type SpacesProps = {
+  /** Override the default thanos query. */
+  query?: string;
+  /** Override the default variables used in the thanos query. Default: { types: [PAYERSPACE] }.
+   * If the spaces provider should contain configurations of a type other than PAYERSPACE, you must override this prop */
+  variables?: object;
+  /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
+  clientId: string;
+  /** Children can be a react child or render prop. */
+  children?: React.ReactNode;
+  /** Array of payerIds the Spaces provider should fetch the spaces for.
+   * Any payerIds already included in spaces will not be fetched again.
+   * Note: If a payerId is associated with more than one payer space, the order in which they are returned should not be relied upon.
+   * If a specific payer space is required, you'll need to filter the list that is returned. */
+  payerIds?: string[];
+  /** Array of spaceIds the Spaces provider should fetch the spaces for.
+   * Any spaceIds already included in spaces will not be fetched again. */
+  spaceIds?: string[];
+  /** Array of spaces to be passed into the Spaces provider.
+   * Useful for if you already have the spaces in your app and don't want the spaces provider to have to fetch them again. */
+  spaces?: Space[];
+};

package/src/lib/topApps.test.tsx

@@ -0,0 +1,93 @@
+import { cleanup } from '@testing-library/react';
+import { updateTopApps } from './topApps';
+import { Space } from './spaces-types';
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem(key: string) {
+      return store[key];
+    },
+    setItem(key: string, value: Space) {
+      store[key] = value.toString();
+    },
+    clear() {
+      store = {};
+    },
+    removeItem(key: string) {
+      delete store[key];
+    },
+  };
+})();
+
+describe('updateTopApps', () => {
+  beforeEach(() => {
+    jest.useFakeTimers().setSystemTime(new Date('2022-01-01').getTime());
+    Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    window.localStorage.clear();
+    cleanup();
+  });
+
+  it('should updateTopApps for applications', async () => {
+    await updateTopApps(
+      { id: 'space1', configurationId: 'space1', name: 'space1', type: 'APPLICATION' },
+      'aka123456789'
+    );
+
+    expect(window.localStorage.getItem('myTopApps-aka123456789')).toEqual(
+      '{"space1":{"count":1,"lastUse":"2022-01-01T00:00:00+00:00"}}'
+    );
+  });
+
+  it('should updateTopApps for resources', async () => {
+    await updateTopApps({ id: 'space2', configurationId: 'space2', name: 'space2', type: 'RESOURCE' }, 'aka123456789');
+
+    expect(window.localStorage.getItem('myTopApps-aka123456789')).toEqual(
+      '{"space2":{"count":1,"lastUse":"2022-01-01T00:00:00+00:00"}}'
+    );
+  });
+
+  it('should updateTopApps for navigations', async () => {
+    await updateTopApps(
+      { id: 'space3', configurationId: 'space3', name: 'space3', type: 'NAVIGATION' },
+      'aka123456789'
+    );
+
+    expect(window.localStorage.getItem('myTopApps-aka123456789')).toEqual(
+      '{"space3":{"count":1,"lastUse":"2022-01-01T00:00:00+00:00"}}'
+    );
+  });
+
+  it('should updateTopApps for multiple clicks', async () => {
+    await updateTopApps(
+      { id: 'space1', configurationId: 'space1', name: 'space1', type: 'APPLICATION' },
+      'aka123456789'
+    );
+    await updateTopApps(
+      { id: 'space1', configurationId: 'space1', name: 'space1', type: 'APPLICATION' },
+      'aka123456789'
+    );
+
+    expect(window.localStorage.getItem('myTopApps-aka123456789')).toEqual(
+      '{"space1":{"count":2,"lastUse":"2022-01-01T00:00:00+00:00"}}'
+    );
+  });
+
+  it('should not updateTopApps if type is not allowed', async () => {
+    await updateTopApps({ id: 'space2', configurationId: 'space2', name: 'space2', type: 'SAML' }, 'aka123456789');
+
+    expect(window.localStorage.getItem('myTopApps-aka123456789')).toEqual(undefined);
+  });
+
+  it('should not updateTopApps if id is blacklisted', async () => {
+    await updateTopApps(
+      { id: 'reporting', configurationId: 'reporting', name: 'reporting', type: 'APPLICATION' },
+      'aka123456789'
+    );
+
+    expect(window.localStorage.getItem('myTopApps-aka123456789')).toEqual(undefined);
+  });
+});

package/src/lib/topApps.tsx

@@ -0,0 +1,65 @@
+import avMessage from '@availity/message-core';
+import dayjs from 'dayjs';
+import { Space } from './spaces-types';
+
+const TOP_APPS = {
+  ALLOWED_TYPES: ['APPLICATION', 'RESOURCE', 'NAVIGATION'],
+  DISALLOWED_TYPES: ['reporting', 'how_to_guide_dental_providers', 'my_account_profile', 'my_administrators'],
+  KEYS: {
+    VALUES: 'myTopApps',
+    LAST_UPDATED: 'top-apps-updated',
+  },
+  UPDATE_EVENT: 'av:topApps:updated',
+};
+
+const getItemLocalStorage = (key: string) => {
+  try {
+    const value = window.localStorage.getItem(key);
+    if (value === null) {
+      return null;
+    }
+
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+};
+
+const canTrackSpace = (spaceId: string, type: string) =>
+  TOP_APPS.ALLOWED_TYPES.some((t) => t === type) && !TOP_APPS.DISALLOWED_TYPES.some((id) => id === spaceId);
+
+const getLocalStorageTopApps = (akaname: string) => {
+  const topAppsValues = getItemLocalStorage(`${TOP_APPS.KEYS.VALUES}-${akaname}`);
+
+  return topAppsValues;
+};
+
+export const updateTopApps = async (space: Space, akaname: string) => {
+  if (!space.configurationId || !space.type) return;
+
+  // If we can track the space
+  if (canTrackSpace(space.configurationId, space.type)) {
+    const today = dayjs();
+
+    // Grab the current top apps from localstorage
+    const topApps = (await getLocalStorageTopApps(akaname)) || {};
+
+    // Update the last updated date. For use in top nav to actually sync with settings api
+    window.localStorage.setItem(`${TOP_APPS.KEYS.LAST_UPDATED}-${akaname}`, today.format());
+
+    const currentCount =
+      topApps[space.configurationId] && typeof topApps[space.configurationId].count === 'number'
+        ? topApps[space.configurationId].count
+        : 0;
+
+    topApps[space.configurationId] = {
+      ...topApps?.[space.configurationId],
+      count: currentCount + 1,
+      lastUse: today.format(),
+    };
+
+    window.localStorage.setItem(`${TOP_APPS.KEYS.VALUES}-${akaname}`, JSON.stringify(topApps));
+
+    avMessage.send(TOP_APPS.UPDATE_EVENT);
+  }
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}