@bigbinary/neeto-commons-frontend 2.0.133 → 2.0.134

package/react-utils.d.ts

@@ -688,6 +688,33 @@ export function useRegisterNavigationCheckpoint(key: string, path: string): void
 export function useNavigationCheckpoints(...keys: string[]): {
   [key: string]: string;
 };
+/**
+ *
+ * Similar to useDebounce but this hook accepts a function as an argument. That
+ *
+ * function will be executed only when the dependencies stops changing for a while.
+ *
+ * The debounced function comes with a cancel method which can be used to cancel
+ *
+ * the delayed function invocation.
+ *
+ * @example 
+ *
+ * const searchForProducts = useFuncDebounce(async key => {
+ *   // this function will be triggered once after user stops typing for 300ms
+ *   const products = await productsApi.fetch(key);
+ *   // do something with the products
+ * }, 300);
+ * 
+ * // component
+ * <Input onChange={e => searchForProducts(e.target.value)} />;
+ * <Button onClick={() => searchForProducts.cancel()}>Cancel search</Button>;
+ * @endexample
+*/
+export const useFuncDebounce: {
+  <F extends Function>(func: F, delay?: number): F;
+  cancel: () => void;
+};
 /**
  *
  * usePersistedQuery is an wrapper function around useQuery hook from
@@ -714,6 +741,10 @@ export function useNavigationCheckpoints(...keys: string[]): {
  *
  * undefined) until isFreshLoading turns to false.
  *
+ * It also provides a method getCache to get the cached data from localStorage
+ *
+ * by providing the queryKey.
+ *
  * @example 
  *
  * const useFetchUsers = options =>
@@ -721,10 +752,16 @@ export function useNavigationCheckpoints(...keys: string[]): {
  * 
  * // Now we can use useFetchUsers as:
  * const { data, isLoading, isFreshLoading } = useFetchUsers();
+ * 
+ * // To get the cached data from localStorage
+ * const cachedUsersData = usePersistedQuery.getCache(QUERY_KEYS.FETCH_USERS);
  * @endexample
 */
-export function usePersistedQuery<T>(queryKey: string | unknown[], fetch: () => Promise<T>, options?: UseQueryOptions): UseQueryResult<T> & {
-  isFreshLoading: boolean;
+export const usePersistedQuery: {
+  <T>(queryKey: string | unknown[], fetch: () => Promise<T>, options?: UseQueryOptions): UseQueryResult<T> & {
+    isFreshLoading: boolean;
+  };
+  getCache: <T>(queryKey: string | unknown[]) => T | null;
 };
 /**
  *
@@ -734,7 +771,11 @@ export function usePersistedQuery<T>(queryKey: string | unknown[], fetch: () =>
  *
  * This hook uses usePersistedQuery under the hood. So data will be immediately
  *
- * available except for the first page load.
+ * available except for the first page load. Additionally if the data is available
+ *
+ * in localStorage, it will be served from there until an explicit call to
+ *
+ * refetch is made.
  *
  * @example 
  *

package/react-utils.js

@@ -6,7 +6,10 @@ import { isNil, includes, __, prop, toPairs, mergeLeft, curry, keys, isEmpty, me
 import { useTranslation, Trans, withTranslation } from 'react-i18next';
 import ErrorPage from '@bigbinary/neeto-molecules/ErrorPage';
 import { Route, Redirect } from 'react-router-dom';
+import { isNotPresent } from '@bigbinary/neeto-commons-frontend/pure';
+import { usePersistedQuery as usePersistedQuery$1 } from '@bigbinary/neeto-commons-frontend/react-utils';
 import axios from 'axios';
+import { getFromLocalStorage } from '@bigbinary/neeto-commons-frontend/utils';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import { Helmet } from 'react-helmet';
 
@@ -239,19 +242,31 @@ var NEETO_APPS_LIST_STALE_TIME = 30 * 24 * 60 * 60 * 1000; // 30 days
 
 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 useFetchNeetoApps = function useFetchNeetoApps(options) {
+  var _globalProps$user;
+  var scopedQueryKey = "".concat(QUERY_KEYS.NEETO_APPS_LIST, "-").concat((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.id);
+  var neetoApps = usePersistedQuery$1.getCache(scopedQueryKey);
+  return usePersistedQuery$1(scopedQueryKey, neetoAppsApi.fetch, _objectSpread$2({
+    staleTime: NEETO_APPS_LIST_STALE_TIME,
+    enabled: isNotPresent(neetoApps === null || neetoApps === void 0 ? void 0 : neetoApps.data)
+  }, options));
+};
+
+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 localStorageQueryCache = {
   set: function set(key, data) {
     var cache = localStorageQueryCache.getAll();
-    var newCache = _objectSpread$2(_objectSpread$2({}, cache), {}, _defineProperty({}, key, {
+    var newCache = _objectSpread$1(_objectSpread$1({}, cache), {}, _defineProperty({}, key, {
       data: data,
       modifiedAt: Date.now()
     }));
     localStorage.setItem(QUERY_CACHE_NAME_SPACE, JSON.stringify(newCache));
   },
   getAll: function getAll() {
-    var cache = localStorage.getItem(QUERY_CACHE_NAME_SPACE);
+    var cache = getFromLocalStorage(QUERY_CACHE_NAME_SPACE);
     if (!cache) return {};
-    return JSON.parse(cache);
+    return cache;
   },
   get: function get(key) {
     return localStorageQueryCache.getAll()[key];
@@ -270,23 +285,16 @@ 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$2(_objectSpread$2({}, queryResult), {}, {
+    return _objectSpread$1(_objectSpread$1({}, queryResult), {}, {
       isFreshLoading: queryResult.isLoading
     });
   }
-  return _objectSpread$2(_objectSpread$2({}, queryResult), {}, {
+  return _objectSpread$1(_objectSpread$1({}, queryResult), {}, {
     data: queryResult.data || localCache.data,
     isFreshLoading: false
   });
 };
-
-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$1({
-    staleTime: NEETO_APPS_LIST_STALE_TIME
-  }, options));
-};
+usePersistedQuery.getCache = localStorageQueryCache.get;
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;