Fixing lint errors.

src/components/import-error/import-error.jsx

@@ -1,12 +1,15 @@
 import bindAll from 'lodash.bindall';
 import classNames from 'classnames';
-import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
+import {/* defineMessages, */injectIntl/* , intlShape, FormattedMessage*/} from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactTooltip from 'react-tooltip';
 
 import styles from './import-error.css';
 
+// TODO store different error messages depending on the situation (?) and
+// needs to use intl lib for localization support
+
 class ImportErrorContent extends React.Component {
     constructor (props) {
         super(props);
@@ -56,10 +59,11 @@ class ImportErrorContent extends React.Component {
 
 ImportErrorContent.propTypes = {
     className: PropTypes.string,
-    intl: intlShape,
+    errorMessage: PropTypes.string.isRequired,
+    // intl: intlShape,
     place: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-    tooltipId: PropTypes.string.isRequired,
-    errorMessage: PropTypes.string.isRequired
+    tooltipId: PropTypes.string.isRequired
+
 };
 
 ImportErrorContent.defaultProps = {
@@ -82,9 +86,9 @@ const ImportErrorTooltip = props => (
         </div>
         <ImportError
             className={props.tooltipClassName}
+            errorMessage={props.errorMessage}
             place={props.place}
             tooltipId={props.tooltipId}
-            errorMessage={props.errorMessage}
         />
     </div>
 );
@@ -94,10 +98,11 @@ ImportErrorTooltip.propTypes = {
     className: PropTypes.string,
     delayHide: PropTypes.number,
     delayShow: PropTypes.number,
+    errorMessage: PropTypes.string.isRequired,
     place: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
     tooltipClassName: PropTypes.string,
-    tooltipId: PropTypes.string.isRequired,
-    errorMessage: PropTypes.string.isRequired
+    tooltipId: PropTypes.string.isRequired
+
 };
 
 ImportErrorTooltip.defaultProps = {

src/components/import-input/import-input.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
+// import classNames from 'classnames';
 
 import {ImportErrorTooltip} from '../import-error/import-error.jsx';
 
@@ -8,50 +8,50 @@ import {ImportErrorTooltip} from '../import-error/import-error.jsx';
 class ImportInput extends React.Component {
     render () {
         let input = null;
-        if (!this.props.hasValidationError) {
-            input = (
-                    <input
-                        autoFocus
-                        className={this.props.okClassName}
-                        placeholder={this.props.placeholder}
-                        onChange={this.props.onChange}
-                        onKeyPress={this.props.onKeyPress}
-                        value={this.props.inputValue}
-                    />
-            );
-        } else {
+        if (this.props.hasValidationError) {
             input = (
                 <ImportErrorTooltip
-                   place="bottom"
-                   tooltipId="import-input-error"
-                   errorMessage={this.props.errorMessage}
-                   className={this.props.errorDivClassName}
+                    className={this.props.errorDivClassName}
+                    errorMessage={this.props.errorMessage}
+                    place="bottom"
+                    tooltipId="import-input-error"
                 >
                     <input
                         autoFocus
                         className={this.props.badClassName}
                         placeholder={this.props.placeholder}
+                        value={this.props.inputValue}
                         onChange={this.props.onChange}
                         onKeyPress={this.props.onKeyPress}
-                        value={this.props.inputValue}
                     />
                 </ImportErrorTooltip>
             );
+        } else {
+            input = (
+                <input
+                    autoFocus
+                    className={this.props.okClassName}
+                    placeholder={this.props.placeholder}
+                    value={this.props.inputValue}
+                    onChange={this.props.onChange}
+                    onKeyPress={this.props.onKeyPress}
+                />
+            );
         }
         return input;
     }
 }
 
 ImportInput.propTypes = {
-    onChange: PropTypes.func.isRequired,
-    onKeyPress: PropTypes.func.isRequired,
-    placeholder: PropTypes.string,
+    badClassName: PropTypes.string,
+    errorDivClassName: PropTypes.string,
     errorMessage: PropTypes.string.isRequired,
     hasValidationError: PropTypes.bool.isRequired,
     inputValue: PropTypes.string.isRequired,
     okClassName: PropTypes.string,
-    badClassName: PropTypes.string,
-    errorDivClassName: PropTypes.string
+    onChange: PropTypes.func.isRequired,
+    onKeyPress: PropTypes.func.isRequired,
+    placeholder: PropTypes.string
 };
 
 export default ImportInput;

src/components/import-modal/import-modal.jsx

@@ -15,6 +15,12 @@ const messages = defineMessages({
         id: 'gui.importInfo.title',
         defaultMessage: 'View a Scratch 2.0 Project',
         description: 'Scratch 2.0 import modal label - for accessibility'
+    },
+    formDescription: {
+        defaultMessage:
+            'Enter a link to one of your shared Scratch projects. Changes made in this 3.0 Preview will not be saved.',
+        description: 'Import project message',
+        id: 'gui.importInfo.message'
     }
 });
 
@@ -57,24 +63,20 @@ const ImportModal = ({intl, ...props}) => (
 
         <Box className={styles.body}>
             <p>
-                <FormattedMessage
-                    defaultMessage="Enter a link to one of your shared Scratch projects. Changes made in this 3.0 Preview will not be saved."
-                    description="Import project message"
-                    id="gui.importInfo.message"
-                />
+                {intl.formatMessage({...messages.formDescription})}
             </p>
 
             <Box className={styles.inputRow}>
                 <ImportInput
-                    placeholder={props.placeholder}
-                    onChange={props.onChange}
-                    onKeyPress={props.onKeyPress}
+                    badClassName={styles.badInput}
+                    errorDivClassName={styles.errorDiv}
                     errorMessage={props.errorMessage}
                     hasValidationError={props.hasValidationError}
                     inputValue={props.inputValue}
                     okClassName={styles.okInput}
-                    badClassName={styles.badInput}
-                    errorDivClassName={styles.errorDiv}
+                    placeholder={props.placeholder}
+                    onChange={props.onChange}
+                    onKeyPress={props.onKeyPress}
                 />
                 <button
                     className={styles.okButton}
@@ -126,14 +128,15 @@ const ImportModal = ({intl, ...props}) => (
 );
 
 ImportModal.propTypes = {
+    errorMessage: PropTypes.string.isRequired,
+    hasValidationError: PropTypes.bool.isRequired,
+    inputValue: PropTypes.string.isRequired,
     intl: intlShape.isRequired,
     onCancel: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
     onKeyPress: PropTypes.func.isRequired,
     onViewProject: PropTypes.func.isRequired,
-    placeholder: PropTypes.string,
-    hasValidationError: PropTypes.bool.isRequired,
-    errorMessage: PropTypes.string.isRequired
+    placeholder: PropTypes.string
 };
 
 export default injectIntl(ImportModal);

src/components/preview-modal/preview-modal.jsx

@@ -111,7 +111,8 @@ const PreviewModal = ({intl, ...props}) => (
 PreviewModal.propTypes = {
     intl: intlShape.isRequired,
     onCancel: PropTypes.func.isRequired,
-    onTryIt: PropTypes.func.isRequired
+    onTryIt: PropTypes.func.isRequired,
+    onViewProject: PropTypes.func.isRequired
 };
 
 export default injectIntl(PreviewModal);

src/containers/import-modal.jsx

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import platform from 'platform';
-// import RegExp from 'regex';
 
 import ImportModalComponent from '../components/import-modal/import-modal.jsx';
 import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx';
 
+import log from '../lib/log';
+
 import {
     closeImportInfo
 } from '../reducers/modals';
@@ -41,33 +42,33 @@ class ImportModal extends React.Component {
             projectLink.href = `#${projectId}`;
             projectLink.click();
             document.body.removeChild(projectLink);
-            this.handleCancel();
+            this.props.onViewProject();
         } else {
             this.setState({
                 hasValidationError: true,
                 errorMessage: `Uh oh, that link doesn't look quite right.`});
+            log.info('Invalid link error');
         }
     }
     handleChange (e) {
         this.setState({inputValue: e.target.value});
     }
     validate (input) {
-        //const regex1 = RegExp(
-        //const regex2 = RegExp('^scratch.mit.edu/projects/');
         const matches = input.match(/^(https:\/\/)?scratch\.mit\.edu\/projects\/(\d+)(\/?)$/);
-        if (matches != null && matches.length > 0) {
-            console.log("Project ID: " + matches[2]);
+        if (matches && matches.length > 0) {
+            log.info(`Project ID: ${matches[2]}`);
             return matches[2];
         }
         return null;
     }
     handleCancel () {
-        // this.setState({previewing: false});
         this.props.onCancel();
     }
     handleGoBack () {
         window.location.replace('https://scratch.mit.edu');
     }
+    // TODO not sure if we need this, since it shouldn't be possible to bring up this
+    // modal without first going through the preview modal
     supportedBrowser () {
         if (platform.name === 'IE') {
             return false;
@@ -77,14 +78,14 @@ class ImportModal extends React.Component {
     render () {
         return (this.supportedBrowser() ?
             <ImportModalComponent
-                onCancel={this.handleCancel}
-                onViewProject={this.handleViewProject}
-                placeholder='scratch.mit.edu/projects/123456789'
-                onKeyPress={this.handleKeyPress}
-                onChange={this.handleChange}
                 errorMessage={this.state.errorMessage}
                 hasValidationError={this.state.hasValidationError}
                 inputValue={this.state.inputValue}
+                placeholder="scratch.mit.edu/projects/123456789"
+                onCancel={this.handleCancel}
+                onChange={this.handleChange}
+                onKeyPress={this.handleKeyPress}
+                onViewProject={this.handleViewProject}
             /> :
             <BrowserModalComponent
                 onBack={this.handleGoBack}
@@ -94,8 +95,8 @@ class ImportModal extends React.Component {
 }
 
 ImportModal.propTypes = {
-    onViewProject: PropTypes.func,
     onCancel: PropTypes.func.isRequired,
+    onViewProject: PropTypes.func
 };
 
 const mapStateToProps = () => ({});