Allow user to join an existing shopping list #21

jongranados · 2023-04-19T18:04:01Z

Description

This PR allows users to join existing shopping list so they can manage them with friends or family. This functionality takes the following steps:

The user enters a three word token existing token into a form on the home page.
The token is saved to localStorage.
The user is taken to the List view and shown the existing list.
If the list does not exist, the user sees an alert stating that the list does not exist.

The alert is generated here with Toastify which might present some accessibility concerns. The dev team will likely want to discuss the best route for generating alerts throughout the app.

Related Issue

Closes #5.

Acceptance Criteria

If a user doesn’t already have a token:

The Home view shows a form that allows the user to enter a token to join an existing list, in addition to the button that allows them to create a new list.
The input that accepts the list token has a semantic label element associated with its
The user can submit this form with both the mouse and the Enter key
If the list exists,
- the token is saved in localStorage
- the user is redirected to the List view and shown the items on that list
If the list does not exist, the user is shown an error message that explains the problem

If a user does already have a token:

They are automatically redirected to the List view.

Type of Changes

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

Updates

Before

This screenshot shows the application's home page before this functionality was implemented; there was no way for the user to join an existing shopping list unless an existing list's respective token was already stored in their browser's local storage.

After

This screenshot show the application's home page after this functionality was implemented; a new user is given the option to either create a brand new list or join an existing list with the submission of a valid three word token.

This video demonstrates a user attempting to access an existing list. They first attempt to access a list associated with token this should fail. Because such a token does not exist in the database, they are notified of their failed attempt through a pop-up message that reads: "Sorry, this list does not exist." The user then attempts to access a list with token my test list. Because this token does exist, the user is presented with the grocery items associated with this token.

after.mov

Testing Steps / QA Criteria

Launch application:
- remotely
  - preview URL for latest PR (97e1d05)
- locally
  - Pull down es-jg-join-existing-list
  - Install dependencies with npm i
  - Start the application with npm start
Clear your browser local storage of a pre-existing tcl-shopping-list-token
Navigate home (/)
Attempting to submit an invalid token such as this should fail should:
- keep you on the home page (/)
- display a pop-up that reads: "Sorry, this list does not exist."
- not result in a tcl-shopping-list-token inside your browser's local storage
Attempting to submit a valid token such as my test list should:
- redirect you to the list page (/list)
- render the items in your list
- save the validated token inside your browser's local storage under tcl-shopping-list-token

github-actions · 2023-04-19T18:05:14Z

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

https://tcl-57-smart-shopping-list--pr21-es-jg-join-existing-1hai28xb.web.app

