Ec issue #29 bug fix - Lists in the Nav Bar throw error when local storage is empty

[3campos]

Description

The list elements in the Navigation Bar contained a const declaration that used the "getItem" method to obtain a value from local storage. When this method was run, an error would occur when local storage was empty or did not contain a value for the key, "tcl-shopping-list-path". Specifically, the application would throw an error and the home page would be blank after signing in to the app.

Updates

To resolve this bug that stemmed from the NavigationBarSingleList component, I changed the localStorageListName const declaration to an arrow function and added a try-catch statement.

Before Bug Fix

Testing Steps / QA Criteria

Steps to reproduce the behavior:

• Git pull
• Open the branch named ec-issue-29-bug-fix
• Run npm start
• Sign out of the application by using the Sign Out button in the lower-left hand corner.
• Open the Inspect Element tool on Chrome and open the "Application tab". Confirm that the local storage is empty/cleared.
• Sign in to the application. The home page should appear. Confirm that no error is thrown by the application in the console log.

[github-actions]

Visit the preview URL for this PR (updated for commit 31ee93d):

https://tcl-66-smart-shopping-list--pr60-ec-issue-29-bug-fix-9cho9qzz.web.app

_{(expires Thu, 11 Apr 2024 23:47:12 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2dc16cb2a79cbd6723fdc511b73e0743df1d18d0}

[eonflower]

Nice job Emilio. Everything seems to be working on my end!

[jeremiahfallin]

This does fix the issue of the page breaking when the user has never been on a list and they sign in for the first time but it loses the feature of the bullet point being blue for the list the current user is on.

You should be able to fix the one issue while keeping the blue bullet feature.

If you need a hint: Try console.logging localStorageListName, and then look into optional chaining: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

[3campos]

This does fix the issue of the page breaking when the user has never been on a list and they sign in for the first time but it loses the feature of the bullet point being blue for the list the current user is on.

You should be able to fix the one issue while keeping the blue bullet feature.

If you need a hint: Try console.logging localStorageListName, and then look into optional chaining: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Thanks, @jeremiahfallin. I fixed the issue using your optional chaining solution. I also fixed a related problem with a blue background not being applied to the nav bar list element that is being viewed on the list page.

[jeremiahfallin]

Nice fix, approved!