[MF] Adding Router to List Name Buttons on Home Screen

[krsnamara]

Description

This code imports React Router Dom Link component into the SingleList.jsx file. The Link component wraps the button in the single list with the "/list" endpoint. This changes each list item on the Home screen so that now when selecting a list you are routed to that specific list page. There is some lag in waiting for the listPath to return the promise and show the correct items. This could be resolved with some kind of loading spinner in a future issue. You can see that the listPath is already passed to the List component in that the name in the greeting matches the specific List the User selects.

Related Issue

closes #31
sub-issue of #14

Acceptance Criteria

• Make the lists on home page route to corresponding list items display page

Type of Changes

Use one or more labels to help your team understand the nature of the change(s) you’re proposing. E.g., bug fix or enhancement are common ones.

Updates

Before

Screen.Recording.2024-03-14.at.5.41.30.PM.mov

After

UI has changed a little with the default styling of and

Screen.Recording.2024-03-14.at.5.41.30.PM.mov

Testing Steps / QA Criteria

• Confirm you can log into your firebase, if not at test deploy to access domains list in firebase permissions settings.
• On Home page select any list you wish to navigate to.
• You will be routed to that list page and see those items.
• Navigate back to Home page and select another list you wish to visit.

[github-actions]

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

https://tcl-69-smart-shopping-list--pr32-mf-list-name-link-to-0gnoif2s.web.app

_{(expires Thu, 21 Mar 2024 21:52:29 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 93172cc46147b7d365c2b1b8239b61e2efb07a80}

[krsnamara]

@hsiangj @amalyam @piecanoe Pull request ready for team review.