import { useMemo, useState } from 'react'; import { FaFile, FaFolder, FaFolderOpen, FaTrash, FaPen } from 'react-icons/fa'; import Controls from './Controls'; import { useDirectoryContext } from './context/DirectoryContext'; import { addNodeChildren, updateNode, deleteNode } from './state/actions'; import { FILE_CONTROLS, FOLDER_CONTROLS, NODE_TYPES } from '../constants'; export const computeConfigBasedOnType = (type, isOpen) => { if (type === NODE_TYPES.FILE) { return { icon: FaFile, controls: FILE_CONTROLS, }; } return { icon: isOpen ? FaFolderOpen : FaFolder, controls: FOLDER_CONTROLS, }; }; const Node = ({ type, name, id, children, level, isNew }) => { const [nodeName, setNodeName] = useState(name); const [isEdit, setIsEdit] = useState(isNew); const [isOpen, setIsOpen] = useState(false); const [error, setError] = useState(false); const { dispatch } = useDirectoryContext(); const config = computeConfigBasedOnType(type, isOpen); const Icon = config.icon; const handleControlItemClick = (action) => { if ( type === NODE_TYPES.FOLDER && (action === 'createFile' || action === 'createFolder') ) { setIsOpen(true); return dispatch( addNodeChildren({ type: action === 'createFile' ? NODE_TYPES.FILE : NODE_TYPES.FOLDER, parentId: id, }) ); } if (action === 'edit') { setIsEdit(true); } if (action === 'remove') { return dispatch( deleteNode({ id, }) ); } }; const updateNodeName = (e) => { if (!isNew && !nodeName) { setError(true); return; } else if (isNew && !nodeName) { return dispatch( deleteNode({ id, }) ); } dispatch( updateNode({ id, name: nodeName, isNew: false, }) ); setError(false); setIsEdit(false); }; const handleKeyDown = (e) => { const { key = '', keyCode = -1 } = e; const isEnterKey = key.toLowerCase() === 'enter' || keyCode === 13; if (isEnterKey) { updateNodeName(); } }; const handleTitleClick = () => { if (!isEdit && type === NODE_TYPES.FOLDER) { setIsOpen(!isOpen); } }; return (

{isEdit ? (

setNodeName(e.target.value)} onKeyDown={handleKeyDown} onBlur={updateNodeName} autoFocus /> {error ?

File or Folder name must be provided

: null}

) : (

{nodeName}

)}

{children && children.length && isOpen ? (

) : null}

); }; const Nodes = ({ nodes, level = 0 }) => { return (

{nodes.map((node) => { return ; })}

); }; export default Nodes;

How to build a File Explorer? Atlassian Frontend Machine Coding Round Question | JavaScript Interview Question | React.js

@Yomesh Gupta