From b8fb51d28342f184fcb5583f466659acfd948ff3 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 12 Aug 2019 11:21:42 -0400 Subject: [PATCH] Fix merge conflict for cherry-picking 0b8e78df3a0c49d5dcf706b1c26346da3dcc0bc4 --- client/constants.js | 2 + client/modules/IDE/actions/ide.js | 12 ++++ .../modules/IDE/components/NewFileModal.jsx | 55 ++++++++++--------- client/modules/IDE/components/Sidebar.jsx | 14 +++++ .../IDE/components/UploadFileModal.jsx | 43 +++++++++++++++ client/modules/IDE/pages/IDEView.jsx | 18 +++--- client/modules/IDE/reducers/ide.js | 5 ++ client/modules/IDE/selectors/users.js | 24 ++++++++ 8 files changed, 138 insertions(+), 35 deletions(-) create mode 100644 client/modules/IDE/components/UploadFileModal.jsx create mode 100644 client/modules/IDE/selectors/users.js diff --git a/client/constants.js b/client/constants.js index b5d477b2..7d1a04dc 100644 --- a/client/constants.js +++ b/client/constants.js @@ -80,6 +80,8 @@ export const SHOW_NEW_FOLDER_MODAL = 'SHOW_NEW_FOLDER_MODAL'; export const CLOSE_NEW_FOLDER_MODAL = 'CLOSE_NEW_FOLDER_MODAL'; export const SHOW_FOLDER_CHILDREN = 'SHOW_FOLDER_CHILDREN'; export const HIDE_FOLDER_CHILDREN = 'HIDE_FOLDER_CHILDREN'; +export const OPEN_UPLOAD_FILE_MODAL = 'OPEN_UPLOAD_FILE_MODAL'; +export const CLOSE_UPLOAD_FILE_MODAL = 'CLOSE_UPLOAD_FILE_MODAL'; export const SHOW_SHARE_MODAL = 'SHOW_SHARE_MODAL'; export const CLOSE_SHARE_MODAL = 'CLOSE_SHARE_MODAL'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index cf573573..8b453436 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -75,6 +75,18 @@ export function closeNewFileModal() { }; } +export function openUploadFileModal() { + return { + type: ActionTypes.OPEN_UPLOAD_FILE_MODAL + }; +} + +export function closeUploadFileModal() { + return { + type: ActionTypes.CLOSE_UPLOAD_FILE_MODAL + }; +} + export function expandSidebar() { return { type: ActionTypes.EXPAND_SIDEBAR diff --git a/client/modules/IDE/components/NewFileModal.jsx b/client/modules/IDE/components/NewFileModal.jsx index 433c3daa..e7747d2d 100644 --- a/client/modules/IDE/components/NewFileModal.jsx +++ b/client/modules/IDE/components/NewFileModal.jsx @@ -1,10 +1,13 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators, compose } from 'redux'; import { reduxForm } from 'redux-form'; -import classNames from 'classnames'; import InlineSVG from 'react-inlinesvg'; import NewFileForm from './NewFileForm'; -import FileUploader from './FileUploader'; +import { getCanUploadMedia, getreachedTotalSizeLimit } from '../selectors/users'; +import { closeNewFileModal } from '../actions/ide'; +import { createFile } from '../actions/files'; import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils'; const exitUrl = require('../../../images/exit.svg'); @@ -28,16 +31,12 @@ class NewFileModal extends React.Component { } render() { - const modalClass = classNames({ - 'modal': true, - 'modal--reduced': !this.props.canUploadMedia - }); return ( -
{ this.modal = element; }}> +
{ this.modal = element; }}>
-

Add File

