@bigbinary/neeto-commons-frontend 2.0.122 → 2.0.124

package/react-utils.d.ts

@@ -3,7 +3,7 @@ import { RouteProps } from "react-router-dom";
 import { Notice } from "@honeybadger-io/js/dist/server/types/core/types";
 import { History } from "history";
 import { StoreApi, UseBoundStore } from "zustand";
-import { UseQueryOptions, UseQueryResult } from "react-query";
+import { UseQueryOptions, UseQueryResult, UseMutationOptions, UseMutationResult } from "react-query";
 /**
  *
  * ErrorBoundary which reports frontend errors to HoneyBadger
@@ -763,4 +763,52 @@ export const withT: <Props extends {
   [key: string]: any;
 }>(Component: React.ComponentType<Props & {
   t: TFunction;
-}>) => React.ComponentType<Props>;
+}>) => React.ComponentType<Props>;
+/**
+ *
+ * useMutationWithInvalidation is a wrapper function around the useMutation
+ *
+ * hook from react-query. It returns all the props from the useMutation hook and
+ *
+ * additionally, invalidates a list of query keys on mutation success.
+ *
+ * @example 
+ *
+ * // useQuestionsApi
+ * //Invalidate any query with query key starting with "QUESTIONS"
+ * const useUpdateQuestions = () =>
+ *   useMutationWithInvalidation(questionsApi.update, {
+ *     keysToInvalidate: ["QUESTIONS"],
+ *     onSuccess: data => queryClient.setQueryData(["RESPONSES"], data),
+ *   });
+ * 
+ * //Invalidate any query with query key starting with ["FORM", "QUESTIONS"]
+ * const useUpdateQuestions = options =>
+ *   useMutationWithInvalidation(questionsApi.update, {
+ *     keysToInvalidate: [["FORM", "QUESTIONS"]],
+ *     ...options,
+ *   });
+ * 
+ * //Invalidate any query with query key starting with "FORM" or starting with "QUESTIONS"
+ * const useUpdateQuestions = options =>
+ *   useMutationWithInvalidation(questionsApi.update, {
+ *     keysToInvalidate: ["FORM", "QUESTIONS"],
+ *     ...options,
+ *   });
+ * 
+ * //Invalidate any query with query key starting with ["QUESTION", id]
+ * const useUpdateQuestions = options =>
+ *   useMutationWithInvalidation(questionsApi.update, {
+ *     keysToInvalidate: [(_, { id }) => ["QUESTION", id]],
+ *     ...options,
+ *   });
+ * 
+ * // Update question component
+ * const { mutate: updateQuestions, isLoading } = useUpdateQuestions({
+ *   onError: e => logger.error(e),
+ * });
+ * @endexample
+*/
+export function useMutationWithInvalidation(mutationFn: () => Promise<T>, options: {
+  keysToInvalidate: Array<string | string[] | (() => string | string[])>;
+} & UseMutationOptions): UseMutationResult<T>;

package/react-utils.js

@@ -7,7 +7,7 @@ import { useTranslation, Trans, withTranslation } from 'react-i18next';
 import ErrorPage from '@bigbinary/neeto-molecules/ErrorPage';
 import { Route, Redirect } from 'react-router-dom';
 import axios from 'axios';
-import { useQuery } from 'react-query';
+import { useQuery, useQueryClient, useMutation } from 'react-query';
 import { Helmet } from 'react-helmet';
 
 var _path, _path2, _path3, _path4, _path5, _path6;
@@ -67,7 +67,7 @@ var FallbackComponent = function FallbackComponent() {
     style: "h2",
     weight: "semibold"
   }, t("neetoCommons.fallbackComponent.somethingWentWrong")), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "mb-8 text-gray-600",
+    className: "neeto-ui-text-gray-600 mb-8",
     component: "p",
     style: "body1",
     weight: "normal"
@@ -76,14 +76,12 @@ var FallbackComponent = function FallbackComponent() {
     components: {
       reloading: /*#__PURE__*/React__default.createElement(Button, {
         style: "link",
-        label: t("neetoCommons.fallbackComponent.reloadingButtonLabel"),
         onClick: function onClick() {
           return window.location.reload();
         }
       }),
       contactus: /*#__PURE__*/React__default.createElement(Button, {
         style: "link",
-        label: t("neetoCommons.fallbackComponent.contactusButtonLabel"),
         onClick: function onClick() {
           var _window$NeetoChat, _window$NeetoChat$con, _window$NeetoChat2, _window$NeetoChat2$co;
           (_window$NeetoChat = window.NeetoChat) === null || _window$NeetoChat === void 0 ? void 0 : (_window$NeetoChat$con = _window$NeetoChat.contextualHelp) === null || _window$NeetoChat$con === void 0 ? void 0 : _window$NeetoChat$con.maximizeWidget();
@@ -93,7 +91,7 @@ var FallbackComponent = function FallbackComponent() {
     }
   }))));
 };
