Merge pull request #42 from the-collab-lab/st-nr-15

Issue #15: Implement IconButton and update icon imports for consistent design and functionality
the-collab-lab · Oct 2, 2024 · 38e1b48 · 38e1b48
2 parents 3459df8 + 276db23
commit 38e1b48
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -10,14 +10,9 @@
 			name="description"
 			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" />
 		<meta name="color-scheme" content="dark light" />
 		<title>CollabShop</title>
 		<script type="module" src="/src/index.jsx" async></script>
-		<script
-			src="https://kit.fontawesome.com/06840d40e8.js"
-			crossorigin="anonymous"
-		></script>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -22,7 +22,7 @@ export const SignInButton = ({ children, className }) => (
 /**
  * A button that signs the user out of the app using Firebase Auth.
  */
-export const SignOutButton = ({ className }) => {
+export const SignOutButton = ({ children, className }) => {
 	const navigate = useNavigate();
 
 	const handleSignOut = async () => {
@@ -36,8 +36,7 @@ export const SignOutButton = ({ className }) => {
 
 	return (
 		<button className={className} type="button" onClick={handleSignOut}>
-			<i className="fa-solid fa-right-from-bracket"></i> <br />
-			Sign Out
+			{children}
 		</button>
 	);
 };

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -3,7 +3,8 @@ import { useToggle } from '@uidotdev/usehooks';
 import { Toggle } from './Toggle.jsx';
 import './ListItem.css';
 import { updateItem, deleteItem } from '../api/firebase.js';
-import { RiDeleteBin5Fill } from 'react-icons/ri';
+import { FaTrashAlt } from 'react-icons/fa';
+import { IconButton } from './IconButton.jsx';
 
 export function ListItem({
 	name,
@@ -94,9 +95,18 @@ export function ListItem({
 				{name}
 
 				<div className={urgencyClass}>{sortCriteria.tag}</div>
-				<RiDeleteBin5Fill onClick={handleDelete} aria-label={`Delete ${name}`}>
+				{/* <RiDeleteBin5Fill onClick={handleDelete} aria-label={`Delete ${name}`}>
 					Delete
-				</RiDeleteBin5Fill>
+				</RiDeleteBin5Fill> */}
+
+				<IconButton
+					aria-label={`Delete ${name}`}
+					as="button"
+					className="delete-icon"
+					// label="Add"
+					IconComponent={FaTrashAlt}
+					onClick={handleDelete}
+				/>
 			</div>
 		</>
 	);

diff --git a/src/views/Disclosure.css b/src/views/Disclosure.css
@@ -16,6 +16,11 @@
 	border: none;
 	border-bottom: 1px solid #ccc;
 	width: 100%;
+	position: relative;
+}
+.Disclosure-header span {
+	flex-grow: 1;
+	text-align: center;
 }
 
 .list-item .share-icon {

diff --git a/src/views/Disclosure.jsx b/src/views/Disclosure.jsx
@@ -6,7 +6,6 @@
 
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { FaShareAlt } from 'react-icons/fa';
 import './Disclosure.css';
 
 export function Disclosure({
@@ -59,13 +58,6 @@ export function Disclosure({
 			>
 				{isOpen ? iconExpanded : iconCollapsed}
 				<span>{listofNames}</span>
-
-				<FaShareAlt
-					icon="fa-solid fa-share-nodes"
-					className="share-icon"
-					aria-label="Share"
-					onClick={() => navigate('/manage-list')}
-				/>
 			</button>
 			{isOpen && (
 				<div

diff --git a/src/views/Home.css b/src/views/Home.css
@@ -29,3 +29,25 @@ label {
 	margin-bottom: 10px;
 	margin-top: 20px;
 }
+
+.list-container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 0;
+}
+
+.share-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	transition: transform 0.2s ease-in-out;
+}
+
+.share-icon:hover {
+	transform: scale(1.2);
+}
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -4,6 +4,9 @@ import { createList } from '../api';
 import { FaAngleRight, FaAngleDown } from 'react-icons/fa6';
 import { Disclosure } from './Disclosure';
 import { List } from './List';
+import { IconButton } from '../components/IconButton';
+import { FaPlusSquare, FaShareAlt } from 'react-icons/fa';
+import { NavLink } from 'react-router-dom';
 
 export function Home({ data, lists, listPath, setListPath, user }) {
 	const userId = user?.uid;
@@ -42,7 +45,13 @@ export function Home({ data, lists, listPath, setListPath, user }) {
 						onChange={handleChange}
 						placeholder="Add a list"
 					></input>
-					<button>Add</button>
+					<IconButton
+						aria-label="Add a list"
+						as="button"
+						className="add-icon"
+						label="Add"
+						IconComponent={FaPlusSquare}
+					/>
 				</form>
 			</div>
 
@@ -51,17 +60,28 @@ export function Home({ data, lists, listPath, setListPath, user }) {
 			) : (
 				<ul>
 					{lists.map((list) => (
-						<Disclosure
-							key={list.path}
-							listofNames={list.name}
-							iconExpanded={<FaAngleDown />}
-							iconCollapsed={<FaAngleRight />}
-							listpath={list.path}
-							currentListPath={listPath}
-							setListPath={setListPath}
-						>
-							<List data={data} listPath={list.path} />
-						</Disclosure>
+						<div key={list.path} className="list-container">
+							<Disclosure
+								key={`disclosure-${list.path}`}
+								listofNames={list.name}
+								iconExpanded={<FaAngleDown />}
+								iconCollapsed={<FaAngleRight />}
+								listpath={list.path}
+								currentListPath={listPath}
+								setListPath={setListPath}
+							>
+								<List data={data} listPath={list.path} />
+							</Disclosure>
+							<IconButton
+								aria-label="share list"
+								as={NavLink}
+								className="share-icon"
+								label="Share"
+								key={`icon-${list.path}`}
+								IconComponent={FaShareAlt}
+								to="/manage-list"
+							/>
+						</div>
 					))}
 				</ul>
 			)}

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -25,40 +25,50 @@ export function Layout() {
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
-					<h1>Smart shopping list</h1>
-					{user && auth.currentUser ? (
+					<h1>CollabShop</h1>
+					{!!user ? (
 						<div>
 							<span>Signed in as {auth.currentUser.displayName}</span>
 						</div>
 					) : (
-						<span>Not signed in</span>
+						<IconButton
+							aria-label="Sign In"
+							as={SignInButton}
+							// className="Nav-link"
+							IconComponent={FaSignInAlt}
+							label="Sign In"
+						/>
 					)}
 				</header>
 				<main className="Layout-main">
 					<Outlet />
 				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
-						{user && auth.currentUser ? (
+						{user ? (
 							<>
+								{' '}
 								<IconButton
+									aria-label="View Lists"
 									as={NavLink}
 									className="Nav-link"
-									icon="fa-solid fa-list"
+									IconComponent={FaList}
 									label="View Lists"
-									to="/" //Home Page
+									to="/"
 								/>
 								<IconButton
+									aria-label="Add Item"
 									as={NavLink}
 									className="Nav-link"
-									icon="fa-solid fa-cart-plus"
+									IconComponent={FaCartPlus}
 									label="Add Item"
-									to="manage-list" // Relative path to manage-list
+									to="/manage-list"
 								/>
 								<IconButton
+									aria-label="Sign Out"
 									as={SignOutButton}
 									className="Nav-link"
-									icon="fa-solid fa-right-from-bracket"
+									IconComponent={FaSignOutAlt}
 									label="Sign Out"
 								/>
 							</>

diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
@@ -1,7 +1,10 @@
 import { useState, useMemo } from 'react';
 import { addItem, shareList } from '../api/firebase';
+import { FaPlusSquare } from 'react-icons/fa';
+import { IconButton } from '../components/IconButton';
+import { FaEnvelope } from 'react-icons/fa6';
 
-export function ManageList({ listPath, user, data }) {
+export function ManageList({ listPath, user, data, lists }) {
 	const currentUserId = user?.uid;
 	const [itemName, setItemName] = useState('');
 	const [daysUntilNextPurchase, setDaysUntilNextPurchase] = useState(7);
@@ -16,6 +19,8 @@ export function ManageList({ listPath, user, data }) {
 		duplicate: 'Item already exists!',
 	};
 
+	const extractedListName = listPath.match(/(?<=\/).*$/)[0];
+
 	const normalizeString = (str) =>
 		str.toLowerCase().replace(/[^a-z0-9-]+/g, '');
 
@@ -68,7 +73,7 @@ export function ManageList({ listPath, user, data }) {
 
 	return (
 		<div>
-			<h1>Manage Your Shopping List</h1>
+			<h1>Manage Your Shopping List for {extractedListName}</h1>
 			<form onSubmit={handleSubmit}>
 				<label htmlFor="itemName">Item Name:</label>
 				<input
@@ -78,6 +83,13 @@ export function ManageList({ listPath, user, data }) {
 					onChange={(e) => setItemName(e.target.value)}
 					// required
 				/>
+				<IconButton
+					aria-label="Add item to your list"
+					as="button"
+					className="add-icon"
+					label="Add"
+					IconComponent={FaPlusSquare}
+				/>
 				<fieldset>
 					<legend>How soon will you need to buy this item again?</legend>
 					<label>
@@ -88,7 +100,8 @@ export function ManageList({ listPath, user, data }) {
 							onChange={() => setDaysUntilNextPurchase(7)}
 						/>
 						Soon (7 days)
-					</label>
+					</label>{' '}
+					<br />
 					<label>
 						<input
 							type="radio"
@@ -97,7 +110,8 @@ export function ManageList({ listPath, user, data }) {
 							onChange={() => setDaysUntilNextPurchase(14)}
 						/>
 						Kind of soon (14 days)
-					</label>
+					</label>{' '}
+					<br />
 					<label>
 						<input
 							type="radio"
@@ -109,9 +123,6 @@ export function ManageList({ listPath, user, data }) {
 					</label>
 				</fieldset>
 				<br />
-				<button type="submit" aria-label="Add item to your list">
-					Add Item
-				</button>
 			</form>
 			<br></br>
 			{message && (
@@ -130,7 +141,14 @@ export function ManageList({ listPath, user, data }) {
 						onChange={(e) => setRecipientEmail(e.target.value)}
 						required
 					/>
-					<button type="submit">Share List</button>
+					<IconButton
+						aria-label="Share with an email"
+						as="button"
+						className="share-email"
+						label="Share"
+						IconComponent={FaEnvelope}
+						type="submit"
+					/>
 				</form>
 			</div>
 		</div>