feat: implemented functionality for adding file/folder from sidebar context menu

web/src/components/nameInputModal.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material'
+
+import { BootstrapDialogTitle } from './dialogTitle'
+import { BootstrapDialog } from './modal'
+
+type NameInputModalProps = {
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  isFolder: boolean
+  add: (name: string) => void
+}
+
+const NameInputModal = ({
+  open,
+  setOpen,
+  isFolder,
+  add
+}: NameInputModalProps) => {
+  const [name, setName] = useState('')
+  const [hasError, setHasError] = useState(false)
+  const [errorText, setErrorText] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+
+    const folderNameRegex = /[`!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/
+    const fileNameRegex = /[`!@#$%^&*()_+\-=[\]{};':"\\|,<>/?~]/
+    const fileNameExtensionRegex = /.(exe|sh|htaccess)$/i
+
+    const specialChars = isFolder ? folderNameRegex : fileNameRegex
+
+    if (specialChars.test(value)) {
+      setHasError(true)
+      setErrorText('can not have special characters')
+    } else if (!isFolder && fileNameExtensionRegex.test(value)) {
+      setHasError(true)
+      setErrorText('can not add file with extensions [exe, sh, htaccess]')
+    } else {
+      setHasError(false)
+      setErrorText('')
+    }
+
+    setName(value)
+  }
+
+  return (
+    <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
+      <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
+        {isFolder ? 'Add Folder' : 'Add File'}
+      </BootstrapDialogTitle>
+      <DialogContent dividers>
+        <TextField
+          fullWidth
+          variant="outlined"
+          label={isFolder ? 'Folder Name' : 'File Name'}
+          value={name}
+          onChange={handleChange}
+          error={hasError}
+          helperText={errorText}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" onClick={() => setOpen(false)}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => {
+            add(name)
+          }}
+          disabled={hasError || !name}
+        >
+          Add
+        </Button>
+      </DialogActions>
+    </BootstrapDialog>
+  )
+}
+
+export default NameInputModal

web/src/components/tree.tsx

@@ -4,6 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
 import DeleteConfirmationModal from './deleteConfirmationModal'
+import NameInputModal from './nameInputModal'
 
 import { TreeNode } from '../utils/types'
 
@@ -12,6 +13,8 @@ type Props = {
   selectedFilePath: string
   handleSelect: (filePath: string) => void
   deleteNode: (path: string, isFolder: boolean) => void
+  addFile: (path: string) => void
+  addFolder: (path: string) => void
   defaultExpanded?: string[]
 }
 
@@ -20,6 +23,8 @@ const TreeView = ({
   selectedFilePath,
   handleSelect,
   deleteNode,
+  addFile,
+  addFolder,
   defaultExpanded
 }: Props) => {
   return (
@@ -35,6 +40,8 @@ const TreeView = ({
         selectedFilePath={selectedFilePath}
         handleSelect={handleSelect}
         deleteNode={deleteNode}
+        addFile={addFile}
+        addFolder={addFolder}
         defaultExpanded={defaultExpanded}
       />
     </ul>
@@ -48,12 +55,16 @@ const TreeViewNode = ({
   selectedFilePath,
   handleSelect,
   deleteNode,
+  addFile,
+  addFolder,
   defaultExpanded
 }: Props) => {
   const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
     useState(false)
   const [deleteConfirmationModalMessage, setDeleteConfirmationModalMessage] =
     useState('')
+  const [nameInputModalOpen, setNameInputModalOpen] = useState(false)
+  const [nameInputModalForFolder, setNameInputModalForFolder] = useState(false)
   const [childVisible, setChildVisibility] = useState(false)
   const [contextMenu, setContextMenu] = useState<{
     mouseX: number
@@ -108,6 +119,25 @@ const TreeViewNode = ({
     deleteNode(node.relativePath, node.isFolder)
   }
 
+  const handleNewFolderItemClick = () => {
+    setContextMenu(null)
+    setNameInputModalOpen(true)
+    setNameInputModalForFolder(true)
+  }
+
+  const handleNewFileItemClick = () => {
+    setContextMenu(null)
+    setNameInputModalOpen(true)
+    setNameInputModalForFolder(false)
+  }
+
+  const addFileFolder = (name: string) => {
+    setNameInputModalOpen(false)
+    const path = node.relativePath + '/' + name
+    if (nameInputModalForFolder) addFolder(path)
+    else addFile(path)
+  }
+
   return (
     <div onContextMenu={handleContextMenu} style={{ cursor: 'context-menu' }}>
       <li style={{ display: 'list-item' }}>
@@ -131,6 +161,8 @@ const TreeViewNode = ({
               selectedFilePath={selectedFilePath}
               handleSelect={handleSelect}
               deleteNode={deleteNode}
+              addFile={addFile}
+              addFolder={addFolder}
               defaultExpanded={defaultExpanded}
             />
           ))}
@@ -141,6 +173,12 @@ const TreeViewNode = ({
         message={deleteConfirmationModalMessage}
         _delete={deleteConfirm}
       />
+      <NameInputModal
+        open={nameInputModalOpen}
+        setOpen={setNameInputModalOpen}
+        isFolder={nameInputModalForFolder}
+        add={addFileFolder}
+      />
       <Menu
         open={contextMenu !== null}
         onClose={() => setContextMenu(null)}
@@ -153,7 +191,16 @@ const TreeViewNode = ({
       >
         {node.isFolder &&
           ['Add Folder', 'Add File'].map((item) => (
-            <MenuItem key={item}>{item}</MenuItem>
+            <MenuItem
+              key={item}
+              onClick={() =>
+                item === 'Add Folder'
+                  ? handleNewFolderItemClick()
+                  : handleNewFileItemClick()
+              }
+            >
+              {item}
+            </MenuItem>
           ))}
         <MenuItem>Rename</MenuItem>
         <MenuItem disabled={!node.relativePath} onClick={handleDeleteItemClick}>