added styles using tailwindCss, delete not working #35

ijayhub · 2024-03-24T14:27:16Z

Description

I've improved the homepage to give it a more polished and professional look. Now, users can easily highlight and keep track of specific collection IDs (lists) that they want to focus on.

Related Issue

closes #35

Acceptance Criteria

Make everything centered
Remove "Hello from the home (/) page!"
Change "Name of shopping list:" to "Create a shopping list"
Add a button to delete the shopping list
Create a function from the firebase documentation to delete a shopping list/document- not yet
I want the design to look professional.
Highlight the shopping list that is selected

Type of Changes

new feature and UI enhancement .

Updates

Before

After

Testing Steps / QA Criteria

Users should be greeted with a visually appealing site upon arrival.
Creating a list should result in the ability to highlight any list upon clicking it.
Click on a join button if the collection list already exists.

github-actions · 2024-03-24T14:28:52Z

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

https://tcl-72-smart-shopping-list--pr35-ij-home-mowl982q.web.app

_{(expires Sun, 07 Apr 2024 16:24:35 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: f7f2b0c98e4c5bce6be0f9b2cd44669f154caa67}

IamHenryOkeke · 2024-03-28T11:58:22Z

UI Updates looks great and working fine. Great work

IamHenryOkeke

UI Updates looks great and working fine. Great work

…e view and new styles for small screens.

jmahamed

I think it looks good, the list can be a bit more centered. I think the background should be just one solid color like #A2A8D3

I think a better title is "Create a shopping list"

button can be "Create new list"

and last button can be "Edit existing list"

redapy

Everything is working as expected, great work @ijayhub 🚀 ! I left some non-blocking notes

redapy · 2024-03-30T13:20:17Z

src/api/firebase.js

+	await updateDoc(userDocRef, {
+		sharedLists: arrayRemove(docRef),
+	});


Nicely done 💥✨! we don't want the user to have a shared list that does not exist 👍

okay changed that

src/components/SingleList.jsx

redapy · 2024-03-30T13:24:51Z

src/components/SingleList.jsx

+				<button onClick={handleClick}>{name}</button>
+			</li>
+			<hr />
+			<MdOutlineDeleteForever className="text-red-700" onClick={handleDelete} />


The delete button should be commented out as well

check again working now

redapy · 2024-03-30T13:27:08Z

src/views/Home.css

+	@apply rounded-2xl shadow-2xl px-4 md:px-24 text-black mt-8;
+}
+#list {
+	@apply mt-8 flex flex-col justify-center items-center;
+}
+.input {
+	@apply border border-blue-700 text-black bg-white p-3 rounded-xl;
+	width: 70%;
+}
+.btn {
+	background-color: #113767;
+	@apply text-white p-3 rounded-xl shadow-md mb-8;
+}
+:hover .btn {
+	background-color: #38598b;
+}
+.exit-btn {
+	background-color: yellow;
+	color: black;
+	@apply p-3 rounded-xl shadow-md;


nice use of the @apply directive to make your code more readable 👍

redapy · 2024-03-30T13:33:23Z

src/views/Home.jsx


 export function Home({ data, setListPath, userId, userEmail }) {
 	const [name, setName] = useState('');
+	const [selectedList, setSelectedList] = useState(null); // State to track the selected list


You do not need this additional state here. We already have the listPath in the App, you can pass it as props and use it.

okay... thank you

redapy · 2024-03-30T13:34:36Z

src/views/Home.jsx

-						setListPath={setListPath}
+						setListPath={handleListClick}
+						deleteList={deleteList} //  the deleteList function is being passed as a prop
+						selected={selectedList === item.path} // Checks if the list is selected


as I said above instead of the selectedList, use the lisrPath from the parent.

ijayhub · 2024-03-30T13:48:39Z

I think it looks good, the list can be a bit more centered. I think the background should be just one solid color like #A2A8D3

I think a better title is "Create a shopping list"

button can be "Create new list"

and last button can be "Edit existing list"

Answer:

It is centers check on small screen
I just wanted d homepage visually appealing last demo MJ mention that it was all blue.
I updated d U.I
For d last button it is just for beauty have changed d text description.

redapy · 2024-03-30T20:09:10Z

src/views/Home.jsx

-	// to create a highlighted list
-	const handleListClick = (path) => {
-		setListPath(path);
-		setSelectedList(path); // this update and highlight the list path
-	};


you should keep the handleListCLick, only remove the duplicate setSelectedList(path)

redapy · 2024-03-30T20:12:05Z

src/views/Home.jsx

+						listPath={listPath} // Pass listPath to SingleList
 					/>


no need to pass the listPath further, just use it here.
selected={listpath === item.path}

I dont really understand...

before you were using another duplicated state selectedList to check if the list is selected like this :
selected={selectedList === item.path}.

Now you will use the listPath, that's it:
selected={listpath === item.path}

added styles using tailwindCss, delete not working

2e429bd

ijayhub requested review from IamHenryOkeke, khadijahnabil and jmahamed March 24, 2024 14:27

ijayhub added 2 commits March 25, 2024 21:22

delete icon not working

5e717fa

added: highlight, delete not working yet

02f8128

IamHenryOkeke approved these changes Mar 28, 2024

View reviewed changes

Update firebase functions and add 'Join Existing List' button to Hom…

afd5816

…e view and new styles for small screens.

jmahamed requested changes Mar 30, 2024

View reviewed changes

feat: delete button works, update the homepage design

74ab503

redapy approved these changes Mar 30, 2024

View reviewed changes

ijayhub closed this Mar 30, 2024

feat: UI update

d6687c7

ijayhub reopened this Mar 30, 2024

feat: highlight fixed

de335e1

redapy requested changes Mar 30, 2024

View reviewed changes

ijayhub added 2 commits March 31, 2024 13:20

feat: update design

f4f106d

feat:update

a2887ad

jmahamed approved these changes Mar 31, 2024

View reviewed changes

jmahamed and others added 2 commits March 31, 2024 18:17

Merge branch 'main' into ij-home

258bfb4

minor changes

472cb5c

jmahamed merged commit 8665b57 into main Mar 31, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

added styles using tailwindCss, delete not working #35

added styles using tailwindCss, delete not working #35

ijayhub commented Mar 24, 2024 •

edited

Loading

github-actions bot commented Mar 24, 2024 •

edited

Loading

IamHenryOkeke commented Mar 28, 2024

IamHenryOkeke left a comment

jmahamed left a comment

redapy left a comment

redapy Mar 30, 2024

ijayhub Mar 30, 2024

redapy Mar 30, 2024

ijayhub Mar 30, 2024

redapy Mar 30, 2024

ijayhub Mar 30, 2024

redapy Mar 30, 2024

ijayhub Mar 30, 2024

ijayhub Mar 30, 2024

redapy Mar 30, 2024

ijayhub Mar 30, 2024

ijayhub Mar 30, 2024

ijayhub commented Mar 30, 2024 •

edited

Loading

redapy Mar 30, 2024

redapy Mar 30, 2024

ijayhub Mar 30, 2024

redapy Mar 31, 2024

added styles using tailwindCss, delete not working #35

added styles using tailwindCss, delete not working #35

Conversation

ijayhub commented Mar 24, 2024 • edited Loading

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented Mar 24, 2024 • edited Loading

IamHenryOkeke commented Mar 28, 2024

IamHenryOkeke left a comment

Choose a reason for hiding this comment

jmahamed left a comment

Choose a reason for hiding this comment

redapy 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

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

ijayhub commented Mar 30, 2024 • 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

ijayhub commented Mar 24, 2024 •

edited

Loading

github-actions bot commented Mar 24, 2024 •

edited

Loading

ijayhub commented Mar 30, 2024 •

edited

Loading