-
@@ -45,17 +44,6 @@ class NewFileModal extends React.Component { focusOnModal={this.focusOnModal} {...this.props} /> - {(() => { - if (this.props.canUploadMedia) { - return ( -
-

OR

- -
- ); - } - return ''; - })()}
); @@ -63,8 +51,8 @@ class NewFileModal extends React.Component { } NewFileModal.propTypes = { - closeModal: PropTypes.func.isRequired, - canUploadMedia: PropTypes.bool.isRequired + createFile: PropTypes.func.isRequired, + closeNewFileModal: PropTypes.func.isRequired }; function validate(formProps) { @@ -79,9 +67,22 @@ function validate(formProps) { return errors; } +function mapStateToProps(state) { + return { + canUploadMedia: getCanUploadMedia(state), + reachedTotalSizeLimit: getreachedTotalSizeLimit(state) + }; +} -export default reduxForm({ - form: 'new-file', - fields: ['name'], - validate -})(NewFileModal); +function mapDispatchToProps(dispatch) { + return bindActionCreators({ createFile, closeNewFileModal }, dispatch); +} + +export default compose( + connect(mapStateToProps, mapDispatchToProps), + reduxForm({ + form: 'new-file', + fields: ['name'], + validate + }) +)(NewFileModal); diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx index 2ea492c2..739c7867 100644 --- a/client/modules/IDE/components/Sidebar.jsx +++ b/client/modules/IDE/components/Sidebar.jsx @@ -113,6 +113,19 @@ class Sidebar extends React.Component { Add file +
  • + +
    • @@ -137,6 +150,7 @@ Sidebar.propTypes = { openProjectOptions: PropTypes.func.isRequired, closeProjectOptions: PropTypes.func.isRequired, newFolder: PropTypes.func.isRequired, + openUploadFileModal: PropTypes.func.isRequired, owner: PropTypes.shape({ id: PropTypes.string }), diff --git a/client/modules/IDE/components/UploadFileModal.jsx b/client/modules/IDE/components/UploadFileModal.jsx new file mode 100644 index 00000000..35e2fd9e --- /dev/null +++ b/client/modules/IDE/components/UploadFileModal.jsx @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { Link } from 'react-router'; +import FileUploader from './FileUploader'; +import { getreachedTotalSizeLimit } from '../selectors/users'; + +class UploadFileModal extends React.Component { + propTypes = { + reachedTotalSizeLimit: PropTypes.bool.isRequired + } + + render() { + return ( +
    { this.modal = element; }}> + { this.props.reachedTotalSizeLimit && +

    + { + `You have reached the size limit for the number of files you can upload to your account. + If you would like to upload more, please remove the ones you aren't using anymore by + looking through your ` + } + assets + {'.'} +

    + } + { !this.props.reachedTotalSizeLimit && +
    + +
    + } +
    + ); + } +} + +function mapStateToProps(state) { + return { + reachedTotalSizeLimit: getreachedTotalSizeLimit(state) + }; +} + +export default connect(mapStateToProps)(UploadFileModal); diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index b573d223..8b589e51 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -12,6 +12,7 @@ import Toolbar from '../components/Toolbar'; import Preferences from '../components/Preferences'; import NewFileModal from '../components/NewFileModal'; import NewFolderModal from '../components/NewFolderModal'; +import UploadFileModal from '../components/UploadFileModal'; import ShareModal from '../components/ShareModal'; import KeyboardShortcutModal from '../components/KeyboardShortcutModal'; import ErrorModal from '../components/ErrorModal'; @@ -349,12 +350,8 @@ class IDEView extends React.Component { - {this.props.ide.modalIsVisible && - + { this.props.ide.modalIsVisible && + } {this.props.ide.newFolderModalVisible && } + {this.props.ide.uploadFileModalVisible && + + } { this.props.location.pathname === '/about' && { return Object.assign({}, state, { runtimeErrorWarningVisible: false }); case ActionTypes.SHOW_RUNTIME_ERROR_WARNING: return Object.assign({}, state, { runtimeErrorWarningVisible: true }); + case ActionTypes.OPEN_UPLOAD_FILE_MODAL: + return Object.assign({}, state, { uploadFileModalVisible: true }); + case ActionTypes.CLOSE_UPLOAD_FILE_MODAL: + return Object.assign({}, state, { uploadFileModalVisible: false }); default: return state; } diff --git a/client/modules/IDE/selectors/users.js b/client/modules/IDE/selectors/users.js new file mode 100644 index 00000000..d223e4d9 --- /dev/null +++ b/client/modules/IDE/selectors/users.js @@ -0,0 +1,24 @@ +import { createSelector } from 'reselect'; + +const getAuthenticated = state => state.user.authenticated; +const getTotalSize = state => state.user.totalSize; + +export const getCanUploadMedia = createSelector( + getAuthenticated, + getTotalSize, + (authenticated, totalSize) => { + if (!authenticated) return false; + // eventually do the same thing for verified when + // email verification actually works + if (totalSize > 250000000) return false; + return true; + } +); + +export const getreachedTotalSizeLimit = createSelector( + getTotalSize, + (totalSize) => { + if (totalSize > 250000000) return true; + return false; + } +);