an incremental step in separating upload file and new file modals

Author: catarak

client/constants.js

@@ -72,6 +72,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';

client/modules/IDE/actions/ide.js

@@ -74,6 +74,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

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';
 
 const exitUrl = require('../../../images/exit.svg');
 
@@ -27,43 +30,28 @@ class NewFileModal extends React.Component {
   }
 
   render() {
-    const modalClass = classNames({
-      'modal': true,
-      'modal--reduced': !this.props.canUploadMedia
-    });
     return (
-      <section className={modalClass} ref={(element) => { this.modal = element; }}>
+      <section className="modal" ref={(element) => { this.modal = element; }}>
         <div className="modal-content">
           <div className="modal__header">
-            <h2 className="modal__title">Add File</h2>
-            <button className="modal__exit-button" onClick={this.props.closeModal}>
+            <h2 className="modal__title">Create File</h2>
+            <button className="modal__exit-button" onClick={this.props.closeNewFileModal}>
               <InlineSVG src={exitUrl} alt="Close New File Modal" />
             </button>
           </div>
           <NewFileForm
             focusOnModal={this.focusOnModal}
             {...this.props}
           />
-          {(() => {
-            if (this.props.canUploadMedia) {
-              return (
-                <div>
-                  <p className="modal__divider">OR</p>
-                  <FileUploader />
-                </div>
-              );
-            }
-            return '';
-          })()}
         </div>
       </section>
     );
   }
 }
 
 NewFileModal.propTypes = {
-  closeModal: PropTypes.func.isRequired,
-  canUploadMedia: PropTypes.bool.isRequired
+  createFile: PropTypes.func.isRequired,
+  closeNewFileModal: PropTypes.func.isRequired
 };
 
 function validate(formProps) {
@@ -78,9 +66,22 @@ function validate(formProps) {
   return errors;
 }
 
+function mapStateToProps(state) {
+  return {
+    canUploadMedia: getCanUploadMedia(state),
+    reachedTotalSizeLimit: getreachedTotalSizeLimit(state)
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ createFile, closeNewFileModal }, dispatch);
+}
 
-export default reduxForm({
-  form: 'new-file',
-  fields: ['name'],
-  validate
-})(NewFileModal);
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  reduxForm({
+    form: 'new-file',
+    fields: ['name'],
+    validate
+  })
+)(NewFileModal);

client/modules/IDE/components/Sidebar.jsx

@@ -112,6 +112,19 @@ class Sidebar extends React.Component {
                   Add file
                 </button>
               </li>
+              <li>
+                <button
+                  aria-label="upload file"
+                  onClick={() => {
+                    this.props.openUploadFileModal();
+                    setTimeout(this.props.closeProjectOptions, 0);
+                  }}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
+                >
+                  Add file
+                </button>
+              </li>
             </ul>
           </div>
         </div>
@@ -136,6 +149,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
   }),

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 (
+      <section className="modal" ref={(element) => { this.modal = element; }}>
+        { this.props.reachedTotalSizeLimit &&
+          <p>
+            {
+              `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 `
+            }
+            <Link to="/assets">assets</Link>
+            {'.'}
+          </p>
+        }
+        { !this.props.reachedTotalSizeLimit &&
+          <div>
+            <FileUploader />
+          </div>
+        }
+      </section>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    reachedTotalSizeLimit: getreachedTotalSizeLimit(state)
+  };
+}
+
+export default connect(mapStateToProps)(UploadFileModal);

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';
@@ -357,18 +358,19 @@ class IDEView extends React.Component {
           </SplitPane>
         </div>
         { this.props.ide.modalIsVisible &&
-          <NewFileModal
-            canUploadMedia={this.props.user.authenticated}
-            closeModal={this.props.closeNewFileModal}
-            createFile={this.props.createFile}
-          />
+          <NewFileModal />
         }
         { this.props.ide.newFolderModalVisible &&
           <NewFolderModal
             closeModal={this.props.closeNewFolderModal}
             createFolder={this.props.createFolder}
           />
         }
+        {this.props.ide.uploadFileModalVisible &&
+          <UploadFileModal
+            closeModal={this.props.closeUploadFileModal}
+          />
+        }
         { this.props.location.pathname.match(/sketches$/) &&
           <Overlay
             ariaLabel="project list"
@@ -501,6 +503,7 @@ IDEView.propTypes = {
     errorType: PropTypes.string,
     helpType: PropTypes.string,
     runtimeErrorWarningVisible: PropTypes.bool.isRequired,
+    uploadFileModalVisible: PropTypes.bool.isRequired
   }).isRequired,
   stopSketch: PropTypes.func.isRequired,
   project: PropTypes.shape({
@@ -558,7 +561,6 @@ IDEView.propTypes = {
   }).isRequired,
   dispatchConsoleEvent: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
-  closeNewFileModal: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
   cloneProject: PropTypes.func.isRequired,
@@ -571,7 +573,6 @@ IDEView.propTypes = {
   newFolder: PropTypes.func.isRequired,
   closeNewFolderModal: PropTypes.func.isRequired,
   createFolder: PropTypes.func.isRequired,
-  createFile: PropTypes.func.isRequired,
   closeShareModal: PropTypes.func.isRequired,
   showEditorOptions: PropTypes.func.isRequired,
   closeEditorOptions: PropTypes.func.isRequired,
@@ -604,6 +605,7 @@ IDEView.propTypes = {
   showRuntimeErrorWarning: PropTypes.func.isRequired,
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
   startSketch: PropTypes.func.isRequired,
+  closeUploadFileModal: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -9,6 +9,7 @@ const initialState = {
   preferencesIsVisible: false,
   projectOptionsVisible: false,
   newFolderModalVisible: false,
+  uploadFileModalVisible: false,
   shareModalVisible: false,
   shareModalProjectId: 'abcd',
   shareModalProjectName: 'My Cute Sketch',
@@ -108,6 +109,10 @@ const ide = (state = initialState, action) => {
       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;
   }

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;
+  }
+);