diff --git a/src/components/SidePane.jsx b/src/components/SidePane.jsx index 692f122..a15fb3c 100644 --- a/src/components/SidePane.jsx +++ b/src/components/SidePane.jsx @@ -103,27 +103,27 @@ function File({ }, 1); } function dragStartHandler(e) { - console.log(file.path); e.dataTransfer.setData('text/plain', file.path); } function dragOverHandler(e) { if (file.isFolder) { e.preventDefault(); - e.target.classList.add('is-being-dragged-over'); - e.target.style.outline = '1px dashed'; + console.log(e.target); + e.currentTarget.classList.add('is-being-dragged-over'); + e.currentTarget.style.outline = '1px dashed'; } } function dragLeaveHandler(e) { if (file.isFolder) { e.preventDefault(); - e.target.style.outline = null; + e.currentTarget.style.outline = null; } } function dropHandler(e) { if (file.isFolder) { e.preventDefault(); onFileDrop(e.dataTransfer.getData('text/plain'), file); - e.target.style.outline = null; + e.currentTarget.style.outline = null; } } return ( diff --git a/src/components/app.jsx b/src/components/app.jsx index 407afdc..227e497 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -26,7 +26,8 @@ import { linearizeFiles, assignFilePaths, getFileFromPath, - removeFileAtPath + removeFileAtPath, + doesFileExistInFolder } from '../fileUtils'; import { itemService } from '../itemService'; import '../db'; @@ -1215,14 +1216,14 @@ export default class App extends Component { assignFilePaths(currentItem.files); this.setState({ currentItem }); } - removeFileHandler(fileToRemove) { + removeFileHandler(file) { + const currentItem = { + ...this.state.currentItem, + files: [...this.state.currentItem.files] + }; + removeFileAtPath(currentItem.files, file.path); this.setState({ - currentItem: { - ...this.state.currentItem, - files: this.state.currentItem.files.filter( - file => file !== fileToRemove - ) - } + currentItem }); } renameFileHandler(oldFileName, newFileName) { @@ -1242,11 +1243,18 @@ export default class App extends Component { fileDropHandler(sourceFilePath, destinationFolder) { let { currentItem } = this.state; const { file } = getFileFromPath(currentItem.files, sourceFilePath); + if (doesFileExistInFolder(destinationFolder, file.name)) { + alert( + `File with name "${ + file.name + }" already exists in the destination folder.` + ); + return; + } if (file) { destinationFolder.children.push(file); removeFileAtPath(currentItem.files, sourceFilePath); - currentItem = { ...currentItem, files: [...currentItem.files] diff --git a/src/fileUtils.js b/src/fileUtils.js index f00842d..3c6aacb 100644 --- a/src/fileUtils.js +++ b/src/fileUtils.js @@ -85,3 +85,13 @@ export function removeFileAtPath(files, path) { const { index } = getChildFileFromName(currentFolder, pathPieces[0]); currentFolder.splice(index, 1); } + +/** + * Checks if a file with same name exists in the passed folder. + * @param {object} folder Folder to search in + * @param {string} fileName File name to search for + */ +export function doesFileExistInFolder(folder, fileName) { + const details = getChildFileFromName(folder.children, fileName); + return !!details.file; +} diff --git a/src/style.css b/src/style.css index f58115f..6aa9f45 100644 --- a/src/style.css +++ b/src/style.css @@ -1629,19 +1629,18 @@ body:not(.is-app) .show-when-app { cursor: pointer; } /* 1st level nesting */ -.sidebar__folder-wrap > div .sidebar__file { +.sidebar__folder-wrap .sidebar__file { padding-left: 1rem; } /* 2nd level nesting */ -.sidebar__folder-wrap .sidebar__folder-wrap > div > .sidebar__file { +.sidebar__folder-wrap .sidebar__folder-wrap .sidebar__file { padding-left: 2rem; } /* 3rd level nesting */ .sidebar__folder-wrap .sidebar__folder-wrap .sidebar__folder-wrap - > div - > .sidebar__file { + .sidebar__file { padding-left: 3rem; } @@ -1657,7 +1656,7 @@ body:not(.is-app) .show-when-app { .sidebar__file-icon { width: 16px; height: 16px; - margin-right: 10px; + margin-right: 8px; } .sidebar__file-options { position: absolute;