ComposeForm: convert some buttons into TSX

app/soapbox/features/compose/components/markdown_button.js

@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ComposeFormButton from './compose_form_button';
-
-const messages = defineMessages({
-  marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
-  unmarked: { id: 'compose_form.markdown.unmarked', defaultMessage: 'Post markdown disabled' },
-});
-
-export default @injectIntl
-class MarkdownButton extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render() {
-    const { intl, active } = this.props;
-
-    return (
-      <ComposeFormButton
-        icon={require('@tabler/icons/icons/markdown.svg')}
-        title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
-        active={active}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ComposeFormButton from './compose_form_button';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
+  unmarked: { id: 'compose_form.markdown.unmarked', defaultMessage: 'Post markdown disabled' },
+});
+
+interface IMarkdownButton {
+  active?: boolean,
+  onClick: () => void,
+}
+
+const MarkdownButton: React.FC<IMarkdownButton> = ({ active, onClick }) => {
+  const intl = useIntl();
+
+  return (
+    <ComposeFormButton
+      icon={require('@tabler/icons/icons/markdown.svg')}
+      title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+      active={active}
+      onClick={onClick}
+    />
+  );
+
+};
+
+export default MarkdownButton;

app/soapbox/features/compose/components/poll_button.js

@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ComposeFormButton from './compose_form_button';
-
-const messages = defineMessages({
-  add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
-  remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
-});
-
-export default
-@injectIntl
-class PollButton extends React.PureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render() {
-    const { intl, active, unavailable, disabled } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    return (
-      <ComposeFormButton
-        icon={require('@tabler/icons/icons/chart-bar.svg')}
-        title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
-        active={active}
-        disabled={disabled}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ComposeFormButton from './compose_form_button';
+
+const messages = defineMessages({
+  add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
+  remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
+});
+
+interface IPollButton {
+  disabled?: boolean,
+  unavailable?: boolean,
+  active?: boolean,
+  onClick: () => void,
+}
+
+const PollButton: React.FC<IPollButton> = ({ active, unavailable, disabled, onClick }) => {
+  const intl = useIntl();
+
+  if (unavailable) {
+    return null;
+  }
+
+  return (
+    <ComposeFormButton
+      icon={require('@tabler/icons/icons/chart-bar.svg')}
+      title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
+      active={active}
+      disabled={disabled}
+      onClick={onClick}
+    />
+  );
+};
+
+export default PollButton;

app/soapbox/features/compose/components/spoiler_button.js

@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ComposeFormButton from './compose_form_button';
-
-const messages = defineMessages({
-  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
-  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
-});
-
-export default @injectIntl
-class SpoilerButton extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render() {
-    const { intl, active } = this.props;
-
-    return (
-      <ComposeFormButton
-        icon={require('@tabler/icons/icons/alert-triangle.svg')}
-        title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
-        active={active}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ComposeFormButton from './compose_form_button';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
+  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
+});
+
+interface ISpoilerButton {
+  active?: boolean,
+  onClick: () => void,
+}
+
+const SpoilerButton: React.FC<ISpoilerButton> = ({ active, onClick }) => {
+  const intl = useIntl();
+
+  return (
+    <ComposeFormButton
+      icon={require('@tabler/icons/icons/alert-triangle.svg')}
+      title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+      active={active}
+      onClick={onClick}
+    />
+  );
+};
+
+export default SpoilerButton;

app/soapbox/features/compose/containers/markdown_button_container.js

@@ -12,7 +12,10 @@ const mapStateToProps = (state, { intl }) => {
 const mapDispatchToProps = dispatch => ({
 
   onClick() {
-    dispatch(changeComposeContentType(this.active ? 'text/plain' : 'text/markdown'));
+    dispatch((_, getState) => {
+      const active = getState().getIn(['compose', 'content_type']) === 'text/markdown';
+      dispatch(changeComposeContentType(active ? 'text/plain' : 'text/markdown'));
+    });
   },
 
 });