Merge commit '15fd712464' into kb_migration

app/javascript/mastodon/components/blurhash.jsx

@@ -20,9 +20,8 @@ import PropTypes from 'prop-types';
 
 /**
  * Component that is used to render blurred of blurhash string
- *
  * @param {BlurhashProps} param1 Props of the component
- * @returns Canvas which will render blurred region element to embed
+ * @returns {JSX.Element} Canvas which will render blurred region element to embed
  */
 function Blurhash({
   hash,

app/javascript/mastodon/components/common_counter.jsx

@@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl';
 
 /**
  * Returns custom renderer for one of the common counter types
- *
  * @param {"statuses" | "following" | "followers"} counterType
  * Type of the counter
  * @param {boolean} isBold Whether display number must be displayed in bold

app/javascript/mastodon/components/hashtag.jsx

@@ -37,7 +37,6 @@ class SilentErrorBoundary extends React.Component {
 
 /**
  * Used to render counter of how much people are talking about hashtag
- *
  * @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
  */
 export const accountsCountRenderer = (displayNumber, pluralReady) => (

app/javascript/mastodon/components/icon.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class Icon extends React.PureComponent {
-
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    fixedWidth: PropTypes.bool,
-  };
-
-  render () {
-    const { id, className, fixedWidth, ...other } = this.props;
-
-    return (
-      <i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
-    );
-  }
-
-}

app/javascript/mastodon/components/icon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+  id: string;
+  className?: string;
+  fixedWidth?: boolean;
+  children?: never;
+  [key: string]: any;
+}
+export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) =>
+  <i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />;
+
+export default Icon;

