Fix some of the Javascript linting issues, as well as bugs and unneeded divergences with upstream (#2208)

* Run eslint --fix

* Fix linting issues in video player and reduce divergences with upstream

This includes a behavior change of not auto-looping videos anymore. I don't
remember loops being ever intended, and they have been removed from upstream
a while ago, but we somehow missed the change.

* Fix lint issues in `app/javascript/flavours/glitch/selectors/index.js`

Those were basically caused by dead code that isn't present upstream, so
that brings us closer to upstream as well.

* Fix linting issue and bug in streaming/index.js

* Fix linting issues in config/webpack/shared.js

* Fix unused import in flavours/glitch/features/ui/index.js

* Fix linting issues and reduce divergences from upstream in flavours/glitch/features/ui/components/video_modal.jsx

* Fix linting issues in flavours/glitch/reducers

* Fix linting issues in glitch-soc onboarding modal

* Fix linting issues in flavours/glitch/features/ui/components/navigation_panel.jsx

* Remove dead code for unused local setting navbar_under

* Fix various linting issues

* Fix linting issues in flavours/glitch/components/scrollable_list.jsx and reduce divergences with upstream

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

@@ -50,7 +50,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
     columns: ImmutablePropTypes.list.isRequired,
     singleColumn: PropTypes.bool,
     children: PropTypes.node,
-    navbarUnder: PropTypes.bool,
     openSettings: PropTypes.func,
   };
 
