Render a user prompt and add item button when a shopping list is empty #22

emilysellers · 2023-04-24T21:50:05Z

Description

This PR improves the UI by providing the user with guidance on how to get started with the app:

The home page welcomes the user and guides them to create a new list or enter a token to view an existing list.
If their list is empty, a message and button are rendered for the user: the message lets the user know that their list is empty and invites them to click the add first item button which redirects to the add-item page.
If their list already has items, then the item search field, list header and list items are conditionally rendered.
On the add-item page, the user is prompted to add an item to their list.

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

revised.mov

Before our changes, the app did not have explicit prompts to help new users navigate through the app to add their first items to their grocery list.

After

part2.mov

With the addition of text on the Home page and the List page, new users now have a more guided experience in order to help them confidently add their very first item to their list.

For users who have not yet started a grocery list, we've also added a button on the List view page to prompt the user to add a first item to their list.

Testing Steps / QA Criteria

Navigate to Home view
Click on the "create new list" button
Click on the "add first item" button
Enter item name in text box and select a time frame ("Soon", "Kind of Soon", "Not Soon")
Click the Add Item button
Navigate to the List View page
Note: We would love more suggestions for how to improve our UI/UX to make it more user accessible for all.

github-actions · 2023-04-24T22:03:57Z

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

https://tcl-57-smart-shopping-list--pr22-es-bm-empty-list-pro-devszmzz.web.app

