Bug fix 1698

client/components/Dropdown.jsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
 import styled from 'styled-components';
-import { remSize, prop, common } from '../theme';
+import { remSize, prop } from '../theme';
 import IconButton from './mobile/IconButton';
-import Button from '../common/Button';
 
 const DropdownWrapper = styled.ul`
   background-color: ${prop('Modal.background')};

client/components/mobile/Explorer.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Sidebar from './Sidebar';
 import ConnectedFileNode from '../../modules/IDE/components/FileNode';

client/components/mobile/Footer.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
-import { prop, grays } from '../../theme';
+import { prop } from '../../theme';
 
 
 const background = prop('MobilePanel.default.background');

client/components/mobile/IDEWrapper.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { remSize } from '../../theme';
 

client/components/mobile/Sidebar.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
 import styled from 'styled-components';
-import { remSize, prop, common } from '../../theme';
+import { remSize, prop, } from '../../theme';
 import Header from './Header';
 import IconButton from './IconButton';
 import { ExitIcon } from '../../common/icons';

client/components/mobile/Tab.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router';
 import { prop, remSize } from '../../theme';

client/components/mobile/TabSwitcher.jsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import styled from 'styled-components';
 
-import { prop, remSize } from '../../theme';
+import { prop, } from '../../theme';
 
 export default styled.div`
   display: flex;

client/i18n.js

@@ -1,6 +1,5 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
 import { enUS, es, ja } from 'date-fns/locale';
 

client/index.jsx

@@ -8,7 +8,6 @@ import configureStore from './store';
 import routes from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
-import i18n from './i18n';
 
 require('./styles/main.scss');
 

client/modules/App/components/Overlay.jsx

