fix linting errors

app/javascript/flavours/glitch/actions/compose.js

@@ -9,12 +9,14 @@ import { tagHistory } from 'flavours/glitch/settings';
 import { recoverHashtags } from 'flavours/glitch/utils/hashtag';
 import resizeImage from 'flavours/glitch/utils/resize_image';
 
+import { tex_to_unicode } from '../features/compose/util/autolatex/autolatex';
+
 import { showAlert, showAlertForError } from './alerts';
 import { useEmoji } from './emojis';
 import { importFetchedAccounts, importFetchedStatus } from './importer';
 import { openModal } from './modal';
 import { updateTimeline } from './timelines';
-import { tex_to_unicode } from '../features/compose/util/autolatex/autolatex.js';
+
 
 /** @type {AbortController | undefined} */
 let fetchComposeSuggestionsAccountsController;
@@ -570,7 +572,7 @@ const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, token) =>
 const fetchComposeSuggestionsLatex = (dispatch, getState, token) => {
   const start_delimiter = token.slice(0,2);
   const end_delimiter = {'\\(': '\\)', '\\[': '\\]'}[start_delimiter];
-  let expression = token.slice(2).replace(/\\[\)\]]?$/,'');
+  let expression = token.slice(2).replace(/\\[)\]]?$/,'');
   let brace = 0;
   for(let i=0;i<expression.length;i++) {
     switch(expression[i]) {

app/javascript/flavours/glitch/components/autosuggest_input.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -200,7 +200,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
       inner = <AutosuggestAccountContainer id={suggestion.id} />;
       key   = suggestion.id;
     } else if (suggestion.type === 'latex') {
-      inner = <AutosuggestLatex latex={suggestion}/>;
+      inner = <AutosuggestLatex latex={suggestion} />;
       key = 'latex' + suggestion.expression;
     }
 

app/javascript/flavours/glitch/components/autosuggest_latex.js → app/javascript/flavours/glitch/components/autosuggest_latex.jsx

@@ -1,7 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-
-const assetHost = process.env.CDN_HOST || '';
+import React from 'react';
 
 export default class AutosuggestLatex extends React.PureComponent {
 
@@ -15,6 +13,9 @@ export default class AutosuggestLatex extends React.PureComponent {
 
   componentDidMount() {
     try {
+      // Loaded in script tag on page. not great but we couldn't figure out
+      // How to use MathJax as a module
+      // eslint-disable-next-line no-undef
       MathJax.typeset([this.node]);
     } catch(e) {
       console.error(e);
@@ -28,7 +29,7 @@ export default class AutosuggestLatex extends React.PureComponent {
     return (
       <div className='autosuggest-latex' ref={this.setRef}>
         \({latex.expression}\)
-        <br/>
+        <br />
         <small>Convert to unicode</small>
       </div>
     );

app/javascript/flavours/glitch/components/autosuggest_textarea.jsx

@@ -18,9 +18,9 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
   let left;
   let right;
 
-  left = str.slice(0, caretPosition).search(/\\[\(\[](?:(?!\\[\)\]]).)*(?:\\[\)\]])?$/);
+  left = str.slice(0, caretPosition).search(/\\[([](?:(?!\\[)]]).)*(?:\\[)\]])?$/);
   if (left >= 0) {
-    right = str.slice(caretPosition).search(/\\[\)\]]/);
+    right = str.slice(caretPosition).search(/\\[)\]]/);
     if (right < 0) {
       word = str.slice(left);
     } else {
@@ -205,7 +205,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
       inner = <AutosuggestAccountContainer id={suggestion.id} />;
       key   = suggestion.id;
     } else if (suggestion.type === 'latex') {
-      inner = <AutosuggestLatex latex={suggestion}/>;
+      inner = <AutosuggestLatex latex={suggestion} />;
       key = suggestion.expression;
     }
 

app/javascript/flavours/glitch/components/status_content.jsx

@@ -8,12 +8,11 @@ import classnames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
-import StatusExpandButton from './status_expand_button';
 
 import Permalink from './permalink';
+import StatusExpandButton from './status_expand_button';
 
 const textMatchesTarget = (text, origin, host) => {
   return (text === origin || text === host
@@ -239,11 +238,14 @@ class StatusContent extends PureComponent {
   _renderMathJax() {
     const {status} = this.props;
     const contentHtml = status.get('contentHtml');
-    if(this.last_contentHtml == contentHtml) {
+    if(this.last_contentHtml === contentHtml) {
       return;
     }
     this.last_contentHtml = contentHtml;
     try {
+      // Loaded in script tag on page. not great but we couldn't figure out
+      // How to use MathJax as a module
+      // eslint-disable-next-line no-undef
       MathJax.typeset([this.contentsNode]);
     } catch(e) {
       console.error(e);

app/javascript/flavours/glitch/components/status_expand_button.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Icon } from './icon';
+
+const makeToggleText = (hidden, mediaIcons) => {
+  let newText;
+  if (hidden) {
+    newText = [
+      <FormattedMessage
+        id='status.show_more'
+        defaultMessage='Show more'
+        key='0'
+      />,
+    ];
+    if (mediaIcons) {
+      mediaIcons.forEach((mediaIcon, idx) => {
+        newText.push(
+          <Icon
+            fixedWidth
+            className='status__content__spoiler-icon'
+            id={mediaIcon}
+            aria-hidden='true'
+            key={`icon-${idx}`}
+          />,
+        );
+      });
+    }
+  } else {
+    newText = (
+      <FormattedMessage
+        id='status.show_less'
+        defaultMessage='Show less'
+        key='0'
+      />
+    );
+  }
+  return(newText);
+};
+
+const StatusExpandButton=(
+  {
+    hidden,
+    handleSpoilerClick,
+    mediaIcons,
+  },
+) => {
+  const [toggleText, setToggleText] = useState(makeToggleText(hidden, mediaIcons));
+
+  // Change the text when the hidden state changes
+  useEffect(() => {
+    let text = makeToggleText(hidden, mediaIcons);
+    setToggleText(text);
+  }, [hidden, mediaIcons]);
+
+  return(
+    <button type='button' className='status__content__spoiler-link' onClick={handleSpoilerClick} aria-expanded={!hidden}>
+      {toggleText}
+    </button>
+  );
+};
+
+StatusExpandButton.propTypes = {
+  hidden: PropTypes.bool,
+  handleSpoilerClick: PropTypes.func,
+  mediaIcons: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default StatusExpandButton;

app/javascript/flavours/glitch/features/compose/components/compose_form.jsx

@@ -13,8 +13,8 @@ import { isMobile } from 'flavours/glitch/is_mobile';
 import AutosuggestInput from '../../../components/autosuggest_input';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
 import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
-import OptionsContainer from '../containers/options_container';
 import LaTeXDropdown from '../containers/latex_dropdown_container';
+import OptionsContainer from '../containers/options_container';
 import PollFormContainer from '../containers/poll_form_container';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
 import UploadFormContainer from '../containers/upload_form_container';

app/javascript/flavours/glitch/features/compose/containers/latex_dropdown_container.js

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
-import LaTeXDropdown from '../components/latex_dropdown';
-import { startLaTeXCompose } from '../../../actions/compose';
+
 import { openModal, closeModal } from '../../../actions/modal';
 import { isUserTouching } from '../../../is_mobile';
+import LaTeXDropdown from '../components/latex_dropdown';
 
 const mapStateToProps = state => ({
   value: state.getIn(['compose', 'startlatex']),