Improve user navigation in the list and between lists #39
Conversation
…ke shopping lists navigate to the list view
|
Visit the preview URL for this PR (updated for commit 275ca7c): https://tcl-78-smart-shopping-list--pr39-el-improve-list-nav-vxu6gooh.web.app (expires Thu, 03 Oct 2024 17:27:46 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c781903507c1507075d7a974036959ddeec29c0a |
There was a problem hiding this comment.
Great work! This PR addresses very important features for the app and contributes a lot to making the navigation smoother. Good job!
I only found one issue: when there are no items in a list, I wasn’t able to see the form. See the comment in the List view, line 83, for further details.
| @@ -83,6 +80,8 @@ export function List({ data, listPath, lists }) { | |||
| )} | |||
| {lists.length > 0 && data.length > 0 && ( | |||
| <> | |||
| <AddItem data={data} listPath={listPath} /> | |||
There was a problem hiding this comment.
I think having the form here makes perfect sense in terms of usability and navigation within the app. However, I noticed that when I’m on a list with no items, I can’t see the form for adding items in either the ManageList or List views:
Screen.Recording.2024-09-26.at.17.33.14.mov
| } catch (error) { | ||
| console.error(error.message, error); | ||
| setErrorMsg('Failed to delete the item. Please try again!'); | ||
| alert('Failed to delete the item. Please try again!'); | ||
| } | ||
| }; | ||
|
|
There was a problem hiding this comment.
A further improvement for this view could be displaying the list name so users can always know which list they are interacting with.
| } | ||
|
|
||
| await addItem(listPath, { | ||
| itemName: name, |
There was a problem hiding this comment.
Once this PR is merged, you may want to integrate the changes introduced, so item names are capitalized before being saved in Firestore.
Description
Clicking on a shopping list button in
Homeview navigates the user to theListview of that shopping list. All success / error messages are handled via alert window instead of rendering an element on the page. The form for adding a new item was moved into theListview to optimise the UX. Additionally, as part of refactoring,AddItemandAddListwere moved into new separate components to improve the readability of the codebase.Related Issue
closes #34
Acceptance criteria
Manage Listview to theListviewHomeview, the user is redirected to theListview for that shopping listconfirmoralertwindowType of Changes
enhancementUpdates
Updated List view
Alert on creating a new list
Testing Steps / QA Criteria
npm startListview to see the add item form