@@ -81,7 +81,11 @@ class Overlay extends React.Component {
               <h2 className="overlay__title">{title}</h2>
               <div className="overlay__actions">
                 {actions}
-                <button className="overlay__close-button" onClick={this.close} aria-label={this.props.t('Overlay.AriaLabel', { title })}>
+                <button
+                  className="overlay__close-button"
+                  onClick={this.close}
+                  aria-label={this.props.t('Overlay.AriaLabel', { title })}
+                >
                   <ExitIcon focusable="false" aria-hidden="true" />
                 </button>
               </div>

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -117,10 +117,18 @@ class CollectionList extends React.Component {
         >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon role="img" aria-label={this.props.t('CollectionList.DirectionAscendingARIA')} focusable="false" />
+            <ArrowUpIcon
+              role="img"
+              aria-label={this.props.t('CollectionList.DirectionAscendingARIA')}
+              focusable="false"
+            />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon role="img" aria-label={this.props.t('CollectionList.DirectionDescendingARIA')} focusable="false" />
+            <ArrowDownIcon
+              role="img"
+              aria-label={this.props.t('CollectionList.DirectionDescendingARIA')}
+              focusable="false"
+            />
           }
         </button>
       </th>
@@ -144,9 +152,27 @@ class CollectionList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', this.props.t('CollectionList.HeaderName'))}
-                {this._renderFieldHeader('createdAt', this.props.t('CollectionList.HeaderCreatedAt', { context: mobile ? 'mobile' : '' }))}
-                {this._renderFieldHeader('updatedAt', this.props.t('CollectionList.HeaderUpdatedAt', { context: mobile ? 'mobile' : '' }))}
-                {this._renderFieldHeader('numItems', this.props.t('CollectionList.HeaderNumItems', { context: mobile ? 'mobile' : '' }))}
+                {this._renderFieldHeader(
+                  'createdAt',
+                  this.props.t(
+                    'CollectionList.HeaderCreatedAt',
+                    { context: mobile ? 'mobile' : '' }
+                  )
+                )}
+                {this._renderFieldHeader(
+                  'updatedAt',
+                  this.props.t(
+                    'CollectionList.HeaderUpdatedAt',
+                    { context: mobile ? 'mobile' : '' }
+                  )
+                )}
+                {this._renderFieldHeader(
+                  'numItems',
+                  this.props.t(
+                    'CollectionList.HeaderNumItems',
+                    { context: mobile ? 'mobile' : '' }
+                  )
+                )}
                 <th scope="col"></th>
               </tr>
             </thead>

client/modules/IDE/components/Editor.jsx

@@ -124,7 +124,6 @@ class Editor extends React.Component {
 
     delete this._cm.options.lint.options.errors;
 
-    const replaceCommand = metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
     this._cm.setOption('extraKeys', {
       Tab: (cm) => {
         // might need to specify and indent more?
@@ -156,7 +155,10 @@ class Editor extends React.Component {
     }, 1000));
 
     this._cm.on('keyup', () => {
-      const temp = this.props.t('Editor.KeyUpLineNumber', { lineNumber: parseInt((this._cm.getCursor().line) + 1, 10) });
+      const temp = this.props.t(
+        'Editor.KeyUpLineNumber',
+        { lineNumber: parseInt((this._cm.getCursor().line) + 1, 10) }
+      );
       document.getElementById('current-line').innerHTML = temp;
     });
 
@@ -361,7 +363,11 @@ class Editor extends React.Component {
               {this.props.file.name}
               <span className="editor__unsaved-changes">
                 {this.props.unsavedChanges ?
-                  <UnsavedChangesDotIcon role="img" aria-label={this.props.t('Editor.UnsavedChangesARIA')} focusable="false" /> :
+                  <UnsavedChangesDotIcon
+                    role="img"
+                    aria-label={this.props.t('Editor.UnsavedChangesARIA')}
+                    focusable="false"
+                  /> :
                   null}
               </span>
             </span>

client/modules/IDE/components/FileNode.jsx

@@ -223,7 +223,12 @@ class FileNode extends React.Component {
 
   renderChild = childId => (
     <li key={childId}>
-      <ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} onClickFile={this.props.onClickFile} />
+      <ConnectedFileNode
+        id={childId}
+        parentId={this.props.id}
+        canEdit={this.props.canEdit}
+        onClickFile={this.props.onClickFile}
+      />
     </li>
   )
 

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -9,7 +9,10 @@ function KeyboardShortcutModal() {
     <div className="keyboard-shortcuts">
       <h3 className="keyboard-shortcuts__title">{t('KeyboardShortcuts.CodeEditing.CodeEditing')}</h3>
       <p className="keyboard-shortcuts__description">
-        {t('KeyboardShortcuts.ShortcutsFollow')} <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">{t('KeyboardShortcuts.SublimeText')}</a>.
+        {t('KeyboardShortcuts.ShortcutsFollow')}
+        <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">
+          {t('KeyboardShortcuts.SublimeText')}
+        </a>.
       </p>
       <ul className="keyboard-shortcuts__list">
         <li className="keyboard-shortcut-item">

client/modules/IDE/components/Preferences/index.jsx

@@ -117,7 +117,9 @@ class Preferences extends React.Component {
                   value="light"
                   checked={this.props.theme === 'light'}
                 />
-                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Preferences.LightTheme')}</label>
+                <label htmlFor="light-theme-on" className="preference__option">
+                  {this.props.t('Preferences.LightTheme')}
+                </label>
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('dark')}
@@ -128,7 +130,9 @@ class Preferences extends React.Component {
                   value="dark"
                   checked={this.props.theme === 'dark'}
                 />
-                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Preferences.DarkTheme')}</label>
+                <label htmlFor="dark-theme-on" className="preference__option">
+                  {this.props.t('Preferences.DarkTheme')}
+                </label>
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('contrast')}
@@ -139,7 +143,9 @@ class Preferences extends React.Component {
                   value="contrast"
                   checked={this.props.theme === 'contrast'}
                 />
-                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('Preferences.HighContrastTheme')}</label>
+                <label htmlFor="high-contrast-theme-on" className="preference__option">
+                  {this.props.t('Preferences.HighContrastTheme')}
+                </label>
               </div>
             </div>
             <div className="preference">
@@ -215,7 +221,9 @@ class Preferences extends React.Component {
                   value="On"
                   checked={this.props.autocloseBracketsQuotes}
                 />
-                <label htmlFor="autoclosebracketsquotes-on" className="preference__option">{this.props.t('Preferences.On')}</label>
+                <label htmlFor="autoclosebracketsquotes-on" className="preference__option">
+                  {this.props.t('Preferences.On')}
+                </label>
                 <input
                   type="radio"
                   onChange={() => this.props.setAutocloseBracketsQuotes(false)}
@@ -226,7 +234,9 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.autocloseBracketsQuotes}
                 />
-                <label htmlFor="autoclosebracketsquotes-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
+                <label htmlFor="autoclosebracketsquotes-off" className="preference__option">
+                  {this.props.t('Preferences.Off')}
+                </label>
               </div>
             </div>
             <div className="preference">
@@ -282,7 +292,9 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.lineNumbers}
                 />
-                <label htmlFor="line-numbers-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
+                <label htmlFor="line-numbers-off" className="preference__option">
+                  {this.props.t('Preferences.Off')}
+                </label>
               </div>
             </div>
             <div className="preference">
@@ -309,7 +321,9 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.lintWarning}
                 />
-                <label htmlFor="lint-warning-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
+                <label htmlFor="lint-warning-off" className="preference__option">
+                  {this.props.t('Preferences.Off')}
+                </label>
                 <button
                   className="preference__preview-button"
                   onClick={() => beep.play()}
@@ -335,7 +349,9 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.textOutput)}
                 />
-                <label htmlFor="text-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.PlainText')}</label>
+                <label htmlFor="text-output-on" className="preference__option preference__canvas">
+                  {this.props.t('Preferences.PlainText')}
+                </label>
                 <input
                   type="checkbox"
                   onChange={(event) => {
@@ -347,7 +363,9 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.gridOutput)}
                 />
-                <label htmlFor="table-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.TableText')}</label>
+                <label htmlFor="table-output-on" className="preference__option preference__canvas">
+                  {this.props.t('Preferences.TableText')}
+                </label>
                 <input
                   type="checkbox"
                   onChange={(event) => {
@@ -359,7 +377,9 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.soundOutput)}
                 />
-                <label htmlFor="sound-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Sound')}</label>
+                <label htmlFor="sound-output-on" className="preference__option preference__canvas">
+                  {this.props.t('Preferences.Sound')}
+                </label>
               </div>
             </div>
           </TabPanel>

client/modules/IDE/components/PreviewFrame.jsx

@@ -8,7 +8,6 @@ import loopProtect from 'loop-protect';
 import { JSHINT } from 'jshint';
 import decomment from 'decomment';
 import classNames from 'classnames';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Decode } from 'console-feed';
 import { getBlobUrl } from '../actions/files';

