Merge branch 'next' into 'next'

next

See merge request soapbox-pub/soapbox-fe!1160

app/soapbox/actions/trending_statuses.js

@@ -1,3 +1,5 @@
+import { getFeatures } from 'soapbox/utils/features';
+
 import api from '../api';
 
 import { importFetchedStatuses } from './importer';
@@ -8,8 +10,13 @@ export const TRENDING_STATUSES_FETCH_FAIL    = 'TRENDING_STATUSES_FETCH_FAIL';
 
 export function fetchTrendingStatuses() {
   return (dispatch, getState) => {
+    const state = getState();
+
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
+
     dispatch({ type: TRENDING_STATUSES_FETCH_REQUEST });
-    return api(getState).get('/api/v1/truth/trending/truths').then(({ data: statuses }) => {
+    return api(getState).get(features.trendingTruths ? '/api/v1/truth/trending/truths' : '/api/v1/trends/statuses').then(({ data: statuses }) => {
       dispatch(importFetchedStatuses(statuses));
       dispatch({ type: TRENDING_STATUSES_FETCH_SUCCESS, statuses });
       return statuses;

app/soapbox/components/account.tsx

@@ -30,9 +30,10 @@ interface IAccount {
   avatarSize?: number,
   hidden?: boolean,
   hideActions?: boolean,
+  id?: string,
   onActionClick?: (account: any) => void,
   showProfileHoverCard?: boolean,
-  timestamp?: string,
+  timestamp?: string | Date,
   timestampUrl?: string,
   withRelationship?: boolean,
 }

app/soapbox/components/ui/stack/stack.tsx

@@ -21,7 +21,7 @@ const alignItemsOptions = {
   center: 'items-center',
 };
 
-interface IStack {
+interface IStack extends React.HTMLAttributes<HTMLDivElement  > {
   space?: SIZES,
   alignItems?: 'center',
   justifyContent?: 'center',

app/soapbox/features/admin/awaiting_approval.js

@@ -47,7 +47,7 @@ class AwaitingApproval extends ImmutablePureComponent {
     const showLoading = isLoading && accountIds.count() === 0;
 
     return (
-      <Column icon='user' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='user' label={intl.formatMessage(messages.heading)}>
         <ScrollableList
           isLoading={isLoading}
           showLoading={showLoading}

app/soapbox/features/admin/index.js

@@ -84,7 +84,7 @@ class Dashboard extends ImmutablePureComponent {
     if (!account) return null;
 
     return (
-      <Column icon='tachometer-alt' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='tachometer-alt' label={intl.formatMessage(messages.heading)}>
         <div className='dashcounters'>
           {mau && <div className='dashcounter'>
             <div>

app/soapbox/features/admin/moderation_log.js

@@ -62,7 +62,7 @@ class ModerationLog extends ImmutablePureComponent {
     const showLoading = isLoading && items.count() === 0;
 
     return (
-      <Column icon='balance-scale' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='balance-scale' label={intl.formatMessage(messages.heading)}>
         <ScrollableList
           isLoading={isLoading}
           showLoading={showLoading}

app/soapbox/features/admin/reports.js

@@ -64,7 +64,7 @@ class Reports extends ImmutablePureComponent {
     const showLoading = isLoading && reports.count() === 0;
 
     return (
-      <Column icon='gavel' heading={intl.formatMessage(messages.heading)} menu={this.makeColumnMenu()}>
+      <Column icon='gavel' label={intl.formatMessage(messages.heading)} menu={this.makeColumnMenu()}>
         <ScrollableList
           isLoading={isLoading}
           showLoading={showLoading}

app/soapbox/features/admin/user_index.js

@@ -102,7 +102,7 @@ class UserIndex extends ImmutablePureComponent {
     const showLoading = isLoading && accountIds.isEmpty();
 
     return (
-      <Column heading={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)}>
         <SimpleForm style={{ paddingBottom: 0 }}>
           <TextInput
             onChange={this.handleQueryChange}

app/soapbox/features/aliases/index.js

@@ -70,7 +70,7 @@ class Aliases extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.aliases' defaultMessage="You haven't created any account alias yet." />;
 
     return (
-      <Column className='aliases-settings-panel' icon='suitcase' heading={intl.formatMessage(messages.heading)}>
+      <Column className='aliases-settings-panel' icon='suitcase' label={intl.formatMessage(messages.heading)}>
         <ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} />
         <Search />
         {

app/soapbox/features/backups/index.js

@@ -70,7 +70,7 @@ class Backups extends ImmutablePureComponent {
     );
 
     return (
-      <Column icon='cloud-download' heading={intl.formatMessage(messages.heading)} menu={this.makeColumnMenu()}>
+      <Column icon='cloud-download' label={intl.formatMessage(messages.heading)} menu={this.makeColumnMenu()}>
         <ScrollableList
           isLoading={isLoading}
           showLoading={showLoading}

app/soapbox/features/directory/index.js

@@ -89,7 +89,7 @@ class Directory extends React.PureComponent {
     const { order, local }  = this.getParams(this.props, this.state);
 
     return (
-      <Column icon='address-book-o' heading={intl.formatMessage(messages.title)}>
+      <Column icon='address-book-o' label={intl.formatMessage(messages.title)}>
         <div className='directory__filter-form'>
           <div className='directory__filter-form__column' role='group'>
             <RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={this.handleChangeOrder} />

app/soapbox/features/domain_blocks/index.js

@@ -57,7 +57,7 @@ class Blocks extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no hidden domains yet.' />;
 
     return (
-      <Column icon='minus-circle' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='minus-circle' label={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='domain_blocks'
           onLoadMore={this.handleLoadMore}

app/soapbox/features/export_data/index.js

@@ -55,7 +55,7 @@ class ExportData extends ImmutablePureComponent {
     const { intl } = this.props;
 
     return (
-      <Column icon='cloud-download-alt' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='cloud-download-alt' label={intl.formatMessage(messages.heading)}>
         <CSVExporter action={exportFollows} messages={followMessages} />
         <CSVExporter action={exportBlocks} messages={blockMessages} />
         <CSVExporter action={exportMutes} messages={muteMessages} />

app/soapbox/features/federation_restrictions/index.js

@@ -53,7 +53,7 @@ class FederationRestrictions extends ImmutablePureComponent {
     const emptyMessage = disclosed ? messages.emptyMessage : messages.notDisclosed;
 
     return (
-      <Column icon='gavel' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='gavel' label={intl.formatMessage(messages.heading)}>
         <div className='explanation-box'>
           <Accordion
             headline={intl.formatMessage(messages.boxTitle)}

app/soapbox/features/filters/index.js

@@ -135,7 +135,7 @@ class Filters extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.filters' defaultMessage="You haven't created any muted words yet." />;
 
     return (
-      <Column className='filter-settings-panel' icon='filter' heading={intl.formatMessage(messages.heading)}>
+      <Column className='filter-settings-panel' icon='filter' label={intl.formatMessage(messages.heading)}>
         <ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} />
         <SimpleForm>
           <div className='filter-settings-panel'>

app/soapbox/features/follow_requests/index.js

@@ -57,7 +57,7 @@ class FollowRequests extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />;
 
     return (
-      <Column icon='user-plus' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='user-plus' labellabel={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='follow_requests'
           onLoadMore={this.handleLoadMore}

app/soapbox/features/import_data/index.js

@@ -55,7 +55,7 @@ class ImportData extends ImmutablePureComponent {
     const { intl, features } = this.props;
 
     return (
-      <Column icon='cloud-upload-alt' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='cloud-upload-alt' label={intl.formatMessage(messages.heading)}>
         <CSVImporter action={importFollows} messages={followMessages} />
         <CSVImporter action={importBlocks} messages={blockMessages} />
         {features.importMutes && <CSVImporter action={importMutes} messages={muteMessages} />}

app/soapbox/features/lists/index.js

@@ -63,7 +63,7 @@ class Lists extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
 
     return (
-      <Column icon='list-ul' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
         <br />
         <ColumnSubheading text={intl.formatMessage(messages.add)} />
         <NewListForm />

app/soapbox/features/migration/index.js

@@ -62,7 +62,7 @@ class Migration extends ImmutablePureComponent {
     const { intl } = this.props;
 
     return (
-      <Column heading={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)}>
         <SimpleForm onSubmit={this.handleSubmit}>
           <fieldset disabled={this.state.isLoading}>
             <FieldsGroup>

app/soapbox/features/pinned_statuses/index.js

@@ -52,7 +52,7 @@ class PinnedStatuses extends ImmutablePureComponent {
     }
 
     return (
-      <Column heading={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)}>
         <StatusList
           statusIds={statusIds}
           scrollKey='pinned_statuses'

app/soapbox/features/scheduled_statuses/index.js

@@ -50,7 +50,7 @@ class ScheduledStatuses extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.scheduled_statuses' defaultMessage="You don't have any scheduled statuses yet. When you add one, it will show up here." />;
 
     return (
-      <Column icon='calendar' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='calendar' label={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='scheduled_statuses'
           emptyMessage={emptyMessage}

app/soapbox/features/server_info/index.js

@@ -28,7 +28,7 @@ class ServerInfo extends ImmutablePureComponent {
     const { intl, instance } = this.props;
 
     return (
-      <Column icon='info' heading={intl.formatMessage(messages.heading)}>
+      <Column icon='info' label={intl.formatMessage(messages.heading)}>
         <div className='info_column_area'>
           <div className='info__brand'>
             <div className='brand'>

app/soapbox/features/status/components/quoted_status.js

@@ -1,162 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { NavLink, withRouter } from 'react-router-dom';
-
-import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display_name';
-import IconButton from 'soapbox/components/icon_button';
-import RelativeTimestamp from 'soapbox/components/relative_timestamp';
-import { isRtl } from 'soapbox/rtl';
-
-const messages = defineMessages({
-  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
-});
-
-export default @injectIntl @withRouter
-class QuotedStatus extends ImmutablePureComponent {
-
-  static propTypes = {
-    status: ImmutablePropTypes.record,
-    onCancel: PropTypes.func,
-    intl: PropTypes.object.isRequired,
-    compose: PropTypes.bool,
-    history: PropTypes.object,
-  };
-
-  handleExpandClick = e => {
-    const { compose, status } = this.props;
-
-    if (!compose && e.button === 0) {
-      if (!this.props.history) {
-        return;
-      }
-
-      this.props.history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`);
-
-      e.preventDefault();
-    }
-  }
-
-  handleClose = e => {
-    this.props.onCancel();
-
-    e.preventDefault();
-  }
-
-  renderReplyMentions = () => {
-    const { status } = this.props;
-
-    if (!status.get('in_reply_to_id')) {
-      return null;
-    }
-
-    const to = status.get('mentions', []);
-
-    if (to.size === 0) {
-      if (status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
-        return (
-          <div className='reply-mentions'>
-            <FormattedMessage
-              id='reply_mentions.reply'
-              defaultMessage='Replying to {accounts}{more}'
-              values={{
-                accounts: `@${status.getIn(['account', 'username'])}`,
-                more: false,
-              }}
-            />
-          </div>
-        );
-      } else {
-        return (
-          <div className='reply-mentions'>
-            <FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
-          </div>
-        );
-      }
-    }
-
-    return (
-      <div className='reply-mentions'>
-        <FormattedMessage
-          id='reply_mentions.reply'
-          defaultMessage='Replying to {accounts}{more}'
-          values={{
-            accounts: to.slice(0, 2).map(account => `@${account.get('username')} `),
-            more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
-          }}
-        />
-      </div>
-    );
-  }
-
-  render() {
-    const { status, onCancel, intl, compose } = this.props;
-
-    if (!status) {
-      return null;
-    }
-
-    const content = { __html: status.get('contentHtml') };
-    const style   = {
-      direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr',
-    };
-
-    const displayName = (<>
-      <div className='quoted-status__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
-      <DisplayName account={status.get('account')} />
-    </>);
-
-    const quotedStatus = (
-      <div className='quoted-status' onClick={this.handleExpandClick} role='presentation'>
-        <div className='quoted-status__info'>
-          {onCancel
-            ? (
-              <div className='reply-indicator__cancel'>
-                <IconButton title={intl.formatMessage(messages.cancel)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleClose} inverted />
-              </div>
-            ) : (
-              <div className='quoted-status__relative-time'>
-                <RelativeTimestamp timestamp={status.get('created_at')} />
-              </div>
-            )}
-          {compose ? (
-            <div className='quoted-status__display-name'>
-              {displayName}
-            </div>
-          ) : (
-            <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='quoted-status__display-name'>
-              {displayName}
-            </NavLink>
-          )}
-        </div>
-
-        {this.renderReplyMentions()}
-
-        <div className='quoted-status__content' style={style} dangerouslySetInnerHTML={content} />
-
-        {status.get('media_attachments').size > 0 && (
-          <AttachmentThumbs
-            compact
-            media={status.get('media_attachments')}
-            sensitive={status.get('sensitive')}
-          />
-        )}
-      </div>
-    );
-
-    if (compose) {
-      return (
-        <div className='compose-form__quoted-status-wrapper'>
-          {quotedStatus}
-        </div>
-      );
-    }
-
-    return quotedStatus;
-  }
-
-}

app/soapbox/features/status/components/quoted_status.tsx

@@ -0,0 +1,155 @@
+import classNames from 'classnames';
+import { History } from 'history';
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl, FormattedMessage, IntlShape } from 'react-intl';
+import { withRouter } from 'react-router-dom';
+
+import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
+import { Stack, Text } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
+});
+
+interface IQuotedStatus {
+  status?: StatusEntity,
+  onCancel?: Function,
+  intl: IntlShape,
+  compose?: boolean,
+  history: History,
+}
+
+class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
+
+  handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const { compose, status } = this.props;
+
+    if (!status) return;
+
+    const account = status.account as AccountEntity;
+
+    if (!compose && e.button === 0) {
+      if (!this.props.history) {
+        return;
+      }
+
+      this.props.history.push(`/@${account.acct}/posts/${status.id}`);
+
+      e.preventDefault();
+    }
+  }
+
+  handleClose = () => {
+    if (this.props.onCancel) {
+      this.props.onCancel();
+    }
+  }
+
+  renderReplyMentions = () => {
+    const { status } = this.props;
+
+    if (!status?.in_reply_to_id) {
+      return null;
+    }
+
+    const account = status.account as AccountEntity;
+
+    const to = status.mentions || [];
+
+    if (to.size === 0) {
+      if (status.in_reply_to_account_id === account.id) {
+        return (
+          <div className='reply-mentions'>
+            <FormattedMessage
+              id='reply_mentions.reply'
+              defaultMessage='Replying to {accounts}{more}'
+              values={{
+                accounts: `@${account.username}`,
+                more: false,
+              }}
+            />
+          </div>
+        );
+      } else {
+        return (
+          <div className='reply-mentions'>
+            <FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
+          </div>
+        );
+      }
+    }
+
+    return (
+      <div className='reply-mentions'>
+        <FormattedMessage
+          id='reply_mentions.reply'
+          defaultMessage='Replying to {accounts}{more}'
+          values={{
+            accounts: to.slice(0, 2).map(account => `@${account.username} `),
+            more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
+          }}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const { status, onCancel, intl, compose } = this.props;
+
+    if (!status) {
+      return null;
+    }
+
+    const account = status.account as AccountEntity;
+
+    let actions = {};
+    if (onCancel) {
+      actions = {
+        onActionClick: this.handleClose,
+        actionIcon: require('@tabler/icons/icons/x.svg'),
+        actionAlignment: 'top',
+        actionTitle: intl.formatMessage(messages.cancel),
+      };
+    }
+
+    const quotedStatus = (
+      <Stack
+        space={2}
+        className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-slate-700 cursor-pointer', {
+          'hover:bg-gray-100 dark:hover:bg-slate-700': !compose,
+        })}
+        onClick={this.handleExpandClick}
+      >
+        <AccountContainer
+          {...actions}
+          id={account.id}
+          timestamp={status.created_at}
+          showProfileHoverCard={!compose}
+        />
+
+        {this.renderReplyMentions()}
+
+        <Text
+          size='sm'
+          dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+        />
+
+        {status.media_attachments.size > 0 && (
+          <AttachmentThumbs
+            compact
+            media={status.media_attachments}
+            sensitive={status.sensitive}
+          />
+        )}
+      </Stack>
+    );
+
+    return quotedStatus;
+  }
+
+}
+
+export default withRouter(injectIntl(QuotedStatus) as any);

app/soapbox/utils/features.ts

@@ -123,6 +123,8 @@ const getInstanceFeatures = (instance: Instance) => {
       v.software === MASTODON && gte(v.compatVersion, '3.2.0'),
       v.software === PLEROMA && gte(v.version, '2.4.50'),
     ]),
+    trendingTruths: v.software === TRUTHSOCIAL,
+    trendingStatuses: v.software === MASTODON && gte(v.compatVersion, '3.5.0'),
   };
 };