@atlaskit/smart-hooks 0.0.2 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/smart-hooks
 
+## 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
+
+- [`6a3107dd76a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a3107dd76a) - Adding analytics + UFO
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.0.2
 
 ### Patch Changes

package/dist/cjs/services/use-function-usage-tracking/index.js

@@ -11,21 +11,28 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+
 function useFunctionUsageTracking(trackedFunction) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isUsed = _useState2[0],
-      setIsUsed = _useState2[1];
+      setIsUsed = _useState2[1]; // trackingFunction needs to be stable for hook consumers...
+
 
   var trackingFunction = (0, _react.useMemo)(function () {
-    return function () {
-      if (!isUsed) {
-        setIsUsed(true);
-      }
-
-      return trackedFunction;
-    };
-  }, [trackedFunction, isUsed]);
+    return (// ...and the function that the factory returns needs to be stable for hook consumers as well
+      (0, _memoizeOne.default)(function () {
+        if (!isUsed) {
+          setIsUsed(true);
+        }
+
+        return trackedFunction;
+      })
+    );
+  }, // isUsed deliberately left out to avoid new tracking fn being generated
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [trackedFunction]);
   return {
     isUsed: isUsed,
     trackingFunction: trackingFunction

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fireUserSelectedEvent = exports.findUserPosition = exports.createDefaultAttributes = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
+
+var _analyticsListeners = require("@atlaskit/analytics-listeners");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _version = require("../../version.json");
+
+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) { (0, _defineProperty2.default)(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 createAndFireEventInElementsChannel = (0, _analyticsNext.createAndFireEvent)(_analyticsListeners.FabricChannel.elements);
+
+var createEvent = function createEvent(eventType, action, actionSubject) {
+  var attributes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  return {
+    eventType: eventType,
+    action: action,
+    actionSubject: actionSubject,
+    source: '@atlaskit/smart-hooks/use-user-recommendations',
+    attributes: _objectSpread({
+      packageName: _version.name,
+      packageVersion: _version.version
+    }, attributes)
+  };
+};
+
+var findUserPosition = function findUserPosition(loadedUsers, userId) {
+  return loadedUsers.findIndex(function (val) {
+    return val.id === userId;
+  });
+};
+
+exports.findUserPosition = findUserPosition;
+
+var createDefaultAttributes = function createDefaultAttributes(props, renderId, sessionId, query) {
+  var fieldId = props.fieldId,
+      objectId = props.objectId,
+      containerId = props.containerId,
+      childObjectId = props.childObjectId,
+      preload = props.preload,
+      includeTeams = props.includeTeams,
+      productKey = props.productKey,
+      principalId = props.principalId,
+      tenantId = props.tenantId,
+      maxNumberOfResults = props.maxNumberOfResults;
+  return {
+    context: fieldId,
+    childObjectId: childObjectId,
+    containerId: containerId,
+    includeTeams: includeTeams,
+    maxNumberOfResults: maxNumberOfResults,
+    objectId: objectId,
+    preload: preload,
+    principalId: principalId,
+    productKey: productKey,
+    queryLength: (query || '').length,
+    renderId: renderId,
+    sessionId: sessionId,
+    tenantId: tenantId
+  };
+};
+
+exports.createDefaultAttributes = createDefaultAttributes;
+
+var fireUserSelectedEvent = function fireUserSelectedEvent(createAnalyticsEvent, payloadAttributes) {
+  return createAndFireEventInElementsChannel(createEvent(_analyticsGasTypes.TRACK_EVENT_TYPE, 'selected', 'user', payloadAttributes))(createAnalyticsEvent);
+};
+
+exports.fireUserSelectedEvent = fireUserSelectedEvent;

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

@@ -19,10 +19,20 @@ 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");
+
 var _smartCommon = require("@atlaskit/smart-common");
 
 var _useFunctionUsageTracking = _interopRequireDefault(require("../use-function-usage-tracking"));
 
+var _analytics = require("./analytics");
+
+var _ufoExperiences = require("./ufoExperiences");
+
 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) { (0, _defineProperty2.default)(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; }
@@ -77,16 +87,58 @@ var useUserRecommendations = function useUserRecommendations(props) {
       error = _useState6[0],
       setError = _useState6[1];
 
+  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;
+
+  var getAnalyticsAttributes = (0, _react.useCallback)(function () {
+    return _objectSpread({}, (0, _analytics.createDefaultAttributes)({
+      fieldId: fieldId,
+      objectId: objectId,
+      containerId: containerId,
+      childObjectId: childObjectId,
+      preload: preload,
+      includeTeams: includeTeams,
+      productKey: productKey,
+      principalId: principalId,
+      tenantId: tenantId,
+      maxNumberOfResults: maxNumberOfResults
+    }, 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, sessionId) {
-      var recommendedUsers;
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
+      var _lastAbortController$, currentController, recommendedUsersResult;
+
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              setIsLoading(true);
-              _context.prev = 1;
-              _context.next = 4;
+              setIsLoading(true); // restart session
+
+              sessionId.current = (0, _uuid.v4)();
+
+              _ufoExperiences.UsersFetchedUfoExperience.getInstance(fieldId).start();
+
+              _context.prev = 3;
+
+              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: {
@@ -98,7 +150,7 @@ var useUserRecommendations = function useUserRecommendations(props) {
                   productKey: productKey,
                   contextType: fieldId,
                   siteId: tenantId,
-                  sessionId: sessionId
+                  sessionId: sessionId.current
                 },
                 includeUsers: includeUsers,
                 includeGroups: includeGroups,
@@ -106,61 +158,92 @@ var useUserRecommendations = function useUserRecommendations(props) {
                 maxNumberOfResults: maxNumberOfResults,
                 searchQuery: cpusSearchQuery,
                 query: query
+              }, currentController === null || currentController === void 0 ? void 0 : currentController.signal);
+
+            case 9:
+              recommendedUsersResult = _context.sent;
+              currentQuery.current = query !== null && query !== void 0 ? query : '';
+
+              _ufoExperiences.UsersFetchedUfoExperience.getInstance(fieldId).success({
+                metadata: _objectSpread(_objectSpread({}, getAnalyticsAttributes()), {}, {
+                  loadedUsersSize: recommendedUsersResult.length
+                })
               });
 
-            case 4:
-              recommendedUsers = _context.sent;
-              setRecommendations(recommendedUsers);
-              _context.next = 11;
+              setRecommendations(recommendedUsersResult);
+              _context.next = 24;
               break;
 
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](1);
+            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 11:
-              setIsLoading(false);
+            case 24:
+              setIsLoading(false); // clear abort controller
+
+              lastAbortController.current = undefined;
 
-            case 12:
+            case 26:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 8]]);
+      }, _callee, null, [[3, 15]]);
     }));
 
-    return function (_x, _x2) {
+    return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, maxNumberOfResults, objectId, principalId, productAttributes, productKey, cpusSearchQuery, tenantId]);
-  var debouncedFetchRecommendations = (0, _react.useMemo)(function () {
-    return (0, _debounce.default)(fetchRecommendations, debounceTimeMs);
+  }(), [baseUrl, childObjectId, containerId, objectId, principalId, productAttributes, productKey, fieldId, tenantId, includeUsers, includeGroups, includeTeams, maxNumberOfResults, cpusSearchQuery, getAnalyticsAttributes]);
+  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]); // TODO - analytics
-
-  var onInputChange = (0, _react.useCallback)(function (query, sessionId) {
-    debouncedFetchRecommendations(query, sessionId);
-  }, [debouncedFetchRecommendations]); // TODO - analytics
-
-  var onChange = (0, _react.useCallback)(function (value, action) {}, []);
+  }, [preload, memoizedDebouncedFetchRecommendations]);
+  var onInputChange = (0, _react.useCallback)(function (query) {
+    memoizedDebouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
+  }, [memoizedDebouncedFetchRecommendations]);
+  var onUserSelect = (0, _react.useCallback)(function (userId) {
+    (0, _analytics.fireUserSelectedEvent)(createAnalyticsEvent, _objectSpread(_objectSpread({}, getAnalyticsAttributes()), {}, {
+      selectedUser: userId,
+      loadedUsersSize: recommendations.length,
+      position: (0, _analytics.findUserPosition)(recommendations, userId)
+    }));
+  }, [createAnalyticsEvent, getAnalyticsAttributes, recommendations]);
 
   var _useFunctionUsageTrac = (0, _useFunctionUsageTracking.default)(onInputChange),
       isOnInputChangeUsed = _useFunctionUsageTrac.isUsed,
       usageTrackedOnInputChange = _useFunctionUsageTrac.trackingFunction;
 
-  var _useFunctionUsageTrac2 = (0, _useFunctionUsageTracking.default)(onChange),
-      isOnChangeUsed = _useFunctionUsageTrac2.isUsed,
-      usageTrackedOnChange = _useFunctionUsageTrac2.trackingFunction;
+  var _useFunctionUsageTrac2 = (0, _useFunctionUsageTracking.default)(onUserSelect),
+      isOnUserSelectUsed = _useFunctionUsageTrac2.isUsed,
+      usageTrackedOnUserSelect = _useFunctionUsageTrac2.trackingFunction;
 
   return {
-    recommendations: isOnInputChangeUsed && isOnChangeUsed ? recommendations : instrumentFailureOption,
-    onInputChange: usageTrackedOnInputChange,
-    onChange: usageTrackedOnChange,
+    recommendations: isOnInputChangeUsed && isOnUserSelectUsed ? recommendations : instrumentFailureOption,
+    triggerSearchFactory: usageTrackedOnInputChange,
+    selectUserFactory: usageTrackedOnUserSelect,
     isLoading: isLoading,
     error: error
   };

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UsersFetchedUfoExperience = void 0;
+
+var _ufo = require("@atlaskit/ufo");
+
+var COMPONENT_NAME = 'smart-hooks.use-user-recommendations';
+var UsersFetchedUfoExperience = new _ufo.ConcurrentExperience('users-fetched', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: _ufo.ExperienceTypes.Load,
+  performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+});
+exports.UsersFetchedUfoExperience = UsersFetchedUfoExperience;

package/dist/cjs/version.json

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

package/dist/es2019/services/use-function-usage-tracking/index.js

@@ -1,14 +1,19 @@
 import { useMemo, useState } from 'react';
+import memoizeOne from 'memoize-one';
 
 function useFunctionUsageTracking(trackedFunction) {
-  const [isUsed, setIsUsed] = useState(false);
-  const trackingFunction = useMemo(() => () => {
+  const [isUsed, setIsUsed] = useState(false); // trackingFunction needs to be stable for hook consumers...
+
+  const trackingFunction = useMemo(() => // ...and the function that the factory returns needs to be stable for hook consumers as well
+  memoizeOne(() => {
     if (!isUsed) {
       setIsUsed(true);
     }
 
     return trackedFunction;
-  }, [trackedFunction, isUsed]);
+  }), // isUsed deliberately left out to avoid new tracking fn being generated
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [trackedFunction]);
   return {
     isUsed,
     trackingFunction

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

@@ -0,0 +1,51 @@
+import { TRACK_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { createAndFireEvent } from '@atlaskit/analytics-next';
+import { name as packageName, version as packageVersion } from '../../version.json';
+const createAndFireEventInElementsChannel = createAndFireEvent(FabricChannel.elements);
+
+const createEvent = (eventType, action, actionSubject, attributes = {}) => ({
+  eventType,
+  action,
+  actionSubject,
+  source: '@atlaskit/smart-hooks/use-user-recommendations',
+  attributes: {
+    packageName,
+    packageVersion,
+    ...attributes
+  }
+});
+
+export const findUserPosition = (loadedUsers, userId) => {
+  return loadedUsers.findIndex(val => val.id === userId);
+};
+export const createDefaultAttributes = (props, renderId, sessionId, query) => {
+  const {
+    fieldId,
+    objectId,
+    containerId,
+    childObjectId,
+    preload,
+    includeTeams,
+    productKey,
+    principalId,
+    tenantId,
+    maxNumberOfResults
+  } = props;
+  return {
+    context: fieldId,
+    childObjectId,
+    containerId,
+    includeTeams,
+    maxNumberOfResults,
+    objectId,
+    preload,
+    principalId,
+    productKey,
+    queryLength: (query || '').length,
+    renderId,
+    sessionId,
+    tenantId
+  };
+};
+export const fireUserSelectedEvent = (createAnalyticsEvent, payloadAttributes) => createAndFireEventInElementsChannel(createEvent(TRACK_EVENT_TYPE, 'selected', 'user', payloadAttributes))(createAnalyticsEvent);

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

@@ -1,7 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+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';
 import useFunctionUsageTracking from '../use-function-usage-tracking';
+import { createDefaultAttributes, findUserPosition, fireUserSelectedEvent } from './analytics';
+import { UsersFetchedUfoExperience } from './ufoExperiences';
 const MAX_NUMBER_RESULTS = 25;
 const DEFAULT_DEBOUNCE_TIME_MS = 150;
 const defaultProps = {
@@ -41,11 +46,44 @@ const useUserRecommendations = props => {
   const [recommendations, setRecommendations] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState();
-  const fetchRecommendations = useCallback(async (query, sessionId) => {
-    setIsLoading(true);
+  const [renderId] = useState(() => uuid());
+  const sessionId = useRef('');
+  const currentQuery = useRef('');
+  const lastAbortController = useRef();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const getAnalyticsAttributes = useCallback(() => ({ ...createDefaultAttributes({
+      fieldId,
+      objectId,
+      containerId,
+      childObjectId,
+      preload,
+      includeTeams,
+      productKey,
+      principalId,
+      tenantId,
+      maxNumberOfResults
+    }, 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
+
+    sessionId.current = uuid();
+    UsersFetchedUfoExperience.getInstance(fieldId).start();
 
     try {
-      const recommendedUsers = await fetchUserRecommendations({
+      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: {
           childObjectId,
@@ -56,7 +94,7 @@ const useUserRecommendations = props => {
           productKey,
           contextType: fieldId,
           siteId: tenantId,
-          sessionId: sessionId
+          sessionId: sessionId.current
         },
         includeUsers,
         includeGroups,
@@ -64,38 +102,60 @@ 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(),
+          loadedUsersSize: recommendedUsersResult.length
+        }
       });
-      setRecommendations(recommendedUsers);
+      setRecommendations(recommendedUsersResult);
     } catch (error) {
-      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);
-  }, [baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, maxNumberOfResults, objectId, principalId, productAttributes, productKey, cpusSearchQuery, tenantId]);
-  const debouncedFetchRecommendations = useMemo(() => debounce(fetchRecommendations, debounceTimeMs), [fetchRecommendations, debounceTimeMs]);
+    setIsLoading(false); // clear abort controller
+
+    lastAbortController.current = undefined;
+  }, [baseUrl, childObjectId, containerId, objectId, principalId, productAttributes, productKey, fieldId, tenantId, includeUsers, includeGroups, includeTeams, maxNumberOfResults, cpusSearchQuery, getAnalyticsAttributes]);
+  const memoizedDebouncedFetchRecommendations = useMemo(() => memoizeOne(debounce(fetchRecommendations, debounceTimeMs)), [fetchRecommendations, debounceTimeMs]);
   useEffect(() => {
     if (preload) {
-      debouncedFetchRecommendations('');
+      memoizedDebouncedFetchRecommendations('');
     }
-  }, [preload, debouncedFetchRecommendations]); // TODO - analytics
-
-  const onInputChange = useCallback((query, sessionId) => {
-    debouncedFetchRecommendations(query, sessionId);
-  }, [debouncedFetchRecommendations]); // TODO - analytics
-
-  const onChange = useCallback((value, action) => {}, []);
+  }, [preload, memoizedDebouncedFetchRecommendations]);
+  const onInputChange = useCallback(query => {
+    memoizedDebouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
+  }, [memoizedDebouncedFetchRecommendations]);
+  const onUserSelect = useCallback(userId => {
+    fireUserSelectedEvent(createAnalyticsEvent, { ...getAnalyticsAttributes(),
+      selectedUser: userId,
+      loadedUsersSize: recommendations.length,
+      position: findUserPosition(recommendations, userId)
+    });
+  }, [createAnalyticsEvent, getAnalyticsAttributes, recommendations]);
   const {
     isUsed: isOnInputChangeUsed,
     trackingFunction: usageTrackedOnInputChange
   } = useFunctionUsageTracking(onInputChange);
   const {
-    isUsed: isOnChangeUsed,
-    trackingFunction: usageTrackedOnChange
-  } = useFunctionUsageTracking(onChange);
+    isUsed: isOnUserSelectUsed,
+    trackingFunction: usageTrackedOnUserSelect
+  } = useFunctionUsageTracking(onUserSelect);
   return {
-    recommendations: isOnInputChangeUsed && isOnChangeUsed ? recommendations : instrumentFailureOption,
-    onInputChange: usageTrackedOnInputChange,
-    onChange: usageTrackedOnChange,
+    recommendations: isOnInputChangeUsed && isOnUserSelectUsed ? recommendations : instrumentFailureOption,
+    triggerSearchFactory: usageTrackedOnInputChange,
+    selectUserFactory: usageTrackedOnUserSelect,
     isLoading,
     error
   };

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

@@ -0,0 +1,9 @@
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+const COMPONENT_NAME = 'smart-hooks.use-user-recommendations';
+export const UsersFetchedUfoExperience = new ConcurrentExperience('users-fetched', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});

package/dist/es2019/version.json

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

package/dist/esm/services/use-function-usage-tracking/index.js

@@ -1,21 +1,27 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useMemo, useState } from 'react';
+import memoizeOne from 'memoize-one';
 
 function useFunctionUsageTracking(trackedFunction) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isUsed = _useState2[0],
-      setIsUsed = _useState2[1];
+      setIsUsed = _useState2[1]; // trackingFunction needs to be stable for hook consumers...
+
 
   var trackingFunction = useMemo(function () {
-    return function () {
-      if (!isUsed) {
-        setIsUsed(true);
-      }
+    return (// ...and the function that the factory returns needs to be stable for hook consumers as well
+      memoizeOne(function () {
+        if (!isUsed) {
+          setIsUsed(true);
+        }
 
-      return trackedFunction;
-    };
-  }, [trackedFunction, isUsed]);
+        return trackedFunction;
+      })
+    );
+  }, // isUsed deliberately left out to avoid new tracking fn being generated
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [trackedFunction]);
   return {
     isUsed: isUsed,
     trackingFunction: trackingFunction

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

@@ -0,0 +1,61 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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; }
+
+import { TRACK_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { createAndFireEvent } from '@atlaskit/analytics-next';
+import { name as packageName, version as packageVersion } from '../../version.json';
+var createAndFireEventInElementsChannel = createAndFireEvent(FabricChannel.elements);
+
+var createEvent = function createEvent(eventType, action, actionSubject) {
+  var attributes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  return {
+    eventType: eventType,
+    action: action,
+    actionSubject: actionSubject,
+    source: '@atlaskit/smart-hooks/use-user-recommendations',
+    attributes: _objectSpread({
+      packageName: packageName,
+      packageVersion: packageVersion
+    }, attributes)
+  };
+};
+
+export var findUserPosition = function findUserPosition(loadedUsers, userId) {
+  return loadedUsers.findIndex(function (val) {
+    return val.id === userId;
+  });
+};
+export var createDefaultAttributes = function createDefaultAttributes(props, renderId, sessionId, query) {
+  var fieldId = props.fieldId,
+      objectId = props.objectId,
+      containerId = props.containerId,
+      childObjectId = props.childObjectId,
+      preload = props.preload,
+      includeTeams = props.includeTeams,
+      productKey = props.productKey,
+      principalId = props.principalId,
+      tenantId = props.tenantId,
+      maxNumberOfResults = props.maxNumberOfResults;
+  return {
+    context: fieldId,
+    childObjectId: childObjectId,
+    containerId: containerId,
+    includeTeams: includeTeams,
+    maxNumberOfResults: maxNumberOfResults,
+    objectId: objectId,
+    preload: preload,
+    principalId: principalId,
+    productKey: productKey,
+    queryLength: (query || '').length,
+    renderId: renderId,
+    sessionId: sessionId,
+    tenantId: tenantId
+  };
+};
+export var fireUserSelectedEvent = function fireUserSelectedEvent(createAnalyticsEvent, payloadAttributes) {
+  return createAndFireEventInElementsChannel(createEvent(TRACK_EVENT_TYPE, 'selected', 'user', payloadAttributes))(createAnalyticsEvent);
+};

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

@@ -7,10 +7,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+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';
 import useFunctionUsageTracking from '../use-function-usage-tracking';
+import { createDefaultAttributes, findUserPosition, fireUserSelectedEvent } from './analytics';
+import { UsersFetchedUfoExperience } from './ufoExperiences';
 var MAX_NUMBER_RESULTS = 25;
 var DEFAULT_DEBOUNCE_TIME_MS = 150;
 var defaultProps = {
@@ -60,16 +65,56 @@ var useUserRecommendations = function useUserRecommendations(props) {
       error = _useState6[0],
       setError = _useState6[1];
 
+  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;
+
+  var getAnalyticsAttributes = useCallback(function () {
+    return _objectSpread({}, createDefaultAttributes({
+      fieldId: fieldId,
+      objectId: objectId,
+      containerId: containerId,
+      childObjectId: childObjectId,
+      preload: preload,
+      includeTeams: includeTeams,
+      productKey: productKey,
+      principalId: principalId,
+      tenantId: tenantId,
+      maxNumberOfResults: maxNumberOfResults
+    }, 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, sessionId) {
-      var recommendedUsers;
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
+      var _lastAbortController$, currentController, recommendedUsersResult;
+
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              setIsLoading(true);
-              _context.prev = 1;
-              _context.next = 4;
+              setIsLoading(true); // restart session
+
+              sessionId.current = uuid();
+              UsersFetchedUfoExperience.getInstance(fieldId).start();
+              _context.prev = 3;
+
+              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: {
@@ -81,7 +126,7 @@ var useUserRecommendations = function useUserRecommendations(props) {
                   productKey: productKey,
                   contextType: fieldId,
                   siteId: tenantId,
-                  sessionId: sessionId
+                  sessionId: sessionId.current
                 },
                 includeUsers: includeUsers,
                 includeGroups: includeGroups,
@@ -89,61 +134,88 @@ var useUserRecommendations = function useUserRecommendations(props) {
                 maxNumberOfResults: maxNumberOfResults,
                 searchQuery: cpusSearchQuery,
                 query: query
+              }, currentController === null || currentController === void 0 ? void 0 : currentController.signal);
+
+            case 9:
+              recommendedUsersResult = _context.sent;
+              currentQuery.current = query !== null && query !== void 0 ? query : '';
+              UsersFetchedUfoExperience.getInstance(fieldId).success({
+                metadata: _objectSpread(_objectSpread({}, getAnalyticsAttributes()), {}, {
+                  loadedUsersSize: recommendedUsersResult.length
+                })
               });
-
-            case 4:
-              recommendedUsers = _context.sent;
-              setRecommendations(recommendedUsers);
-              _context.next = 11;
+              setRecommendations(recommendedUsersResult);
+              _context.next = 24;
               break;
 
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](1);
+            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 11:
-              setIsLoading(false);
+            case 24:
+              setIsLoading(false); // clear abort controller
+
+              lastAbortController.current = undefined;
 
-            case 12:
+            case 26:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 8]]);
+      }, _callee, null, [[3, 15]]);
     }));
 
-    return function (_x, _x2) {
+    return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, maxNumberOfResults, objectId, principalId, productAttributes, productKey, cpusSearchQuery, tenantId]);
-  var debouncedFetchRecommendations = useMemo(function () {
-    return debounce(fetchRecommendations, debounceTimeMs);
+  }(), [baseUrl, childObjectId, containerId, objectId, principalId, productAttributes, productKey, fieldId, tenantId, includeUsers, includeGroups, includeTeams, maxNumberOfResults, cpusSearchQuery, getAnalyticsAttributes]);
+  var memoizedDebouncedFetchRecommendations = useMemo(function () {
+    return memoizeOne(debounce(fetchRecommendations, debounceTimeMs));
   }, [fetchRecommendations, debounceTimeMs]);
   useEffect(function () {
     if (preload) {
-      debouncedFetchRecommendations('');
+      memoizedDebouncedFetchRecommendations('');
     }
-  }, [preload, debouncedFetchRecommendations]); // TODO - analytics
-
-  var onInputChange = useCallback(function (query, sessionId) {
-    debouncedFetchRecommendations(query, sessionId);
-  }, [debouncedFetchRecommendations]); // TODO - analytics
-
-  var onChange = useCallback(function (value, action) {}, []);
+  }, [preload, memoizedDebouncedFetchRecommendations]);
+  var onInputChange = useCallback(function (query) {
+    memoizedDebouncedFetchRecommendations(query !== null && query !== void 0 ? query : '');
+  }, [memoizedDebouncedFetchRecommendations]);
+  var onUserSelect = useCallback(function (userId) {
+    fireUserSelectedEvent(createAnalyticsEvent, _objectSpread(_objectSpread({}, getAnalyticsAttributes()), {}, {
+      selectedUser: userId,
+      loadedUsersSize: recommendations.length,
+      position: findUserPosition(recommendations, userId)
+    }));
+  }, [createAnalyticsEvent, getAnalyticsAttributes, recommendations]);
 
   var _useFunctionUsageTrac = useFunctionUsageTracking(onInputChange),
       isOnInputChangeUsed = _useFunctionUsageTrac.isUsed,
       usageTrackedOnInputChange = _useFunctionUsageTrac.trackingFunction;
 
-  var _useFunctionUsageTrac2 = useFunctionUsageTracking(onChange),
-      isOnChangeUsed = _useFunctionUsageTrac2.isUsed,
-      usageTrackedOnChange = _useFunctionUsageTrac2.trackingFunction;
+  var _useFunctionUsageTrac2 = useFunctionUsageTracking(onUserSelect),
+      isOnUserSelectUsed = _useFunctionUsageTrac2.isUsed,
+      usageTrackedOnUserSelect = _useFunctionUsageTrac2.trackingFunction;
 
   return {
-    recommendations: isOnInputChangeUsed && isOnChangeUsed ? recommendations : instrumentFailureOption,
-    onInputChange: usageTrackedOnInputChange,
-    onChange: usageTrackedOnChange,
+    recommendations: isOnInputChangeUsed && isOnUserSelectUsed ? recommendations : instrumentFailureOption,
+    triggerSearchFactory: usageTrackedOnInputChange,
+    selectUserFactory: usageTrackedOnUserSelect,
     isLoading: isLoading,
     error: error
   };

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

@@ -0,0 +1,9 @@
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+var COMPONENT_NAME = 'smart-hooks.use-user-recommendations';
+export var UsersFetchedUfoExperience = new ConcurrentExperience('users-fetched', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});

package/dist/esm/version.json

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

package/dist/types/services/use-function-usage-tracking/index.d.ts

@@ -1,5 +1,5 @@
 declare function useFunctionUsageTracking<InputFunctionType extends (...any: any) => any>(trackedFunction: InputFunctionType): {
     isUsed: boolean;
-    trackingFunction: () => InputFunctionType;
+    trackingFunction: import("memoize-one").MemoizedFn<() => InputFunctionType>;
 };
 export default useFunctionUsageTracking;

package/dist/types/services/use-user-recommendations/analytics.d.ts

@@ -0,0 +1,20 @@
+import { AnalyticsEventPayload, CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { UserSearchItem } from '@atlaskit/smart-common';
+import { UseUserRecommendationsProps } from '../../types';
+export declare const findUserPosition: (loadedUsers: UserSearchItem[], userId: string) => number;
+export declare const createDefaultAttributes: (props: UseUserRecommendationsProps, renderId: string, sessionId: string, query: string) => {
+    context: string;
+    childObjectId: string | undefined;
+    containerId: string | undefined;
+    includeTeams: boolean | undefined;
+    maxNumberOfResults: number | undefined;
+    objectId: string | undefined;
+    preload: boolean | undefined;
+    principalId: string | undefined;
+    productKey: string;
+    queryLength: number;
+    renderId: string;
+    sessionId: string;
+    tenantId: string;
+};
+export declare const fireUserSelectedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, payloadAttributes: AnalyticsEventPayload) => import("@atlaskit/analytics-next").UIAnalyticsEvent;

package/dist/types/services/use-user-recommendations/index.d.ts

@@ -1,5 +1,4 @@
 import { EntityType, UserSearchItem } from '@atlaskit/smart-common';
-import { ActionTypes, Value } from '@atlaskit/user-picker';
 import type { UseUserRecommendationsProps } from '../../types';
 export declare const instrumentFailureOption: {
     id: string;
@@ -8,14 +7,14 @@ export declare const instrumentFailureOption: {
     avatarUrl: string;
 }[];
 declare const useUserRecommendations: (props: UseUserRecommendationsProps) => {
-    recommendations: {
+    recommendations: UserSearchItem[] | {
         id: string;
         name: string;
         entityType: EntityType;
         avatarUrl: string;
-    }[] | UserSearchItem[];
-    onInputChange: () => (query?: string | undefined, sessionId?: string | undefined) => void;
-    onChange: () => (value: Value, action: ActionTypes) => void;
+    }[];
+    triggerSearchFactory: import("memoize-one").MemoizedFn<() => (query?: string | undefined) => void>;
+    selectUserFactory: import("memoize-one").MemoizedFn<() => (userId: string) => void>;
     isLoading: boolean;
     error: any;
 };

package/dist/types/services/use-user-recommendations/ufoExperiences.d.ts

@@ -0,0 +1,2 @@
+import { ConcurrentExperience } from '@atlaskit/ufo';
+export declare const UsersFetchedUfoExperience: ConcurrentExperience;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-hooks",
-  "version": "0.0.2",
+  "version": "0.1.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -18,19 +18,22 @@
     "releaseModel": "continuous"
   },
   "dependencies": {
-    "@atlaskit/smart-common": "^0.0.2",
-    "@atlaskit/user-picker": "^8.3.0",
+    "@atlaskit/analytics-gas-types": "^5.0.5",
+    "@atlaskit/analytics-listeners": "^8.1.3",
+    "@atlaskit/analytics-next": "^8.0.0",
+    "@atlaskit/smart-common": "^0.1.0",
+    "@atlaskit/ufo": "^0.1.0",
+    "@atlaskit/user-picker": "^8.5.0",
     "@babel/runtime": "^7.0.0",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "memoize-one": "^6.0.0",
+    "uuid": "^3.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/analytics-gas-types": "^5.0.0",
-    "@atlaskit/analytics-listeners": "^8.0.0",
-    "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/analytics-viewer": "^0.4.5",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
@@ -40,10 +43,12 @@
     "@atlaskit/visual-regression": "*",
     "@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",
     "@storybook/addon-knobs": "^5.3.18",
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^1.0.4",
+    "@welldone-software/why-did-you-render": "^6.2.0",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
     "react-dom": "^16.8.0",