Merge branch 'feat/setup-tailwind-shadcn' into jo-home-page

the-collab-lab · Oct 6, 2024 · a1d33f1 · a1d33f1
2 parents c99a06f + 1003bd0
commit a1d33f1
Show file tree

Hide file tree

Showing 29 changed files with 2,980 additions and 2,081 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
@@ -11,8 +11,15 @@
 			content="A smart shopping list that learns your purchase habits and makes suggestions, so you don't forget to buy what's important."
 		/>
 		<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+			rel="stylesheet"
+		/>
+		<link rel="icon" type="image/svg+xml" href="/src/favicon-cart.png" />
 		<meta name="color-scheme" content="dark light" />
-		<title>Smart Shopping List</title>
+		<title>GrocerEase</title>
 		<script type="module" src="/src/index.jsx" async></script>
 	</head>
 	<body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,11 @@
 		"npm": ">=8.19.0"
 	},
 	"dependencies": {
+		"@radix-ui/react-alert-dialog": "^1.1.2",
+		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-select": "^2.1.2",
 		"@radix-ui/react-slot": "^1.1.0",
+		"@radix-ui/react-tooltip": "^1.1.3",
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
@@ -16,9 +20,11 @@
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-hot-toast": "^2.4.1",
+		"react-icons": "^5.3.0",
 		"react-router-dom": "^6.26.0",
 		"tailwind-merge": "^2.5.2",
-		"tailwindcss-animate": "^1.0.7"
+		"tailwindcss-animate": "^1.0.7",
+		"zod": "^3.23.8"
 	},
 	"devDependencies": {
 		"@nabla/vite-plugin-eslint": "^2.0.4",

diff --git a/public/img/underline.png b/public/img/underline.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -24,6 +24,8 @@ export function App() {
 		null,
 	);
 
+	const listName = listPath.split('/').pop();
+
 	/**
 	 * This custom hook holds info about the current signed in user.
 	 * Check ./api/useAuth.jsx for its implementation.
@@ -57,7 +59,7 @@ export function App() {
 						/>
 						<Route
 							path="/list"
-							element={<List data={data} listPath={listPath} />}
+							element={<List data={data} listPath={listPath} listName={listName} />}
 						/>
 						<Route
 							path="/manage-list"
@@ -66,7 +68,6 @@ export function App() {
 							}
 						/>
 					</Route>
-				</Route>
 				<Route element={<Login user={user} />} path="/login" />
 			</Routes>
 		</Router>

diff --git a/src/LOGO-black.png b/src/LOGO-black.png
diff --git a/src/LOGO-white.png b/src/LOGO-white.png
diff --git a/src/api/firebase.js b/src/api/firebase.js
@@ -177,7 +177,10 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
  * @param {string} itemData.itemName The name of the item.
  * @param {number} itemData.daysUntilNextPurchase The number of days until the user thinks they'll need to buy the item again.
  */
-export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
+export async function addItem(
+	listPath,
+	{ itemName, itemQuantity, daysUntilNextPurchase },
+) {
 	const listCollectionRef = collection(db, listPath, 'items');
 	return addDoc(listCollectionRef, {
 		dateCreated: new Date(),
@@ -187,6 +190,7 @@ export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
 		dateNextPurchased: getFutureDate(daysUntilNextPurchase),
 		dayInterval: daysUntilNextPurchase,
 		name: itemName,
+		quantity: itemQuantity,
 		totalPurchases: 0,
 		checked: false,
 	});

diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { auth } from './config.js';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { addUserToDatabase } from './firebase.js';
+import { LogInIcon, LogOutIcon } from 'lucide-react';
 
 /**
  * A button that signs the user in using Google OAuth. When clicked,
@@ -13,7 +14,7 @@ export const SignInButton = () => (
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
 	>
-		Sign In
+		<LogInIcon className="hover:text-light-grey" />
 	</button>
 );
 
@@ -22,7 +23,7 @@ export const SignInButton = () => (
  */
 export const SignOutButton = () => (
 	<button type="button" onClick={() => auth.signOut()}>
-		Sign Out
+		<LogOutIcon className="hover:text-light-grey" />
 	</button>
 );
 

diff --git a/src/components/ListItem.css b/src/components/ListItem.css
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -1,20 +1,36 @@
-import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates';
 import toast from 'react-hot-toast';
+import { Button } from './ui/button';
+import { Trash2 } from 'lucide-react';
+import { getIndicatorColor } from '../utils/helpers';
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from './ui/alert-dialog';
 
 export function ListItem({
 	listPath,
 	name,
 	id,
+	quantity,
 	isChecked,
 	dateLastPurchased,
 	totalPurchases,
 	dayInterval,
 	dateCreated,
 	indicator,
 }) {
+	const [isAlertOpen, setIsAlertOpen] = useState(false);
+
 	const handleOnChange = async (event) => {
 		let { checked } = event.target;
 		if (!checked) return;
@@ -29,13 +45,9 @@ export function ListItem({
 	};
 
 	const handleDelete = async () => {
-		const confirm = window.confirm(`are you sure you want to delete ${name}?`);
-		if (confirm) {
-			await deleteItem(listPath, id);
-			toast.success(`${name} was deleted from the list`);
-		} else {
-			toast.error('Deletion canceled');
-		}
+		await deleteItem(listPath, id);
+		toast.success(`${name} was deleted from the list`);
+		setIsAlertOpen(false);
 	};
 
 	useEffect(() => {
@@ -54,20 +66,64 @@ export function ListItem({
 	}, []);
 
 	return (
-		<li className="ListItem">
-			<input
-				type="checkbox"
-				id={id}
-				onChange={handleOnChange}
-				checked={isChecked}
-				disabled={isChecked}
-			/>
-			<label htmlFor={`${id}`}>{name}</label>
-			{/* Add CSS to dynamically change bg-color for badges? */}
-			<p className="TimeBadge">{indicator}</p>
-			<button type="button" id={id} onClick={handleDelete}>
-				Delete
-			</button>
+		<li className="flex flex-row items-center justify-between rounded-[5px] text-[1em] space-x-5 w-full bg-white text-black h-[3.3rem]">
+			<div className="flex items-center gap-3 ml-4">
+				<input
+					type="checkbox"
+					id={id}
+					onChange={handleOnChange}
+					checked={isChecked}
+					disabled={isChecked}
+					className="w-5 h-5 cursor-pointer"
+				/>
+				<div
+					className={`flex items-center gap-2 ${isChecked ? 'line-through' : ''}`}
+				>
+					<label
+						htmlFor={`${id}`}
+						className="capitalize justify-self-end text-lg"
+					>
+						{name}
+					</label>
+				</div>
+				<div className="bg-pink w-6 h-6 flex items-center justify-center rounded-full">
+					<span className="font-bold text-xs">{quantity}</span>
+				</div>
+			</div>
+			<div className="flex items-center gap-2">
+				<div className={`${getIndicatorColor(indicator)} rounded-[5px] px-3`}>
+					<p className="capitalize justify-self-end text-base">{indicator}</p>
+				</div>
+				<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
+					<AlertDialogTrigger asChild>
+						<Button
+							className="bg-transparent hover:bg-transparent"
+							type="button"
+							id={id}
+							onClick={() => setIsAlertOpen(true)}
+						>
+							<Trash2 className="text-main-green w-6 h-6 md:w-7 md:h-7" />
+						</Button>
+					</AlertDialogTrigger>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+							<AlertDialogDescription>
+								This action cannot be undone. Do you really want to delete{' '}
+								{name}?
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel onClick={() => setIsAlertOpen(false)}>
+								Cancel
+							</AlertDialogCancel>
+							<AlertDialogAction onClick={handleDelete}>
+								Continue
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			</div>
 		</li>
 	);
 }