[Glitch] Convert <Button> to Typescript

Port 9d45a444f9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/ui/components/block_modal.jsx

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { blockAccount } from '../../../actions/accounts';
 import { closeModal } from '../../../actions/modal';
 import { initReport } from '../../../actions/reports';
-import Button from '../../../components/button';
+import { Button } from '../../../components/button';
 import { makeGetAccount } from '../../../selectors';
 
 
@@ -52,10 +52,6 @@ class BlockModal extends PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  componentDidMount() {
-    this.button.focus();
-  }
-
   handleClick = () => {
     this.props.onClose();
     this.props.onConfirm(this.props.account);
@@ -70,10 +66,6 @@ class BlockModal extends PureComponent {
     this.props.onClose();
   };
 
-  setRef = (c) => {
-    this.button = c;
-  };
-
   render () {
     const { account } = this.props;
 
@@ -96,7 +88,7 @@ class BlockModal extends PureComponent {
           <Button onClick={this.handleSecondary} className='confirmation-modal__secondary-button'>
             <FormattedMessage id='confirmations.block.block_and_report' defaultMessage='Block & Report' />
           </Button>
-          <Button onClick={this.handleClick} ref={this.setRef}>
+          <Button onClick={this.handleClick} autoFocus>
             <FormattedMessage id='confirmations.block.confirm' defaultMessage='Block' />
           </Button>
         </div>

app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx

@@ -12,7 +12,7 @@ import { connect } from 'react-redux';
 import { changeBoostPrivacy } from 'flavours/glitch/actions/boosts';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { Avatar } from 'flavours/glitch/components/avatar';
-import Button from 'flavours/glitch/components/button';
+import { Button } from 'flavours/glitch/components/button';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { Icon } from 'flavours/glitch/components/icon';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
@@ -50,10 +50,6 @@ class BoostModal extends ImmutablePureComponent {
     ...WithRouterPropTypes,
   };
 
-  componentDidMount() {
-    this.button.focus();
-  }
-
   handleReblog = () => {
     this.props.onReblog(this.props.status, this.props.privacy);
     this.props.onClose();
@@ -71,10 +67,6 @@ class BoostModal extends ImmutablePureComponent {
     return document.getElementsByClassName('modal-root__container')[0];
   };
 
-  setRef = (c) => {
-    this.button = c;
-  };
-
   render () {
     const { status, missingMediaDescription, privacy, intl } = this.props;
     const buttonText = status.get('reblogged') ? messages.cancel_reblog : messages.reblog;
@@ -127,7 +119,7 @@ class BoostModal extends ImmutablePureComponent {
               onChange={this.props.onChangeBoostPrivacy}
             />
           )}
-          <Button text={intl.formatMessage(buttonText)} onClick={this.handleReblog} ref={this.setRef} />
+          <Button text={intl.formatMessage(buttonText)} onClick={this.handleReblog} autoFocus />
         </div>
       </div>
     );

app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
-import Button from 'flavours/glitch/components/button';
+import { Button } from 'flavours/glitch/components/button';
 import Column from 'flavours/glitch/components/column';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
 

app/javascript/flavours/glitch/features/ui/components/confirmation_modal.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { injectIntl, FormattedMessage } from 'react-intl';
 
-import Button from 'flavours/glitch/components/button';
+import { Button } from 'flavours/glitch/components/button';
 
 class ConfirmationModal extends PureComponent {
 
@@ -23,10 +23,6 @@ class ConfirmationModal extends PureComponent {
     closeWhenConfirm: true,
   };
 
-  componentDidMount() {
-    this.button.focus();
-  }
-
   handleClick = () => {
     if (this.props.closeWhenConfirm) {
       this.props.onClose();
@@ -46,10 +42,6 @@ class ConfirmationModal extends PureComponent {
     this.props.onClose();
   };
 
-  setRef = (c) => {
-    this.button = c;
-  };
-
   setDoNotAskRef = (c) => {
     this.doNotAskCheckbox = c;
   };
@@ -79,7 +71,7 @@ class ConfirmationModal extends PureComponent {
             {secondary !== undefined && (
               <Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
             )}
-            <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
+            <Button text={confirm} onClick={this.handleClick} autoFocus />
           </div>
         </div>
       </div>

app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import Button from 'flavours/glitch/components/button';
+import { Button } from 'flavours/glitch/components/button';
 import { Icon } from 'flavours/glitch/components/icon';
 import illustration from 'flavours/glitch/images/logo_warn_glitch.svg';
 import { preferenceLink } from 'flavours/glitch/utils/backend_links';
@@ -25,19 +25,11 @@ class DeprecatedSettingsModal extends PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  componentDidMount() {
-    this.button.focus();
-  }
-
   handleClick = () => {
     this.props.onConfirm();
     this.props.onClose();
   };
 
-  setRef = (c) => {
-    this.button = c;
-  };
-
   render () {
     const { settings, intl } = this.props;
 
@@ -78,7 +70,7 @@ class DeprecatedSettingsModal extends PureComponent {
         <div>
           <div className='confirmation-modal__action-bar'>
             <div />
-            <Button text={intl.formatMessage(messages.discardChanges)} onClick={this.handleClick} ref={this.setRef} />
+            <Button text={intl.formatMessage(messages.discardChanges)} onClick={this.handleClick} autoFocus />
           </div>
         </div>
       </div>

app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx

@@ -10,7 +10,7 @@ import Atrament from 'atrament'; // the doodling library
 import { debounce, mapValues } from 'lodash';
 
 import { doodleSet, uploadCompose } from 'flavours/glitch/actions/compose';
-import Button from 'flavours/glitch/components/button';
+import { Button } from 'flavours/glitch/components/button';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 // palette nicked from MyPaint, CC0
 const palette = [

app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx

@@ -10,7 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { Avatar } from 'flavours/glitch/components/avatar';
-import Button from 'flavours/glitch/components/button';
+import { Button } from 'flavours/glitch/components/button';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { Icon } from 'flavours/glitch/components/icon';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
@@ -32,10 +32,6 @@ class FavouriteModal extends ImmutablePureComponent {
     ...WithRouterPropTypes,
   };
 
-  componentDidMount() {
-    this.button.focus();
-  }
-
   handleFavourite = () => {
     this.props.onFavourite(this.props.status);
     this.props.onClose();
@@ -49,10 +45,6 @@ class FavouriteModal extends ImmutablePureComponent {
     }
   };
 
-  setRef = (c) => {
-    this.button = c;
-  };
-
   render () {
     const { status, intl } = this.props;
 
@@ -91,7 +83,7 @@ class FavouriteModal extends ImmutablePureComponent {
 
         <div className='boost-modal__action-bar'>
           <div><FormattedMessage id='favourite_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='star' /></span> }} /></div>
-          <Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} ref={this.setRef} />
+          <Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} autoFocus />
         </div>
       </div>
     );

app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx

@@ -16,7 +16,7 @@ import tesseractWorkerPath from 'tesseract.js/dist/worker.min.js';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import tesseractCorePath from 'tesseract.js-core/tesseract-core.wasm.js';
 
-import Button from 'flavours/glitch/components/button';
+import { Button } from 'flavours/glitch/components/button';
 import { GIFV } from 'flavours/glitch/components/gifv';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import Audio from 'flavours/glitch/features/audio';

app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx

@@ -10,7 +10,7 @@ import Toggle from 'react-toggle';
 import { muteAccount } from 'flavours/glitch/actions/accounts';
 import { closeModal } from 'flavours/glitch/actions/modal';
 import { toggleHideNotifications, changeMuteDuration } from 'flavours/glitch/actions/mutes';
-import Button from 'flavours/glitch/components/button';
+import { Button } from 'flavours/glitch/components/button';
 
 const messages = defineMessages({
   minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
@@ -63,10 +63,6 @@ class MuteModal extends PureComponent {
     onChangeMuteDuration: PropTypes.func.isRequired,
   };
 
-  componentDidMount() {
-    this.button.focus();
-  }
-
   handleClick = () => {
     this.props.onClose();
     this.props.onConfirm(this.props.account, this.props.notifications, this.props.muteDuration);
@@ -76,10 +72,6 @@ class MuteModal extends PureComponent {
     this.props.onClose();
   };
 
-  setRef = (c) => {
-    this.button = c;
-  };
-
   toggleNotifications = () => {
     this.props.onToggleNotifications();
   };
@@ -134,7 +126,7 @@ class MuteModal extends PureComponent {
           <Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
           </Button>
-          <Button onClick={this.handleClick} ref={this.setRef}>
+          <Button onClick={this.handleClick} autoFocus>
             <FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />
           </Button>
         </div>