Fix some more Javascript linting issues and discrepancies with upstream (#2209)

* Fix typo in flavours/glitch/features/video/index.js

* Fix various linting issues and discrepancies with upstream

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

@@ -9,6 +9,7 @@ export default class AvatarComposite extends React.PureComponent {
     accounts: ImmutablePropTypes.list.isRequired,
     animate: PropTypes.bool,
     size: PropTypes.number.isRequired,
+    onAccountClick: PropTypes.func.isRequired,
   };
 
   static defaultProps = {

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

@@ -14,6 +14,7 @@ export default class DisplayName extends React.PureComponent {
     localDomain: PropTypes.string,
     others: ImmutablePropTypes.list,
     handleClick: PropTypes.func,
+    onAccountClick: PropTypes.func,
   };
 
   handleMouseEnter = ({ currentTarget }) => {
@@ -61,6 +62,7 @@ export default class DisplayName extends React.PureComponent {
     if (others && others.size > 0) {
       displayName = others.take(2).map(a => (
         <a
+          key={a.get('id')}
           href={a.get('url')}
           target='_blank'
           onClick={(e) => onAccountClick(a.get('acct'), e)}

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import Motion from '../features/ui/util/optional_motion';
-import spring from 'react-motion/lib/spring';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from 'flavours/glitch/components/icon';
@@ -25,7 +23,7 @@ export default class IconButton extends React.PureComponent {
     inverted: PropTypes.bool,
     animate: PropTypes.bool,
     overlay: PropTypes.bool,
-    tabIndex: PropTypes.string,
+    tabIndex: PropTypes.number,
     label: PropTypes.string,
     counter: PropTypes.number,
     obfuscateCount: PropTypes.bool,
@@ -39,7 +37,7 @@ export default class IconButton extends React.PureComponent {
     disabled: false,
     animate: false,
     overlay: false,
-    tabIndex: '0',
+    tabIndex: 0,
     ariaHidden: false,
   };
 
@@ -156,6 +154,7 @@ export default class IconButton extends React.PureComponent {
 
     return (
       <button
+        type='button'
         aria-label={title}
         aria-expanded={expanded}
         aria-hidden={ariaHidden}

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

@@ -289,7 +289,7 @@ class MediaGallery extends React.PureComponent {
     }
   }
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate () {
     if (this.node) {
       this.handleResize();
     }
@@ -327,7 +327,7 @@ class MediaGallery extends React.PureComponent {
   _setDimensions () {
     const width = this.node.offsetWidth;
 
-    if (width && width != this.state.width) {
+    if (width && width !== this.state.width) {
       // offsetWidth triggers a layout, so only calculate when we need to
       if (this.props.cacheWidth) {
         this.props.cacheWidth(width);

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-
-export default
-class Spoilers extends React.PureComponent {
-
-  static propTypes = {
-    spoilerText: PropTypes.string,
-    children: PropTypes.node,
-  };
-
-  state = {
-    hidden: true,
-  };
-
-  handleSpoilerClick = () => {
-    this.setState({ hidden: !this.state.hidden });
-  };
-
-  render () {
-    const { spoilerText, children } = this.props;
-    const { hidden } = this.state;
-
-    const toggleText = hidden ?
-      (<FormattedMessage
-        id='status.show_more'
-        defaultMessage='Show more'
-        key='0'
-      />) :
-      (<FormattedMessage
-        id='status.show_less'
-        defaultMessage='Show less'
-        key='0'
-      />);
-
-    return ([
-      <p className='spoiler__text'>
-        {spoilerText}
-        {' '}
-        <button tabIndex={0} className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
-          {toggleText}
-        </button>
-      </p>,
-      <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
-        {children}
-      </div>,
-    ]);
-  }
-
-}
-

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

@@ -282,7 +282,7 @@ class Status extends ImmutablePureComponent {
 
   //  Hack to fix timeline jumps on second rendering when auto-collapsing
   //  or on subsequent rendering when a preview card has been fetched
-  getSnapshotBeforeUpdate (prevProps, prevState) {
+  getSnapshotBeforeUpdate() {
     if (!this.props.getScrollPosition) return null;
 
     const { muted, hidden, status, settings } = this.props;
@@ -297,7 +297,7 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  componentDidUpdate (prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps, prevState, snapshot) {
     if (snapshot !== null && this.props.updateScrollBottom && this.node.offsetTop < snapshot.top) {
       this.props.updateScrollBottom(snapshot.height - snapshot.top);
     }
@@ -461,7 +461,7 @@ class Status extends ImmutablePureComponent {
     this.props.onMoveDown(this.props.containerId || this.props.id, e.target.getAttribute('data-featured'));
   };
 
-  handleHotkeyCollapse = e => {
+  handleHotkeyCollapse = () => {
     if (!this.props.settings.getIn(['collapsed', 'enabled']))
       return;
 
@@ -505,7 +505,6 @@ class Status extends ImmutablePureComponent {
     const {
       handleRef,
       parseClick,
-      setExpansion,
       setCollapsed,
     } = this;
     const { router } = this.context;
@@ -529,7 +528,7 @@ class Status extends ImmutablePureComponent {
       rootId,
       ...other
     } = this.props;
-    const { isCollapsed, forceFilter } = this.state;
+    const { isCollapsed } = this.state;
     let background = null;
     let attachments = null;
 

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

@@ -6,7 +6,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 //  Mastodon imports.
 import Avatar from './avatar';
 import AvatarOverlay from './avatar_overlay';
-import AvatarComposite from './avatar_composite';
 import DisplayName from './display_name';
 
 export default class StatusHeader extends React.PureComponent {

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

@@ -64,18 +64,15 @@ class StatusIcons extends React.PureComponent {
   mediaIconTitleText (mediaIcon) {
     const { intl } = this.props;
 
-    switch (mediaIcon) {
-    case 'link':
-      return intl.formatMessage(messages.previewCard);
-    case 'picture-o':
-      return intl.formatMessage(messages.pictures);
-    case 'tasks':
-      return intl.formatMessage(messages.poll);
-    case 'video-camera':
-      return intl.formatMessage(messages.video);
-    case 'music':
-      return intl.formatMessage(messages.audio);
-    }
+    const message = {
+      'link': messages.previewCard,
+      'picture-o': messages.pictures,
+      'tasks': messages.poll,
+      'video-camera': messages.video,
+      'music': messages.audio,
+    }[mediaIcon];
+
+    return message && intl.formatMessage(message);
   }
 
   renderIcon (mediaIcon) {