From c8bcd2f111f8cf1d3e1ddada27bed345bcdfbd6f Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Mon, 19 Aug 2024 19:18:06 -0400 Subject: [PATCH 01/20] adding a form layout to manage list --- src/views/ManageList.jsx | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index e1c5fde..e732ba2 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -1,7 +1,30 @@ export function ManageList() { + const handleSubmit = (e) => { + e.preventDefault(); + console.log('hi'); + }; + return ( -

- Hello from the /manage-list page! -

+
+

+ Hello from the /manage-list page! +

+
+ + +
+ {/* radio inputs for how soon to buy. */} + + +
+ + +
+ + +
+ +
+
); } From 7d01c41b3c1b7c1ee6e6d5564bd75e7d6cc5c194 Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Mon, 19 Aug 2024 19:26:34 -0400 Subject: [PATCH 02/20] update item label tag Co-authored-by: Ross Clettenberg --- src/views/ManageList.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index e732ba2..14b5410 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -10,7 +10,7 @@ export function ManageList() { Hello from the /manage-list page!

- +
{/* radio inputs for how soon to buy. */} From 493db3534eada7305bc8c61c341c44c7706dd91c Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Mon, 19 Aug 2024 19:36:28 -0400 Subject: [PATCH 03/20] installed react-hot-toast and added toast for successful item add Co-authored-by: Ross Clettenberg --- package-lock.json | 33 +++++++++++++++++++++++++++++++++ package.json | 1 + src/views/ManageList.jsx | 7 +++++++ 3 files changed, 41 insertions(+) diff --git a/package-lock.json b/package-lock.json index 5671142..8db8a3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "firebase": "^10.12.5", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-hot-toast": "^2.4.1", "react-router-dom": "^6.26.0" }, "devDependencies": { @@ -4916,6 +4917,13 @@ "dev": true, "license": "MIT" }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "license": "MIT", + "peer": true + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -6248,6 +6256,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/goober": { + "version": "2.1.14", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", + "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==", + "license": "MIT", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -8311,6 +8328,22 @@ "react": "^18.3.1" } }, + "node_modules/react-hot-toast": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz", + "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==", + "license": "MIT", + "dependencies": { + "goober": "^2.1.10" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 1f74c3e..d5128ae 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "firebase": "^10.12.5", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-hot-toast": "^2.4.1", "react-router-dom": "^6.26.0" }, "devDependencies": { diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 14b5410..19b8d12 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -1,7 +1,13 @@ +import toast, { Toaster } from 'react-hot-toast'; + export function ManageList() { + const notify = () => toast.success('Item added to list!'); + const handleSubmit = (e) => { e.preventDefault(); console.log('hi'); + + notify(); }; return ( @@ -25,6 +31,7 @@ export function ManageList() {
+ ); } From 95bab87bf9d71faa2a7dfadd8a71e6d79f2a0714 Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Mon, 19 Aug 2024 20:03:09 -0400 Subject: [PATCH 04/20] modified addItem in firebase.js and WIP: parameters of call in ManageList Co-authored-by: Ross Clettenberg --- src/api/firebase.js | 13 +++++++++++++ src/views/ManageList.jsx | 3 ++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 66bc91a..c4e164c 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -165,6 +165,19 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) { const listCollectionRef = collection(db, listPath, 'items'); // TODO: Replace this call to console.log with the appropriate // Firebase function, so this information is sent to your database! + + //This saves item to database. + await setDoc(listCollectionRef, { + owner: userId, + }); + + // This updates user record. + const userDocumentRef = doc(db, 'users', userEmail); + + updateDoc(userDocumentRef, { + sharedLists: arrayUnion(listCollectionRef), + }); + return console.log(listCollectionRef, { dateCreated: new Date(), // NOTE: This is null because the item has just been created. diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 19b8d12..5d7033e 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -1,3 +1,4 @@ +import { addItem } from '../api/firebase'; import toast, { Toaster } from 'react-hot-toast'; export function ManageList() { @@ -5,8 +6,8 @@ export function ManageList() { const handleSubmit = (e) => { e.preventDefault(); + addItem({ itemName: item }); console.log('hi'); - notify(); }; From 61675261f47bcf22baf9bf7f35410c1fe9e8638f Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Wed, 21 Aug 2024 13:51:56 -0400 Subject: [PATCH 05/20] cleaning up form tags and adding select possiblity --- src/views/ManageList.jsx | 64 +++++++++++++++++++++++++++++++--------- 1 file changed, 50 insertions(+), 14 deletions(-) diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 5d7033e..2f3a0bf 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -6,8 +6,14 @@ export function ManageList() { const handleSubmit = (e) => { e.preventDefault(); - addItem({ itemName: item }); - console.log('hi'); + const itemInfoForm = new FormData(e.target); + + console.log({ + itemName: itemInfoForm.get('item'), + daysUntilNextPurchaseSelect: itemInfoForm.get('when-to-buy-select'), + daysUntilNextPurchaseRadio: itemInfoForm.get('when-to-buy-radio'), + }); + // addItem({ itemName: itemInfoForm.get("item"), daysUntilNextPurchase: itemInfoForm.get("when-to-buy")}); notify(); }; @@ -17,19 +23,49 @@ export function ManageList() { Hello from the /manage-list page!

- - -
- {/* radio inputs for how soon to buy. */} - - -
- - -
- - +
+ + +

+ When to buy:
+ +
+ +
+ +

From 7d39f0850d30bbeb4823814a8885d02589cc32ab Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Thu, 22 Aug 2024 02:00:12 -0400 Subject: [PATCH 06/20] adding the listPath prop to the ManageList component Co-authored-by: Ross Clettenberg --- src/App.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index f5e6008..800a816 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -50,7 +50,10 @@ export function App() { element={} /> } /> - } /> + } + /> From 80d6b32d5e8c0ec7abf3f95a98523093c958d588 Mon Sep 17 00:00:00 2001 From: bbland1 <104288486+bbland1@users.noreply.github.com> Date: Thu, 22 Aug 2024 02:18:22 -0400 Subject: [PATCH 07/20] making form controlled with state, adding the listPath info and controlling the state of form info --- src/views/ManageList.jsx | 77 +++++++++++++++++++++++++++------------- 1 file changed, 53 insertions(+), 24 deletions(-) diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 2f3a0bf..5ad609a 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -1,19 +1,34 @@ +import { useState } from 'react'; import { addItem } from '../api/firebase'; import toast, { Toaster } from 'react-hot-toast'; -export function ManageList() { +export function ManageList({ listPath }) { + const [itemName, setItemName] = useState(''); + const [itemNextPurchaseTimeline, setItemNextPurchaseTimeline] = useState(''); const notify = () => toast.success('Item added to list!'); - const handleSubmit = (e) => { + const handleItemNameTextChange = (e) => { + setItemName(e.target.value); + }; + + const handleNextPurchaseChange = (e) => { + setItemNextPurchaseTimeline(e.target.value); + }; + + const handleSubmit = async (e) => { e.preventDefault(); - const itemInfoForm = new FormData(e.target); + + // if (itemName && itemNextPurchaseTimeline) { + + // await addItem(listPath, { itemName: itemName, daysUntilNextPurchase: itemNextPurchaseTimeline }); + // } console.log({ - itemName: itemInfoForm.get('item'), - daysUntilNextPurchaseSelect: itemInfoForm.get('when-to-buy-select'), - daysUntilNextPurchaseRadio: itemInfoForm.get('when-to-buy-radio'), + listPath: listPath, + itemName: itemName, + daysUntilNextPurchaseRadio: itemNextPurchaseTimeline, }); - // addItem({ itemName: itemInfoForm.get("item"), daysUntilNextPurchase: itemInfoForm.get("when-to-buy")}); + notify(); }; @@ -23,26 +38,32 @@ export function ManageList() { Hello from the /manage-list page!

-
- + From 71c983fc7acfd5091ca70a6181629daac7a6cf57 Mon Sep 17 00:00:00 2001 From: RossaMania Date: Fri, 23 Aug 2024 12:30:47 -0500 Subject: [PATCH 14/20] refactor: Improve form submission by adding strings to radio button selection, removing redundant console logs, and fixing single quotes in ManageList.jsx Co-authored-by: Brianna --- src/views/ManageList.jsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index a94f145..188c214 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -18,12 +18,6 @@ export function ManageList({ listPath }) { const handleSubmit = async (e) => { e.preventDefault(); - console.log('Submitting item:', { - itemName, - itemNextPurchaseTimeline, - listPath, - }); - try { await toast.promise( addItem(listPath, { @@ -79,7 +73,7 @@ export function ManageList({ listPath }) { checked={itemNextPurchaseTimeline === '7'} aria-label="Set buy to soon, within 7 days" /> - Soon + Soon -- Within 7 days!