From 9da0937ebbb2f306036fe1ff5cf5bde71b7cfe26 Mon Sep 17 00:00:00 2001
From: Nikhil Jha <hi@nikhiljha.com>
Date: Mon, 28 Jan 2019 16:52:46 -0800
Subject: [PATCH] Remove References
---
src/components/gui/gui.jsx | 4 -
src/components/import-modal/import-modal.css | 190 -------------------
src/components/import-modal/import-modal.jsx | 168 ----------------
src/containers/import-modal.jsx | 115 -----------
src/lib/app-state-hoc.jsx | 5 -
src/lib/hash-parser-hoc.jsx | 5 -
src/lib/query-parser-hoc.jsx | 4 +-
src/playground/render-gui.jsx | 1 -
src/reducers/gui.js | 13 --
src/reducers/modals.js | 10 -
10 files changed, 1 insertion(+), 514 deletions(-)
delete mode 100644 src/components/import-modal/import-modal.css
delete mode 100644 src/components/import-modal/import-modal.jsx
delete mode 100644 src/containers/import-modal.jsx
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 928ec6128..00e4907e4 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -23,7 +23,6 @@ import BackdropLibrary from '../../containers/backdrop-library.jsx';
import Watermark from '../../containers/watermark.jsx';
import Backpack from '../../containers/backpack.jsx';
-import ImportModal from '../../containers/import-modal.jsx';
import WebGlModal from '../../containers/webgl-modal.jsx';
import TipsLibrary from '../../containers/tips-library.jsx';
import Cards from '../../containers/cards.jsx';
@@ -169,9 +168,6 @@ const GUIComponent = props => {
{isCreating ? (
<Loader messageId="gui.loader.creating" />
) : null}
- {importInfoVisible ? (
- <ImportModal />
- ) : null}
{isRendererSupported ? null : (
<WebGlModal isRtl={isRtl} />
)}
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
deleted file mode 100644
index 7da215c01..000000000
--- a/src/components/import-modal/import-modal.css
+++ /dev/null
@@ -1,190 +0,0 @@
-@import "../../css/colors.css";
-@import "../../css/units.css";
-@import "../../css/typography.css";
-@import "../../css/z-index.css";
-
-.modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: $z-index-modal;
- background-color: $ui-modal-overlay;
-}
-
-.modal-content {
- margin: 100px auto;
- outline: none;
- border: .25rem solid $ui-white-transparent;
- padding: 0;
- border-radius: $space;
- user-select: none;
- width: 500px;
- color: $text-primary;
- overflow: hidden;
-}
-
-/*
- TODO figure out how to remove filter altogether
- since it is null...
- Modal header has 3 items:
- |x title filter|
-
- Use the same width for both side item containers,
- so that title remains centered
-*/
-$sides: 20rem;
-
-.header {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-start;
- height: $library-header-height;
-
- box-sizing: border-box;
- width: 100%;
- background-color: $extensions-primary;
-}
-
-.header-item {
- display: flex;
- align-items: center;
- padding: 1rem;
- text-decoration: none;
- color: white;
- user-select: none;
-}
-
-.header-item-filter {
- display: flex;
- flex-basis: $sides;
- justify-content: flex-end;
-}
-
-.header-item-title {
- flex-grow: 1;
- flex-shrink: 0;
- justify-content: center;
- user-select: none;
- letter-spacing: 0.4px;
- cursor: default;
-}
-
-.header-item-title h2 {
- font-size: 1.25rem;
-}
-
-.header-item-close {
- display: flex;
- flex-basis: $sides;
- justify-content: flex-start;
-}
-
-[dir="rtl"] .header-item-close img {
- transform: scaleX(-1);
-}
-
-.body {
- background: $ui-white;
- padding: 1.5rem 2.25rem;
- text-align: center;
-}
-
-.input-row {
- margin: 1.5rem 0;
- font-weight: bolder;
- text-align: right;
- display: flex;
- justify-content: center;
- border: 1px solid;
- border-radius: 0.25rem;
- overflow: hidden;
-}
-
-.ok-input-container {
- border-color: $motion-primary;
- box-shadow: 0 0 0 0.2rem $motion-transparent;
-}
-
-.bad-input-container {
- border-color: $data-primary;
- box-shadow: 0 0 0 0.2rem hsla(30, 100%, 55%, 0.15);
-}
-
-.input-row input {
- width: 100%;
- padding: 0 1rem;
- height: 3rem;
- color: $text-primary;
- font-size: .875rem;
- outline: none;
- border: none;
-}
-
-.input-row input::placeholder {
- font-style: italic;
- color: $text-primary-transparent;
-}
-
-.input-row button {
- padding: 0.5rem 2rem;
- font-weight: bold;
- font-size: .875rem;
- cursor: pointer;
- border: 0px solid $extensions-primary;
- outline: none;
-}
-
-.input-row button.ok-button {
- background: $extensions-primary;
- color: white;
-}
-
-.error-row {
- margin: 1.5rem 0;
- text-align: center;
- display: flex;
- justify-content: center;
- background: hsla(30, 100%, 55%, 0.25);
- color: $data-primary;
- border: 1px solid $data-primary;
- border-radius: 0.25rem;
-}
-
-.error-row p {
- font-size: 0.875rem;
- font-weight: bold;
-}
-
-/* Confirmation buttons at the bottom of the modal */
-.button-row {
- margin: 1.5rem 0;
- font-weight: bolder;
- text-align: right;
- display: flex;
- justify-content: center;
-}
-
-.button-row button {
- border: 1px solid $motion-primary;
- border-radius: 0.25rem;
- padding: 0.5rem 1.5rem;
- background: white;
- font-weight: bold;
- font-size: .875rem;
- cursor: pointer;
- color: $motion-primary;
-}
-
-.faq-link-text {
- margin: 2rem 0 .5rem 0;
- font-size: .875rem;
- color: $text-primary;
-}
-
-.faq-link {
- color: $motion-primary;
- text-decoration: none;
-}
diff --git a/src/components/import-modal/import-modal.jsx b/src/components/import-modal/import-modal.jsx
deleted file mode 100644
index 60b130212..000000000
--- a/src/components/import-modal/import-modal.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReactModal from 'react-modal';
-import Box from '../box/box.jsx';
-import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
-import classNames from 'classnames';
-
-import CloseButton from '../close-button/close-button.jsx';
-
-import styles from './import-modal.css';
-
-const messages = defineMessages({
- title: {
- 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 Beta will not be saved.',
- description: 'Import project message',
- id: 'gui.importInfo.betamessage'
- },
- previewFormDescription: {
- 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'
- },
- invalidFormatError: {
- id: 'gui.importInfo.invalidFormatError',
- defaultMessage: 'Uh oh, that project link or id doesn\'t look quite right.',
- description: 'Invalid project link or id message'
- }
-});
-
-const ImportModal = ({intl, ...props}) => (
- <ReactModal
- isOpen
- className={styles.modalContent}
- contentLabel={intl.formatMessage({...messages.title})}
- overlayClassName={styles.modalOverlay}
- onRequestClose={props.onCancel}
- >
- <div dir={props.isRtl ? 'rtl' : 'ltr'} >
- <Box>
- <div className={styles.header}>
- <div
- className={classNames(
- styles.headerItem,
- styles.headerItemClose
- )}
- >
- <CloseButton
- buttonType="back"
- size={CloseButton.SIZE_LARGE}
- onClick={props.onGoBack}
- />
- </div>
- <div
- className={classNames(
- styles.headerItem,
- styles.headerItemTitle
- )}
- >
- <h2>
- {intl.formatMessage({...messages.title})}
- </h2>
- </div>
- <div className={classNames(styles.headerItem, styles.headerItemFilter)}>
- {null}
- </div>
- </div>
- </Box>
-
- <Box className={styles.body}>
- <p>
- {intl.formatMessage({...messages.formDescription})}
- </p>
- <Box
- className={classNames(styles.inputRow,
- (props.hasValidationError ? styles.badInputContainer : styles.okInputContainer))
- }
- >
- <input
- autoFocus
- placeholder={props.placeholder}
- value={props.inputValue}
- onChange={props.onChange}
- onKeyPress={props.onKeyPress}
- />
- <button
- className={styles.okButton}
- title={intl.formatMessage({
- defaultMessage: 'View Project',
- description: 'Tooltip for View button',
- id: 'gui.importModal.viewprojecttooltip'
- })}
- onClick={props.onViewProject}
- >
- <FormattedMessage
- defaultMessage="View"
- description="Label for button to load a scratch 2.0 project"
- id="gui.importModal.viewproject"
- />
- </button>
- </Box>
- {props.hasValidationError ?
- <Box className={styles.errorRow}>
- <p>
- <FormattedMessage
- {...messages[`${props.errorMessage}`]}
- />
- </p>
- </Box> : null
- }
- <Box className={styles.buttonRow}>
- <button
- onClick={props.onGoBack}
- >
- <FormattedMessage
- defaultMessage="Go Back"
- description="Label for button to back out of importing a project"
- id="gui.importInfo.goback"
- />
- </button>
- </Box>
- <Box className={styles.faqLinkText}>
- <FormattedMessage
- defaultMessage="To learn more, go to the {previewFaqLink}."
- description="Invitation to try 3.0 preview"
- id="gui.importInfo.previewfaq"
- values={{
- previewFaqLink: (
- <a
- className={styles.faqLink}
- href="//scratch.mit.edu/3faq"
- >
- <FormattedMessage
- defaultMessage="FAQ"
- description="link to Scratch 3.0 FAQ page"
- id="gui.importInfo.previewfaqlinktext"
- />
- </a>
- )
- }}
- />
- </Box>
- </Box>
- </div>
- </ReactModal>
-);
-
-ImportModal.propTypes = {
- errorMessage: PropTypes.string.isRequired,
- hasValidationError: PropTypes.bool.isRequired,
- inputValue: PropTypes.string.isRequired,
- intl: intlShape.isRequired,
- isRtl: PropTypes.bool,
- onCancel: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onGoBack: PropTypes.func.isRequired,
- onKeyPress: PropTypes.func.isRequired,
- onViewProject: PropTypes.func.isRequired,
- placeholder: PropTypes.string
-};
-
-export default injectIntl(ImportModal);
diff --git a/src/containers/import-modal.jsx b/src/containers/import-modal.jsx
deleted file mode 100644
index 1c75929cf..000000000
--- a/src/containers/import-modal.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import bindAll from 'lodash.bindall';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {connect} from 'react-redux';
-
-import ImportModalComponent from '../components/import-modal/import-modal.jsx';
-
-import {
- closeImportInfo,
- openPreviewInfo
-} from '../reducers/modals';
-
-class ImportModal extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleViewProject',
- 'handleCancel',
- 'handleChange',
- 'handleGoBack',
- 'handleKeyPress'
- ]);
-
- this.state = {
- inputValue: '',
- hasValidationError: false,
- errorMessage: ''
- };
- }
- handleKeyPress (event) {
- if (event.key === 'Enter') this.handleViewProject();
- }
- handleViewProject () {
- const inputValue = this.state.inputValue;
- const projectId = this.validate(inputValue);
-
- if (projectId) {
- const projectLink = document.createElement('a');
- document.body.appendChild(projectLink);
- projectLink.href = `#${projectId}`;
- projectLink.click();
- document.body.removeChild(projectLink);
- this.props.onViewProject();
- } else {
- this.setState({
- hasValidationError: true,
- errorMessage: `invalidFormatError`});
- }
- }
- handleChange (e) {
- this.setState({inputValue: e.target.value, hasValidationError: false});
- }
- validate (input) {
- const urlMatches = input.match(/^(?:https?:\/\/)?scratch\.mit\.edu\/projects\/(\d+)/);
- if (urlMatches && urlMatches.length > 0) {
- return urlMatches[1];
- }
- const projectIdMatches = input.match(/^#?(\d+)$/);
- if (projectIdMatches && projectIdMatches.length > 0) {
- return projectIdMatches[1];
- }
- return null;
- }
- handleCancel () {
- this.props.onCancel();
- }
- handleGoBack () {
- this.props.onBack();
- }
- render () {
- return (
- <ImportModalComponent
- errorMessage={this.state.errorMessage}
- hasValidationError={this.state.hasValidationError}
- inputValue={this.state.inputValue}
- isRtl={this.props.isRtl}
- placeholder="scratch.mit.edu/projects/123456789"
- onCancel={this.handleCancel}
- onChange={this.handleChange}
- onGoBack={this.handleGoBack}
- onKeyPress={this.handleKeyPress}
- onViewProject={this.handleViewProject}
- />
- );
- }
-}
-
-ImportModal.propTypes = {
- isRtl: PropTypes.bool,
- onBack: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired,
- onViewProject: PropTypes.func
-};
-
-const mapStateToProps = state => ({
- isRtl: state.locales.isRtl
-});
-
-const mapDispatchToProps = dispatch => ({
- onBack: () => {
- dispatch(closeImportInfo());
- dispatch(openPreviewInfo());
- },
- onCancel: () => {
- dispatch(closeImportInfo());
- },
- onViewProject: () => {
- dispatch(closeImportInfo());
- }
-});
-
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(ImportModal);
diff --git a/src/lib/app-state-hoc.jsx b/src/lib/app-state-hoc.jsx
index eacf2eab6..4e5ea52e8 100644
--- a/src/lib/app-state-hoc.jsx
+++ b/src/lib/app-state-hoc.jsx
@@ -51,7 +51,6 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
guiMiddleware,
initFullScreen,
initPlayer,
- initPreviewInfo,
initTelemetryModal
} = guiRedux;
const {ScratchPaintReducer} = require('scratch-paint');
@@ -66,8 +65,6 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
}
} else if (props.showTelemetryModal) {
initializedGui = initTelemetryModal(initializedGui);
- } else if (props.showPreviewInfo) {
- initializedGui = initPreviewInfo(initializedGui);
}
reducers = {
locales: localesReducer,
@@ -100,7 +97,6 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
const {
isFullScreen, // eslint-disable-line no-unused-vars
isPlayerOnly, // eslint-disable-line no-unused-vars
- showPreviewInfo, // eslint-disable-line no-unused-vars
showTelemetryModal, // eslint-disable-line no-unused-vars
...componentProps
} = this.props;
@@ -118,7 +114,6 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
AppStateWrapper.propTypes = {
isFullScreen: PropTypes.bool,
isPlayerOnly: PropTypes.bool,
- showPreviewInfo: PropTypes.bool
};
return AppStateWrapper;
};
diff --git a/src/lib/hash-parser-hoc.jsx b/src/lib/hash-parser-hoc.jsx
index b948d3d69..26ceb22e8 100644
--- a/src/lib/hash-parser-hoc.jsx
+++ b/src/lib/hash-parser-hoc.jsx
@@ -9,8 +9,6 @@ import {
setProjectId
} from '../reducers/project-state';
-import {closePreviewInfo} from '../reducers/modals';
-
/* Higher Order Component to get the project id from location.hash
* @param {React.Component} WrappedComponent: component to render
* @returns {React.Component} component with hash parsing behavior
@@ -74,9 +72,6 @@ const HashParserHOC = function (WrappedComponent) {
const mapDispatchToProps = dispatch => ({
setProjectId: projectId => {
dispatch(setProjectId(projectId));
- if (projectId !== defaultProjectId) {
- dispatch(closePreviewInfo());
- }
}
});
// Allow incoming props to override redux-provided props. Used to mock in tests.
diff --git a/src/lib/query-parser-hoc.jsx b/src/lib/query-parser-hoc.jsx
index 161b1a34a..f9e49aa25 100644
--- a/src/lib/query-parser-hoc.jsx
+++ b/src/lib/query-parser-hoc.jsx
@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
import {detectTutorialId} from './tutorial-from-url';
import {activateDeck} from '../reducers/cards';
-import {openTipsLibrary, closePreviewInfo} from '../reducers/modals';
+import {openTipsLibrary} from '../reducers/modals';
/* Higher Order Component to get parameters from the URL query string and initialize redux state
* @param {React.Component} WrappedComponent: component to render
@@ -52,11 +52,9 @@ const QueryParserHOC = function (WrappedComponent) {
const mapDispatchToProps = dispatch => ({
onOpenTipsLibrary: () => {
dispatch(openTipsLibrary());
- dispatch(closePreviewInfo());
},
onUpdateReduxDeck: tutorialId => {
dispatch(activateDeck(tutorialId));
- dispatch(closePreviewInfo());
}
});
return connect(
diff --git a/src/playground/render-gui.jsx b/src/playground/render-gui.jsx
index dc541e854..78a79b6ee 100644
--- a/src/playground/render-gui.jsx
+++ b/src/playground/render-gui.jsx
@@ -77,7 +77,6 @@ export default appTarget => {
<WrappedGui
backpackVisible
showComingSoon
- showPreviewInfo
backpackHost={backpackHost}
canSave={false}
onClickLogo={onClickLogo}
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index 28b335b30..071f9d93b 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -116,18 +116,6 @@ const initTutorialCard = function (currentState, deckId) {
);
};
-const initPreviewInfo = function (currentState) {
- return Object.assign(
- {},
- currentState,
- {
- modals: {
- previewInfo: true // this key must match `MODAL_PREVIEW_INFO` in modals.js
- }
- }
- );
-};
-
const initTelemetryModal = function (currentState) {
return Object.assign(
{},
@@ -176,7 +164,6 @@ export {
initEmbedded,
initFullScreen,
initPlayer,
- initPreviewInfo,
initTelemetryModal,
initTutorialCard
};
diff --git a/src/reducers/modals.js b/src/reducers/modals.js
index 7b5cc2723..153158059 100644
--- a/src/reducers/modals.js
+++ b/src/reducers/modals.js
@@ -7,7 +7,6 @@ const MODAL_COSTUME_LIBRARY = 'costumeLibrary';
const MODAL_EXTENSION_LIBRARY = 'extensionLibrary';
const MODAL_IMPORT_INFO = 'importInfo';
const MODAL_LOADING_PROJECT = 'loadingProject';
-const MODAL_PREVIEW_INFO = 'previewInfo';
const MODAL_TELEMETRY = 'telemetryModal';
const MODAL_SOUND_LIBRARY = 'soundLibrary';
const MODAL_SPRITE_LIBRARY = 'spriteLibrary';
@@ -22,7 +21,6 @@ const initialState = {
[MODAL_EXTENSION_LIBRARY]: false,
[MODAL_IMPORT_INFO]: false,
[MODAL_LOADING_PROJECT]: false,
- [MODAL_PREVIEW_INFO]: false,
[MODAL_TELEMETRY]: false,
[MODAL_SOUND_LIBRARY]: false,
[MODAL_SPRITE_LIBRARY]: false,
@@ -76,9 +74,6 @@ const openImportInfo = function () {
const openLoadingProject = function () {
return openModal(MODAL_LOADING_PROJECT);
};
-const openPreviewInfo = function () {
- return openModal(MODAL_PREVIEW_INFO);
-};
const openTelemetryModal = function () {
return openModal(MODAL_TELEMETRY);
};
@@ -115,9 +110,6 @@ const closeImportInfo = function () {
const closeLoadingProject = function () {
return closeModal(MODAL_LOADING_PROJECT);
};
-const closePreviewInfo = function () {
- return closeModal(MODAL_PREVIEW_INFO);
-};
const closeTelemetryModal = function () {
return closeModal(MODAL_TELEMETRY);
};
@@ -145,7 +137,6 @@ export {
openExtensionLibrary,
openImportInfo,
openLoadingProject,
- openPreviewInfo,
openSoundLibrary,
openSpriteLibrary,
openSoundRecorder,
@@ -158,7 +149,6 @@ export {
closeExtensionLibrary,
closeImportInfo,
closeLoadingProject,
- closePreviewInfo,
closeSpriteLibrary,
closeSoundLibrary,
closeSoundRecorder,
--
GitLab