@bigbinary/neeto-commons-frontend 2.0.104 → 2.0.106

package/react-utils.d.ts

@@ -3,6 +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";
 /**
  *
  * ErrorBoundary which reports frontend errors to HoneyBadger
@@ -119,11 +120,11 @@ export function useIsElementVisibleInDom(target: Element | null, options?: Optio
  *
  * until the updates are stopped. We can use this to limit the number of API calls
  *
- * triggered from a user input like search box. The value returned by the
+ * triggered from a user input like search box. The value returned by the hook will
  *
- * hook will only reflect the latest value when the hook has not been called for
+ * only reflect the latest value when the hook has not been called for the
  *
- * the specified time period delay.
+ * specified time period delay.
  *
  * @example 
  *
@@ -146,9 +147,9 @@ export function useDebounce<T>(value: T, delay?: number): T;
  *
  * function will be executed only when the dependencies stops changing for a while.
  *
- * The debounced function comes with a cancel method which can
+ * The debounced function comes with a cancel method which can be used to cancel
  *
- * be used to cancel the delayed function invocation.
+ * the delayed function invocation.
  *
  * @example 
  *
@@ -251,7 +252,7 @@ export function usePrevious<T>(value: T): T;
  * @example 
  *
  * useUpdateEffect(() => {
- *   setTitle(value)
+ *   setTitle(value);
  * }, [value]);
  * @endexample
 */
