From a1e9d937e699fed43ff47872701871b5c20bcf8d Mon Sep 17 00:00:00 2001 From: Didem Cakir Date: Wed, 21 Aug 2024 16:52:30 +0200 Subject: [PATCH 1/5] handle create list button --- src/views/Home.jsx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/views/Home.jsx b/src/views/Home.jsx index d62a0c7..d915ff9 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -1,7 +1,27 @@ import './Home.css'; import { SingleList } from '../components'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { createList } from '../api/firebase'; + +export function Home({ data, setListPath, userId, userEmail }) { + const [listName, setListName] = useState(''); + const navigate = useNavigate(); //to call redirected to the List view + + const handleCreateListButton = async (e) => { + e.preventDefault(); + + try { + await createList(userId, userEmail, listName); + + const createListPath = `${userId}/${listName}}`; + setListPath(createListPath); + navigate('/list'); //redirect to the list view + } catch (error) { + console.error('error creating a list', error); + } + }; -export function Home({ data, setListPath }) { return (

@@ -17,6 +37,7 @@ export function Home({ data, setListPath }) { /> ))} +

); } From 0729f4cc781aa249d57fed5f2e8e8d4d59254db8 Mon Sep 17 00:00:00 2001 From: tataw-cl <127490325+tataw-cl@users.noreply.github.com> Date: Wed, 21 Aug 2024 20:21:50 +0100 Subject: [PATCH 2/5] add form and minimal styling to Home.jsx --- src/views/Home.css | 10 ++++++++++ src/views/Home.jsx | 24 +++++++++++++++++++++++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/views/Home.css b/src/views/Home.css index e69de29..b97c8d4 100644 --- a/src/views/Home.css +++ b/src/views/Home.css @@ -0,0 +1,10 @@ +form { + display: flex; + flex-direction: column; + width: 50%; +} +#listName, +.button { + padding: 4% 4%; + margin: 2% 2%; +} diff --git a/src/views/Home.jsx b/src/views/Home.jsx index d915ff9..3811427 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -6,19 +6,26 @@ import { createList } from '../api/firebase'; export function Home({ data, setListPath, userId, userEmail }) { const [listName, setListName] = useState(''); + const [message, setMessage] = useState(''); const navigate = useNavigate(); //to call redirected to the List view const handleCreateListButton = async (e) => { e.preventDefault(); + if (!listName) { + setMessage('Enter a list name'); + return; + } try { await createList(userId, userEmail, listName); + setMessage('New list successfully created'); const createListPath = `${userId}/${listName}}`; setListPath(createListPath); navigate('/list'); //redirect to the list view } catch (error) { console.error('error creating a list', error); + setMessage('Failed to create list. Please try again'); } }; @@ -37,7 +44,22 @@ export function Home({ data, setListPath, userId, userEmail }) { /> ))} -
+ +
+ + setListName(e.target.value)} + placeholder="Enter the name of your new list" + /> + + {message} +
); } From 2e912e6b8b728c74290a4f80f5f3760ce0fbabe7 Mon Sep 17 00:00:00 2001 From: tataw-cl <127490325+tataw-cl@users.noreply.github.com> Date: Thu, 22 Aug 2024 12:48:46 +0100 Subject: [PATCH 3/5] Passed UserId and userEmail to home component --- src/App.jsx | 9 ++++++++- src/views/Home.jsx | 14 ++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index bc52f1a..e4dd64d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -46,7 +46,14 @@ export function App() { }> } + element={ + + } /> } /> } /> diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 3811427..a0931a7 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -15,6 +15,16 @@ export function Home({ data, setListPath, userId, userEmail }) { setMessage('Enter a list name'); return; } + // Log the parameters to debug + console.log('userId:', userId); + console.log('userEmail:', userEmail); + console.log('listName:', listName); + + // Check if userId or userEmail is empty + if (!userId || !userEmail) { + setMessage('User ID or Email is missing'); + return; + } try { await createList(userId, userEmail, listName); @@ -24,6 +34,7 @@ export function Home({ data, setListPath, userId, userEmail }) { setListPath(createListPath); navigate('/list'); //redirect to the list view } catch (error) { + //Logging and error messages if list is not created console.error('error creating a list', error); setMessage('Failed to create list. Please try again'); } @@ -55,8 +66,7 @@ export function Home({ data, setListPath, userId, userEmail }) { placeholder="Enter the name of your new list" /> {message} From 0c139e610b089d78398720e80e5a6e8ef6d49b7b Mon Sep 17 00:00:00 2001 From: tataw-cl <127490325+tataw-cl@users.noreply.github.com> Date: Thu, 22 Aug 2024 12:54:22 +0100 Subject: [PATCH 4/5] remove debugging statements from home component --- src/views/Home.jsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/views/Home.jsx b/src/views/Home.jsx index a0931a7..a8cb42e 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -15,16 +15,6 @@ export function Home({ data, setListPath, userId, userEmail }) { setMessage('Enter a list name'); return; } - // Log the parameters to debug - console.log('userId:', userId); - console.log('userEmail:', userEmail); - console.log('listName:', listName); - - // Check if userId or userEmail is empty - if (!userId || !userEmail) { - setMessage('User ID or Email is missing'); - return; - } try { await createList(userId, userEmail, listName); From 927c189af1c9a30f553e980170964fb49c2f3204 Mon Sep 17 00:00:00 2001 From: Didem Cakir Date: Thu, 22 Aug 2024 17:15:57 +0200 Subject: [PATCH 5/5] done --- src/views/Home.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Home.jsx b/src/views/Home.jsx index a8cb42e..b7cf66f 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -26,7 +26,7 @@ export function Home({ data, setListPath, userId, userEmail }) { } catch (error) { //Logging and error messages if list is not created console.error('error creating a list', error); - setMessage('Failed to create list. Please try again'); + setMessage('Failed to create list. Please try again!'); } };