@availity/mui-favorites 0.1.0

package/src/lib/Favorites.test.tsx

@@ -0,0 +1,273 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, waitFor, fireEvent, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
+import avMessages from '@availity/message-core';
+import { FavoritesProvider } from './Favorites';
+import { FavoriteHeart } from './FavoriteHeart';
+
+jest.mock('@availity/message-core');
+
+const domain = () => {
+  if (window.location.origin) {
+    return window.location.origin;
+  }
+
+  if (window.location.hostname) {
+    return `${window.location.protocol}//${window.location.hostname}${
+      window.location.port ? `:${window.location.port}` : ''
+    }`;
+  }
+
+  return '*';
+};
+
+avMessages.subscribe = jest.fn((event, fn) => {
+  window.addEventListener('message', (event) => {
+    if (!event || !event.data) {
+      // check origin as trusted domain
+      return;
+    }
+
+    let { data } = event;
+
+    if (typeof data === 'string') {
+      try {
+        data = JSON.parse(data);
+      } catch {
+        // do nothing
+      }
+    }
+
+    event = data && data.event;
+
+    fn(data);
+  });
+  return () => jest.fn();
+});
+
+avMessages.send = jest.fn((payload, target) => {
+  try {
+    const message = typeof payload === 'string' ? payload : JSON.stringify(payload);
+    target?.postMessage(message, domain());
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('AvMessage.send()', error);
+  }
+});
+
+const queryClient = new QueryClient();
+
+describe('Favorites', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    server.resetHandlers();
+    jest.clearAllMocks();
+    queryClient.clear();
+  });
+  it('should render favorited', async () => {
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="123" name="App #1" />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-123');
+
+    await waitFor(() => expect(heart).toBeChecked());
+  });
+
+  it('should render unfavorited', async () => {
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="789" name="App #3" />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-789');
+
+    await waitFor(() => expect(heart).not.toBeChecked());
+  });
+
+  it('should render disabled', async () => {
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="789" name="App #3" disabled />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-789');
+
+    await waitFor(() => expect(heart).toBeDisabled());
+  });
+  it('should show tooltip with add message', async () => {
+    const { container, getByRole } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="789" name="App #3" />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-789');
+
+    act(() => {
+      if (heart) fireEvent.mouseOver(heart);
+    });
+
+    expect(heart).toBeDefined();
+
+    await waitFor(
+      () => {
+        const tooltip = getByRole('tooltip');
+
+        expect(tooltip.textContent).toContain('Add to My Favorites');
+      },
+      { timeout: 2000 }
+    );
+  });
+
+  it('should show tooltip with remove message', async () => {
+    const { container, getByRole } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="123" name="App #1" />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-123');
+
+    act(() => {
+      if (heart) fireEvent.mouseOver(heart);
+    });
+
+    expect(heart).toBeDefined();
+
+    await waitFor(
+      () => {
+        const tooltip = getByRole('tooltip');
+
+        expect(tooltip.textContent).toContain('Remove from My Favorites');
+      },
+      { timeout: 2000 }
+    );
+  });
+
+  it('should render label with app name', async () => {
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="123" name="App #1" />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-123');
+
+    expect(heart).toBeDefined();
+
+    expect(heart).toHaveAttribute('aria-label', 'Favorite App #1');
+  });
+
+  it('should add favorite and send post message with updated favorites', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="789" name="App #3" />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-789');
+
+    await waitFor(() => expect(heart).not.toBeChecked());
+
+    if (heart) await user.click(heart);
+
+    await waitFor(() => expect(heart).toBeChecked());
+
+    await waitFor(() => {
+      expect(avMessages.send).toHaveBeenCalledTimes(1);
+      expect(avMessages.send).toHaveBeenCalledWith({
+        event: 'av:favorites:update',
+        favorites: [
+          { id: '123', pos: 0 },
+          { id: '456', pos: 1 },
+          { id: '789', pos: 2 },
+        ],
+      });
+    });
+  });
+
+  it('should toggle favorite and send post message with updated favorites on keypress', async () => {
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="123" name="App #1" />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-123');
+
+    await waitFor(() => {
+      expect(heart).toBeChecked();
+    });
+
+    if (heart) await fireEvent.keyDown(heart, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    await waitFor(() => expect(heart).not.toBeChecked());
+
+    await waitFor(() => {
+      expect(avMessages.send).toHaveBeenCalledTimes(1);
+      expect(avMessages.send).toHaveBeenCalledWith({
+        event: 'av:favorites:update',
+        favorites: [{ id: '456', pos: 1 }],
+      });
+    });
+  });
+
+  it('should remove favorite and send post message with updated favorites', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <FavoritesProvider>
+          <FavoriteHeart id="123" name="App #1" />
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-123');
+
+    await waitFor(() => expect(heart).toBeChecked());
+
+    if (heart) await user.click(heart);
+
+    await waitFor(() => expect(heart).not.toBeChecked());
+
+    await waitFor(() => {
+      expect(avMessages.send).toHaveBeenCalledTimes(1);
+      expect(avMessages.send).toHaveBeenCalledWith({
+        event: 'av:favorites:update',
+        favorites: [{ id: '456', pos: 1 }],
+      });
+    });
+  });
+});

