Add welcoming prompt

[ToobaJamal]

Co-authored-by: [email protected]

Description

This change adds a welcoming prompt on the List page. If the user goes to the List page with no list token saved in local storage, an Add item button is displayed on the screen. Clicking on the Add item button takes the user to the add-item page.

Related Issue

Closes #7

Acceptance Criteria

• The list view, when there are no items to display, should show a prompt (e.g., a button) for the user to add their first item

Type of Changes

	Type
	🐛 Bug fix
✓	✨ New feature
	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

Before

issue7_before.mp4

After

issue7_after.mp4

Testing Steps / QA Criteria

1. Run git checkout tj-la-new-list-welcome-message
2. Run npm start
3. Verify if the List page shows an Add item button which takes you to the add-item page when there is no saved list in your browser

[github-actions]

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

https://tcl-60-smart-shopping-list--pr20-tj-la-new-list-welco-botvyzmi.web.app

_{(expires Sat, 06 May 2023 15:38:31 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 93ba99965233232f14cf05d9d95de4adc510bd3b}

[RajGM]

Hi, @ToobaJamal and @labrocadabro
The prompt is not showing up in the preview link.

[ToobaJamal]

Hi, @ToobaJamal and @labrocadabro The prompt is not showing up in the preview link.

Hi Raj,

I just checked it and its working on my browser. @labrocadabro, could you please confirm?

welcoming_prompt.mp4

[labrocadabro]

I also checked from the preview link and it seems to be fine.

Screen.Recording.2023-04-28.at.6.40.34.AM.mov

[RajGM]

Working on mine as well.

[paramsiddharth]

Good work, Tooba and Laura! :)