Adds ability to join existing shopping list #21

jeremiahfallin · 2023-04-18T03:29:16Z

Description

This PR adds a form to allow users to enter an existing list token so they can join an existing list whilst giving feedback if they entered an invalid list token.

It also changes our routing to adopt createBrowserRouter and createRoutesFromElements so that we can use the loader action which is not compatible with the original BrowserRouter to remove flickering when redirecting. The code also adds a redirect to prevent users with tokens to access to home view.

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.
If the user does not have a token and they try to navigate to the list or add item views they are redirected to the welcome page.

Type of Changes

	Type
✓	🐛 Bug fix
✓	✨ New feature

Updates

Before

After

Testing Steps / QA Criteria

In your terminal, use git checkout -b jf-yj-join-shopping-list to create a new branch and switch over.
Use git pull origin jf-yj-join-shopping-list to bring the changes from remote to local.
npm start to start a local instance of our app.
Remove tcl-shopping-list-token from local storage prior to testing.

On the home page, clicking on 'Join an existing list' should focus the input.
Type in an existing token such as 'my test list' in the input field and click Join. This should also work with the enter key.
This should bring you to the list view and prepopulate any items from that list.
You should be able to travel to the add items page, but not the home page (there should be no flicker on redirect). Upon entering the app with a token, you should be redirected to the list view.
If you input a invalid token (i.e. a 2 word token )or a token that doesn't exist, then a error message, List not found. Please try another token., should display below the join button that will clearly automatically after a delay.

github-actions · 2023-04-18T03:30:20Z

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

https://tcl-55-smart-shopping-list--pr21-jf-yj-join-shopping-rnplqx79.web.app

_{(expires Sat, 29 Apr 2023 16:18:01 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 607d14028385ebfcc7c9ec69a7bb14d95ed54078}

ticiadev

Code looks good and everything works as expected!

Just wondering though, are Firebase tokens meant to be case-sensitive? It looks like they're all lowercase so far, and the input only allows for tokens entered with matching case. Should users be able to enter their token, e.g. "My Test List" and still have that accepted?

katherineyuneman

Everything looks great and is functioning as intended!

@ticiadev made a good point about the case sensitivity. All of the random words that are generated through the npm package are lowercase (see https://www.npmjs.com/package/@the-collab-lab/shopping-list-utils?activeTab=code ). That said, the user story doesn't address if the Join Existing List should be case sensitive as it is now. Maybe we can discuss Sunday and add to a future story depending on what we decide?

katherineyuneman · 2023-04-22T01:12:11Z

src/App.jsx

+ <Route path="/" element={<Layout />}>
+ <Route
+ index
+ loader={() => listToken && redirect('/list')}


Great solution and works really well!

Good work! 🚀

katherineyuneman · 2023-04-22T01:12:54Z

src/views/Home.jsx

+ const [message, setMessage] = useState('');
+
+ useEffect(() => {
+ const timer = setTimeout(() => {


I like that the error message timeout is consistent across the app now. I think we should try to remember this going forward for other user issues as well.

mentalcaries · 2023-04-22T03:04:23Z

src/views/Home.jsx

+ const handleChange = (e) => setUserEnteredToken(e.target.value);
+ const handleFormSubmit = (e) => {
+ e.preventDefault();
+ streamListItems(userEnteredToken, (snapshot) => {


It'd be a good idea here to check if there's no token and display an appropriate message.

Resolved! Nice catch!

mentalcaries · 2023-04-22T03:07:51Z

src/views/Home.jsx

+ }}
+ >
+ <label htmlFor="join-list">Join an existing list</label>
+ <input


Nice use of semantics here

mentalcaries

So far, so good! The flicker on redirect is gone!

lyleschemmerling

great work!

5hraddha

Good job @jeremiahfallin and @Yaosaur 🚀

jeremiahfallin added 2 commits April 17, 2023 19:28

first commit for draft pr

16b9e6e

add ability to join shopping lists from Home

e7ccb05

jeremiahfallin changed the title ~~Add ability to join existing shopping list~~ Adds ability to join existing shopping list Apr 18, 2023

jeremiahfallin requested a review from Yaosaur April 18, 2023 03:29

jeremiahfallin and others added 3 commits April 18, 2023 14:52

remove unused navigate

e6dbc4b

add helper for routing to resemble previous implementation

625bc5e

Rearranges imports

af7b372

Yaosaur marked this pull request as ready for review April 20, 2023 11:29

Yaosaur requested review from ticiadev and katherineyuneman April 20, 2023 11:30

Yaosaur approved these changes Apr 20, 2023

View reviewed changes

ticiadev approved these changes Apr 21, 2023

View reviewed changes

katherineyuneman approved these changes Apr 22, 2023

View reviewed changes

mentalcaries reviewed Apr 22, 2023

View reviewed changes

src/views/Home.jsx

}}

>

<label htmlFor="join-list">Join an existing list</label>

<input

Copy link

Collaborator

mentalcaries Apr 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of semantics here

mentalcaries reviewed Apr 22, 2023

View reviewed changes

Added feedback for empty token input

d8c024b

Yaosaur requested review from lyleschemmerling and 5hraddha April 22, 2023 19:19

lyleschemmerling approved these changes Apr 22, 2023

View reviewed changes

5hraddha approved these changes Apr 23, 2023

View reviewed changes

Yaosaur merged commit 2a2521e into main Apr 23, 2023
2 checks passed

Yaosaur deleted the jf-yj-join-shopping-list branch April 23, 2023 19:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds ability to join existing shopping list #21

Adds ability to join existing shopping list #21

jeremiahfallin commented Apr 18, 2023 •

edited by Yaosaur

github-actions bot commented Apr 18, 2023 •

edited

ticiadev left a comment

katherineyuneman left a comment

katherineyuneman Apr 22, 2023

mentalcaries Apr 22, 2023

5hraddha Apr 23, 2023

katherineyuneman Apr 22, 2023

mentalcaries Apr 22, 2023

Yaosaur Apr 22, 2023

mentalcaries Apr 22, 2023

mentalcaries left a comment

lyleschemmerling left a comment

5hraddha left a comment

Adds ability to join existing shopping list #21

Adds ability to join existing shopping list #21

Conversation

jeremiahfallin commented Apr 18, 2023 • edited by Yaosaur

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented Apr 18, 2023 • edited

ticiadev left a comment

Choose a reason for hiding this comment

katherineyuneman left a comment

Choose a reason for hiding this comment

katherineyuneman Apr 22, 2023

Choose a reason for hiding this comment

mentalcaries Apr 22, 2023

Choose a reason for hiding this comment

5hraddha Apr 23, 2023

Choose a reason for hiding this comment

katherineyuneman Apr 22, 2023

Choose a reason for hiding this comment

mentalcaries Apr 22, 2023

Choose a reason for hiding this comment

Yaosaur Apr 22, 2023

Choose a reason for hiding this comment

mentalcaries Apr 22, 2023

Choose a reason for hiding this comment

mentalcaries left a comment

Choose a reason for hiding this comment

lyleschemmerling left a comment

Choose a reason for hiding this comment

5hraddha left a comment

Choose a reason for hiding this comment

jeremiahfallin commented Apr 18, 2023 •

edited by Yaosaur

github-actions bot commented Apr 18, 2023 •

edited