-var ignorableErrorsRegex = /(window\.requestAnimationFrame|ResizeObserver|ChunkLoadError)/;
+var ignorableErrorsRegex = /(window\.requestAnimationFrame|ResizeObserver|ChunkLoadError|window\.webkit\.messageHandlers)/;
 var HoneybadgerErrorBoundary = function HoneybadgerErrorBoundary(_ref) {
   var children = _ref.children,
     _ref$ErrorComponent = _ref.ErrorComponent,
@@ -155,7 +153,7 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var _excluded = ["condition", "redirectRoute", "errorPage", "permissions"];
+var _excluded$1 = ["condition", "redirectRoute", "errorPage", "permissions"];
 var PrivateRoute = function PrivateRoute(_ref) {
   var _ref$condition = _ref.condition,
     condition = _ref$condition === void 0 ? globalProps.authenticated : _ref$condition,
@@ -165,7 +163,7 @@ var PrivateRoute = function PrivateRoute(_ref) {
     errorPage = _ref$errorPage === void 0 ? undefined : _ref$errorPage,
     _ref$permissions = _ref.permissions,
     permissions = _ref$permissions === void 0 ? undefined : _ref$permissions,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   if (condition) {
     if (permissions) {
       return globalProps.permissions.some(includes(__, permissions)) ? /*#__PURE__*/React__default.createElement(Route, props) : errorPage || /*#__PURE__*/React__default.createElement(ErrorPage, {
@@ -241,12 +239,12 @@ var QUERY_KEYS = {
 var QUERY_CACHE_NAME_SPACE = "queryCache";
 var NEETO_APPS_LIST_STALE_TIME = 30 * 24 * 60 * 60 * 1000; // 30 days
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var localStorageQueryCache = {
   set: function set(key, data) {
     var cache = localStorageQueryCache.getAll();
-    var newCache = _objectSpread$1(_objectSpread$1({}, cache), {}, _defineProperty({}, key, {
+    var newCache = _objectSpread$2(_objectSpread$2({}, cache), {}, _defineProperty({}, key, {
       data: data,
       modifiedAt: Date.now()
     }));
@@ -274,20 +272,20 @@ var usePersistedQuery = function usePersistedQuery(queryKey, fetch, options) {
     localStorageQueryCache.set(queryKey, queryResult.data);
   }, [queryKey, queryResult.data, queryResult.isSuccess]);
   if (isOutdated(localCache, options === null || options === void 0 ? void 0 : options.staleTime)) {
-    return _objectSpread$1(_objectSpread$1({}, queryResult), {}, {
+    return _objectSpread$2(_objectSpread$2({}, queryResult), {}, {
       isFreshLoading: queryResult.isLoading
     });
   }
-  return _objectSpread$1(_objectSpread$1({}, queryResult), {}, {
+  return _objectSpread$2(_objectSpread$2({}, queryResult), {}, {
     data: queryResult.data || localCache.data,
     isFreshLoading: false
   });
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFetchNeetoApps = function useFetchNeetoApps(options) {
-  return usePersistedQuery(QUERY_KEYS.NEETO_APPS_LIST, neetoAppsApi.fetch, _objectSpread({
+  return usePersistedQuery(QUERY_KEYS.NEETO_APPS_LIST, neetoAppsApi.fetch, _objectSpread$1({
     staleTime: NEETO_APPS_LIST_STALE_TIME
   }, options));
 };
@@ -3540,6 +3538,27 @@ var useLocalStorage = function useLocalStorage(key, defaultValue) {
   return [storedValue, setValue];
 };
 
+var _excluded = ["keysToInvalidate"],
+  _excluded2 = ["onSuccess"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useMutationWithInvalidation = function useMutationWithInvalidation(mutationFn, _ref) {
+  var keysToInvalidate = _ref.keysToInvalidate,
+    options = _objectWithoutProperties(_ref, _excluded);
+  var queryClient = useQueryClient();
+  var _onSuccess = options.onSuccess,
+    otherOptions = _objectWithoutProperties(options, _excluded2);
+  return useMutation(mutationFn, _objectSpread({
+    onSuccess: function onSuccess(data, variables, context) {
+      keysToInvalidate.forEach(function (key) {
+        var keyToInvalidate = typeof key === "function" ? key(data, variables, context) : key;
+        queryClient.invalidateQueries(keyToInvalidate);
+      });
+      _onSuccess === null || _onSuccess === void 0 ? void 0 : _onSuccess(data, variables, context);
+    }
+  }, otherOptions));
+};
+
 var useOnClickOutside = function useOnClickOutside(ref, handler) {
   useEffect(function () {
     var listener = function listener(event) {
@@ -4788,5 +4807,5 @@ var useUpdateEffect = function useUpdateEffect(callback) {
   }, dependencies);
 };
 
-export { HoneybadgerErrorBoundary, PrivateRoute, destroyBrowserSubscription, handleMetaClick, isMetaKeyPressed, registerBrowserNotifications, useDebounce, useDisplayErrorPage, useErrorDisplayStore, useFetchNeetoApps, useFuncDebounce, useHotKeys, useIsElementVisibleInDom, useKeyboardShortcutsPaneState, useLocalStorage, useNavigationCheckpoints, useOnClickOutside, usePersistedQuery, usePrevious, useRegisterNavigationCheckpoint, useStateWithDependency, useTimer, useUpdateEffect, withImmutableActions, withT, withTitle };
+export { HoneybadgerErrorBoundary, PrivateRoute, destroyBrowserSubscription, handleMetaClick, isMetaKeyPressed, registerBrowserNotifications, useDebounce, useDisplayErrorPage, useErrorDisplayStore, useFetchNeetoApps, useFuncDebounce, useHotKeys, useIsElementVisibleInDom, useKeyboardShortcutsPaneState, useLocalStorage, useMutationWithInvalidation, useNavigationCheckpoints, useOnClickOutside, usePersistedQuery, usePrevious, useRegisterNavigationCheckpoint, useStateWithDependency, useTimer, useUpdateEffect, withImmutableActions, withT, withTitle };
 //# sourceMappingURL=react-utils.js.map