Misc fixes for file explorer.

- Add validation while dropping a file
- Refactor removing file to work on path not reference
- style fixes

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 (

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) {
-		this.setState({
-			currentItem: {
+	removeFileHandler(file) {
+		const currentItem = {
 			...this.state.currentItem,
-				files: this.state.currentItem.files.filter(
-					file => file !== fileToRemove
-				)
-			}
+			files: [...this.state.currentItem.files]
+		};
+		removeFileAtPath(currentItem.files, file.path);
+		this.setState({
+			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]

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

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;