@bigbinary/neeto-webhooks-frontend 1.6.30 → 2.0.0

package/dist/index.cjs.js

@@ -14,8 +14,8 @@ var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var NoData = require('@bigbinary/neetoui/NoData');
 var Table = require('@bigbinary/neetoui/Table');
 var reactI18next = require('react-i18next');
-var reactQuery = require('react-query');
-var devtools = require('react-query/devtools');
+var reactQuery = require('@tanstack/react-query');
+var reactQueryDevtools = require('@tanstack/react-query-devtools');
 var jsxRuntime = require('react/jsx-runtime');
 var axios = require('axios');
 var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
@@ -27,6 +27,7 @@ var Tag = require('@bigbinary/neetoui/Tag');
 var i18next = require('i18next');
 var ramda = require('ramda');
 var Alert = require('@bigbinary/neetoui/Alert');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
@@ -38,7 +39,6 @@ var Select = require('@bigbinary/neetoui/formik/Select');
 var Switch = require('@bigbinary/neetoui/formik/Switch');
 var Textarea = require('@bigbinary/neetoui/formik/Textarea');
 var yup = require('yup');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -221,9 +221,9 @@ var withReactQuery = function withReactQuery(Component) {
   var QueryWrapper = function QueryWrapper(props) {
     return /*#__PURE__*/jsxRuntime.jsxs(reactQuery.QueryClientProvider, {
       client: queryClient,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$2({}, props)), /*#__PURE__*/jsxRuntime.jsx(devtools.ReactQueryDevtools, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$2({}, props)), /*#__PURE__*/jsxRuntime.jsx(reactQueryDevtools.ReactQueryDevtools, {
         initialIsOpen: false,
-        position: "bottom-right"
+        position: "bottom"
       })]
     });
   };
@@ -260,28 +260,35 @@ var WEBHOOK_STALE_TIME = 3200000; // 1 hour
 var POST_REDELIVERY_ON_SUCCESS_TIMEOUT = 5000; // 5 seconds
 
 var useFetchDeliveries = function useFetchDeliveries(webhookId, params) {
-  return reactQuery.useQuery([QUERY_KEYS.DELIVERY_LIST, webhookId, params], function () {
-    return deliveriesApi.fetch(webhookId, params);
-  }, {
+  return reactQuery.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 reactQuery.useQuery([QUERY_KEYS.DELIVERY_DETAILS, id, webhookId], function () {
-    return deliveriesApi.show(id, webhookId);
-  }, {
+  return reactQuery.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 = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function () {
-    return deliveriesApi.redeliver(deliveryId, webhookSid);
-  }, {
+  return reactQuery.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);
     }
   });
@@ -806,7 +813,7 @@ var Details = function Details(_ref) {
   var _useTranslation = reactI18next.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,
@@ -1062,52 +1069,51 @@ var webhooksApi = {
 };
 
 var useFetchWebhooks = function useFetchWebhooks(params) {
-  return reactQuery.useQuery([QUERY_KEYS.WEBHOOK_LIST, params], function () {
-    return webhooksApi.fetch(params);
-  }, {
+  return reactQuery.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 = reactQuery.useQueryClient();
-  return reactQuery.useMutation(webhooksApi.create, {
+  return reactUtils.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 reactQuery.useQuery([QUERY_KEYS.WEBHOOK_DETAILS, id], function () {
-    return webhooksApi.show(id);
-  }, {
+  return reactQuery.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 = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref) {
+  return reactUtils.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 = reactQuery.useQueryClient();
-  return reactQuery.useMutation(webhooksApi.destroy, {
+  return reactUtils.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);
     }
   });
@@ -1125,7 +1131,9 @@ var eventsApi = {
 };
 
 var useFetchEvents = function useFetchEvents() {
-  return reactQuery.useQuery([QUERY_KEYS.EVENTS_LIST], eventsApi.all, {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.EVENTS_LIST],
+    queryFn: eventsApi.all,
     staleTime: WEBHOOK_STALE_TIME
   });
 };
@@ -1589,7 +1597,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);