From 0d4d3a91cb3df20ec0767f87c7cc681a6cb53af6 Mon Sep 17 00:00:00 2001 From: arandel1 Date: Mon, 19 Aug 2024 12:43:29 -0500 Subject: [PATCH 1/8] beginning form, added labels, added input for the name of item and a dropdown selection for user to select when they will need the item again --- src/views/ManageList.jsx | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index e1c5fde..6380d3e 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -1,7 +1,34 @@ +import { useState } from 'react'; + export function ManageList() { + // const [formData, setFormData] = useState(false); + return ( -

- Hello from the /manage-list page! -

+ <> +

+ Hello from the /manage-list page! +

+ +
+
+ {/* // name of item + // days until next purchase: soon, kind of soon, not soon + // label feature */} + + + + + + + +
+
+ ); } From b3242bb97e1e3798d57aeda893c310a862279cbf Mon Sep 17 00:00:00 2001 From: arandel1 Date: Mon, 19 Aug 2024 13:21:13 -0500 Subject: [PATCH 2/8] added functionality to form. user can type the name of item and select frequency and click submit --- src/views/ManageList.jsx | 43 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 6380d3e..e3e2dde 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -1,7 +1,24 @@ import { useState } from 'react'; export function ManageList() { - // const [formData, setFormData] = useState(false); + const [formData, setFormData] = useState({ + name: '', + frequency: '', + }); + + function handleChange(e) { + e.preventDefault(); + console.log(e.target.value); + setFormData((prev) => ({ + ...prev, + [e.target.name]: e.target.value, + })); + } + + function handleSubmit() { + e.preventDefault(); + console.log('here is form submission', formData); + } return ( <> @@ -10,23 +27,41 @@ export function ManageList() {

-
+ {/* // name of item // days until next purchase: soon, kind of soon, not soon // label feature */} - + - + + +
From 141899f7fd01d6cb98ad54e57cd2e27681b33328 Mon Sep 17 00:00:00 2001 From: arandel1 Date: Mon, 19 Aug 2024 13:54:47 -0500 Subject: [PATCH 3/8] working on backend functionality: getting item and frequency added to firestore database --- src/api/firebase.js | 2 +- src/views/ManageList.jsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 66bc91a..7b31b6e 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -165,7 +165,7 @@ 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! - return console.log(listCollectionRef, { + return setDoc(listCollectionRef, { dateCreated: new Date(), // NOTE: This is null because the item has just been created. // We'll use updateItem to put a Date here when the item is purchased! diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index e3e2dde..5c9949e 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { addItem } from '../api'; export function ManageList() { const [formData, setFormData] = useState({ @@ -8,16 +9,19 @@ export function ManageList() { function handleChange(e) { e.preventDefault(); - console.log(e.target.value); setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })); } - function handleSubmit() { + async function handleSubmit(e) { e.preventDefault(); console.log('here is form submission', formData); + await addItem({ + itemName: formData.name, + daysUntilNextPurchase: parseInt(formData.frequency), + }); } return ( @@ -28,10 +32,6 @@ export function ManageList() {
- {/* // name of item - // days until next purchase: soon, kind of soon, not soon - // label feature */} - Select your option - - - + + + From 8281e893c630df7f7d3fa6daca94e6ced8dd4e90 Mon Sep 17 00:00:00 2001 From: emmacodes Date: Tue, 20 Aug 2024 10:48:32 -0700 Subject: [PATCH 4/8] show message after submitting form, convert the str to number type inside addItem func --- src/api/firebase.js | 2 +- src/views/ManageList.jsx | 23 ++++++++++++++++------- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 7b31b6e..df6143d 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -170,7 +170,7 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) { // NOTE: This is null because the item has just been created. // We'll use updateItem to put a Date here when the item is purchased! dateLastPurchased: null, - dateNextPurchased: getFutureDate(daysUntilNextPurchase), + dateNextPurchased: getFutureDate(parseInt(daysUntilNextPurchase)), name: itemName, totalPurchases: 0, }); diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 5c9949e..09c68aa 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -7,6 +7,8 @@ export function ManageList() { frequency: '', }); + const [formSubmitted, setFormSubmitted] = useState(false); + function handleChange(e) { e.preventDefault(); setFormData((prev) => ({ @@ -15,13 +17,19 @@ export function ManageList() { })); } - async function handleSubmit(e) { + function handleSubmit(e) { e.preventDefault(); - console.log('here is form submission', formData); - await addItem({ - itemName: formData.name, - daysUntilNextPurchase: parseInt(formData.frequency), - }); + console.log( + 'here is form submission', + formData, + parseInt(formData.frequency), + ); + setFormSubmitted(true); + + // await addItem({ + // itemName: formData.name, + // daysUntilNextPurchase: parseInt(formData.frequency), + // }); } return ( @@ -32,7 +40,7 @@ export function ManageList() {
- + Submit + {formSubmitted &&
{formData.name} is added to your list
}
); From 6bf2d577530d4300d110129f713af8e2731d079c Mon Sep 17 00:00:00 2001 From: emmacodes Date: Fri, 23 Aug 2024 14:51:23 -0700 Subject: [PATCH 5/8] cleared formdata after submitting the form, replaced div with alert message --- src/views/Home.jsx | 1 + src/views/ManageList.jsx | 16 +++++++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 583ab59..7f5a7d5 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -9,6 +9,7 @@ export function Home({ data, setListPath }) {
    {data && data.map((list) => { + console.log('here is list path', list.path); return ( Submit - {formSubmitted &&
    {formData.name} is added to your list
    }
); } + +//submit form +//formData send to database +//formsubmitted to true and display the item name to user as a message +//clear formdata +//formsubmitted to false +//a new form submitted, repeat above cycle From 2adbfb5f61acd01b7f6edd838faed6186314a0bf Mon Sep 17 00:00:00 2001 From: emmacodes Date: Sat, 24 Aug 2024 18:08:19 -0700 Subject: [PATCH 6/8] implemented addItem function and submitted to firebase db --- src/api/firebase.js | 6 ++++-- src/views/ManageList.jsx | 45 +++++++++++++++++++++------------------- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index df6143d..77aef17 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -165,12 +165,14 @@ 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! - return setDoc(listCollectionRef, { + + const itemDocRef = doc(listCollectionRef, itemName); + return setDoc(itemDocRef, { dateCreated: new Date(), // NOTE: This is null because the item has just been created. // We'll use updateItem to put a Date here when the item is purchased! dateLastPurchased: null, - dateNextPurchased: getFutureDate(parseInt(daysUntilNextPurchase)), + dateNextPurchased: getFutureDate(daysUntilNextPurchase), name: itemName, totalPurchases: 0, }); diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index c58e6b2..78dbd02 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -19,21 +19,31 @@ export function ManageList() { function handleSubmit(e) { e.preventDefault(); - console.log( - 'here is form submission', - formData, - parseInt(formData.frequency), - ); - window.alert(`${formData.name} has been added to your list.`); - setFormData({ - name: '', - frequency: '', - }); - // await addItem({ - // itemName: formData.name, - // daysUntilNextPurchase: parseInt(formData.frequency), - // }); + console.log('here is form submission', formData); + + const listPath = localStorage.getItem('tcl-shopping-list-path'); + + if (!listPath) { + window.alert('List is not existed.'); + return; + } + + addItem(listPath, { + itemName: formData.name, + daysUntilNextPurchase: parseInt(formData.frequency), + }) + .then(() => { + window.alert(`${formData.name} has been added to your list.`); + setFormData({ + name: '', + frequency: '', + }); + }) + .catch((error) => { + window.alert(`${formData.name} failed to add to your list.`); + console.error('Error:', error); + }); } return ( @@ -79,10 +89,3 @@ export function ManageList() { ); } - -//submit form -//formData send to database -//formsubmitted to true and display the item name to user as a message -//clear formdata -//formsubmitted to false -//a new form submitted, repeat above cycle From 7acf9bd91fba537e2a29bac0c0626ab2ad792950 Mon Sep 17 00:00:00 2001 From: emmacodes Date: Sun, 25 Aug 2024 08:50:15 -0700 Subject: [PATCH 7/8] handled cases of submitting empty string for item name --- src/views/ManageList.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 78dbd02..9b54dda 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -19,6 +19,10 @@ export function ManageList() { function handleSubmit(e) { e.preventDefault(); + if (formData.name.trim() === '') { + window.alert('Item name cannot be empty.'); + return; + } console.log('here is form submission', formData); From 5a1d721f79d1765013f1a9bc9a7b1142f168fba0 Mon Sep 17 00:00:00 2001 From: emmacodes Date: Sun, 25 Aug 2024 09:10:23 -0700 Subject: [PATCH 8/8] removed console logs --- src/api/firebase.js | 4 ---- src/views/Home.jsx | 1 - src/views/ManageList.jsx | 4 ---- 3 files changed, 9 deletions(-) diff --git a/src/api/firebase.js b/src/api/firebase.js index 77aef17..c1b54d9 100644 --- a/src/api/firebase.js +++ b/src/api/firebase.js @@ -163,14 +163,10 @@ export async function shareList(listPath, currentUserId, recipientEmail) { */ 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! const itemDocRef = doc(listCollectionRef, itemName); return setDoc(itemDocRef, { dateCreated: new Date(), - // NOTE: This is null because the item has just been created. - // We'll use updateItem to put a Date here when the item is purchased! dateLastPurchased: null, dateNextPurchased: getFutureDate(daysUntilNextPurchase), name: itemName, diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 7f5a7d5..583ab59 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -9,7 +9,6 @@ export function Home({ data, setListPath }) {
    {data && data.map((list) => { - console.log('here is list path', list.path); return ( ({ @@ -24,8 +22,6 @@ export function ManageList() { return; } - console.log('here is form submission', formData); - const listPath = localStorage.getItem('tcl-shopping-list-path'); if (!listPath) {