@bigbinary/neeto-webhooks-frontend 1.6.30 → 2.0.0

package/dist/index.js

@@ -10,8 +10,8 @@ import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import NoData from '@bigbinary/neetoui/NoData';
 import Table from '@bigbinary/neetoui/Table';
 import { useTranslation } from 'react-i18next';
-import { QueryClient, QueryCache, QueryClientProvider, useQuery, useQueryClient, useMutation } from 'react-query';
-import { ReactQueryDevtools } from 'react-query/devtools';
+import { QueryClient, QueryCache, QueryClientProvider, useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
@@ -23,6 +23,7 @@ import Tag from '@bigbinary/neetoui/Tag';
 import { t as t$1 } from 'i18next';
 import { prop, pluck, assoc } from 'ramda';
 import Alert from '@bigbinary/neetoui/Alert';
+import { useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
@@ -34,7 +35,6 @@ import Select from '@bigbinary/neetoui/formik/Select';
 import Switch from '@bigbinary/neetoui/formik/Switch';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import * as yup from 'yup';
-import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 
 var getDeliveriesPath = function getDeliveriesPath(webhooksPath) {
   return "".concat(webhooksPath, "/:webhookId/deliveries");
@@ -172,7 +172,7 @@ var withReactQuery = function withReactQuery(Component) {
       client: queryClient,
       children: [/*#__PURE__*/jsx(Component, _objectSpread$2({}, props)), /*#__PURE__*/jsx(ReactQueryDevtools, {
         initialIsOpen: false,
-        position: "bottom-right"
+        position: "bottom"
       })]
     });
   };
@@ -209,28 +209,35 @@ var WEBHOOK_STALE_TIME = 3200000; // 1 hour
 var POST_REDELIVERY_ON_SUCCESS_TIMEOUT = 5000; // 5 seconds
 
 var useFetchDeliveries = function useFetchDeliveries(webhookId, params) {
-  return useQuery([QUERY_KEYS.DELIVERY_LIST, webhookId, params], function () {
-    return deliveriesApi.fetch(webhookId, params);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.DELIVERY_LIST, webhookId, params],
+    queryFn: function queryFn() {
+      return deliveriesApi.fetch(webhookId, params);
+    },
     staleTime: DELIVERY_STALE_TIME
   });
 };
 var useShowDelivery = function useShowDelivery(id, webhookId) {
-  return useQuery([QUERY_KEYS.DELIVERY_DETAILS, id, webhookId], function () {
-    return deliveriesApi.show(id, webhookId);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.DELIVERY_DETAILS, id, webhookId],
+    queryFn: function queryFn() {
+      return deliveriesApi.show(id, webhookId);
+    },
     staleTime: DELIVERY_STALE_TIME,
     enabled: !!id
   });
 };
 var useRedeliverWebhook = function useRedeliverWebhook(deliveryId, webhookSid) {
   var queryClient = useQueryClient();
-  return useMutation(function () {
-    return deliveriesApi.redeliver(deliveryId, webhookSid);
-  }, {
+  return useMutation({
+    mutationFn: function mutationFn() {
+      return deliveriesApi.redeliver(deliveryId, webhookSid);
+    },
     onSuccess: function onSuccess() {
       setTimeout(function () {
-        return queryClient.invalidateQueries(QUERY_KEYS.DELIVERY_LIST);
+        return queryClient.invalidateQueries({
+          queryKey: [QUERY_KEYS.DELIVERY_LIST]
+        });
       }, POST_REDELIVERY_ON_SUCCESS_TIMEOUT);
     }
   });
@@ -755,7 +762,7 @@ var Details = function Details(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useRedeliverWebhook = useRedeliverWebhook(deliveryId, webhookSid),
-    isRedelivering = _useRedeliverWebhook.isLoading,
+    isRedelivering = _useRedeliverWebhook.isPending,
     redeliverWebhook = _useRedeliverWebhook.mutateAsync;
   var _useShowDelivery = useShowDelivery(deliveryId, webhookSid),
     isLoading = _useShowDelivery.isLoading,
@@ -1011,52 +1018,51 @@ var webhooksApi = {
 };
 
 var useFetchWebhooks = function useFetchWebhooks(params) {
-  return useQuery([QUERY_KEYS.WEBHOOK_LIST, params], function () {
-    return webhooksApi.fetch(params);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.WEBHOOK_LIST, params],
+    queryFn: function queryFn() {
+      return webhooksApi.fetch(params);
+    },
     staleTime: WEBHOOK_STALE_TIME
   });
 };
 var useCreateWebhook = function useCreateWebhook(options) {
-  var queryClient = useQueryClient();
-  return useMutation(webhooksApi.create, {
+  return useMutationWithInvalidation(webhooksApi.create, {
+    keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST]],
     onSuccess: function onSuccess() {
       var _options$onSuccess;
-      queryClient.invalidateQueries(QUERY_KEYS.WEBHOOK_LIST);
       options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options);
     }
   });
 };
 var useShowWebhook = function useShowWebhook(id) {
-  return useQuery([QUERY_KEYS.WEBHOOK_DETAILS, id], function () {
-    return webhooksApi.show(id);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.WEBHOOK_DETAILS, id],
+    queryFn: function queryFn() {
+      return webhooksApi.show(id);
+    },
     enabled: !!id,
     staleTime: WEBHOOK_STALE_TIME
   });
 };
 var useUpdateWebhook = function useUpdateWebhook(id, options) {
-  var queryClient = useQueryClient();
-  return useMutation(function (_ref) {
+  return useMutationWithInvalidation(function (_ref) {
     var id = _ref.id,
       payload = _ref.payload;
     return webhooksApi.update(id, payload);
   }, {
+    keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST], [QUERY_KEYS.WEBHOOK_DETAILS, id], [QUERY_KEYS.DELIVERY_LIST, id]],
     onSuccess: function onSuccess() {
       var _options$onSuccess2;
-      queryClient.invalidateQueries(QUERY_KEYS.WEBHOOK_LIST);
-      queryClient.invalidateQueries([QUERY_KEYS.WEBHOOK_DETAILS, id]);
-      queryClient.invalidateQueries([QUERY_KEYS.DELIVERY_LIST, id]);
       options === null || options === void 0 || (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 || _options$onSuccess2.call(options);
     }
   });
 };
 var useDestroyWebhook = function useDestroyWebhook(options) {
-  var queryClient = useQueryClient();
-  return useMutation(webhooksApi.destroy, {
+  return useMutationWithInvalidation(webhooksApi.destroy, {
+    keysToInvalidate: [[QUERY_KEYS.WEBHOOK_LIST]],
     onSuccess: function onSuccess() {
       var _options$onSuccess3;
-      queryClient.invalidateQueries(QUERY_KEYS.WEBHOOK_LIST);
       options === null || options === void 0 || (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 || _options$onSuccess3.call(options);
     }
   });
@@ -1074,7 +1080,9 @@ var eventsApi = {
 };
 
 var useFetchEvents = function useFetchEvents() {
-  return useQuery([QUERY_KEYS.EVENTS_LIST], eventsApi.all, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.EVENTS_LIST],
+    queryFn: eventsApi.all,
     staleTime: WEBHOOK_STALE_TIME
   });
 };
@@ -1538,7 +1546,7 @@ var Webhooks = function Webhooks(_ref) {
         onDelete === null || onDelete === void 0 || onDelete();
       }
     }),
-    isDeleting = _useDestroyWebhook.isLoading,
+    isDeleting = _useDestroyWebhook.isPending,
     destroyWebhook = _useDestroyWebhook.mutate;
   var handlePaneClose = function handlePaneClose() {
     setEditingWebhookId(null);