Practical Recursion: Implementing a File Tree View in React & Electron
Recently, I published a react component to npm that renders a file tree React component in a native Electron application. It was a fun project, and pretty comprehensive, covering basic computer science techniques through advanced front-end frameworks, so I thought it would be a good topic to share.
This post assumes the reader has an in-depth knowledge of React, Redux, and JavaScript ES2015. Also, in examples, I have left out import statements to keep things simple.
First, ….why?
Good question. Why did I make this component? Recently I completed Fullstack Academy’s (www.fullstackacademy.com) 3 month immersive bootcamp. At the end of the program, students complete a comprehensive capstone project that showcases their skill as developers and usually includes a few new techniques that they picked up to make the project great. My group and I decided to make a desktop application that would allow developers to pair program together remotely from anywhere. You can find the deployed project here.
The app features peer to peer video, command line Git functionality for version control, and a live updating code editor. Alongside the code editor we wanted a responsive file tree view that would expand and contract when a user entered or closed a directory. I was responsible for implementing this, and realized it could be useful for others as an importable component. It also showed me a very practical use of recursion, and was a challenge to integrate into React, hence this post.
Step 1: Creating the File Tree Object
To create a representation of a file tree in JavaScript, the object literal came to mind as a great framework. So, how do we populate this object? Well, to start things off, we need a root directory, and access to the files and folders inside that directory. How do we get that? Enter Node’s fs library.
Because this component is implemented in a desktop Electron application, we have access to the file system and Node’s suite of methods that allow us to manipulate it. The first thing we need to do is get a list of all files and folders. fs.readdir gives us that. Because this method (and most other fs methods) are asynchronous, it would be nice if we could get these into a promise for more legible code flow and better error handling. Bluebird’s promisifyAll function allows us to create a promisified version of any set of asynchronous functions. So, our readdir function becomes fs.readdirAsync, and it gets used like so:
Easy. This returns a promise for an array of file/folder name strings.
So what’s next? For each file/folder we need to create an object with some useful information for our front end. For instance, it would be nice to know if what we’re dealing with is a file or a folder. How can we tell if a something is a file or a folder? Well, the fs library provides us a method that gives meta data about a file, given a file path. Its the stat method, and one of the bits of data it provides is a boolean, returned from an isFile() method invocation. It will return true for a file, and false for a directory. Let’s see it in action:
OK, now for the hard part. We’re all set for files, but what about folders? Remember that folders can have folders inside them, and those folders can have folders inside them, and those folders can have….
We get it, Mike.
For each sub-directory, we need to do what we’re doing for the root directory: create an array of objects with important information about each file/folder for our front end. Recall the definition of recursion:
Recursion in computer science is a method where the solution to a problem depends on solutions to smaller instances of the same problem (as opposed to iteration).[1] The approach can be applied to many types of problems, and recursion is one of the central ideas of computer science.[2]
[1] Graham, Ronald; Donald Knuth; Oren Patashnik (1990). Concrete Mathematics. Chapter 1: Recurrent Problems.
[2] Epp, Susanna (1995). Discrete Mathematics with Applications (2nd ed.). p. 427.
Credit: wikipedia.org
That sounds like exactly what we need to do! So we’ll need to name our overall function, and then recursively call it when we encounter a folder.
Side note: recursive solutions typically depend on 2 cases: a recursive case, in which we recall our function, and a base case, in which we advance towards a terminating condition. This is what prevents us from exceeding our maximum call stack size. In our function, the base case is when we encounter a file, and the recursive case is when we encounter a folder.
I often find that its easier to solve recursive problems when you complete it in terms of the base case before adding in recursive calls. So let’s skip the recursive call for now, and come back to it later.
After we create our individual file object inside our mapping function, we need to return it. Then we need to take the array of promises we created and use Promise.all to resolve them in the order they came in:
OK, now we know our function will return a promise for an array of resolved promises, so our recursive call is easy. We’ll just add that array to a files property on our file object:
Step 2: Create the FileTree React Class
Now that we can create an object literal representation of a file tree, we need to use it to render the file tree view. Let’s create a React class called FileTree, and give it a files property on its local state. The reason for this will become evident soon. We know that our generateFileTreeObject needs to be given a directory string, so let’s assume that our user will provide that string as a prop.
Now we’re cooking with gas. Let’s start the render process. This part is a little tricky. We’re going to want to use React’s componentDidMount hook to call our generateFileTreeObject function. We know this returns a promise for an array of file-objects, so let’s .then off of this promise and set this.state to the array. Always remember to handle errors with .catch!
Now for the actual render method. This part is tricky as well. How can we give our file tree a visual representation of depth, especially when we don’t know how many nested directories there may be? Does this sound like a familiar problem? It should, because it is similar to the one we tackled when creating our generateFileTreeObject function. We need to recursively create additional FileTree components for each directory we encounter. Let’s see what it looks like.
We’ve now rendered a full file tree view! Let’s be proud of our work! But how can we make this better? Well anyone who has used a modern text editor knows that the file tree should expand and contract when we click on directories. Let’s implement it!
Step 3: Use React-Redux to Make the File Tree Dynamic
Right now our file tree renders out all at once, with all levels showing. It would be great if it started out as a list of files/folders in the root directory, and expanded/contracted when we clicked on a folder. Redux and React-Redux’s connect function make this easy. We’ll start by putting an object on our store that will hold all of our “visible” directories. This will start out as an empty object since we want our tree to start out only displaying the root directory. Next we’ll define a constant and an action creator that will add key value pairs to our visibility store object. Each key will be the file’s path, and each value will be true or false. This action creator can serve both purposes of setting the keys to either true or false depending on their current value. Next, we’ll create our reducer which will execute this action, and import it into the store. Finally we can used our reducer to create our store. In a typical setting, we would separate these portions out into their own modules, but for the purposes of this post, we’ll keep them all together.
Now we need to use React-Redux’s connect function to pass this global state into our component. Thats easy too!
Finally, we need to change our component to conditionally render out each level, depending on its visibility as laid out in the Redux store. We’ll also need to change our jsx slightly to allow for a click handler which will dispatch our toggleVisibility action passed down in the connect function.
And that’s it! There is a lot more functionality which could be implemented, such as a function that would fire when a file is clicked, icons to distinguish files from folders, styling, etc. You can find my completed implementation here: https://github.com/mperitz/react-filetree-electron. It looks just like this:
Please feel free to contribute to the project by making a pull request! Thanks for reading!
