Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ho list page #36

Merged
merged 11 commits into from
Mar 31, 2024
Merged

Ho list page #36

merged 11 commits into from
Mar 31, 2024

Conversation

IamHenryOkeke
Copy link
Collaborator

For an example of how to fill this template out, see this Pull Request.

Description

This code change/update updates the List Page UI and provides route protection to relevant pages

Related Issue

closes #32

Acceptance Criteria

  • Remove "Hello from the /list page!"
  • Make everything centered
  • Import checkbox, button, and search input components from MUI
  • Whenever an item is checked, the item is crossed out on the UI, and the purchase urgency is removed for 24 hrs
  • Space out the item and the delete button
  • Change the delete button to an icon
  • Add route protection for relevant pages
  • Show selected list across all pages

Type of Changes

Bug fix
UI enhancement

Updates

Before

Screenshot from 2024-03-27 14-29-59

After

Screenshot from 2024-03-27 14-30-19

Testing Steps / QA Criteria

Do a git pull and checkout to ho-listPage branch. Run npm start to start development server. Navigate to list page to see UI updates. Also sign out of the app and try to route to the list and mange-list page. You shouldn't be able to access the pages if not signed in

Copy link

github-actions bot commented Mar 27, 2024

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

https://tcl-72-smart-shopping-list--pr36-ho-listpage-n6gtvenh.web.app

(expires Sun, 07 Apr 2024 08:11:28 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: f7f2b0c98e4c5bce6be0f9b2cd44669f154caa67

Copy link
Collaborator

@ijayhub ijayhub left a comment

Choose a reason for hiding this comment

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

ProtectedRoute working...

Copy link
Collaborator

@jmahamed jmahamed left a comment

Choose a reason for hiding this comment

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

Looks really good, i just think the current list name being rendered at the top should have a bold and bigger font

Copy link
Collaborator

@redapy redapy left a comment

Choose a reason for hiding this comment

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

Everything is working as expected @IamHenryOkeke , amazing work! 🚀
I left a non-blocking comment

Comment on lines 9 to 18
const [currentUser, setCurrentUser] = useState(null);
const [pending, setPending] = useState(true);

useEffect(() => {
onAuthStateChanged(auth, (user) => {
setCurrentUser(user);
setPending(false);
});
}, []);

Copy link
Collaborator

Choose a reason for hiding this comment

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

nice use of React Context 💫. We already have this code, for fetching and detecting user changes, in the useAuth custom hook so this is a duplication. I would recommend to move the pending state/logic to the useAuth hook and use the hook here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Thank you Reda for pointing that out. I took a closer look at the code and i figured that the using a context wasn't necessary so I removed the context as a whole. The route protection works just fine regardless. Please review

Copy link
Collaborator

@redapy redapy left a comment

Choose a reason for hiding this comment

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

LGTM!

@IamHenryOkeke IamHenryOkeke merged commit 9c996f7 into main Mar 31, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

16. As a user, I want the List Page to look professional.
4 participants