File Viewer v2

Simulated file viewer / File hierarchy visualizer in Blazor in WebAssembly.

For exercise details, check EXERCISE.md.

This is a clean-room remake of File Viewer (v1).

Approx. 1,5 year later.

Watch the video.

Scenario

TL;DR; Parses file paths and displays them in a tree view.

The program parses hard-coded paths and builds an object hierarchy out of them. This tree consists if Nodes that can represent either files or directories. A directory may have child nodes.

The nodes then get displayed in a Graphical User Interface (GUI) consisting of a Tree View and an Item View. The Item View displays both files and directories. Directories can be displayed as either a grid or a table of child items. When clicking in either view the state will change in the other.

Items can be created and deleted from the UI.

Differences from v1

• Built on .NET 6 and the latest version C# (version 10) and Blazor
• Using MudBlazor component library instead of Bootstrap - Material Design and more goodies out of the box
• Simplified data model - from parsing the path to building and manipulating the tree
• Better unit tests - and I'm using Shoudly.

Issues

• When focusing an item in the Item View, the corresponding item does not get selected in the Tree View.
• The "Go Back" disabled/enabled state does not get updated when navigating using the tree view.

Watch out for comments in code!

Proposed improvements

• Ability to rename files and directories.
• UI

Build instructions

You need to have .NET 6 SDK installed to build this project.

No other dependencies required. Not even Node.

In the terminal, while in FileViewer directory, run the following command:

dotnet run

Tests

To run tests, navigate to FileViewer.Tests, and run:

dotnet test

Edit the code

This solution is based on .NET 6, which is supported by the following editors:

• Visual Studio 2022 Preview
• Visual Studio for Mac 2022 Preview
• Visual Studio (VS) Code

You can of course edit the files in Notepad or Emacs. :)