@atlaskit/profilecard/dist/es2019/components/User/ProfileCardResourced.js

A React component to display a card with user information.

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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';
class ProfileCardResourced extends React.PureComponent {
  constructor(...args) {
    super(...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", 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", () => {
      const {
        cloudId,
        userId
      } = this.props;
      const {
        isLoading
      } = this.state;
      if (isLoading === true) {
        // don't fetch data when fetching is in process
        return;
      }
      this.setState({
        isLoading: true,
        hasError: false,
        data: null
      }, () => {
        const 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(res => this.handleClientSuccess(...res), err => this.handleClientError(err)).catch(err => this.handleClientError(err));
      });
    });
    _defineProperty(this, "filterActions", () => filterActions(this.props.actions, this.state.data));
    _defineProperty(this, "openKudosDrawer", () => {
      this.setState({
        kudosDrawerOpen: true
      });
    });
    _defineProperty(this, "closeKudosDrawer", () => {
      this.setState({
        kudosDrawerOpen: false
      });
    });
  }
  componentDidMount() {
    this._isMounted = true;
    this.clientFetchProfile();
  }
  componentDidUpdate(prevProps) {
    const {
      userId,
      cloudId,
      resourceClient
    } = this.props;
    if (userId !== prevProps.userId || cloudId !== prevProps.cloudId || resourceClient !== prevProps.resourceClient) {
      this.setState({
        isLoading: undefined
      }, this.clientFetchProfile);
    }
  }
  componentWillUnmount() {
    this._isMounted = false;
  }
  handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos, teamCentralBaseUrl) {
    if (!this._isMounted) {
      return;
    }
    this.setState({
      isLoading: false,
      hasError: false,
      data: profileData,
      reportingLinesData,
      isKudosEnabled: shouldShowGiveKudos,
      teamCentralBaseUrl
    });
  }
  handleClientError(err) {
    if (!this._isMounted) {
      return;
    }
    this.setState({
      isLoading: false,
      hasError: true,
      error: err
    });
  }
  render() {
    const {
      isLoading,
      hasError,
      error,
      data,
      reportingLinesData,
      isKudosEnabled,
      teamCentralBaseUrl
    } = this.state;
    const {
      onReportingLinesClick,
      cloudId,
      userId,
      addFlag
    } = this.props;
    const 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
      }));
    }
    const newProps = {
      hasError,
      errorType: error,
      clientFetchProfile: this.clientFetchProfile,
      reportingLines: reportingLinesData,
      onReportingLinesClick: onReportingLinesClick,
      cloudId,
      userId,
      addFlag,
      ...data,
      isKudosEnabled,
      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()
    }))));
  }
}
_defineProperty(ProfileCardResourced, "defaultProps", {
  actions: []
});
export const ProfileCardResourcedInternal = ProfileCardResourced;
export default withAnalyticsEvents()(ProfileCardResourced);