Navigating through the File Tree and Loading Folders from the URL Chapter 5This is set to display the first element of the isLoading variable is set to error; otherwise,
show the loading text. In the error text, a link is included to send the user back to the
current URL without any URL hash. This will "reset" them back to the top of the document
tree so they can navigate back down. An improvement could be to break the current URL
down and suggest the same URL with the last folder removed.
Verify the error code is loading by adding a nonexistent path to the end of your URL and
ensuring the error message is displayed. Bear in mind your user may experience a false
positive on this error message in the sense that if the Dropbox API throws any kind of
error, this message will be displayed.
Using the back and forward buttons in your browser
To use the back and forward buttons in our browser, we are going to need to update our
code significantly. Currently, when the user clicks on a folder from either the structure or
breadcrumb, we prevent the default behavior of the browser by using .prevent on our
click handlers. We then immediately update the URL before we process the folder.
However, if we allow the app to update the URL using native behavior, we can then watch
for a hash URL update and use this to retrieve our new structure. Using this methodology,
the back and forward buttons would work without any further intervention, as they would
be updating the URL hash.
This would also improve the readability of our app, and reduce code weight as we would
be able to remove the navigate methods and click handlers on the links.
Removing unneeded code
The first step, before we add more code, is to remove the unnecessary code from our
components. Starting with the breadcrumb, remove the navigate method from the
component and the @click.prevent attribute from the link in the template.