@atlaskit/profilecard
Version:
A React component to display a card with user information.
213 lines • 9.13 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { Suspense } from 'react';
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
import filterActions from '../../internal/filterActions';
import { CardWrapper } from '../../styled/Card';
import { fireEvent } from '../../util/analytics';
import { ErrorMessage } from '../Error';
import ProfileCard from './ProfileCard';
import UserLoadingState from './UserLoadingState';
var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
function ProfileCardResourced() {
var _this;
_classCallCheck(this, ProfileCardResourced);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, ProfileCardResourced, [].concat(args));
_defineProperty(_this, "_isMounted", false);
_defineProperty(_this, "state", {
visible: false,
isLoading: undefined,
hasError: false,
error: null,
data: null,
reportingLinesData: undefined,
isKudosEnabled: false,
kudosDrawerOpen: false,
teamCentralBaseUrl: undefined
});
_defineProperty(_this, "fireAnalytics", function (payload) {
// Don't fire analytics if the component is unmounted
if (!_this._isMounted) {
return;
}
if (_this.props.createAnalyticsEvent) {
fireEvent(_this.props.createAnalyticsEvent, payload);
}
});
_defineProperty(_this, "clientFetchProfile", function () {
var _this$props = _this.props,
cloudId = _this$props.cloudId,
userId = _this$props.userId;
var isLoading = _this.state.isLoading;
if (isLoading === true) {
// don't fetch data when fetching is in process
return;
}
_this.setState({
isLoading: true,
hasError: false,
data: null
}, function () {
var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId, _this.fireAnalytics), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos(), _this.props.resourceClient.getTeamCentralBaseUrl({
withOrgContext: true,
withSiteContext: true
})]);
requests.then(function (res) {
var _this2;
return (_this2 = _this).handleClientSuccess.apply(_this2, _toConsumableArray(res));
}, function (err) {
return _this.handleClientError(err);
}).catch(function (err) {
return _this.handleClientError(err);
});
});
});
_defineProperty(_this, "filterActions", function () {
return filterActions(_this.props.actions, _this.state.data);
});
_defineProperty(_this, "openKudosDrawer", function () {
_this.setState({
kudosDrawerOpen: true
});
});
_defineProperty(_this, "closeKudosDrawer", function () {
_this.setState({
kudosDrawerOpen: false
});
});
return _this;
}
_inherits(ProfileCardResourced, _React$PureComponent);
return _createClass(ProfileCardResourced, [{
key: "componentDidMount",
value: function componentDidMount() {
this._isMounted = true;
this.clientFetchProfile();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props2 = this.props,
userId = _this$props2.userId,
cloudId = _this$props2.cloudId,
resourceClient = _this$props2.resourceClient;
if (userId !== prevProps.userId || cloudId !== prevProps.cloudId || resourceClient !== prevProps.resourceClient) {
this.setState({
isLoading: undefined
}, this.clientFetchProfile);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._isMounted = false;
}
}, {
key: "handleClientSuccess",
value: function handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos, teamCentralBaseUrl) {
if (!this._isMounted) {
return;
}
this.setState({
isLoading: false,
hasError: false,
data: profileData,
reportingLinesData: reportingLinesData,
isKudosEnabled: shouldShowGiveKudos,
teamCentralBaseUrl: teamCentralBaseUrl
});
}
}, {
key: "handleClientError",
value: function handleClientError(err) {
if (!this._isMounted) {
return;
}
this.setState({
isLoading: false,
hasError: true,
error: err
});
}
}, {
key: "render",
value: function render() {
var _this$state = this.state,
isLoading = _this$state.isLoading,
hasError = _this$state.hasError,
error = _this$state.error,
data = _this$state.data,
reportingLinesData = _this$state.reportingLinesData,
isKudosEnabled = _this$state.isKudosEnabled,
teamCentralBaseUrl = _this$state.teamCentralBaseUrl;
var _this$props3 = this.props,
onReportingLinesClick = _this$props3.onReportingLinesClick,
cloudId = _this$props3.cloudId,
userId = _this$props3.userId,
addFlag = _this$props3.addFlag;
var isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
if (isFetchingOrNotStartToFetchYet) {
return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(UserLoadingState, {
fireAnalytics: this.fireAnalytics
}));
} else if (hasError) {
return /*#__PURE__*/React.createElement(CardWrapper, {
testId: "profile-card-resourced-error-state"
}, /*#__PURE__*/React.createElement(ErrorMessage, {
errorType: error,
reload: this.clientFetchProfile,
fireAnalytics: this.fireAnalytics
}));
}
var newProps = _objectSpread(_objectSpread({
hasError: hasError,
errorType: error,
clientFetchProfile: this.clientFetchProfile,
reportingLines: reportingLinesData,
onReportingLinesClick: onReportingLinesClick,
cloudId: cloudId,
userId: userId,
addFlag: addFlag
}, data), {}, {
isKudosEnabled: isKudosEnabled,
teamCentralBaseUrl: teamCentralBaseUrl,
openKudosDrawer: this.openKudosDrawer
});
return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, isKudosEnabled && newProps.teamCentralBaseUrl && /*#__PURE__*/React.createElement(Suspense, {
fallback: null
}, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
isOpen: this.state.kudosDrawerOpen,
recipient: {
type: KudosType.INDIVIDUAL,
recipientId: this.props.userId
},
analyticsSource: "profile-card",
teamCentralBaseUrl: newProps.teamCentralBaseUrl,
cloudId: this.props.cloudId,
addFlag: this.props.addFlag,
onClose: this.closeKudosDrawer
})), /*#__PURE__*/React.createElement(ProfileCard, _extends({}, newProps, {
actions: this.filterActions()
}))));
}
}]);
}(React.PureComponent);
_defineProperty(ProfileCardResourced, "defaultProps", {
actions: []
});
export var ProfileCardResourcedInternal = ProfileCardResourced;
export default withAnalyticsEvents()(ProfileCardResourced);