SCM-Manager/scm-ui/ui-api/src/notifications.ts

/*
 * Copyright (c) 2020 - present Cloudogu GmbH
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see https://www.gnu.org/licenses/.
 */

import { useMe } from "./login";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { Link, Notification, NotificationCollection } from "@scm-manager/ui-types";
import { apiClient } from "./apiclient";
import { useCallback, useEffect, useState } from "react";
import { requiredLink } from "./links";
import { useCancellablePromise } from "./utils";

export const useNotifications = () => {
  const { data: me } = useMe();
  const link = (me?._links["notifications"] as Link)?.href;
  const { data, error, isLoading, refetch } = useQuery<NotificationCollection, Error>(
    "notifications",
    () => apiClient.get(link).then((response) => response.json()),
    {
      enabled: !!link,
    }
  );

  const memoizedRefetch = useCallback(() => {
    return refetch().then((r) => r.data);
  }, [refetch]);

  return {
    data,
    error,
    isLoading,
    refetch: memoizedRefetch,
  };
};

export const useDismissNotification = (notification: Notification) => {
  const queryClient = useQueryClient();
  const link = requiredLink(notification, "dismiss");
  const { data, isLoading, error, mutate } = useMutation<Response, Error>(() => apiClient.delete(link), {
    onSuccess: () => {
      queryClient.invalidateQueries("notifications");
    },
  });
  return {
    isLoading,
    error,
    dismiss: () => mutate(),
    isCleared: !!data,
  };
};

export const useClearNotifications = (notificationCollection: NotificationCollection) => {
  const queryClient = useQueryClient();
  const link = requiredLink(notificationCollection, "clear");
  const { data, isLoading, error, mutate } = useMutation<Response, Error>(() => apiClient.delete(link), {
    onSuccess: () => {
      queryClient.invalidateQueries("notifications");
    },
  });
  return {
    isLoading,
    error,
    clear: () => mutate(),
    isCleared: !!data,
  };
};

const isEqual = (left: Notification, right: Notification) => {
  return left === right || (left.message === right.message && left.createdAt === right.createdAt);
};

export const useNotificationSubscription = (
  refetch: () => Promise<NotificationCollection | undefined>,
  notificationCollection?: NotificationCollection
) => {
  const [notifications, setNotifications] = useState<Notification[]>([]);
  const [disconnectedAt, setDisconnectedAt] = useState<Date>();
  const link = (notificationCollection?._links.subscribe as Link)?.href;
  const cancelOnUnmount = useCancellablePromise();

  const onVisible = useCallback(() => {
    // we don't need to catch the error,
    // because if the refetch throws an error the parent useNotifications should catch it
    cancelOnUnmount(refetch()).then(
      (collection) => {
        if (collection) {
          const newNotifications = collection._embedded?.notifications.filter((n) => {
            return disconnectedAt && disconnectedAt < new Date(n.createdAt);
          });
          if (newNotifications && newNotifications.length > 0) {
            setNotifications((previous) => [...previous, ...newNotifications]);
          }
          setDisconnectedAt(undefined);
        }
      },
      (reason) => {
        if (!reason.isCanceled) {
          throw reason;
        }
      }
    );
  }, [cancelOnUnmount, disconnectedAt, refetch]);

  const onHide = useCallback(() => {
    setDisconnectedAt(new Date());
  }, []);

  const received = useCallback(
    (notification: Notification) => {
      setNotifications((previous) => [...previous, notification]);
      refetch();
    },
    [refetch]
  );

  useEffect(() => {
    if (link) {
      let cancel: () => void;

      const disconnect = () => {
        if (cancel) {
          cancel();
        }
      };

      const connect = () => {
        disconnect();
        cancel = apiClient.subscribe(link, {
          notification: (event) => {
            received(JSON.parse(event.data));
          },
        });
      };

      const handleVisibilityChange = () => {
        if (document.visibilityState === "visible") {
          onVisible();
        } else {
          onHide();
        }
      };

      if (document.visibilityState === "visible") {
        connect();
      }

      document.addEventListener("visibilitychange", handleVisibilityChange);

      return () => {
        disconnect();
        document.removeEventListener("visibilitychange", handleVisibilityChange);
      };
    }
  }, [link, onVisible, onHide, received]);

  const remove = useCallback(
    (notification: Notification) => {
      setNotifications((oldNotifications) => [...oldNotifications.filter((n) => !isEqual(n, notification))]);
    },
    [setNotifications]
  );

  const clear = useCallback(() => {
    setNotifications([]);
  }, [setNotifications]);

  return {
    notifications,
    remove,
    clear,
  };
};