Ar mp mark item purchased #26

arandel1 · 2024-09-07T00:33:47Z

Description

The app now keeps track of how many times a user purchases an item:

We imported MUI to feature clean, simple checkboxes
When the user checks the checkbox next to an item, Firebase counts it as a purchase, and the totalPurchase field increments by 1
When the user checks the checkbox next to an item, Firebase updates the dateLastPurchased field to the time the checkbox was checked.
After the user checks an item off (checks the checkbox), the box will stay checked for 24 hours, then uncheck itself after 24 hours. Firebase uses the dateLastPurchased timestamp to calculate 24 hours after.

Related Issue

closes 9

Acceptance Criteria

The ListItem component renders a checkbox with a semantic .
Checking off the item in the UI also updates the dateLastPurchased and totalPurchases properties on the corresponding Firestore document
The item is shown as checked for 24 hours after the purchase is made (i.e. we assume the user does not need to buy the item again for at least 1 day). After 24 hours, the item unchecks itself so the user can buy it again.
The updateItem function in firebase.js has been filled out, and sends updates to the firestore database when an item is checked

Type of Changes

feature enhancement

Updates

Before

No checkboxes

After

User can use checkboxes to mark when they've purchased that item.
You can see before and after avocado is selected: dateLastPurchased updates, and totalPurchases increments up by 1.

Testing Steps / QA Criteria

Pull down from branch
npm i to ensure MUI is installed properly
open Firestore Database in a separate tab
Navigate to your unique user code and a list of your choice, and the items inside that list
Select an item (in my example, I selected avocado)
check the checkbox next to that item
See dateLastPurchased field update to the time you checked the checkbox (or, the current time)
See the totalPurchases increase by 1.

To watch the checkbox uncheck itself in real time:

Have browser and Firestore tabs open next to each other
Manually edit the dateLastPurchased field by clicking the pencil next to the field: Edit the field to the day + one minute before the current time (You can mess around with this!)

Co-authored-by: Allison Randel <[email protected]>

…stPurchased field updates when user clicks/checks checkbox next to an item

…ckbox to uncheck itself when calcTime is >= 24 hours

…ased in firebase. Item will stay unchecked and not let you check it again unless you manually change back the dateLastPurchased.

…in firebase.

…mented-out code

github-actions · 2024-09-07T00:34:40Z

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

https://tcl-76-smart-shopping-list--pr26-ar-mp-mark-item-purc-g415r0va.web.app

_{(expires Tue, 17 Sep 2024 17:32:34 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 512b1a88be8ae05fd3e727b99332819df760271d}

sar-mko

Really cool implementation :) Was able to check and uncheck items and see properties in the database, and saw the update on click.

Though when testing the 24 hours feature (In firebase, I changed dateLastPurchased to the previous day and a minute after), the page updated after a refresh, but I noticed isChecked in the database stayed equal to true. It could be how I tested it, so I'm curious if anyone also had this happen. It does update in LocalStorage as well!

sar-mko · 2024-09-07T05:17:08Z

src/components/ListItem.jsx