@@ -136,7 +135,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
   };
 
   render () {
-    const { columns, children, singleColumn, navbarUnder, openSettings } = this.props;
+    const { columns, children, singleColumn, openSettings } = this.props;
     const { renderComposePanel } = this.state;
 
     if (singleColumn) {

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

@@ -64,7 +64,7 @@ class DeprecatedSettingsModal extends React.PureComponent {
           <div className='deprecated-settings-info'>
             <ul>
               { settings.map((setting_name) => (
-                <li>
+                <li key={setting_name}>
                   <a href={preferenceLink(setting_name)}><FormattedMessage {...messages[setting_name]} /></a>
                 </li>
               )) }

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

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { timelinePreview, showTrends } from 'flavours/glitch/initial_state';
-import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
+import ColumnLink from './column_link';
 import DisabledAccountBanner from './disabled_account_banner';
 import FollowRequestsColumnLink from './follow_requests_column_link';
 import ListPanel from './list_panel';
 import NotificationsCounterIcon from './notifications_counter_icon';
 import SignInBanner from './sign_in_banner';
-import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links';
+import { preferencesLink } from 'flavours/glitch/utils/backend_links';
 import NavigationPortal from 'flavours/glitch/components/navigation_portal';
 
 const messages = defineMessages({
@@ -37,6 +36,7 @@ class NavigationPanel extends React.Component {
   };
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     onOpenSettings: PropTypes.func,
   };
 

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

@@ -40,7 +40,7 @@ PageOne.propTypes = {
   domain: PropTypes.string.isRequired,
 };
 
-const PageTwo = ({ intl, myAccount }) => (
+const PageTwo = ({ myAccount }) => (
   <div className='onboarding-modal__page onboarding-modal__page-two'>
     <div className='figure non-interactive'>
       <div className='pseudo-drawer'>
@@ -63,7 +63,7 @@ PageTwo.propTypes = {
   myAccount: ImmutablePropTypes.map.isRequired,
 };
 
-const PageThree = ({ intl, myAccount }) => (
+const PageThree = ({ myAccount }) => (
   <div className='onboarding-modal__page onboarding-modal__page-three'>
     <div className='figure non-interactive'>
       <Search
@@ -187,11 +187,11 @@ class OnboardingModal extends React.PureComponent {
   componentWillMount() {
     const { myAccount, admin, domain, intl } = this.props;
     this.pages = [
-      <PageOne acct={myAccount.get('acct')} domain={domain} />,
-      <PageTwo myAccount={myAccount} intl={intl} />,
-      <PageThree myAccount={myAccount} intl={intl} />,
-      <PageFour domain={domain} intl={intl} />,
-      <PageSix admin={admin} domain={domain} />,
+      <PageOne key='1' acct={myAccount.get('acct')} domain={domain} />,
+      <PageTwo key='2' myAccount={myAccount} intl={intl} />,
+      <PageThree key='3' myAccount={myAccount} intl={intl} />,
+      <PageFour key='4' domain={domain} intl={intl} />,
+      <PageSix key='6' admin={admin} domain={domain} />,
     ];
   }
 

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

@@ -13,10 +13,6 @@ const mapStateToProps = (state, { statusId }) => ({
 
 class VideoModal extends ImmutablePureComponent {
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   static propTypes = {
     media: ImmutablePropTypes.map.isRequired,
     statusId: PropTypes.string,
@@ -31,7 +27,7 @@ class VideoModal extends ImmutablePureComponent {
   };
 
   componentDidMount () {
-    const { media, onChangeBackgroundColor, onClose } = this.props;
+    const { media, onChangeBackgroundColor } = this.props;
 
     const backgroundColor = getAverageFromBlurhash(media.get('blurhash'));
 

app/javascript/flavours/glitch/features/ui/index.jsx

@@ -60,7 +60,6 @@ import { HotKeys } from 'react-hotkeys';
 import initialState, { me, owner, singleUserMode, showTrends, trendsAsLanding } from '../../initial_state';
 import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import { Helmet } from 'react-helmet';
 import Header from './components/header';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -76,10 +75,8 @@ const mapStateToProps = state => ({
   hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
   hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
   canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
-  layout: state.getIn(['meta', 'layout']),
   layout_local_setting: state.getIn(['local_settings', 'layout']),
   isWide: state.getIn(['local_settings', 'stretch']),
-  navbarUnder: state.getIn(['local_settings', 'navbar_under']),
   dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
   unreadNotifications: state.getIn(['notifications', 'unread']),
   showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
@@ -133,7 +130,6 @@ class SwitchingColumnsArea extends React.PureComponent {
   static propTypes = {
     children: PropTypes.node,
     location: PropTypes.object,
-    navbarUnder: PropTypes.bool,
     mobile: PropTypes.bool,
   };
 
@@ -165,7 +161,7 @@ class SwitchingColumnsArea extends React.PureComponent {
   };
 
   render () {
-    const { children, mobile, navbarUnder } = this.props;
+    const { children, mobile } = this.props;
     const { signedIn } = this.context.identity;
 
     let redirect;
@@ -185,7 +181,7 @@ class SwitchingColumnsArea extends React.PureComponent {
     }
 
     return (
-      <ColumnsAreaContainer ref={this.setRef} singleColumn={mobile} navbarUnder={navbarUnder}>
+      <ColumnsAreaContainer ref={this.setRef} singleColumn={mobile}>
         <WrappedSwitch>
           {redirect}
 
@@ -256,7 +252,6 @@ class UI extends React.Component {
     layout_local_setting: PropTypes.string,
     isWide: PropTypes.bool,
     systemFontUi: PropTypes.bool,
-    navbarUnder: PropTypes.bool,
     isComposing: PropTypes.bool,
     hasComposingText: PropTypes.bool,
     hasMediaAttachments: PropTypes.bool,
@@ -268,6 +263,7 @@ class UI extends React.Component {
     dropdownMenuIsOpen: PropTypes.bool,
     unreadNotifications: PropTypes.number,
     showFaviconBadge: PropTypes.bool,
+    hicolorPrivacyIcons: PropTypes.bool,
     moved: PropTypes.map,
     layout: PropTypes.string.isRequired,
     firstLaunch: PropTypes.bool,
@@ -456,8 +452,8 @@ class UI extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    if (this.props.unreadNotifications != prevProps.unreadNotifications ||
-        this.props.showFaviconBadge != prevProps.showFaviconBadge) {
+    if (this.props.unreadNotifications !== prevProps.unreadNotifications ||
+        this.props.showFaviconBadge !== prevProps.showFaviconBadge) {
       if (this.favicon) {
         try {
           this.favicon.badge(this.props.showFaviconBadge ? this.props.unreadNotifications : 0);
@@ -606,7 +602,7 @@ class UI extends React.Component {
 
   render () {
     const { draggingOver } = this.state;
-    const { children, isWide, navbarUnder, location, dropdownMenuIsOpen, layout, moved } = this.props;
+    const { children, isWide, location, dropdownMenuIsOpen, layout, moved } = this.props;
 
     const columnsClass = layout => {
       switch (layout) {
@@ -622,7 +618,6 @@ class UI extends React.Component {
     const className = classNames('ui', columnsClass(layout), {
       'wide': isWide,
       'system-font': this.props.systemFontUi,
-      'navbar-under': navbarUnder,
       'hicolor-privacy-icons': this.props.hicolorPrivacyIcons,
     });
 
@@ -665,7 +660,7 @@ class UI extends React.Component {
 
           <Header />
 
-          <SwitchingColumnsArea location={location} mobile={layout === 'mobile' || layout === 'single-column'} navbarUnder={navbarUnder}>
+          <SwitchingColumnsArea location={location} mobile={layout === 'mobile' || layout === 'single-column'}>
             {children}
           </SwitchingColumnsArea>