Extend Account component

2022-07-01 16:07:01 -04:00 · 2022-07-01 16:07:01 -04:00 · f148cda74a
commit f148cda74a
parent bf20f8dff8
11 changed files with 60 additions and 40 deletions
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@ -9,7 +9,7 @@ import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';

 import RelativeTimestamp from './relative_timestamp';
-import { Avatar, Emoji, HStack, Icon, IconButton, Text } from './ui';
+import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';

 import type { Account as AccountEntity } from 'soapbox/types/entities';

@ -57,7 +57,9 @@ interface IAccount {
  timestamp?: string | Date,
  timestampUrl?: string,
  futureTimestamp?: boolean,
+  withAccountNote?: boolean,
  withDate?: boolean,
+  withLinkToProfile?: boolean,
  withRelationship?: boolean,
  showEdit?: boolean,
  emoji?: string,
@ -78,7 +80,9 @@ const Account = ({
  timestamp,
  timestampUrl,
  futureTimestamp = false,
+  withAccountNote = false,
  withDate = false,
+  withLinkToProfile = true,
  withRelationship = true,
  showEdit = false,
  emoji,
@ -154,12 +158,12 @@ const Account = ({

  if (withDate) timestamp = account.created_at;

-  const LinkEl: any = showProfileHoverCard ? Link : 'div';
+  const LinkEl: any = withLinkToProfile ? Link : 'div';

  return (
    <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
      <HStack alignItems={actionAlignment} justifyContent='between'>
-        <HStack alignItems='center' space={3}>
+        <HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
          <ProfilePopper
            condition={showProfileHoverCard}
            wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
@ -202,35 +206,45 @@ const Account = ({
              </LinkEl>
            </ProfilePopper>

-            <HStack alignItems='center' space={1} style={style}>
-              <Text theme='muted' size='sm' truncate>@{username}</Text>
+            <Stack space={withAccountNote ? 1 : 0}>
+              <HStack alignItems='center' space={1} style={style}>
+                <Text theme='muted' size='sm' truncate>@{username}</Text>

-              {account.favicon && (
-                <InstanceFavicon account={account} />
-              )}
+                {account.favicon && (
+                  <InstanceFavicon account={account} />
+                )}

-              {(timestamp) ? (
-                <>
-                  <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                {(timestamp) ? (
+                  <>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>

-                  {timestampUrl ? (
-                    <Link to={timestampUrl} className='hover:underline'>
+                    {timestampUrl ? (
+                      <Link to={timestampUrl} className='hover:underline'>
+                        <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
+                      </Link>
+                    ) : (
                      <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
-                    </Link>
-                  ) : (
-                    <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
-                  )}
-                </>
-              ) : null}
+                    )}
+                  </>
+                ) : null}

-              {showEdit ? (
-                <>
-                  <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                {showEdit ? (
+                  <>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>

-                  <Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/icons/pencil.svg')} />
-                </>
-              ) : null}
-            </HStack>
+                    <Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/icons/pencil.svg')} />
+                  </>
+                ) : null}
+              </HStack>
+
+              {withAccountNote && (
+                <Text
+                  size='sm'
+                  dangerouslySetInnerHTML={{ __html: account.note_emojified }}
+                  className='mr-2'
+                />
+              )}
+            </Stack>
          </div>
        </HStack>

--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@ -137,6 +137,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
        timestamp={status.created_at}
        withRelationship={false}
        showProfileHoverCard={!compose}
+        withLinkToProfile={false}
      />

      {renderReplyMentions()}
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@ -34,6 +34,12 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
  const [scrolled, setScrolled] = useState<boolean>(false);
  const autoload = settings.get('autoloadTimelines') === true;

+  const visible = count > 0 && scrolled;
+
+  const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
+    'hidden': !visible,
+  });
+
  const getScrollTop = (): number => {
    return (document.scrollingElement || document.documentElement).scrollTop;
  };
@ -75,12 +81,6 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
    maybeUnload();
  }, [count]);

-  const visible = count > 0 && scrolled;
-
-  const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
-    'hidden': !visible,
-  });
-
  return (
    <div className={classes}>
      <a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={handleClick}>
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@ -84,7 +84,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
  const getAccount = makeGetAccount();
  const instance = useAppSelector((state) => state.instance);
  const me = useAppSelector((state) => state.me);
-  const account = useAppSelector((state) =>  me ? getAccount(state, me) : null);
+  const account = useAppSelector((state) => me ? getAccount(state, me) : null);
  const otherAccounts: ImmutableList<AccountEntity> = useAppSelector((state) => getOtherAccounts(state));
  const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen);
  const settings = useAppSelector((state) => getSettings(state));
@ -121,7 +121,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
  const renderAccount = (account: AccountEntity) => (
    <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
      <div className='pointer-events-none'>
-        <Account account={account} showProfileHoverCard={false} withRelationship={false} />
+        <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
      </div>
    </a>
  );
@ -166,7 +166,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {

              <Stack space={1}>
                <Link to={`/@${account.acct}`} onClick={onClose}>
-                  <Account account={account} showProfileHoverCard={false} />
+                  <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
                </Link>

                <Stack>
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@ -134,11 +134,11 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
    this.didShowCard = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
  }

-  getSnapshotBeforeUpdate(): ScrollPosition | undefined {
+  getSnapshotBeforeUpdate(): ScrollPosition | null {
    if (this.props.getScrollPosition) {
-      return this.props.getScrollPosition();
+      return this.props.getScrollPosition() || null;
    } else {
-      return undefined;
+      return null;
    }
  }

@ -483,6 +483,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
                hideActions={!reblogElement}
                showEdit={!!status.edited_at}
                showProfileHoverCard={this.props.hoverable}
+                withLinkToProfile={this.props.hoverable}
              />
            </div>

--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';

-type SIZES = 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
+type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10

 const spaces = {
  '0.5': 'space-y-0.5',
--- a/app/soapbox/features/compose/components/reply_indicator.tsx
+++ b/app/soapbox/features/compose/components/reply_indicator.tsx
@ -39,6 +39,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
        id={status.getIn(['account', 'id']) as string}
        timestamp={status.created_at}
        showProfileHoverCard={false}
+        withLinkToProfile={false}
      />

      <Text
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@ -45,6 +45,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
                // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
                id={suggestion.account}
                showProfileHoverCard={false}
+                withLinkToProfile={false}
              />
            </div>
          ))}
--- a/app/soapbox/features/ui/components/actions_modal.tsx
+++ b/app/soapbox/features/ui/components/actions_modal.tsx
@ -60,6 +60,7 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
                key={status.account as string}
                id={status.account as string}
                showProfileHoverCard={false}
+                withLinkToProfile={false}
                timestamp={status.created_at}
              />
              <StatusContent status={status} />
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@ -49,6 +49,7 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
      <AccountContainer
        id={status.account as any}
        showProfileHoverCard={false}
+        withLinkToProfile={false}
        timestamp={status.created_at}
        hideActions
      />
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/app/soapbox/features/ui/components/profile-dropdown.tsx
@ -58,7 +58,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {

  const renderAccount = (account: AccountEntity) => {
    return (
-      <Account account={account} showProfileHoverCard={false} hideActions />
+      <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} hideActions />
    );
  };