_{(expires Sat, 29 Apr 2023 16:17:10 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ad3eb6c34c2ec5986fcc218178df5985eb9c9ffb}

…with an existing collection in firestore

…y of QuerySnapshot

…-shopping-list into es-jg-join-existing-list

- remove setting token to empty string in local storage on failed token validation - remove redundant update to tokenExist state variable on failed token validation

… better flow content.

Amy-Pr

This looks super great guys! We tested it from the preview link. Works as expected. I even used a token name saved in Beth's browser, and was able to bring up her list on my end! Awesome job!!!

Amy-Pr · 2023-04-22T01:00:23Z

src/api/firebase.js

+ */
+export async function validateToken(userTokenInput) {
+	const listCollectionRef = collection(db, userTokenInput);
+	const listSnapshot = await getDocs(listCollectionRef);


Curious how line 23 and 24 work together? We looked up the firebase "getDocs" function. Still a little fuzzy on how it all works.

Hey Amy! If I'm understanding things correctly, accessing data from a firestore db is a two-part process. You first get a reference to a collection in the db using the collection method. I like to think of this like requesting an address. And with that reference, you're then able to actually query the db using getDocs to take "snapshots" of the db state at a particular instance in time. I like to think of this like a camera taking a picture of the db and capturing its state at an instance in time.

Still hazy with all of this myself though so I'm not sure this is completely right.

That's a great explanation!

great explanation- thank you @jongranados !

djtaylor8

Great work, @jongranados and @emilysellers! I definitely think it is worth talking about the accessibility issues with everyone on the team with regards to using the Toastify library. Otherwise, the functionality is working as expected!

djtaylor8 · 2023-04-22T03:14:37Z

src/api/firebase.js

@@ -15,6 +15,16 @@ export function streamListItems(listId, handleSuccess) {
 	return onSnapshot(listCollectionRef, handleSuccess);
 }

+/**
+ * Check existence of list in Firestore associated with user token input.


Love the documentation here!

djtaylor8 · 2023-04-22T03:16:04Z

src/views/Home.jsx


 export function Home({ setListToken }) {
+	const [userTokenInput, setUserTokenInput] = React.useState('');


Suggesting again - import { useState } from 'react' as opposed to React.useState. Not a blocker, but a bit cleaner IMO.

Whoops, forgot about this! Done. Definitely cleaner!

mxmason

Great work! One optional idea for an optimization before we ship.

mxmason · 2023-04-22T17:19:01Z

src/api/firebase.js

+export async function validateToken(userTokenInput) {
+	const listCollectionRef = collection(db, userTokenInput);
+	const listSnapshot = await getDocs(listCollectionRef);
+	return !listSnapshot.empty;
+}


This function works exactly as intended, but I have an optimization mission, should you choose to accept it.

Before we get to the question "does this list exist on the server?", we know our tokens have to be two things:

non-empty, and

a specific shape

Can we use this knowledge to check for validity and return early without wasting time and resources on a request to our database?

Agh, such a great point EJ! I'll incorporate that now.

Actually, before doing so I want to ask a question at today's sync. Going to merge to main for now.

Great point, EJ! It would be great to talk this over today.

mxmason · 2023-04-22T17:20:07Z

src/views/Home.jsx

 			<button type="button" onClick={handleClick}>
-				Create New List
+				Create new list


Yesssss! I'm such a fan of removing unnecessary title case from our UIs!

danainjax

Excellent job on this issue. I especially liked the explicit and complete pr, and the step by step instructions on how to test, and what you considered re: toastify and there may need to be discussion regarding tradeoffs or approach. Fantastic!

bethmelmtv

Great work @emilysellers and @jongranados ! Everything's working :) Awesome job!

jongranados added 2 commits April 18, 2023 14:01

implement form for existing token input

995fbe9

test form submit handler

3dee4a9

jongranados and others added 5 commits April 19, 2023 11:07

implement api function that checks if user token input is associated …

8fe4f7c

…with an existing collection in firestore

update logic in handle submit function

bceea32

Implement toast alert for invalid token input

bd8ba8a

Update form token input label for clarity

0f6f247

Make validateToken function more efficient by using empty propert…

46e5f84

…y of QuerySnapshot

emilysellers changed the title ~~Es jg join existing list~~ Allow user to join an existing shopping list Apr 19, 2023

Remove console logs

a49bd2d

jongranados assigned jongranados and emilysellers Apr 21, 2023

emilysellers and others added 5 commits April 20, 2023 17:36

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

b86b876

…-shopping-list into es-jg-join-existing-list

fix else clause in form submission handler

ed3bd7a

- remove setting token to empty string in local storage on failed token validation - remove redundant update to tokenExist state variable on failed token validation

rename state variable 'userListNameInput' to 'userTokenInput'

543fb5a

bundle form input and button elements inside a parent div element for…

f89bc38

… better flow content.

remove welcome banner used for development.

97e1d05

jongranados requested review from bethmelmtv and Amy-Pr April 21, 2023 20:01

jongranados marked this pull request as ready for review April 21, 2023 20:05

Amy-Pr approved these changes Apr 22, 2023

View reviewed changes

djtaylor8 approved these changes Apr 22, 2023

View reviewed changes

jongranados requested review from mxmason and danainjax April 22, 2023 16:09

clean up React dependency use.

dc0a3c7

mxmason approved these changes Apr 22, 2023

View reviewed changes

danainjax approved these changes Apr 22, 2023

View reviewed changes

bethmelmtv approved these changes Apr 23, 2023

View reviewed changes

jongranados merged commit 71eb7e4 into main Apr 23, 2023
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow user to join an existing shopping list #21

Allow user to join an existing shopping list #21

jongranados commented Apr 19, 2023 •

edited

github-actions bot commented Apr 19, 2023 •

edited

Amy-Pr left a comment

Amy-Pr Apr 22, 2023

jongranados Apr 22, 2023

mxmason Apr 22, 2023

bethmelmtv Apr 23, 2023

djtaylor8 left a comment

djtaylor8 Apr 22, 2023

djtaylor8 Apr 22, 2023

jongranados Apr 22, 2023

mxmason left a comment

mxmason Apr 22, 2023 •

edited

jongranados Apr 23, 2023

jongranados Apr 23, 2023

emilysellers Apr 23, 2023

mxmason Apr 22, 2023

danainjax left a comment

bethmelmtv left a comment


		export function Home({ setListToken }) {
		const [userTokenInput, setUserTokenInput] = React.useState('');

Allow user to join an existing shopping list #21

Allow user to join an existing shopping list #21

Conversation

jongranados commented Apr 19, 2023 • edited

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented Apr 19, 2023 • edited

Amy-Pr 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

djtaylor8 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

mxmason left a comment

Choose a reason for hiding this comment

mxmason Apr 22, 2023 • edited

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

danainjax left a comment

Choose a reason for hiding this comment

bethmelmtv left a comment

Choose a reason for hiding this comment

jongranados commented Apr 19, 2023 •

edited

github-actions bot commented Apr 19, 2023 •

edited

mxmason Apr 22, 2023 •

edited