_{(expires Mon, 08 May 2023 04:28:39 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ad3eb6c34c2ec5986fcc218178df5985eb9c9ffb}

jongranados

Awesome improvements to the UI and UX! These change make for a much more inviting experience. Great work!

Two minor improvements for the future related to UI/UX but that are probably outside the scope of this issue:

prevent rendering the List page until the application has finished querying for a token's list items. It looks the List page is rendering prematurely. As a result, the user is met with "Your list currently has no items" for a brief second even if their list does in fact have items (see attached video).

Screen.Recording.2023-04-27.at.2.26.17.PM.mov

redirect the user to the Add Item page if they have an empty list (if they either just created a new list or they joined an empty list) instead of the List page. Currently, if they have an empty list they're redirected to the List page and once there, they're instructed to actually go to the Add Item page instead.

Amy-Pr · 2023-04-28T20:06:05Z

src/views/Home.jsx

@@ -34,14 +34,17 @@ export function Home({ setListToken }) {

 	return (
 		<div className="Home">
+			<h2>Welcome to your Smart Shopping List! </h2>{' '}


I've never seen the {' '} at the end of a line here in JSX. What does this line look like without it? And could this be a spacing issue better controlled with CSS?

Great question, Amy. Beth and I were wondering the same, as these kept appearing this week. I'm going to do a little research and see what I can find out about this.

It adds whitespace, and I don't know, but it's possible the linter adds this when you save. I notice when I use Prettier this can happen.

Agree with what @danathedev. Sometimes if I copy/paste or move things around in the code, that whitespace gets add unintentionally. Probably safe to remove!

Amy-Pr · 2023-04-28T20:27:17Z

src/views/List.jsx

+					<h3> Here are the items in your list:</h3>
+				</>
+			)}
+


This is really elegant, nice job. I had no idea you could use an inline conditional that way.

Amy-Pr

Nice Job, Beth and Emily! A few notes:
On my screen the clear button on the List view gets moved to the next line. Maybe that can be controlled later with CSS. Or another option to shorten the name of the button .. maybe "clear search" or "clear search box"

Also, and this is probably out of scope, but I wonder if later on down the line, we want the user to have the option to return back to Home to create another list if they want to. Currently cannot navigate back after creating the list.
Well done.

emilysellers · 2023-04-28T20:40:56Z

Awesome improvements to the UI and UX! These change make for a much more inviting experience. Great work!

Two minor improvements for the future related to UI/UX but that are probably outside the scope of this issue:

prevent rendering the List page until the application has finished querying for a token's list items. It looks the List page is rendering prematurely. As a result, the user is met with "Your list currently has no items" for a brief second even if their list does in fact have items (see attached video).

Screen.Recording.2023-04-27.at.2.26.17.PM.mov

redirect the user to the Add Item page if they have an empty list (if they either just created a new list or they joined an empty list) instead of the List page. Currently, if they have an empty list they're redirected to the List page and once there, they're instructed to actually go to the Add Item page instead.

Thanks, @jongranados! Agreed on both counts, those fixes would definitely improve the UX - nice catch!

emilysellers · 2023-04-28T20:44:24Z

Nice Job, Beth and Emily! A few notes: On my screen the clear button on the List view gets moved to the next line. Maybe that can be controlled later with CSS. Or another option to shorten the name of the button .. maybe "clear search" or "clear search box" Also, and this is probably out of scope, but I wonder if later on down the line, we want the user to have the option to return back to Home to create another list if they want to. Currently cannot navigate back after creating the list. Well done.

Thanks, @Amy-Pr! Great points there. I wonder if more concise button text might be good practice in general. And I agree that adding the option to return home to create another list would improve the app. I'll add TODO comments now for both of these items.

danainjax

Good work this week! Thanks for your pr and collaborating! The app is coming along. You should be proud. 😁

danainjax · 2023-04-29T14:08:26Z

src/views/List.jsx

+			{renderedListLength === 0 && (
+				<>
+					<h2>Your list currently has no items. </h2>
+					<h3>Click on the add first item button to start your list.</h3>
+					<Link to="/add-item">
+						<button> add first item</button>
+					</Link>
+				</>
+			)}
+			{renderedListLength > 0 && (
+				<>


Good job. You see this all the time in React, with the short-circuiting. You have choices here. You could also choose to render with an if/else (who would, but hey, it's an option), OR a ternary. {renderedListLength > 0? (return some JSX) : (return this other JSX)}

I started writing this exact thing before I saw that Dana had already said it! Great minds.

IMO, all of these choices for how to do conditional rendering come down to readability. Do the thing that makes the code easiest to understand!

Thanks, @danathedev and @mxmason, for the guidance here! This has been refactored with a ternary.

djtaylor8

Awesome job, @emilysellers and @bethmelmtv! Just a minor comment about removing the extra whitespace added. Great work this week!

djtaylor8 · 2023-04-29T15:04:56Z

src/views/Home.jsx

@@ -34,14 +34,17 @@ export function Home({ setListToken }) {

 	return (
 		<div className="Home">
+			<h2>Welcome to your Smart Shopping List! </h2>{' '}


Agree with what @danathedev. Sometimes if I copy/paste or move things around in the code, that whitespace gets add unintentionally. Probably safe to remove!

mxmason

I left a bunch of little UX copywriting notes for you to consider. Great work!

mxmason · 2023-04-30T19:15:31Z

src/views/List.jsx

+			{renderedListLength === 0 && (
+				<>
+					<h2>Your list currently has no items. </h2>
+					<h3>Click on the add first item button to start your list.</h3>
+					<Link to="/add-item">
+						<button> add first item</button>
+					</Link>
+				</>
+			)}
+			{renderedListLength > 0 && (
+				<>


I started writing this exact thing before I saw that Dana had already said it! Great minds.

IMO, all of these choices for how to do conditional rendering come down to readability. Do the thing that makes the code easiest to understand!

mxmason · 2023-04-30T19:20:27Z

src/views/List.jsx

+						<label htmlFor="search-filter">
+							Search for an item in your list:
+						</label>


It's usually a good idea to make our labels as short as possible. This saves space in our UI, eliminating a problem that Amy pointed out in her screenshot, and reduces clutter for users who are listening to our page via screen reader. Why not "Search" here?

Generally, you will find that labels for text inputs, radios, and the like can be longer if they have to, but button labels are very short. I once worked on a team where buttons could only contain two words or fewer, for example.

thank you EJ for this! This is good to know! I will update the button to "search"

mxmason · 2023-04-30T19:25:48Z

src/views/Home.jsx

-				<label htmlFor="tokenInput">
-					enter three word token to view existing list:
-				</label>
+				<label htmlFor="tokenInput">enter three word token:</label>


When we're labeling controls (elements that the user interacts with), we're generally not writing commands to the user; we're writing descriptions of the input we want. In this specific case, we can delete the word "Enter" from this text, turning it from a command to a description.

Oh that's so good to know EJ! Thanks for this tip! I'll update this as well :)

mxmason · 2023-04-30T19:27:18Z

src/views/Home.jsx

@@ -50,10 +53,9 @@ export function Home({ setListToken }) {
 						required
 					/>

-					<button type="submit">Submit</button>
+					<button type="submit">submit</button>


I recommend changing submit to Submit. Generally, labels are written in sentence case (I am a sentence), and not lower case or Title Case.

thanks for this Ej! It's updated now

…ab-lab/tcl-57-smart-shopping-list into es-bm-empty-list-prompt

bethmelmtv · 2023-05-01T00:11:51Z

Awesome job, @emilysellers and @bethmelmtv! Just a minor comment about removing the extra whitespace added. Great work this week!

thank you for this! we will remove the extra whitespace

…ist message

…-shopping-list into es-bm-empty-list-prompt

created add item button if user does not have any items in their list

60d1c73

emilysellers assigned emilysellers and bethmelmtv Apr 24, 2023

add first item button now links to add item page

793f5d3

added text to help user navigate through the web application

bd525d3

emilysellers marked this pull request as ready for review April 26, 2023 03:53

emilysellers requested review from jongranados and Amy-Pr April 26, 2023 03:53

jongranados approved these changes Apr 27, 2023

View reviewed changes

Amy-Pr reviewed Apr 28, 2023

View reviewed changes

Amy-Pr approved these changes Apr 28, 2023

View reviewed changes

emilysellers requested review from mxmason, danainjax and djtaylor8 April 28, 2023 20:38

Add TODO comments and fix inconsistent spacing

08e9f7f

danainjax approved these changes Apr 29, 2023

View reviewed changes

djtaylor8 approved these changes Apr 29, 2023

View reviewed changes

mxmason approved these changes Apr 30, 2023

View reviewed changes

bethmelmtv added 4 commits April 30, 2023 17:03

shortened button to just read as search

2de585a

Merge branch 'es-bm-empty-list-prompt' of https://github.com/the-coll…

944f6d6

…ab-lab/tcl-57-smart-shopping-list into es-bm-empty-list-prompt

updated enter three word token label to just three word token label

5f69d06

updated button in home from lowercase submit to sentence case Submit

05e1ca7

emilysellers added 3 commits April 30, 2023 20:58

Add TO DO comment and fix title case on labels and buttons

c4a7f50

Refactor conditional rendering of List view to fix flashing empty l…

ae166df

…ist message

Merge branch 'main' of https://github.com/the-collab-lab/tcl-57-smart…

6548725

…-shopping-list into es-bm-empty-list-prompt

emilysellers merged commit 03165b0 into main May 1, 2023
2 checks passed

emilysellers deleted the es-bm-empty-list-prompt branch May 1, 2023 16:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Render a user prompt and add item button when a shopping list is empty #22

Render a user prompt and add item button when a shopping list is empty #22

emilysellers commented Apr 24, 2023 •

edited

github-actions bot commented Apr 24, 2023 •

edited

jongranados left a comment

Amy-Pr Apr 28, 2023

emilysellers Apr 28, 2023

danainjax Apr 29, 2023

djtaylor8 Apr 29, 2023

Amy-Pr Apr 28, 2023

Amy-Pr left a comment

emilysellers commented Apr 28, 2023

emilysellers commented Apr 28, 2023

danainjax left a comment

danainjax Apr 29, 2023

mxmason Apr 30, 2023

emilysellers May 1, 2023

djtaylor8 left a comment

djtaylor8 Apr 29, 2023

mxmason left a comment

mxmason Apr 30, 2023

mxmason Apr 30, 2023

bethmelmtv May 1, 2023

mxmason Apr 30, 2023

bethmelmtv May 1, 2023

mxmason Apr 30, 2023

bethmelmtv May 1, 2023

bethmelmtv commented May 1, 2023

Render a user prompt and add item button when a shopping list is empty #22

Render a user prompt and add item button when a shopping list is empty #22

Conversation

emilysellers commented Apr 24, 2023 • edited

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented Apr 24, 2023 • edited

jongranados left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Amy-Pr left a comment

Choose a reason for hiding this comment

emilysellers commented Apr 28, 2023

emilysellers commented Apr 28, 2023

danainjax left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

djtaylor8 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mxmason left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bethmelmtv commented May 1, 2023

emilysellers commented Apr 24, 2023 •

edited

github-actions bot commented Apr 24, 2023 •

edited