+				if (is24HoursPassed) {
+					// console.log('Unchecking item because 24 hours have passed');
+					setChecked(false);
+					localStorage.setItem(`checked-${item.name}`, JSON.stringify(false));


nitpick ( non-blocking ): Maybe passing the checked state into since its updating anyway.

…onsole logs.

mentalcaries

Really cool implementation so far.

What I have noticed though is that I am unable to uncheck the item and recheck it right after. The only issue with that is that the item count gets incremented every single time (so even if it was an accidental check, it still counts as one).

mentalcaries · 2024-09-07T19:11:26Z

src/components/ListItem.jsx

+
+	// Handle checkbox change (when user clicks on it)
+	const handleChange = () => {
+		const newCheckedState = !checked;


question: should the state of the item being checked depend only on the checked state in the app/firestore or should that also be dependent on the date?

Possible solution: totalPurchases increments by 1 when the item unchecks itself.

@arandel1 from the AC (and at least for now), the box once checked, should probably stay checked for 24 hours, as in the user won't be able to uncheck it.

Perhaps we can create another ticket for the case of accidentally checking off an item.

mentalcaries · 2024-09-07T19:14:45Z

src/components/ListItem.jsx

+	const has24HoursPassed = (dateLastPurchased) => {
+		const purchaseTime = dateLastPurchased.getTime(); // Time in milliseconds
+		const currentTime = new Date().getTime(); // Current time in milliseconds
+		const oneDayInMs = 24 * 60 * 60 * 1000; // 24 hours in milliseconds


nit (non-blocking): as this is a constant, consider renaming in uppercase snake case. Note: this constant exists in dates.js

mentalcaries · 2024-09-07T19:15:27Z

src/api/firebase.js

@@ -6,6 +6,7 @@ import {
 	doc,
 	onSnapshot,
 	updateDoc,
+	increment,


Good find with this increment function

mentalcaries · 2024-09-07T19:18:16Z

src/components/ListItem.jsx

+	});
+
+	// Function to check if 24 hours have passed
+	const has24HoursPassed = (dateLastPurchased) => {


Nice function naming! I'm always a fan of easily readable code!

mentalcaries

Looks good so far, but a couple of bugs to fix

…here I think the update increment function should go.

EmmaBin

Nice work on this challenging ticket! I appreciate how readable the variable names are. After testing, it met all the criteria. Just have one small nitpick, like Devin mentioned, the totalPurchase updates every time I check and uncheck, even if it's incidental. I'm curious to learn about what is a better way to capture only valid selections—perhaps adding a confirm button after each item?

…check after 24 hours, and dateLastPurchased turns null. Need to remove local storage piece.

… relies on dateLastPurchased and not local storage, user can check a checkbox and dateLastPurchased updates with a timestamp and totalPurchase increments by 1 and the checkbox remains checked and unclickable so the user cannot update the checkbox etc.

mindyzwan · 2024-09-10T16:52:57Z

src/api/firebase.js

-	 * this function must accept!
-	 */
+// User can update items in their list by checking the checkbox associated with an item, and the totalPurchase field increments by 1 in Firebase.
+// The checkbox unchecks 24 hours after the box is checked.


nitpick ( non-blocking ): Technically, this second sentence isn't relevant to this piece of code.

mindyzwan · 2024-09-10T16:55:07Z

src/components/ListItem.jsx

+	// Destructure item props
+	const { name, dateLastPurchased } = item;
+
+	// Keeping [checked, setChecked] state, but removing any calls to local storage
+	const [checked, setChecked] = useState(false);
+
+	// Function to check if 24 hours have passed: Changed variable tagging.


nitpick ( non-blocking ): These comments are more notes to yourself than something that will likely be helpful in the long run.

Removed notes

mindyzwan · 2024-09-10T16:56:07Z

src/utils/dates.js

+
+// getDaysBetweenDates: We need to write a function that calculates current day - dateLastPurchased to calculate the number of days between the current day and the date last purchased
+
+//  if dateLastPurchased = null, then dateNextPurchased = null
+// dateNextPurchased = days until you need this item again + dateLastPurchased


nitpick ( non-blocking ): These also look like they may have been notes left over :)

Removed notes

mindyzwan · 2024-09-10T16:58:47Z

package.json

+		"@emotion/react": "^11.13.3",
+		"@emotion/styled": "^11.13.0",
+		"@mui/material": "^6.0.2",


note (non-blocking): Normally, I'd say to be sure to remove packages you decide not to use with npm uninstall, but I know we're using the same package in the other branch so it's all good 👍

mindyzwan

Looks great! Applauding y'alls tenacity on this one! 👏 Woohoo!

MarcosPerez16 and others added 9 commits September 5, 2024 08:27

checkbox up and running

b777258

Co-authored-by: Allison Randel <[email protected]>

Adding functionality to checkbox input, not currently functional

d73c8ff

Co-authored-by: Allison Randel <[email protected]>

working on backend connection to firebase

7fd6213

feature: checkbox remains checked when user refreshes browser, dateLa…

4a25199

…stPurchased field updates when user clicks/checks checkbox next to an item

totalPurchases field increments by +1 when user clicks/checks checkbox

cea2ce2

calculating 24 hours function in progress -- just need to get the che…

499993b

…ckbox to uncheck itself when calcTime is >= 24 hours

item is automatically unchecked after manually changing dateLastPurch…

5a7b45b

…ased in firebase. Item will stay unchecked and not let you check it again unless you manually change back the dateLastPurchased.

user can check an item and the totalPurchase field increments plus 1 …

fc05a32

…in firebase.

cleaned up code: commented out console.logs, removed any expired, com…

da3720a

…mented-out code

arandel1 requested review from EmmaBin and sar-mko and removed request for EmmaBin September 7, 2024 00:34

arandel1 requested review from EmmaBin, sar-mko, fullybaked, nathanejbrown and mindyzwan and removed request for sar-mko September 7, 2024 00:34

sar-mko reviewed Sep 7, 2024

View reviewed changes

Destructured item props for better readability. Deleted unnecessary c…

8b105e3

…onsole logs.

mentalcaries reviewed Sep 7, 2024

View reviewed changes

changed milliseconds calculation constant, left some commented code w…

60d5a52

…here I think the update increment function should go.

EmmaBin reviewed Sep 8, 2024

View reviewed changes

user can check a box, dateLastPurchased updates, and checkbox will un…

cec248d

…check after 24 hours, and dateLastPurchased turns null. Need to remove local storage piece.

arandel1 added 3 commits September 10, 2024 10:05

cleaned up lines and removed logs

58bb02e

accidentally added notes for working issue 11

66c44f3

mindyzwan reviewed Sep 10, 2024

View reviewed changes

mindyzwan approved these changes Sep 10, 2024

View reviewed changes

arandel1 and others added 2 commits September 10, 2024 12:01

removed commented out notes

3525236

Merge branch 'main' into ar-mp-mark-item-purchased

c2af263

arandel1 merged commit 3a83404 into main Sep 10, 2024
2 checks passed

arandel1 deleted the ar-mp-mark-item-purchased branch September 10, 2024 17:33

sar-mko mentioned this pull request Oct 4, 2024

Sm simple list view style 26 #55

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ar mp mark item purchased #26

Ar mp mark item purchased #26

arandel1 commented Sep 7, 2024

github-actions bot commented Sep 7, 2024 •

edited

Loading

sar-mko left a comment

sar-mko Sep 7, 2024

mentalcaries left a comment •

edited

Loading

mentalcaries Sep 7, 2024

arandel1 Sep 7, 2024

mentalcaries Sep 8, 2024

mentalcaries Sep 7, 2024

mentalcaries Sep 7, 2024

mentalcaries Sep 7, 2024

mindyzwan Sep 10, 2024

mentalcaries left a comment

EmmaBin left a comment

mindyzwan Sep 10, 2024

mindyzwan Sep 10, 2024

arandel1 Sep 10, 2024

mindyzwan Sep 10, 2024

arandel1 Sep 10, 2024

mindyzwan Sep 10, 2024

mindyzwan left a comment

Ar mp mark item purchased #26

Ar mp mark item purchased #26

Conversation

arandel1 commented Sep 7, 2024

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented Sep 7, 2024 • edited Loading

sar-mko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mentalcaries left a comment • edited Loading

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

mentalcaries left a comment

Choose a reason for hiding this comment

EmmaBin 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

mindyzwan left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 7, 2024 •

edited

Loading

mentalcaries left a comment •

edited

Loading