@atlaskit/smart-hooks 0.1.0 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/smart-hooks
 
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.1.1
+
+### Patch Changes
+
+- [`c7cd471ace6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c7cd471ace6) - [ux] add abortcontrollers, replace ufo experience identifier, memoization for search query
+- Updated dependencies
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/cjs/services/use-user-recommendations/index.js

@@ -19,6 +19,8 @@ var _react = require("react");
 
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+
 var _uuid = require("uuid");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -85,9 +87,15 @@ var useUserRecommendations = function useUserRecommendations(props) {
       error = _useState6[0],
       setError = _useState6[1];
 
-  var renderId = (0, _react.useRef)('');
+  var _useState7 = (0, _react.useState)(function () {
+    return (0, _uuid.v4)();
+  }),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 1),
+      renderId = _useState8[0];
+
   var sessionId = (0, _react.useRef)('');
   var currentQuery = (0, _react.useRef)('');
+  var lastAbortController = (0, _react.useRef)();
 
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
       createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -104,11 +112,12 @@ var useUserRecommendations = function useUserRecommendations(props) {
       principalId: principalId,
       tenantId: tenantId,
       maxNumberOfResults: maxNumberOfResults
-    }, renderId.current, sessionId.current, currentQuery.current));
-  }, [childObjectId, containerId, fieldId, includeTeams, maxNumberOfResults, objectId, preload, principalId, productKey, tenantId]);
+    }, renderId, sessionId.current, currentQuery.current));
+  }, [childObjectId, containerId, fieldId, includeTeams, maxNumberOfResults, objectId, preload, principalId, productKey, renderId, tenantId]);
   var fetchRecommendations = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
-      var recommendedUsersResult;
+      var _lastAbortController$, currentController, recommendedUsersResult;
+
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -120,7 +129,16 @@ var useUserRecommendations = function useUserRecommendations(props) {
               _ufoExperiences.UsersFetchedUfoExperience.getInstance(fieldId).start();
 
               _context.prev = 3;
-              _context.next = 6;
+
+              if (lastAbortController.current) {
+                (_lastAbortController$ = lastAbortController.current) === null || _lastAbortController$ === void 0 ? void 0 : _lastAbortController$.abort();
+              } // in case there are still IE users, check AbortController before init,
+              // IE has no timeout applied on fetch since AbortController isn't available
+
+
+              currentController = typeof AbortController !== 'undefined' ? new AbortController() : null;
+              lastAbortController.current = currentController;
+              _context.next = 9;
               return (0, _smartCommon.fetchUserRecommendations)({
                 baseUrl: baseUrl,
                 context: {
@@ -140,9 +158,9 @@ var useUserRecommendations = function useUserRecommendations(props) {
                 maxNumberOfResults: maxNumberOfResults,
                 searchQuery: cpusSearchQuery,
                 query: query
-              });
+              }, currentController === null || currentController === void 0 ? void 0 : currentController.signal);
 
-            case 6:
+            case 9:
               recommendedUsersResult = _context.sent;
               currentQuery.current = query !== null && query !== void 0 ? query : '';
 
@@ -153,45 +171,59 @@ var useUserRecommendations = function useUserRecommendations(props) {
               });
 
               setRecommendations(recommendedUsersResult);
-              _context.next = 16;
+              _context.next = 24;
               break;
 
-            case 12:
-              _context.prev = 12;
+            case 15:
+              _context.prev = 15;
               _context.t0 = _context["catch"](3);
 
+              if (!(_context.t0 instanceof Error && _context.t0.name === 'AbortError')) {
+                _context.next = 22;
+                break;
+              }
+
+              // Request aborted client-side
+              _ufoExperiences.UsersFetchedUfoExperience.getInstance(fieldId).abort(); // return early to prevent disabling isLoading
+
+
+              return _context.abrupt("return");
+
+            case 22:
               _ufoExperiences.UsersFetchedUfoExperience.getInstance(fieldId).failure({
                 metadata: getAnalyticsAttributes()
               });
 
               setError(_context.t0);
 
-            case 16:
-              setIsLoading(false);
+            case 24:
+              setIsLoading(false); // clear abort controller
+
+              lastAbortController.current = undefined;
 
-            case 17:
+            case 26:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[3, 12]]);
+      }, _callee, null, [[3, 15]]);
     }));
 
     return function (_x) {
       return _ref.apply(this, arguments);
     };
   }(), [baseUrl, childObjectId, containerId, objectId, principalId, productAttributes, productKey, fieldId, tenantId, includeUsers, includeGroups, includeTeams, maxNumberOfResults, cpusSearchQuery, getAnalyticsAttributes]);
-  var debouncedFetchRecommendations = (0, _react.useMemo)(function () {
-    return (0, _debounce.default)(fetchRecommendations, debounceTimeMs);
+  var memoizedDebouncedFetchRecommendations = (0, _react.useMemo)(function () {
+    return (0, _memoizeOne.default)((0, _debounce.default)(fetchRecommendations, debounceTimeMs));
   }, [fetchRecommendations, debounceTimeMs]);
   (0, _react.useEffect)(function () {
     if (preload) {
-      debouncedFetchRecommendations('');
+      memoizedDebouncedFetchRecommendations('');
     }
-  }, [preload, debouncedFetchRecommendations]);
+  }, [preload, memoizedDebouncedFetchRecommendations]);
   var onInputChange = (0, _react.useCallback)(function (query) {
-    debouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
-  }, [debouncedFetchRecommendations]);
+    memoizedDebouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
+  }, [memoizedDebouncedFetchRecommendations]);
   var onUserSelect = (0, _react.useCallback)(function (userId) {
     (0, _analytics.fireUserSelectedEvent)(createAnalyticsEvent, _objectSpread(_objectSpread({}, getAnalyticsAttributes()), {}, {
       selectedUser: userId,
@@ -208,9 +240,6 @@ var useUserRecommendations = function useUserRecommendations(props) {
       isOnUserSelectUsed = _useFunctionUsageTrac2.isUsed,
       usageTrackedOnUserSelect = _useFunctionUsageTrac2.trackingFunction;
 
-  (0, _react.useEffect)(function () {
-    renderId.current = (0, _uuid.v4)();
-  }, []);
   return {
     recommendations: isOnInputChangeUsed && isOnUserSelectUsed ? recommendations : instrumentFailureOption,
     triggerSearchFactory: usageTrackedOnInputChange,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-hooks",
-	"version": "0.1.0",
+	"version": "0.1.3",
 	"sideEffects": false
 }

package/dist/es2019/services/use-user-recommendations/index.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
+import memoizeOne from 'memoize-one';
 import { v4 as uuid } from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { EntityType, fetchUserRecommendations } from '@atlaskit/smart-common';
@@ -45,9 +46,10 @@ const useUserRecommendations = props => {
   const [recommendations, setRecommendations] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState();
-  const renderId = useRef('');
+  const [renderId] = useState(() => uuid());
   const sessionId = useRef('');
   const currentQuery = useRef('');
+  const lastAbortController = useRef();
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -62,8 +64,8 @@ const useUserRecommendations = props => {
       principalId,
       tenantId,
       maxNumberOfResults
-    }, renderId.current, sessionId.current, currentQuery.current)
-  }), [childObjectId, containerId, fieldId, includeTeams, maxNumberOfResults, objectId, preload, principalId, productKey, tenantId]);
+    }, renderId, sessionId.current, currentQuery.current)
+  }), [childObjectId, containerId, fieldId, includeTeams, maxNumberOfResults, objectId, preload, principalId, productKey, renderId, tenantId]);
   const fetchRecommendations = useCallback(async query => {
     setIsLoading(true); // restart session
 
@@ -71,6 +73,16 @@ const useUserRecommendations = props => {
     UsersFetchedUfoExperience.getInstance(fieldId).start();
 
     try {
+      if (lastAbortController.current) {
+        var _lastAbortController$;
+
+        (_lastAbortController$ = lastAbortController.current) === null || _lastAbortController$ === void 0 ? void 0 : _lastAbortController$.abort();
+      } // in case there are still IE users, check AbortController before init,
+      // IE has no timeout applied on fetch since AbortController isn't available
+
+
+      const currentController = typeof AbortController !== 'undefined' ? new AbortController() : null;
+      lastAbortController.current = currentController;
       const recommendedUsersResult = await fetchUserRecommendations({
         baseUrl,
         context: {
@@ -90,7 +102,7 @@ const useUserRecommendations = props => {
         maxNumberOfResults,
         searchQuery: cpusSearchQuery,
         query
-      });
+      }, currentController === null || currentController === void 0 ? void 0 : currentController.signal);
       currentQuery.current = query !== null && query !== void 0 ? query : '';
       UsersFetchedUfoExperience.getInstance(fieldId).success({
         metadata: { ...getAnalyticsAttributes(),
@@ -99,23 +111,32 @@ const useUserRecommendations = props => {
       });
       setRecommendations(recommendedUsersResult);
     } catch (error) {
-      UsersFetchedUfoExperience.getInstance(fieldId).failure({
-        metadata: getAnalyticsAttributes()
-      });
-      setError(error);
+      if (error instanceof Error && error.name === 'AbortError') {
+        // Request aborted client-side
+        UsersFetchedUfoExperience.getInstance(fieldId).abort(); // return early to prevent disabling isLoading
+
+        return;
+      } else {
+        UsersFetchedUfoExperience.getInstance(fieldId).failure({
+          metadata: getAnalyticsAttributes()
+        });
+        setError(error);
+      }
     }
 
-    setIsLoading(false);
+    setIsLoading(false); // clear abort controller
+
+    lastAbortController.current = undefined;
   }, [baseUrl, childObjectId, containerId, objectId, principalId, productAttributes, productKey, fieldId, tenantId, includeUsers, includeGroups, includeTeams, maxNumberOfResults, cpusSearchQuery, getAnalyticsAttributes]);
-  const debouncedFetchRecommendations = useMemo(() => debounce(fetchRecommendations, debounceTimeMs), [fetchRecommendations, debounceTimeMs]);
+  const memoizedDebouncedFetchRecommendations = useMemo(() => memoizeOne(debounce(fetchRecommendations, debounceTimeMs)), [fetchRecommendations, debounceTimeMs]);
   useEffect(() => {
     if (preload) {
-      debouncedFetchRecommendations('');
+      memoizedDebouncedFetchRecommendations('');
     }
-  }, [preload, debouncedFetchRecommendations]);
+  }, [preload, memoizedDebouncedFetchRecommendations]);
   const onInputChange = useCallback(query => {
-    debouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
-  }, [debouncedFetchRecommendations]);
+    memoizedDebouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
+  }, [memoizedDebouncedFetchRecommendations]);
   const onUserSelect = useCallback(userId => {
     fireUserSelectedEvent(createAnalyticsEvent, { ...getAnalyticsAttributes(),
       selectedUser: userId,
@@ -131,9 +152,6 @@ const useUserRecommendations = props => {
     isUsed: isOnUserSelectUsed,
     trackingFunction: usageTrackedOnUserSelect
   } = useFunctionUsageTracking(onUserSelect);
-  useEffect(() => {
-    renderId.current = uuid();
-  }, []);
   return {
     recommendations: isOnInputChangeUsed && isOnUserSelectUsed ? recommendations : instrumentFailureOption,
     triggerSearchFactory: usageTrackedOnInputChange,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-hooks",
-	"version": "0.1.0",
+	"version": "0.1.3",
 	"sideEffects": false
 }

package/dist/esm/services/use-user-recommendations/index.js

@@ -9,6 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
+import memoizeOne from 'memoize-one';
 import { v4 as uuid } from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { EntityType, fetchUserRecommendations } from '@atlaskit/smart-common';
@@ -64,9 +65,15 @@ var useUserRecommendations = function useUserRecommendations(props) {
       error = _useState6[0],
       setError = _useState6[1];
 
-  var renderId = useRef('');
+  var _useState7 = useState(function () {
+    return uuid();
+  }),
+      _useState8 = _slicedToArray(_useState7, 1),
+      renderId = _useState8[0];
+
   var sessionId = useRef('');
   var currentQuery = useRef('');
+  var lastAbortController = useRef();
 
   var _useAnalyticsEvents = useAnalyticsEvents(),
       createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -83,11 +90,12 @@ var useUserRecommendations = function useUserRecommendations(props) {
       principalId: principalId,
       tenantId: tenantId,
       maxNumberOfResults: maxNumberOfResults
-    }, renderId.current, sessionId.current, currentQuery.current));
-  }, [childObjectId, containerId, fieldId, includeTeams, maxNumberOfResults, objectId, preload, principalId, productKey, tenantId]);
+    }, renderId, sessionId.current, currentQuery.current));
+  }, [childObjectId, containerId, fieldId, includeTeams, maxNumberOfResults, objectId, preload, principalId, productKey, renderId, tenantId]);
   var fetchRecommendations = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
-      var recommendedUsersResult;
+      var _lastAbortController$, currentController, recommendedUsersResult;
+
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -97,7 +105,16 @@ var useUserRecommendations = function useUserRecommendations(props) {
               sessionId.current = uuid();
               UsersFetchedUfoExperience.getInstance(fieldId).start();
               _context.prev = 3;
-              _context.next = 6;
+
+              if (lastAbortController.current) {
+                (_lastAbortController$ = lastAbortController.current) === null || _lastAbortController$ === void 0 ? void 0 : _lastAbortController$.abort();
+              } // in case there are still IE users, check AbortController before init,
+              // IE has no timeout applied on fetch since AbortController isn't available
+
+
+              currentController = typeof AbortController !== 'undefined' ? new AbortController() : null;
+              lastAbortController.current = currentController;
+              _context.next = 9;
               return fetchUserRecommendations({
                 baseUrl: baseUrl,
                 context: {
@@ -117,9 +134,9 @@ var useUserRecommendations = function useUserRecommendations(props) {
                 maxNumberOfResults: maxNumberOfResults,
                 searchQuery: cpusSearchQuery,
                 query: query
-              });
+              }, currentController === null || currentController === void 0 ? void 0 : currentController.signal);
 
-            case 6:
+            case 9:
               recommendedUsersResult = _context.sent;
               currentQuery.current = query !== null && query !== void 0 ? query : '';
               UsersFetchedUfoExperience.getInstance(fieldId).success({
@@ -128,43 +145,57 @@ var useUserRecommendations = function useUserRecommendations(props) {
                 })
               });
               setRecommendations(recommendedUsersResult);
-              _context.next = 16;
+              _context.next = 24;
               break;
 
-            case 12:
-              _context.prev = 12;
+            case 15:
+              _context.prev = 15;
               _context.t0 = _context["catch"](3);
+
+              if (!(_context.t0 instanceof Error && _context.t0.name === 'AbortError')) {
+                _context.next = 22;
+                break;
+              }
+
+              // Request aborted client-side
+              UsersFetchedUfoExperience.getInstance(fieldId).abort(); // return early to prevent disabling isLoading
+
+              return _context.abrupt("return");
+
+            case 22:
               UsersFetchedUfoExperience.getInstance(fieldId).failure({
                 metadata: getAnalyticsAttributes()
               });
               setError(_context.t0);
 
-            case 16:
-              setIsLoading(false);
+            case 24:
+              setIsLoading(false); // clear abort controller
+
+              lastAbortController.current = undefined;
 
-            case 17:
+            case 26:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[3, 12]]);
+      }, _callee, null, [[3, 15]]);
     }));
 
     return function (_x) {
       return _ref.apply(this, arguments);
     };
   }(), [baseUrl, childObjectId, containerId, objectId, principalId, productAttributes, productKey, fieldId, tenantId, includeUsers, includeGroups, includeTeams, maxNumberOfResults, cpusSearchQuery, getAnalyticsAttributes]);
-  var debouncedFetchRecommendations = useMemo(function () {
-    return debounce(fetchRecommendations, debounceTimeMs);
+  var memoizedDebouncedFetchRecommendations = useMemo(function () {
+    return memoizeOne(debounce(fetchRecommendations, debounceTimeMs));
   }, [fetchRecommendations, debounceTimeMs]);
   useEffect(function () {
     if (preload) {
-      debouncedFetchRecommendations('');
+      memoizedDebouncedFetchRecommendations('');
     }
-  }, [preload, debouncedFetchRecommendations]);
+  }, [preload, memoizedDebouncedFetchRecommendations]);
   var onInputChange = useCallback(function (query) {
-    debouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
-  }, [debouncedFetchRecommendations]);
+    memoizedDebouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
+  }, [memoizedDebouncedFetchRecommendations]);
   var onUserSelect = useCallback(function (userId) {
     fireUserSelectedEvent(createAnalyticsEvent, _objectSpread(_objectSpread({}, getAnalyticsAttributes()), {}, {
       selectedUser: userId,
@@ -181,9 +212,6 @@ var useUserRecommendations = function useUserRecommendations(props) {
       isOnUserSelectUsed = _useFunctionUsageTrac2.isUsed,
       usageTrackedOnUserSelect = _useFunctionUsageTrac2.trackingFunction;
 
-  useEffect(function () {
-    renderId.current = uuid();
-  }, []);
   return {
     recommendations: isOnInputChangeUsed && isOnUserSelectUsed ? recommendations : instrumentFailureOption,
     triggerSearchFactory: usageTrackedOnInputChange,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-hooks",
-	"version": "0.1.0",
+	"version": "0.1.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-hooks",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -21,9 +21,9 @@
     "@atlaskit/analytics-gas-types": "^5.0.5",
     "@atlaskit/analytics-listeners": "^8.1.3",
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/smart-common": "^0.0.3",
-    "@atlaskit/ufo": "^0.0.6",
-    "@atlaskit/user-picker": "^8.4.0",
+    "@atlaskit/smart-common": "^0.1.0",
+    "@atlaskit/ufo": "^0.1.0",
+    "@atlaskit/user-picker": "^9.0.0",
     "@babel/runtime": "^7.0.0",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.5",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/smart-hooks": "*",
     "@atlaskit/ssr": "*",
@@ -44,7 +44,7 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.0",
-    "@atlassiansox/analytics-web-client": "^4.2.0",
+    "@atlassiansox/analytics-web-client": "^4.4.0",
     "@storybook/addon-knobs": "^5.3.18",
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^1.0.4",