client/modules/IDE/components/SketchList.jsx

@@ -415,7 +415,11 @@ class SketchList extends React.Component {
             <ArrowUpIcon role="img" aria-label={this.props.t('SketchList.DirectionAscendingARIA')} focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon role="img" aria-label={this.props.t('SketchList.DirectionDescendingARIA')} focusable="false" />
+            <ArrowDownIcon
+              role="img"
+              aria-label={this.props.t('SketchList.DirectionDescendingARIA')}
+              focusable="false"
+            />
           }
         </button>
       </th>
@@ -437,8 +441,20 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', this.props.t('SketchList.HeaderName'))}
-                {this._renderFieldHeader('createdAt', this.props.t('SketchList.HeaderCreatedAt', { context: mobile ? 'mobile' : '' }))}
-                {this._renderFieldHeader('updatedAt', this.props.t('SketchList.HeaderUpdatedAt', { context: mobile ? 'mobile' : '' }))}
+                {this._renderFieldHeader(
+                  'createdAt',
+                  this.props.t(
+                    'SketchList.HeaderCreatedAt',
+                    { context: mobile ? 'mobile' : '' }
+                  )
+                )}
+                {this._renderFieldHeader(
+                  'updatedAt',
+                  this.props.t(
+                    'SketchList.HeaderUpdatedAt',
+                    { context: mobile ? 'mobile' : '' }
+                  )
+                )}
                 <th scope="col"></th>
               </tr>
             </thead>

client/modules/IDE/pages/MobileIDEView.jsx

@@ -147,7 +147,7 @@ const handleGlobalKeydown = (props, cmController) => (e) => {
 
 const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) => {
   const {
-    autosaveProject, preferences, ide, selectedFile: file, project, isUserOwner
+    autosaveProject, preferences, ide, selectedFile: file, project,
   } = props;
 
   const { selectedFile: oldFile } = prevProps;
@@ -241,7 +241,10 @@ const MobileIDEView = (props) => {
 
   const projectActions =
     [{
-      icon: TerminalIcon, aria: 'Toggle console open/closed', action: consoleIsExpanded ? collapseConsole : expandConsole, inverted: true
+      icon: TerminalIcon,
+      aria: 'Toggle console open/closed',
+      action: consoleIsExpanded ? collapseConsole : expandConsole,
+      inverted: true
     },
     { icon: SaveIcon, aria: 'Save project', action: () => saveProject(cmController.getContent(), false, true) },
     { icon: FolderIcon, aria: 'Open files explorer', action: toggleExplorer }