Merge branch 'chats' into alex-chats

app/soapbox/features/compose/components/search.tsx

@@ -115,27 +115,34 @@ const Search = (props: ISearch) => {
   ];
 
   const hasValue = value.length > 0 || submitted;
-  const Component = autosuggest ? AutosuggestAccountInput : 'input';
+  const componentProps: any = {
+    className: 'block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm',
+    type: 'text',
+    id: 'search',
+    placeholder: intl.formatMessage(messages.placeholder),
+    value,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    autoFocus: autoFocus,
+  };
+
+  if (autosuggest) {
+    componentProps.onSelected = handleSelected;
+    componentProps.menu = makeMenu();
+    componentProps.autoSelect = false;
+  }
 
   return (
     <div className='w-full'>
       <label htmlFor='search' className='sr-only'>{intl.formatMessage(messages.placeholder)}</label>
 
       <div className='relative'>
-        <Component
-          className='block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm'
-          type='text'
-          id='search'
-          placeholder={intl.formatMessage(messages.placeholder)}
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onSelected={handleSelected}
-          autoFocus={autoFocus}
-          autoSelect={false}
-          menu={makeMenu()}
-        />
+        {autosuggest ? (
+          <AutosuggestAccountInput {...componentProps} />
+        ) : (
+          <input {...componentProps} />
+        )}
 
         <div
           role='button'

app/soapbox/features/directory/components/account_card.tsx

@@ -6,7 +6,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display-name';
 import Permalink from 'soapbox/components/permalink';
-import RelativeTimestamp from 'soapbox/components/relative_timestamp';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp';
 import { Text } from 'soapbox/components/ui';
 import ActionButton from 'soapbox/features/ui/components/action-button';
 import { useAppSelector } from 'soapbox/hooks';

app/soapbox/features/status/components/detailed-status.tsx

@@ -99,7 +99,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
 
         {quote}
 
-        <HStack justifyContent='between' alignItems='center' className='py-2'>
+        <HStack justifyContent='between' alignItems='center' className='py-2' wrap>
           <StatusInteractionBar status={actualStatus} />
 
           <HStack space={1} alignItems='center'>

app/soapbox/features/ui/components/bundle.tsx

@@ -1,21 +1,29 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 const emptyComponent = () => null;
 const noop = () => { };
 
-class Bundle extends React.PureComponent {
+interface BundleProps {
+  fetchComponent: () => Promise<any>,
+  loading: React.ComponentType,
+  error: React.ComponentType<{ onRetry: (props: BundleProps) => void }>,
+  children: (mod: any) => React.ReactNode,
+  renderDelay?: number,
+  onFetch: () => void,
+  onFetchSuccess: () => void,
+  onFetchFail: (error: any) => void,
+}
 
-  static propTypes = {
-    fetchComponent: PropTypes.func.isRequired,
-    loading: PropTypes.func,
-    error: PropTypes.func,
-    children: PropTypes.func.isRequired,
-    renderDelay: PropTypes.number,
-    onFetch: PropTypes.func,
-    onFetchSuccess: PropTypes.func,
-    onFetchFail: PropTypes.func,
-  }
+interface BundleState {
+  mod: any,
+  forceRender: boolean,
+}
+
+/** Fetches and renders an async component. */
+class Bundle extends React.PureComponent<BundleProps, BundleState> {
+
+  timeout: NodeJS.Timeout | undefined;
+  timestamp: Date | undefined;
 
   static defaultProps = {
     loading: emptyComponent,
@@ -37,7 +45,7 @@ class Bundle extends React.PureComponent {
     this.load(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: BundleProps) {
     if (nextProps.fetchComponent !== this.props.fetchComponent) {
       this.load(nextProps);
     }
@@ -49,7 +57,7 @@ class Bundle extends React.PureComponent {
     }
   }
 
-  load = (props) => {
+  load = (props: BundleProps) => {
     const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
     const cachedMod = Bundle.cache.get(fetchComponent);
 
@@ -88,10 +96,10 @@ class Bundle extends React.PureComponent {
   render() {
     const { loading: Loading, error: Error, children, renderDelay } = this.props;
     const { mod, forceRender } = this.state;
-    const elapsed = this.timestamp ? (new Date() - this.timestamp) : renderDelay;
+    const elapsed = this.timestamp ? ((new Date()).getTime() - this.timestamp.getTime()) : renderDelay!;
 
     if (mod === undefined) {
-      return (elapsed >= renderDelay || forceRender) ? <Loading /> : null;
+      return (elapsed >= renderDelay! || forceRender) ? <Loading /> : null;
     }
 
     if (mod === null) {

app/soapbox/features/ui/components/modals/report-modal/steps/other-actions-step.tsx

@@ -14,7 +14,7 @@ import { isRemote, getDomain } from 'soapbox/utils/accounts';
 import type { ReducerAccount } from 'soapbox/reducers/accounts';
 
 const messages = defineMessages({
-  addAdditionalStatuses: { id: 'report.otherActions.addAdditionl', defaultMessage: 'Would you like to add additional statuses to this report?' },
+  addAdditionalStatuses: { id: 'report.otherActions.addAdditional', defaultMessage: 'Would you like to add additional statuses to this report?' },
   addMore: { id: 'report.otherActions.addMore', defaultMessage: 'Add more' },
   furtherActions: { id: 'report.otherActions.furtherActions', defaultMessage: 'Further actions:' },
   hideAdditonalStatuses: { id: 'report.otherActions.hideAdditional', defaultMessage: 'Hide additional statuses' },

app/soapbox/features/ui/containers/bundle_container.tsx

@@ -3,14 +3,16 @@ import { connect } from 'react-redux';
 import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from '../../../actions/bundles';
 import Bundle from '../components/bundle';
 
-const mapDispatchToProps = dispatch => ({
+import type { AppDispatch } from 'soapbox/store';
+
+const mapDispatchToProps = (dispatch: AppDispatch) => ({
   onFetch() {
     dispatch(fetchBundleRequest());
   },
   onFetchSuccess() {
     dispatch(fetchBundleSuccess());
   },
-  onFetchFail(error) {
+  onFetchFail(error: any) {
     dispatch(fetchBundleFail(error));
   },
 });