Merge pull request #37 from the-collab-lab/sd-st-14.2

Issue #14.2 Implement Disclosure component with collapsible content

package.json

@@ -12,6 +12,7 @@
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-icons": "^5.3.0",
 		"react-router-dom": "^6.26.0"
 	},
 	"devDependencies": {

src/App.jsx

@@ -47,7 +47,13 @@ export function App() {
 					<Route
 						index
 						element={
-							<Home data={lists} setListPath={setListPath} user={user} />
+							<Home
+								data={data}
+								lists={lists}
+								listPath={listPath}
+								setListPath={setListPath}
+								user={user}
+							/>
 						}
 					/>
 					<Route

src/components/ListItem.css

@@ -1,12 +1,3 @@
-td {
-	border-bottom: 1px solid whitesmoke;
-}
-
-th {
-	background-color: #3e27ed;
-	border-bottom: 2px solid #ddd;
-}
-
 .duesoon {
 	color: orange;
 	font-weight: bold;
@@ -31,3 +22,25 @@ th {
 	color: red;
 	font-weight: bold;
 }
+.ListItem {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px 15px;
+	font-size: 16px;
+	margin-bottom: 10px;
+	border-radius: 8px;
+	transition: background-color 0.3s;
+}
+
+.ListItem button {
+	border: none;
+	border-radius: 4px;
+	padding: 8px 12px;
+	cursor: pointer;
+}
+
+.ListItem button:hover {
+	transform: scale(1.02);
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}

src/components/ListItem.jsx

@@ -3,6 +3,7 @@ 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';
 
 export function ListItem({
 	name,
@@ -82,26 +83,21 @@ export function ListItem({
 
 	return (
 		<>
-			<tr className="ListItem">
-				<td>{name}</td>
+			<div className="ListItem">
+				<Toggle
+					toggle={handleToggle}
+					on={purchased}
+					name={name}
+					isDisabled={isDisabled}
+					dateLastPurchased={dateLastPurchased}
+				/>
+				{name}
 
-				<td>
-					<Toggle
-						toggle={handleToggle}
-						on={purchased}
-						name={name}
-						isDisabled={isDisabled}
-						dateLastPurchased={dateLastPurchased}
-					/>
-				</td>
-				<td>
-					{dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''}
-				</td>
-				<td className={urgencyClass}>{sortCriteria.tag}</td>
-				<button onClick={handleDelete} aria-label={`Delete ${name}`}>
+				<div className={urgencyClass}>{sortCriteria.tag}</div>
+				<RiDeleteBin5Fill onClick={handleDelete} aria-label={`Delete ${name}`}>
 					Delete
-				</button>
-			</tr>
+				</RiDeleteBin5Fill>
+			</div>
 		</>
 	);
 }

src/components/Toggle.jsx

@@ -35,8 +35,6 @@ export function Toggle({ on, toggle, name, isDisabled }) {
 					disabled={isDisabled}
 					aria-label={`Toggle purchase status for ${name}`}
 				/>
-
-				<span className="Toggle-text">{on ? 'Purchased' : 'Unpurchased'}</span>
 			</label>
 			{message && <p className="Toggle-message">{message}</p>}
 		</div>

src/views/Disclosure.css

@@ -0,0 +1,29 @@
+.Accordion {
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	margin-bottom: 10px;
+	width: 70%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.Disclosure-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	cursor: pointer;
+	padding: 10px;
+	border: none;
+	border-bottom: 1px solid #ccc;
+	width: 100%;
+}
+
+.list-item .share-icon {
+	margin-left: auto;
+	padding: 8px;
+	cursor: pointer;
+}
+
+.share-icon:hover {
+	transform: scale(1.2);
+}

src/views/Disclosure.jsx

@@ -0,0 +1,81 @@
+// Allows users to expand and collapse content sections.
+//key features: toggles visibility of child elements based on open/closed
+// Uses a button to trigger the toggle(responds to both mouse and keyboard clicks)
+// Displays icon to indicate expand/colapsed (feel free to change icon if u like)
+// Manages accessibitity through aria attributes
+
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FaShareAlt } from 'react-icons/fa';
+import './Disclosure.css';
+
+export function Disclosure({
+	id,
+	children,
+	listofNames,
+	iconExpanded,
+	iconCollapsed,
+	currentListPath,
+	listpath,
+	setListPath,
+}) {
+	const navigate = useNavigate();
+	const [isOpen, setIsOpen] = useState(false);
+
+	useEffect(() => {
+		if (currentListPath !== listpath) {
+			setIsOpen(false);
+		}
+	}, [currentListPath]);
+
+	const toggleDisclosure = (e) => {
+		e.preventDefault();
+		if (isOpen) {
+			setIsOpen(false);
+		} else {
+			setIsOpen(true);
+			setListPath(listpath);
+		}
+	};
+
+	const handleKeyDown = (e) => {
+		if (
+			e.keyCode === 13 || // Keycode for Enter key
+			e.keyCode === 32 // Keycode for Spacebar key
+		) {
+			toggleDisclosure(e);
+		}
+	};
+
+	return (
+		<div className="Accordion" id={id}>
+			<button
+				className="Disclosure-header"
+				id={`${id}-button`}
+				onClick={toggleDisclosure}
+				onKeyDown={handleKeyDown}
+				aria-controls={`${id}-content`}
+				aria-expanded={isOpen}
+			>
+				{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
+					className="Disclosure-content"
+					id={`${id}-content`}
+					hidden={!isOpen}
+				>
+					{children}
+				</div>
+			)}
+		</div>
+	);
+}

src/views/Home.css

@@ -0,0 +1,31 @@
+.Home button {
+	border-radius: 5px;
+	padding: 8px 12px;
+	cursor: pointer;
+	border: 1px solid #ccc;
+	box-sizing: border-box;
+}
+
+input[type='text'] {
+	padding: 10px;
+	width: 70%;
+	margin-right: 10px;
+	font-size: 16px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	box-sizing: border-box;
+	margin-top: 10px;
+}
+
+h1,
+h2,
+h3 {
+	margin-bottom: 20px;
+}
+
+label {
+	font-size: 20px;
+	font-weight: bold;
+	margin-bottom: 10px;
+	margin-top: 20px;
+}

src/views/Home.jsx

@@ -1,11 +1,11 @@
 import './Home.css';
-import { SingleList } from '../components';
 import { useState } from 'react';
 import { createList } from '../api';
-import { useNavigate } from 'react-router-dom';
+import { FaAngleRight, FaAngleDown } from 'react-icons/fa6';
+import { Disclosure } from './Disclosure';
+import { List } from './List';
 
-export function Home({ data, setListPath, user }) {
-	const navigate = useNavigate();
+export function Home({ data, lists, listPath, setListPath, user }) {
 	const userId = user?.uid;
 	const userEmail = user?.email;
 
@@ -19,11 +19,9 @@ export function Home({ data, setListPath, user }) {
 		event.preventDefault();
 		if (listName) {
 			try {
-				// throw new Error ("Error")
 				const newListPath = await createList(userId, userEmail, listName);
 				alert('List is sucessfully created');
 				setListPath(newListPath);
-				navigate('/list');
 			} catch {
 				alert('There was an error adding your list to db');
 			}
@@ -34,33 +32,39 @@ export function Home({ data, setListPath, user }) {
 
 	return (
 		<div className="Home">
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
-			<ul>
-				{data.map((list) => {
-					return (
-						<SingleList
-							key={list.path}
-							name={list.name}
-							path={list.path}
-							setListPath={setListPath}
-						/>
-					);
-				})}
-			</ul>
 			<div>
 				<form onSubmit={handleSubmit}>
-					<label htmlFor="list-name">List Name : </label>
+					<label htmlFor="list-name">Create a List </label>
 					<input
 						id="list-name"
 						type="text"
 						value={listName}
 						onChange={handleChange}
+						placeholder="Add a list"
 					></input>
-					<button>Submit</button>
+					<button>Add</button>
 				</form>
 			</div>
+
+			{lists.length === 0 ? (
+				<p>No lists available. Create a new list below.</p>
+			) : (
+				<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>
+					))}
+				</ul>
+			)}
 		</div>
 	);
 }