Issue #6 : Share existing shopping list to a user

[stacy-tech]

Description

• Implemented a new feature that allows users to invite existing users to share their shopping list using an email ID.
• Created a form with a labeled input field for entering the user's email ID.
• Structured a Share List button that can be activated using both the mouse and the enter key.
• Added a message to alert the user if the list was successfully shared with the invited user.
• Display an error message if the email doesn't correspond to an existing user in the database.
• The form correctly identifies and submits valid email addresses.

Related Issue

• closes issue #6

Acceptance Criteria

The ManageList view shows a form that allows the user to enter an email to invite an existing user to a list, in addition to the form that allows them to add items to that list.

• [x] The input that accepts the email has a semantic label element associated with it
• [x] The user can submit this form with both the mouse and the Enter key
• [x] If the other user exists, the user is alerted that the list was shared
• [x] If the other user does not exist, the user is shown an error message that explains the problem

Type of Changes

Enhancement

Updates

Before

After

Testing Steps / QA Criteria

• Sign In using email account.
• Click on the list to be shared.
• Please note that a user can only share their own list.
• Navigate to the Manage List page.
• Input the recipient's email address and either click on the Share List button or press Enter.
• If the recipient's email address exists, a success alert will appear.
• An error message is shown if the invited user doesn't exist and if the list has already been shared with the recipient's email address.

[github-actions[bot]]

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

https://tcl-74-smart-shopping-list--pr24-sd-st-6-o6t0snvw.web.app

_{(expires Sat, 07 Sep 2024 15:09:30 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}

[NickRoccodev11]

looks great! I would mention in the testing criteria that a list you share has to be one you created, but all seems to be working well!

[shuveksha-tuladhar]

We have updated the testing criteria. Thank you @NickRoccodev11

[shuveksha-tuladhar]

Tests worked for me! Well done! My only question pertains to shareList function. If it is an async function (firebase, line 140), would it make sense to add an await in ManageList? I'm wondering this myself. Great job!

Thank you for the feedback @dterceroparker ! We believe adding await in either Firebase.js file and ManageList.jsx would give the same result. So Stacy and I decided to keep the code as is.

[jtkabenni]

Tests worked for me! Well done! My only question pertains to shareList function. If it is an async function (firebase, line 140), would it make sense to add an await in ManageList? I'm wondering this myself. Great job!

Thank you for the feedback @dterceroparker ! We believe adding await in either Firebase.js file and ManageList.jsx would give the same result. So Stacy and I decided to keep the code as is.

It may seem like the same result but it is slightly different! 👀