TypeScript, FC

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/list.js

@@ -5,7 +5,6 @@ import { v4 as uuidv4 } from 'uuid';
 
 import Icon from './icon';
 
-
 const List = ({ children }) => (
   <div className='space-y-0.5'>{children}</div>
 );

app/soapbox/components/load_more.js

@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { Button } from 'soapbox/components/ui';
-
-export default class LoadMore extends React.PureComponent {
-
-  static propTypes = {
-    onClick: PropTypes.func,
-    disabled: PropTypes.bool,
-    visible: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    visible: true,
-  }
-
-  render() {
-    const { disabled, visible } = this.props;
-
-    if (!visible) {
-      return null;
-    }
-
-    return (
-      <Button theme='secondary' block disabled={disabled || !visible} onClick={this.props.onClick}>
-        <FormattedMessage id='status.load_more' defaultMessage='Load more' />
-      </Button>
-    );
-  }
-
-}

app/soapbox/components/load_more.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from 'soapbox/components/ui';
+
+interface ILoadMore {
+  onClick: () => void,
+  disabled?: boolean,
+  visible?: Boolean,
+}
+
+const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true }) => {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Button theme='secondary' block disabled={disabled || !visible} onClick={onClick}>
+      <FormattedMessage id='status.load_more' defaultMessage='Load more' />
+    </Button>
+  );
+};
+
+export default LoadMore;

app/soapbox/components/more_follows.js

@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { getFeatures } from 'soapbox/utils/features';
-
-const messages = defineMessages({
-  following: {
-    id: 'morefollows.following_label',
-    defaultMessage: '…and {count} more {count, plural, one {follow} other {follows}} on remote sites.',
-  },
-  followers: {
-    id: 'morefollows.followers_label',
-    defaultMessage: '…and {count} more {count, plural, one {follower} other {followers}} on remote sites.',
-  },
-});
-
-
-const mapStateToProps = state => {
-  const instance = state.get('instance');
-
-  return {
-    features: getFeatures(instance),
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class MoreFollows extends React.PureComponent {
-
-  static propTypes = {
-    visible: PropTypes.bool,
-    count: PropTypes.number,
-    type: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-    features: PropTypes.object.isRequired,
-  }
-
-  static defaultProps = {
-    visible: true,
-  }
-
-  getMessage = () => {
-    const { type, count, intl } = this.props;
-    return intl.formatMessage(messages[type], { count });
-  }
-
-  render() {
-    const { features } = this.props;
-
-    // If the instance isn't federating, there are no remote followers
-    if (!features.federating) {
-      return null;
-    }
-
-    return (
-      <div className='morefollows-indicator'>
-        <div>
-          <div className='morefollows-indicator__label' style={{ visibility: this.props.visible ? 'visible' : 'hidden' }}>
-            {this.getMessage()}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}

app/soapbox/components/more_follows.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useAppSelector } from 'soapbox/hooks';
+import { getFeatures } from 'soapbox/utils/features';
+
+const messages = defineMessages({
+  following: {
+    id: 'morefollows.following_label',
+    defaultMessage: '…and {count} more {count, plural, one {follow} other {follows}} on remote sites.',
+  },
+  followers: {
+    id: 'morefollows.followers_label',
+    defaultMessage: '…and {count} more {count, plural, one {follower} other {followers}} on remote sites.',
+  },
+});
+
+interface IMoreFollows {
+  visible?: Boolean,
+  count?: number,
+  type: 'following' | 'followers',
+}
+
+const MoreFollows: React.FC<IMoreFollows> = ({ visible = true, count, type }) => {
+  const intl = useIntl();
+  const features = useAppSelector((state) => getFeatures(state.instance));
+
+  const getMessage = () => {
+    return intl.formatMessage(messages[type], { count });
+  };
+
+
+  // If the instance isn't federating, there are no remote followers
+  if (!features.federating) {
+    return null;
+  }
+
+  return (
+    <div className='morefollows-indicator'>
+      <div>
+        <div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
+          {getMessage()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MoreFollows;

app/soapbox/components/progress_bar.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-
-export default class ProgressBar extends ImmutablePureComponent {
-
-  render() {
-    const { progress } = this.props;
-
-    return (
-      <div className='progress-bar'>
-        <div className='progress-bar__progress' style={{ width: `${Math.floor(progress*100)}%` }} />
-      </div>
-    );
-  }
-
-}

app/soapbox/components/progress_bar.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface IProgressBar {
+  progress: number,
+}
+
+const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
+  <div className='progress-bar'>
+    <div className='progress-bar__progress' style={{ width: `${Math.floor(progress*100)}%` }} />
+  </div>
+)
+
+export default ProgressBar;

app/soapbox/components/progress_circle.js

@@ -1,62 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default class ProgressCircle extends React.PureComponent {
-
-  static propTypes = {
-    progress: PropTypes.number.isRequired,
-    radius: PropTypes.number,
-    stroke: PropTypes.number,
-    title: PropTypes.string,
-  };
-
-  static defaultProps = {
-    radius: 12,
-    stroke: 4,
-  }
-
-  render() {
-    const { progress, radius, stroke, title } = this.props;
-
-    const progressStroke = stroke + 0.5;
-    const actualRadius = radius + progressStroke;
-    const circumference = 2 * Math.PI * radius;
-    const dashoffset = circumference * (1 - Math.min(progress, 1));
-
-    return (
-      <div title={title}>
-        <svg
-          width={actualRadius * 2}
-          height={actualRadius * 2}
-          viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
-        >
-          <circle
-            className='stroke-gray-400'
-            cx={actualRadius}
-            cy={actualRadius}
-            r={radius}
-            fill='none'
-            strokeWidth={stroke}
-          />
-          <circle
-            className={classNames('stroke-primary-800', {
-              'stroke-danger-600': progress > 1,
-            })}
-            style={{
-              strokeDashoffset: dashoffset,
-              strokeDasharray: circumference,
-            }}
-            cx={actualRadius}
-            cy={actualRadius}
-            r={radius}
-            fill='none'
-            strokeWidth={progressStroke}
-            strokeLinecap='round'
-          />
-        </svg>
-      </div>
-    );
-  }
-
-}

app/soapbox/components/progress_circle.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React from 'react';
+
+interface IProgressCircle {
+  progress: number,
+  radius?: number,
+  stroke?: number,
+  title?: string,
+}
+
+const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title }) => {
+  const progressStroke = stroke + 0.5;
+  const actualRadius = radius + progressStroke;
+  const circumference = 2 * Math.PI * radius;
+  const dashoffset = circumference * (1 - Math.min(progress, 1));
+
+  return (
+    <div title={title}>
+      <svg
+        width={actualRadius * 2}
+        height={actualRadius * 2}
+        viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
+      >
+        <circle
+          className='stroke-gray-400'
+          cx={actualRadius}
+          cy={actualRadius}
+          r={radius}
+          fill='none'
+          strokeWidth={stroke}
+        />
+        <circle
+          className={classNames('stroke-primary-800', {
+            'stroke-danger-600': progress > 1,
+          })}
+          style={{
+            strokeDashoffset: dashoffset,
+            strokeDasharray: circumference,
+          }}
+          cx={actualRadius}
+          cy={actualRadius}
+          r={radius}
+          fill='none'
+          strokeWidth={progressStroke}
+          strokeLinecap='round'
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default ProgressCircle;