From 7d05aa78e351945b474f8dfa9b3ce1492b4c2af4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 7 Apr 2020 19:47:51 -0300 Subject: [PATCH 01/13] :construction: create updatedName field in files reducer --- client/modules/IDE/components/FileNode.jsx | 32 ++++++++++++++-------- client/modules/IDE/components/Sidebar.jsx | 1 + client/modules/IDE/reducers/files.js | 2 +- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index f6563706..2979489e 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/client/modules/IDE/components/FileNode.jsx @@ -47,13 +47,19 @@ export class FileNode extends React.Component { }, 200); } + getName() { + const { updatedName, name } = this.props; + return updatedName || name; + } + handleFileClick(e) { e.stopPropagation(); - if (this.props.name !== 'root' && !this.isDeleting) { + if (this.getName() !== 'root' && !this.isDeleting) { this.props.setSelectedFile(this.props.id); } } + handleFileNameChange(event) { this.props.updateFileName(this.props.id, event.target.value); } @@ -66,9 +72,9 @@ export class FileNode extends React.Component { validateFileName() { const oldFileExtension = this.originalFileName.match(/\.[0-9a-z]+$/i); - const newFileExtension = this.props.name.match(/\.[0-9a-z]+$/i); - const hasPeriod = this.props.name.match(/\.+/); - const newFileName = this.props.name; + const newFileExtension = this.getName().match(/\.[0-9a-z]+$/i); + const hasPeriod = this.getName().match(/\.+/); + const newFileName = this.getName(); const hasNoExtension = oldFileExtension && !newFileExtension; const hasExtensionIfFolder = this.props.fileType === 'folder' && hasPeriod; const notSameExtension = oldFileExtension && newFileExtension @@ -115,8 +121,8 @@ export class FileNode extends React.Component { render() { const itemClass = classNames({ - 'sidebar__root-item': this.props.name === 'root', - 'sidebar__file-item': this.props.name !== 'root', + 'sidebar__root-item': this.getName() === 'root', + 'sidebar__file-item': this.getName() !== 'root', 'sidebar__file-item--selected': this.props.isSelectedFile, 'sidebar__file-item--open': this.state.isOptionsOpen, 'sidebar__file-item--editing': this.state.isEditingName, @@ -126,7 +132,7 @@ export class FileNode extends React.Component { return (
{(() => { // eslint-disable-line - if (this.props.name !== 'root') { + if (this.getName() !== 'root') { return (
@@ -155,11 +161,11 @@ export class FileNode extends React.Component {
); })()} - + { this.fileNameInput = element; }} @@ -225,7 +231,7 @@ export class FileNode extends React.Component {
  • + { this.fileNameInput = element; }} @@ -241,7 +242,7 @@ export class FileNode extends React.Component {
  • - -
    • - ); - })()} - - { this.fileNameInput = element; }} - onBlur={() => { - this.validateFileName(); - this.hideEditFileName(); - }} - onKeyPress={this.handleKeyPress} - /> + { !isRoot && +
    + + { isFile && + + + + } + { isFolder && +
    + -
    -
      - {(() => { // eslint-disable-line - if (this.props.fileType === 'folder') { - return ( -
    • - -
      • - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.fileType === 'folder') { - return ( -
    • - -
      • - ); - } - })()} -
    • - -
      • -
    • - -
      • -
    -
    - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.children) { - return ( -
    + } + { this.props.children && + + } ); } From 41637d283715c65e9736b12510feac38ca009687 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 16 Apr 2020 16:08:51 -0400 Subject: [PATCH 11/13] Move handleUploadClick from inline function, prevent user from uploading to folder if not authenticated --- client/components/__test__/FileNode.test.jsx | 1 + client/modules/IDE/components/FileNode.jsx | 36 ++++++++++++-------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/client/components/__test__/FileNode.test.jsx b/client/components/__test__/FileNode.test.jsx index 8b72261d..b70ebf14 100644 --- a/client/components/__test__/FileNode.test.jsx +++ b/client/components/__test__/FileNode.test.jsx @@ -24,6 +24,7 @@ describe('', () => { showFolderChildren: jest.fn(), hideFolderChildren: jest.fn(), canEdit: true, + authenticated: false }; component = shallow(); }); diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index 772b23c4..62e4db3e 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/client/modules/IDE/components/FileNode.jsx @@ -87,6 +87,11 @@ export class FileNode extends React.Component { setTimeout(() => this.hideFileOptions(), 0); } + handleClickUploadFile = () => { + this.props.openUploadFileModal(this.props.id); + setTimeout(this.hideFileOptions, 0); + } + handleClickDelete = () => { if (window.confirm(`Are you sure you want to delete ${this.props.name}?`)) { this.setState({ isDeleting: true }); @@ -252,19 +257,18 @@ export class FileNode extends React.Component { Create file -
  • - -
    • + { this.props.authenticated && +
  • + +
    • + } }
  • @@ -318,7 +322,8 @@ FileNode.propTypes = { showFolderChildren: PropTypes.func.isRequired, hideFolderChildren: PropTypes.func.isRequired, canEdit: PropTypes.bool.isRequired, - openUploadFileModal: PropTypes.func.isRequired + openUploadFileModal: PropTypes.func.isRequired, + authenticated: PropTypes.bool.isRequired }; FileNode.defaultProps = { @@ -329,7 +334,8 @@ FileNode.defaultProps = { function mapStateToProps(state, ownProps) { // this is a hack, state is updated before ownProps - return state.files.find(file => file.id === ownProps.id) || { name: 'test', fileType: 'file' }; + const fileNode = state.files.find(file => file.id === ownProps.id) || { name: 'test', fileType: 'file' }; + return Object.assign({}, fileNode, { authenticated: state.user.authenticated }); } function mapDispatchToProps(dispatch) { From 72622df155000a6616694f596ab78f67be2476c7 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 16 Apr 2020 16:16:19 -0400 Subject: [PATCH 12/13] Remove upload option from Sidebar if not authenticated --- client/modules/IDE/components/Sidebar.jsx | 29 +++++++++++++---------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx index 9a57ff4a..87b2c13d 100644 --- a/client/modules/IDE/components/Sidebar.jsx +++ b/client/modules/IDE/components/Sidebar.jsx @@ -113,19 +113,22 @@ class Sidebar extends React.Component { Create file
    • -
  • - -
    • + { + this.props.user.authenticated && +
  • + +
    • + } From 2c9fd982d0d5a85d940714ea515ed837c1963bc5 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 16 Apr 2020 16:22:59 -0400 Subject: [PATCH 13/13] Handle whitespace in file name validation --- client/modules/IDE/components/FileNode.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index 62e4db3e..4d560fc1 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/client/modules/IDE/components/FileNode.jsx @@ -116,8 +116,8 @@ export class FileNode extends React.Component { const hasExtensionIfFolder = this.props.fileType === 'folder' && hasPeriod; const notSameExtension = oldFileExtension && newFileExtension && oldFileExtension[0].toLowerCase() !== newFileExtension[0].toLowerCase(); - const hasEmptyFilename = updatedName === ''; - const hasOnlyExtension = newFileExtension && updatedName === newFileExtension[0]; + const hasEmptyFilename = updatedName.trim() === ''; + const hasOnlyExtension = newFileExtension && updatedName.trim() === newFileExtension[0]; if (hasEmptyFilename || hasNoExtension || notSameExtension || hasOnlyExtension || hasExtensionIfFolder) { this.setUpdatedName(currentName); } else {