diff --git a/src/components/import-error/import-error.jsx b/src/components/import-error/import-error.jsx
index 5147138a63813cbfd29600550e0feace4208e037..bc8f287ea1f3df616dc264f9f9ef2260e4639253 100644
--- a/src/components/import-error/import-error.jsx
+++ b/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 = {
diff --git a/src/components/import-input/import-input.jsx b/src/components/import-input/import-input.jsx
index 997de86af2d12465dd9b225904260bb4fd04819f..bc4d7c0c2b220622c5fe2414a987002cb5c427c2 100644
--- a/src/components/import-input/import-input.jsx
+++ b/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;
diff --git a/src/components/import-modal/import-modal.jsx b/src/components/import-modal/import-modal.jsx
index 9df475f12652bae94555228d18afa6ffa5095dd0..03a1aef8f0764b4f42b640e914483e3931962450 100644
--- a/src/components/import-modal/import-modal.jsx
+++ b/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);
diff --git a/src/components/preview-modal/preview-modal.jsx b/src/components/preview-modal/preview-modal.jsx
index 2b9d14407fe722317ad5fc4c593a43fbdf2d7fbf..5772b518539a7541f30859a3aef6540eef030878 100644
--- a/src/components/preview-modal/preview-modal.jsx
+++ b/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);
diff --git a/src/containers/import-modal.jsx b/src/containers/import-modal.jsx
index 7351c103747146a29e8d6a93124e3ba69be6c050..e48df8e5a7004a63ffdd52b78948cc5006d6d825 100644
--- a/src/containers/import-modal.jsx
+++ b/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 = () => ({});