app/javascript/mastodon/components/icon_with_badge.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'mastodon/components/icon';
-
-const formatNumber = num => num > 40 ? '40+' : num;
-
-const IconWithBadge = ({ id, count, issueBadge, className }) => (
-  <i className='icon-with-badge'>
-    <Icon id={id} fixedWidth className={className} />
-    {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
-    {issueBadge && <i className='icon-with-badge__issue-badge' />}
-  </i>
-);
-
-IconWithBadge.propTypes = {
-  id: PropTypes.string.isRequired,
-  count: PropTypes.number.isRequired,
-  issueBadge: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-export default IconWithBadge;

app/javascript/mastodon/components/icon_with_badge.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Icon } from './icon';
+
+const formatNumber = (num: number): number | string => num > 40 ? '40+' : num;
+
+type Props = {
+  id: string;
+  count: number;
+  issueBadge: boolean;
+  className: string;
+}
+const IconWithBadge: React.FC<Props> = ({ id, count, issueBadge, className }) => (
+  <i className='icon-with-badge'>
+    <Icon id={id} fixedWidth className={className} />
+    {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
+    {issueBadge && <i className='icon-with-badge__issue-badge' />}
+  </i>
+);
+
+export default IconWithBadge;

app/javascript/mastodon/components/logo.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
+import logo from 'mastodon/../images/logo.svg';
 
-const Logo = () => (
-  <svg viewBox='0 0 261 66' className='logo' role='img'>
+export const WordmarkLogo = () => (
+  <svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>
     <title>Mastodon</title>
     <use xlinkHref='#logo-symbol-wordmark' />
   </svg>
 );
 
-export default Logo;
+export const SymbolLogo = () => (
+  <img src={logo} alt='Mastodon' className='logo logo--icon' />
+);
+
+export default WordmarkLogo;

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { injectIntl, defineMessages } from 'react-intl';
-import PropTypes from 'prop-types';
+import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
 
 const messages = defineMessages({
   today: { id: 'relative_time.today', defaultMessage: 'today' },
@@ -28,12 +27,12 @@ const dateFormatOptions = {
   day: '2-digit',
   hour: '2-digit',
   minute: '2-digit',
-};
+} as const;
 
 const shortDateFormatOptions = {
   month: 'short',
   day: 'numeric',
-};
+} as const;
 
 const SECOND = 1000;
 const MINUTE = 1000 * 60;
@@ -42,7 +41,7 @@ const DAY    = 1000 * 60 * 60 * 24;
 
 const MAX_DELAY = 2147483647;
 
-const selectUnits = delta => {
+const selectUnits = (delta: number) => {
   const absDelta = Math.abs(delta);
 
   if (absDelta < MINUTE) {
@@ -56,7 +55,7 @@ const selectUnits = delta => {
   return 'day';
 };
 
-const getUnitDelay = units => {
+const getUnitDelay = (units: string) => {
   switch (units) {
   case 'second':
     return SECOND;
@@ -71,7 +70,7 @@ const getUnitDelay = units => {
   }
 };
 
-export const timeAgoString = (intl, date, now, year, timeGiven, short) => {
+export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year: number, timeGiven: boolean, short?: boolean) => {
   const delta = now - date.getTime();
 
   let relativeTime;
@@ -99,7 +98,7 @@ export const timeAgoString = (intl, date, now, year, timeGiven, short) => {
   return relativeTime;
 };
 
-const timeRemainingString = (intl, date, now, timeGiven = true) => {
+const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGiven = true) => {
   const delta = date.getTime() - now;
 
   let relativeTime;
@@ -121,15 +120,17 @@ const timeRemainingString = (intl, date, now, timeGiven = true) => {
   return relativeTime;
 };
 
-class RelativeTimestamp extends React.Component {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    timestamp: PropTypes.string.isRequired,
-    year: PropTypes.number.isRequired,
-    futureDate: PropTypes.bool,
-    short: PropTypes.bool,
-  };
+type Props = {
+  intl: InjectedIntl;
+  timestamp: string;
+  year: number;
+  futureDate?: boolean;
+  short?: boolean;
+}
+type States = {
+  now: number;
+}
+class RelativeTimestamp extends React.Component<Props, States> {
 
   state = {
     now: this.props.intl.now(),
@@ -140,7 +141,9 @@ class RelativeTimestamp extends React.Component {
     short: true,
   };
 
-  shouldComponentUpdate (nextProps, nextState) {
+  _timer: number | undefined;
+
+  shouldComponentUpdate (nextProps: Props, nextState: States) {
     // As of right now the locale doesn't change without a new page load,
     // but we might as well check in case that ever changes.
     return this.props.timestamp !== nextProps.timestamp ||
@@ -148,7 +151,7 @@ class RelativeTimestamp extends React.Component {
       this.state.now !== nextState.now;
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps: Props) {
     if (this.props.timestamp !== nextProps.timestamp) {
       this.setState({ now: this.props.intl.now() });
     }
@@ -158,16 +161,16 @@ class RelativeTimestamp extends React.Component {
     this._scheduleNextUpdate(this.props, this.state);
   }
 
-  componentWillUpdate (nextProps, nextState) {
+  UNSAFE_componentWillUpdate (nextProps: Props, nextState: States) {
     this._scheduleNextUpdate(nextProps, nextState);
   }
 
   componentWillUnmount () {
-    clearTimeout(this._timer);
+    window.clearTimeout(this._timer);
   }
 
-  _scheduleNextUpdate (props, state) {
-    clearTimeout(this._timer);
+  _scheduleNextUpdate (props: Props, state: States) {
+    window.clearTimeout(this._timer);
 
     const { timestamp }  = props;
     const delta          = (new Date(timestamp)).getTime() - state.now;
@@ -176,7 +179,7 @@ class RelativeTimestamp extends React.Component {
     const updateInterval = 1000 * 10;
     const delay          = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
 
-    this._timer = setTimeout(() => {
+    this._timer = window.setTimeout(() => {
       this.setState({ now: this.props.intl.now() });
     }, delay);
   }

app/javascript/mastodon/components/short_number.jsx

@@ -24,7 +24,6 @@ import { FormattedMessage, FormattedNumber } from 'react-intl';
 
 /**
  * Component that renders short big number to a shorter version
- *
  * @param {ShortNumberProps} param0 Props for the component
  * @returns {JSX.Element} Rendered number
  */
@@ -58,7 +57,6 @@ ShortNumber.propTypes = {
 
 /**
  * Renders short number into corresponding localizable react fragment
- *
  * @param {ShortNumberCounterProps} param0 Props for the component
  * @returns {JSX.Element} FormattedMessage ready to be embedded in code
  */