package/src/lib/Favorites.tsx

@@ -0,0 +1,168 @@
+import { createContext, useContext, useEffect, useState, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import avMessages from '@availity/message-core';
+import type { Favorite } from './utils';
+import { useFavoritesQuery, useSubmitFavorites, sendUpdateMessage, openMaxModal } from './utils';
+import { AV_INTERNAL_GLOBALS, MAX_FAVORITES } from './constants';
+
+type StatusUnion = 'idle' | 'error' | 'loading' | 'success';
+
+type FavoritesContextType = {
+  favorites?: Favorite[];
+  queryStatus: StatusUnion;
+  mutationStatus: StatusUnion;
+  lastClickedFavoriteId: string;
+  deleteFavorite: (id: string) => void;
+  addFavorite: (id: string) => void;
+};
+
+const FavoritesContext = createContext<FavoritesContextType | null>(null);
+
+export const FavoritesProvider = ({
+  children,
+  onFavoritesChange,
+}: {
+  children: React.ReactNode;
+  onFavoritesChange?: (favorites: Favorite[]) => void;
+}): JSX.Element => {
+  const [lastClickedFavoriteId, setLastClickedFavoriteId] = useState<string>('');
+
+  const queryClient = useQueryClient();
+  const { data: favorites, status: queryStatus } = useFavoritesQuery();
+
+  const { submitFavorites, status: mutationStatus } = useSubmitFavorites({
+    onMutationStart(targetFavoriteId) {
+      setLastClickedFavoriteId(targetFavoriteId);
+    },
+  });
+
+  useEffect(() => {
+    const unsubscribeFavoritesChanged = avMessages.subscribe(
+      AV_INTERNAL_GLOBALS.FAVORITES_CHANGED,
+      (data) => {
+        if (data?.favorites) {
+          queryClient.setQueryData(['favorites'], data?.favorites);
+        }
+      },
+      { ignoreSameWindow: false }
+    );
+
+    const unsubscribeFavoritesUpdate = avMessages.subscribe(
+      AV_INTERNAL_GLOBALS.FAVORITES_UPDATE,
+      (data) => {
+        if (data?.favorites) {
+          queryClient.setQueryData(['favorites'], data?.favorites);
+        }
+      },
+      { ignoreSameWindow: false }
+    );
+
+    return () => {
+      unsubscribeFavoritesChanged();
+      unsubscribeFavoritesUpdate();
+    };
+  }, [queryClient]);
+
+  const deleteFavorite = async (id: string) => {
+    if (favorites) {
+      const response = await submitFavorites({
+        favorites: favorites.filter((favorite: Favorite) => favorite.id !== id),
+        targetFavoriteId: id,
+      });
+
+      sendUpdateMessage(response.favorites);
+      onFavoritesChange?.(response.favorites);
+    }
+  };
+
+  const addFavorite = async (id: string) => {
+    if (!favorites) return false;
+
+    if (favorites.length >= MAX_FAVORITES) {
+      openMaxModal();
+      return false;
+    }
+
+    const maxFavorite = favorites.reduce<Favorite | null>((accum, fave) => {
+      if (!accum || fave.pos > accum.pos) {
+        accum = fave;
+      }
+
+      return accum;
+    }, null);
+
+    const newFavPos = maxFavorite ? maxFavorite.pos + 1 : 0;
+    const response = await submitFavorites({
+      favorites: [...favorites, { id, pos: newFavPos }],
+      targetFavoriteId: id,
+    });
+
+    sendUpdateMessage(response.favorites);
+    onFavoritesChange?.(response.favorites);
+
+    const isFavorited = response.favorites.find((f) => f.id === id);
+
+    return !!isFavorited;
+  };
+
+  return (
+    <FavoritesContext.Provider
+      value={{
+        favorites,
+        queryStatus,
+        mutationStatus,
+        lastClickedFavoriteId,
+        deleteFavorite,
+        addFavorite,
+      }}
+    >
+      {children}
+    </FavoritesContext.Provider>
+  );
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noOp = () => {};
+
+type MergedStatusUnion = 'initLoading' | 'reloading' | 'error' | 'success';
+
+export const useFavorites = (
+  id: string
+): {
+  isFavorited: boolean;
+  status: MergedStatusUnion;
+  isLastClickedFavorite: boolean;
+  toggleFavorite: () => void;
+} => {
+  const context = useContext(FavoritesContext);
+
+  if (context === null) {
+    throw new Error('useFavorites must be used within a FavoritesProvider');
+  }
+
+  const { favorites, queryStatus, mutationStatus, lastClickedFavoriteId, deleteFavorite, addFavorite } = context;
+
+  const isLastClickedFavorite = lastClickedFavoriteId === id;
+
+  const isFavorited = useMemo(() => {
+    const fav = favorites?.find((f) => f.id === id);
+    return !!fav;
+  }, [favorites, id]);
+
+  const toggleFavorite = () => (isFavorited ? deleteFavorite(id) : addFavorite(id));
+
+  const isDisabled = queryStatus === 'loading' || queryStatus === 'idle' || mutationStatus === 'loading';
+
+  let status: MergedStatusUnion = 'initLoading';
+  if (queryStatus === 'loading') status = 'initLoading';
+  if (mutationStatus === 'loading') status = 'reloading';
+  if (queryStatus === 'error' || mutationStatus === 'error') status = 'error';
+  if (queryStatus === 'success' && (mutationStatus === 'success' || mutationStatus === 'idle')) status = 'success';
+
+  return {
+    isFavorited,
+    status,
+    isLastClickedFavorite,
+    toggleFavorite: isDisabled ? noOp : toggleFavorite,
+  };
+};

package/src/lib/constants.tsx

@@ -0,0 +1,9 @@
+export const MAX_FAVORITES = 60;
+export const NAV_APP_ID = 'Gateway-AvNavigation';
+
+export const AV_INTERNAL_GLOBALS = {
+  FAVORITES_UPDATE: 'av:favorites:update',
+  FAVORITES_CHANGED: 'av:favorites:changed',
+  MAX_FAVORITES: 'av:favorites:maxed',
+  MY_TOP_APPS_UPDATED: 'av:topApps:updated',
+} as const;

package/src/lib/utils.ts

@@ -0,0 +1,61 @@
+import avMessages from '@availity/message-core';
+import { avSettingsApi } from '@availity/api-axios';
+import { useMutation, useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
+import { AV_INTERNAL_GLOBALS, NAV_APP_ID } from './constants';
+
+export type Favorite = {
+  id: string;
+  pos: number;
+};
+
+export const isFavorite = (arg: Favorite) => Boolean(typeof arg?.id === 'string' && typeof arg?.pos === 'number');
+
+export const validateFavorites = (unvalidatedFavorites: Favorite[]) => {
+  const validatedFavorites = Array.isArray(unvalidatedFavorites) ? unvalidatedFavorites?.filter(isFavorite) : [];
+  return validatedFavorites;
+}
+
+type MutationVariables = {
+  favorites: Favorite[];
+  targetFavoriteId: string;
+}
+
+type SettingsResponse = { data: { favorites: Favorite[] } };
+
+const submit = async ({ favorites, targetFavoriteId }: MutationVariables) => {
+  const response: SettingsResponse = await avSettingsApi.setApplication(NAV_APP_ID, { favorites });
+  return { favorites: response.data.favorites, targetFavoriteId };
+}
+
+const getFavorites = async () => {
+  const result = await avSettingsApi.getApplication(NAV_APP_ID);
+  const unvalidatedFavorites = result?.data?.settings?.[0]?.favorites;
+  const validatedFavorites = validateFavorites(unvalidatedFavorites);
+
+  return validatedFavorites;
+};
+
+export const useFavoritesQuery = (): UseQueryResult<Favorite[], unknown> => useQuery(['favorites'], getFavorites);
+
+type MutationOptions = {
+  onMutationStart?: (targetFavoriteId: string) => void;
+};
+
+export const useSubmitFavorites = ({ onMutationStart }: MutationOptions) => {
+  const queryClient = useQueryClient();
+  const { mutateAsync: submitFavorites, ...rest } = useMutation(submit, {
+    onMutate(variables) {
+      onMutationStart?.(variables.targetFavoriteId);
+    },
+    onSuccess(data) {
+      queryClient.setQueryData(['favorites'], data.favorites);
+    }
+  });
+  return { submitFavorites, ...rest };
+};
+
+export const sendUpdateMessage = (favorites: Favorite[]): void => {
+  avMessages.send({ favorites, event: AV_INTERNAL_GLOBALS.FAVORITES_UPDATE });
+};
+
+export const openMaxModal = (): void => avMessages.send(AV_INTERNAL_GLOBALS.MAX_FAVORITES);

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"]
+}