Merge branch 'main' of https://github.com/the-collab-lab/tcl-74-smart-shopping-list into dtp-teampage

Author: dterceroparker

package-lock.json

@@ -14,8 +14,7 @@
 		"react-dom": "^18.3.1",
 		"react-icons": "^5.3.0",
 		"react-router-dom": "^6.26.0",
-		"react-toastify": "^10.0.5",
-		"react-type-animation": "^3.2.0"
+		"react-toastify": "^10.0.5"
 	},
 	"devDependencies": {
 		"@nabla/vite-plugin-eslint": "^2.0.4",
@@ -32,6 +31,7 @@
 		"jsdom": "^24.1.1",
 		"lint-staged": "^15.2.8",
 		"prettier": "^3.3.3",
+		"tailwindcss": "^3.4.13",
 		"vite": "^5.3.5",
 		"vite-plugin-pwa": "^0.20.1",
 		"vite-plugin-svgr": "^4.2.0",

package.json

@@ -173,7 +173,7 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
 		sharedLists: arrayUnion(listDocumentRef),
 	});
 	return Promise.resolve(
-		`You have successfully shared your list to ${recipientEmail}`,
+		`You have successfully shared your list to: \n${recipientEmail}`,
 	);
 }
 

src/api/firebase.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useToggle } from '@uidotdev/usehooks';
 import { Toggle } from './Toggle.jsx';
+import { notify } from '../utils/notifications';
 import './ListItem.css';
 import { updateItem, deleteItem } from '../api/firebase.js';
 import { FaTrashAlt } from 'react-icons/fa';
@@ -15,7 +16,6 @@ export function ListItem({
 	purchaseInterval,
 	dateCreated,
 	sortCriteria,
-	setMessage,
 }) {
 	const [purchased, setPurchased] = useToggle(false);
 	const [isDisabled, setIsDisabled] = useState(false);
@@ -55,7 +55,7 @@ export function ListItem({
 					dateCreated,
 				});
 				console.log(`${name} updated successfully`);
-				alert(`${name} is purchased successfully`);
+				notify(`${name} has been purchased successfully!`, 'success');
 				setIsDisabled(true);
 			} catch (error) {
 				console.error('Error updating item:', error);
@@ -64,7 +64,6 @@ export function ListItem({
 		}
 	};
 
-	// handleDelete Function
 	const handleDelete = async () => {
 		const deleteConfirm = window.confirm(
 			`Are you sure you want to delete ${name}?`,
@@ -73,7 +72,7 @@ export function ListItem({
 		if (deleteConfirm) {
 			try {
 				await deleteItem(listPath, itemId);
-				setMessage(`${name} has been deleted successfully!`);
+				notify(`${name} has been deleted successfully!`, 'success');
 			} catch (error) {
 				console.log(`Error:`, error);
 			}
@@ -95,15 +94,11 @@ export function ListItem({
 				{name}
 
 				<div className={urgencyClass}>{sortCriteria.tag}</div>
-				{/* <RiDeleteBin5Fill onClick={handleDelete} aria-label={`Delete ${name}`}>
-					Delete
-				</RiDeleteBin5Fill> */}
 
 				<IconButton
 					aria-label={`Delete ${name}`}
 					as="button"
 					className="delete-icon"
-					// label="Add"
 					IconComponent={FaTrashAlt}
 					onClick={handleDelete}
 				/>

src/components/ListItem.jsx

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
 	--color-black: hsla(220, 13%, 18%, 1);
 	--color-gray-dark: hsla(220, 13%, 25%, 1);
@@ -14,7 +18,6 @@
 	--color-border: hsla(220, 13%, 32%, 1);
 	--color-error: var(--color-red);
 	--color-text: var(--color-white);
-
 	/**
  * Set the value of 1rem to 10px to make relative units
  * easier to work with.
@@ -99,3 +102,7 @@ code {
 :root.theme-light code {
 	--color-bg: var(--color-gray-light);
 }
+
+.share-div {
+	padding-bottom: 100px;
+}