I am trying to write a terminal emulator in a react app, for a personal coding website. I’m trying to create basic functionality, namely ‘pwd’, ‘ls’, ‘cat’ and ‘cd’. I have a react component that does all the work for the file explorer, which is basically used to keep track of the current folder. Here is the code:
import React, { useState } from 'react';
const FileExplorer = () => {
const [currentDirectory, setCurrentDirectory] = useState('/home/user');
const [fileContents, setFileContents] = useState({
'/home/user/file1.txt': 'Content of file1.txt',
'/home/user/file2.txt': 'Content of file2.txt',
'/home/user/folder1': {
'/home/user/file3.txt': 'Content of file3.txt',
},
});
const [parentDirectory, setParentDirectory] = useState(null);
const getCurrentDirectoryContents = () => {
return listDirectory(currentDirectory);
};
const listDirectory = (directory) => {
const entries = Object.keys(fileContents);
const currentDirectoryEntries = entries.filter((path) =>
path.startsWith(directory)
);
console.log('Current Directory Entries:', currentDirectoryEntries);
const subdirectoryEntries = currentDirectoryEntries.filter(
(path) => typeof fileContents[path] === 'object'
);
subdirectoryEntries.forEach((subdirectory) => {
const subdirectoryPath = subdirectory + '/';
const subdirectoryContents = listDirectory(subdirectoryPath);
currentDirectoryEntries.push(...subdirectoryContents);
});
return currentDirectoryEntries;
};
const changeDirectory = (newDirectory) => {
if (newDirectory === '..') {
if (parentDirectory) {
setCurrentDirectory(parentDirectory);
setParentDirectory(null);
} else {
return 'cd: ../: No such file or directory';
}
} else if (newDirectory.startsWith('/')) {
if (fileContents[newDirectory] && typeof fileContents[newDirectory] === 'object') {
setParentDirectory(currentDirectory);
setCurrentDirectory(newDirectory);
} else {
return `cd: ${newDirectory}: Not a directory`;
}
} else {
const newPath = currentDirectory + '/' + newDirectory;
if (fileContents[newPath] && typeof fileContents[newPath] === 'object') {
setParentDirectory(currentDirectory);
setCurrentDirectory(newPath);
} else {
return `cd: ${newDirectory}: Not a directory`;
}
}
};
const readFile = (filePath) => {
if (filePath.startsWith('/')) {
if (fileContents[filePath]) {
return fileContents[filePath];
} else {
return `cat: ${filePath}: No such file or directory`;
}
} else {
const fullPath = currentDirectory + '/' + filePath;
if (fileContents[fullPath]) {
return fileContents[fullPath];
} else {
return `cat: ${filePath}: No such file or directory`;
}
}
};
const ls = () => {
const currentDirContents = getCurrentDirectoryContents();
const relativePaths = currentDirContents.map((path) =>
path.substring(currentDirectory.length)
);
return relativePaths.join(' ');
};
return { currentDirectory, getCurrentDirectoryContents, changeDirectory, readFile, ls };
};
export default FileExplorer;
The issue is, when I ‘cd’ into folder1, the file directory knows it’s in folder1 (pwd returns /home/user/folder1) but when I type ‘ls’, it does not print out that file3 is in the folder. Nor can I ‘open’ file3 using the cat command like I can the files in the root folders. What am I doing wrong here?
I’ve tried changing the folder structure around, and changing some of the functions, but no avail.