Merge pull request #55 from the-collab-lab/sm-simple-list-view-style-26

Simple list view style 26
the-collab-lab · Oct 6, 2024 · f5efbb0 · f5efbb0
2 parents c791166 + 6369357
commit f5efbb0
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 60 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -63,7 +63,10 @@ export function App() {
 							/>
 						}
 					/>
-					<Route path="/list" element={<List data={data} userId={userId} />} />
+					<Route
+						path="/list"
+						element={<List data={data} path={listPath} userId={userId} />}
+					/>
 					<Route
 						path="/manage-list"
 						element={<ManageList userId={userId} list={data} />}

diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -12,6 +12,7 @@ export const SignInButton = () => (
 	<button
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
+		className="m-0 bg-accent"
 	>
 		Sign In
 	</button>
@@ -24,6 +25,7 @@ export const SignOutButton = () => (
 	<button
 		type="button"
 		onClick={() => auth.signOut() && window.location.reload()}
+		className="m-0 bg-accent"
 	>
 		Sign Out
 	</button>

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
 import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 export function ListItem({ item }) {
 	const { name, dateLastPurchased, dateNextPurchased, totalPurchases, id } =
@@ -52,37 +54,49 @@ export function ListItem({ item }) {
 	};
 
 	return (
-		<li className="ListItem">
+		<li className="ListItem space-x-3">
 			<input
 				type="checkbox"
 				checked={checked}
 				onChange={handleChange}
 				disabled={checked}
+				className="checkbox checkbox-primary"
 			/>
-			<h2 style={{ fontSize: '20px' }}>{name}</h2>
+			<h4 style={{ fontSize: '20px' }}>{name}</h4>
 
-			<button onClick={handleDelete}>Delete</button>
-			<button onClick={() => setIsActive(!isActive)}>
-				View Purchase Details
+			<button onClick={handleDelete} aria-label="Delete this Item">
+				<DeleteIcon />
 			</button>
+			<div className="dropdown">
+				<button
+					onClick={() => setIsActive(!isActive)}
+					className="focus:bg-secondary"
+					aria-label="Get purchase details of this item"
+				>
+					<ExpandMoreIcon />
+				</button>
+				<div className="dropdown-content bg-base-200 rounded-box z-[1] w-60 p-4 shadow">
+					<ul style={{ fontSize: '15px' }}>
+						<li>
+							<h4 className="font-bold">Last Purchase:</h4>
+							<span>
+								{' '}
+								{dateLastPurchased
+									? dateLastPurchased.toDate().toDateString()
+									: 'N/A'}
+							</span>
+						</li>
+						<li>
+							<h4 className="font-bold">Next Purchase:</h4>
 
-			<div style={{ display: isActive ? 'block' : 'none' }}>
-				<ul style={{ fontSize: '15px' }}>
-					<li>
-						Last Purchase:
-						<span>
-							{' '}
-							{dateLastPurchased
-								? dateLastPurchased.toDate().toDateString()
-								: 'N/A'}
-						</span>
-					</li>
-					<li>
-						Next Purchase:
-						<span> {dateNextPurchased?.toDate().toDateString()}</span>
-					</li>
-					<li>Total Purchases: {totalPurchases}</li>
-				</ul>
+							<span> {dateNextPurchased?.toDate().toDateString()}</span>
+						</li>
+						<li>
+							<h4 className="font-bold">Total Purchases: </h4>
+							<span>{totalPurchases}</span>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</li>
 	);

diff --git a/src/index.css b/src/index.css
@@ -21,6 +21,9 @@
 	h1 {
 		@apply text-5xl font-bowlby;
 	}
+	h2 {
+		@apply text-5xl font-archivo font-bold;
+	}
 	h3 {
 		@apply text-4xl font-archivo font-bold;
 	}

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -3,18 +3,10 @@ import { Outlet, NavLink } from 'react-router-dom';
 import './Layout.css';
 import { useAuth, SignInButton, SignOutButton } from '../api';
 
-/**
- * TODO: The links defined in this file don't work!
- *
- * Instead of anchor element, they should use a component
- * from `react-router-dom` to navigate to the routes
- * defined in `App.jsx`.
- */
-
-const handleActive = ({ isActive, isPending }) => {
+const handleActive = ({ isActive }) => {
 	return {
-		fontWeight: isActive ? 'bold' : '',
-		color: isPending ? 'red' : 'black',
+		fontWeight: isActive ? '900' : '',
+		color: isActive ? '#E8C900' : 'rgb(247 253 235 / 68%)',
 	};
 };
 
@@ -24,24 +16,57 @@ export function Layout() {
 	return (
 		<>
 			<div className="Layout">
-				<header className="Layout-header">
-					<h1 className="font-extrabold">SnapShop</h1>
-				</header>
-				<nav className="Nav">
-					<div className="Nav-container">
-						<NavLink to="/" style={handleActive}>
-							Home
-						</NavLink>
-
-						<NavLink to="/list" style={handleActive}>
-							List
-						</NavLink>
-
-						<NavLink to="/manage-list" style={handleActive}>
-							Manage List
-						</NavLink>
-
-						{user ? <SignOutButton /> : <SignInButton />}
+				<nav className="Nav navbar bg-neutral">
+					<div
+						style={{ paddingInline: 'min(5dvw, 3.2rem)' }}
+						className="Nav-container bg-neutral"
+					>
+						<div className=" navbar-start pl-2.5">
+							<h1 className="font-extrabold text-accent">SnapShop</h1>
+						</div>
+
+						{/* Navbar on Desktop */}
+						<div className="space-x-8 navbar-end hidden sm:block">
+							<NavLink to="/" style={handleActive}>
+								Home
+							</NavLink>
+
+							<NavLink to="/list" style={handleActive}>
+								List
+							</NavLink>
+
+							{user ? <SignOutButton /> : <SignInButton />}
+						</div>
+
+						{/* Mobile Screen Icon Dropdown */}
+						<div className="space-x-8 dropdown dropdown-bottom dropdown-end sm:hidden  text-accent">
+							<button className="btn btn-square btn-ghost ">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									className="inline-block h-5 w-5 stroke-current"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="2"
+										d="M4 6h16M4 12h16M4 18h16"
+									></path>
+								</svg>
+							</button>
+							<div className="menu menu-md dropdown-content  bg-neutral  rounded-box z-[1]  w-52 p-2 shadow space-y-2">
+								<NavLink to="/" style={handleActive} className="text-3xl">
+									Home
+								</NavLink>
+
+								<NavLink to="/list" style={handleActive} className="text-3xl">
+									List
+								</NavLink>
+
+								{user ? <SignOutButton /> : <SignInButton />}
+							</div>
+						</div>
 					</div>
 				</nav>
 

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -2,8 +2,10 @@ import { ListItem } from '../components';
 import { useState, useEffect, Fragment } from 'react';
 import BasicModal from './Modal';
 import { comparePurchaseUrgency } from '../api';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import AddBoxRoundedIcon from '@mui/icons-material/AddBoxRounded';
 
-export function List({ data, userId }) {
+export function List({ data, userId, path }) {
 	const [filterVal, setFilterVal] = useState('');
 	const [filteredObject, setFilteredObject] = useState({});
 	const [sortedList, setSortedList] = useState([]);
@@ -58,28 +60,33 @@ export function List({ data, userId }) {
 
 	return (
 		<>
-			<p>
-				Hello from the <code>/list</code> page!
-			</p>
+			<h2 className="py-8">{`${path.slice(path.indexOf('/') + 1)} List`}</h2>
 			{showModal && dataEmpty && (
 				<BasicModal dataEmpty={dataEmpty} message={message} />
 			)}
 
-			<button onClick={addItemNavigate}> Add item</button>
+			<button onClick={addItemNavigate}>
+				{' '}
+				Add item <AddBoxRoundedIcon fontSize="large" className="text-black" />
+			</button>
 
-			<form onSubmit={clearInput}>
-				<label htmlFor="item-name">Search item: </label>
+			<form onSubmit={clearInput} className="py-4">
+				<label htmlFor="item-name" aria-label="Search for an item">
+					Find Item{' '}
+				</label>
 				<input
 					id="item-name"
 					name="item-name"
 					type="text"
 					value={filterVal}
 					onChange={(e) => setFilterVal(e.target.value)}
+					placeholder="e.g. Apple"
 				/>
+				<SearchRoundedIcon />
 				{filterVal && <button>Clear</button>}
 			</form>
 
-			<ul>
+			<ul className="space-y-2">
 				{filteredObject &&
 					Object.entries(filteredObject).map(([timeBucket, list]) => (
 						<Fragment key={crypto.randomUUID()}>