@@ -394,9 +395,9 @@ export declare type ZustandStoreHook = UseBoundStore<StoreApi<any>> & {
  *
  * will not submit when Shift + Enter is pressed. Shift + Enter can be used to
  *
- * add new lines to text area in the form. The hook returns a ref. This need to be
+ * add new lines to text area in the form. The hook returns a ref. This need to
  *
- * attached to the input element to be listened to.
+ * be attached to the input element to be listened to.
  *
  * @example 
  *
@@ -653,9 +654,11 @@ export function useHotKeys(hotkey: string | string[], handler: (event: React.Key
 export function useStateWithDependency<T>(defaultValue: T, dependencies?: any[]): T;
 /**
  *
- * This hook will store the path as the value for the key in a Zustand store. This
+ * This hook will store the path as the value for the key in a Zustand store.
  *
- * registered checkpoint can be retrieved using the useNavigationCheckpoints hook.
+ * This registered checkpoint can be retrieved using the useNavigationCheckpoints
+ *
+ * hook.
  *
  * @example 
  *
@@ -669,7 +672,10 @@ export function useRegisterNavigationCheckpoint(key: string, path: string): void
  *
  * @example 
  *
- * const navigationCheckpoints = useNavigationCheckpoints(checkpointKey1, checkpointKey2);
+ * const navigationCheckpoints = useNavigationCheckpoints(
+ *   checkpointKey1,
+ *   checkpointKey2
+ * );
  * 
  * return (
  *   <>
@@ -681,6 +687,67 @@ export function useRegisterNavigationCheckpoint(key: string, path: string): void
 export function useNavigationCheckpoints(...keys: string[]): {
   [key: string]: string;
 };
+/**
+ *
+ * usePersistedQuery is an wrapper function around useQuery hook from
+ *
+ * react-query. In addition to all the functionalities offered useQuery, this
+ *
+ * hook also stores the received response in localStorage. For subsequent page
+ *
+ * loads, the hook will be serving data from localStorage until the API response
+ *
+ * is received.
+ *
+ * usePersistedQuery will use the staleTime config from options parameter (if
+ *
+ * present) to determine the expiry of the localStorage cache. The hook will not
+ *
+ * return data from localStorage if it is expired. Instead it will wait for the
+ *
+ * API response to become available.
+ *
+ * You can use isFreshLoading property from the return value of the hook to know
+ *
+ * whether the hook is waiting for the API. data won't be available (will be
+ *
+ * undefined) until isFreshLoading turns to false.
+ *
+ * @example 
+ *
+ * const useFetchUsers = options =>
+ *   usePersistedQuery(QUERY_KEYS.FETCH_USERS, usersApi.fetch, options);
+ * 
+ * // Now we can use useFetchUsers as:
+ * const { data, isLoading, isFreshLoading } = useFetchUsers();
+ * @endexample
+*/
+export function usePersistedQuery<T>(queryKey: string | unknown[], fetch: () => Promise<T>, options?: UseQueryOptions): UseQueryResult<T> & {
+  isFreshLoading: boolean;
+};
+/**
+ *
+ * This hook fetches the list of neetoApps and isOwner flag from
+ *
+ * neeto_apps_controller.
+ *
+ * This hook uses usePersistedQuery under the hood. So data will be immediately
+ *
+ * available except for the first page load.
+ *
+ * @example 
+ *
+ * const { neetoApps, isOwner } = useFetchNeetoApps();
+ * @endexample
+*/
+export function useFetchNeetoApps(options?: UseQueryOptions): ReturnType<typeof usePersistedQuery<{
+  neetoApps: {
+    description: string;
+    name: string;
+    url: string;
+  }[];
+  isOwner: boolean;
+}>>;
 /**
  *
  * An HOC which provides the t function from react-i18next to the wrapped

package/react-utils.js

@@ -7,6 +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 { Helmet } from 'react-helmet';
 
 var _path, _path2, _path3, _path4, _path5, _path6;
@@ -185,6 +186,112 @@ var PrivateRoute = function PrivateRoute(_ref) {
   });
 };
 
+function _typeof$1(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof$1(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof$1(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof$1(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof$1(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+var fetch = function fetch() {
+  return axios.get("/api/v1/neeto_apps");
+};
+var neetoAppsApi = {
+  fetch: fetch
+};
+
+var QUERY_KEYS = {
+  NEETO_APPS_LIST: "neeto-apps-list"
+};
+
+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; }
+var localStorageQueryCache = {
+  set: function set(key, data) {
+    var cache = localStorageQueryCache.getAll();
+    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);
+    if (!cache) return {};
+    return JSON.parse(cache);
+  },
+  get: function get(key) {
+    return localStorageQueryCache.getAll()[key];
+  }
+};
+var isOutdated = function isOutdated(localCache, staleTime) {
+  if (isNil(localCache)) return true;
+  if (isNil(staleTime)) return false;
+  return localCache.modifiedAt <= Date.now() - staleTime;
+};
+var usePersistedQuery = function usePersistedQuery(queryKey, fetch, options) {
+  var queryResult = useQuery(queryKey, fetch, options);
+  var localCache = localStorageQueryCache.get(queryKey);
+  useEffect(function () {
+    if (!queryResult.isSuccess) return;
+    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), {}, {
+      isFreshLoading: queryResult.isLoading
+    });
+  }
+  return _objectSpread$1(_objectSpread$1({}, 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; }
+var useFetchNeetoApps = function useFetchNeetoApps(options) {
+  return usePersistedQuery(QUERY_KEYS.NEETO_APPS_LIST, neetoAppsApi.fetch, _objectSpread({
+    staleTime: NEETO_APPS_LIST_STALE_TIME
+  }, options));
+};
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -3454,47 +3561,6 @@ var usePrevious = function usePrevious(value) {
   return ref.current;
 };
 
-function _typeof$1(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof$1(obj);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof$1(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof$1(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof$1(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -4717,5 +4783,5 @@ var useUpdateEffect = function useUpdateEffect(callback) {
   }, dependencies);
 };
 
-export { HoneybadgerErrorBoundary, PrivateRoute, destroyBrowserSubscription, handleMetaClick, isMetaKeyPressed, registerBrowserNotifications, useDebounce, useDisplayErrorPage, useErrorDisplayStore, useFuncDebounce, useHotKeys, useIsElementVisibleInDom, useKeyboardShortcutsPaneState, useLocalStorage, useNavigationCheckpoints, useOnClickOutside, usePrevious, useRegisterNavigationCheckpoint, useStateWithDependency, useTimer, useUpdateEffect, withImmutableActions, withT, withTitle };
+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 };
 //# sourceMappingURL=react-utils.js.map