Function Header

packages/shared/src/components/profile/Header.tsx:59–308

({
  user,
  isSameUser,
  sticky,
  className,
  style,
}: HeaderProps)

}

export function Header({
  user,
  isSameUser,
  sticky,
  className,
  style,
}: HeaderProps): ReactElement {
  const { user: loggedUser } = useAuthContext();
  const { alerts } = useAlertsContext();
  const logOpportunityNudgeClick = useLogOpportunityNudgeClick(
    TargetId.ProfilePage,
  );
  const { openModal } = useLazyModal();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { follow, unfollow } = useContentPreference();
  const router = useRouter();
  const { data: contentPreference } = useContentPreferenceStatusQuery({
    id: user?.id,
    entity: ContentPreferenceType.User,
  });
  const { unblock, block } = useContentPreference();
  const { logSubscriptionEvent } = usePlusSubscription();
  const canAward = useCanAwardUser({
    sendingUser: loggedUser,
    receivingUser: user as LoggedUser,
  });
  const hasCoresAccess = useHasAccessToCores();
  const canPurchaseCores = useCanPurchaseCores();
  const { isJobsEnabled } = useJobsFeature();

  const onReportUser = React.useCallback(
    (defaultBlocked = false) => {
      openModal({
        type: LazyModal.ReportUser,
        props: {
          offendingUser: {
            id: user.id,
            username: user.username || '',
          },
          defaultBlockUser: defaultBlocked,
        },
      });
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [user],
  );

  const blocked = contentPreference?.status === ContentPreferenceStatus.Blocked;

  const options: MenuItemProps[] = [
    {
      icon: <MenuIcon Icon={BlockIcon} />,
      label: `${blocked ? 'Unblock' : 'Block'} ${user.username}`,
      action: () =>
        blocked
          ? unblock({
              id: user.id,
              entity: ContentPreferenceType.User,