Merge branch 'main' into eb-voice-to-text-issue-17

src/components/ListItem.jsx

@@ -3,8 +3,10 @@ import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
 
 export function ListItem({ item }) {
-	const { name, dateLastPurchased, id } = item;
+	const { name, dateLastPurchased, dateNextPurchased, totalPurchases, id } =
+		item;
 	const [checked, setChecked] = useState(false);
+	const [isActive, setIsActive] = useState(false);
 
 	const handleDelete = async () => {
 		try {
@@ -57,8 +59,31 @@ export function ListItem({ item }) {
 				onChange={handleChange}
 				disabled={checked}
 			/>
-			{name}
+			<h2 style={{ fontSize: '20px' }}>{name}</h2>
+
 			<button onClick={handleDelete}>Delete</button>
+			<button onClick={() => setIsActive(!isActive)}>
+				View Purchase Details
+			</button>
+
+			<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>
+			</div>
 		</li>
 	);
 }

src/views/Home.jsx

@@ -1,6 +1,6 @@
 import './Home.css';
 import { SingleList } from '../components';
-import { useState, useEffect } from 'react';
+import { Fragment, useState } from 'react';
 import { createList, useAuth } from '../api';
 import { useNavigate } from 'react-router-dom';
 import { useVoiceToText } from '../utils';
@@ -48,15 +48,15 @@ export function Home({ data, setListPath }) {
 			<ul>
 				{data &&
 					data.map((list) => {
+						const uniqueId = crypto.randomUUID();
 						return (
-							<>
+							<Fragment key={uniqueId}>
 								<SingleList
-									key={crypto.randomUUID()}
 									name={list.name}
 									setListPath={setListPath}
 									path={list.path}
 								/>
-							</>
+							</Fragment>
 						);
 					})}
 			</ul>

src/views/List.jsx

@@ -1,5 +1,5 @@
 import { ListItem } from '../components';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Fragment } from 'react';
 import BasicModal from './Modal';
 import { comparePurchaseUrgency } from '../api';
 
@@ -51,6 +51,11 @@ export function List({ data, userId }) {
 		setFilteredObject(filteredObject);
 	}, [filterVal, sortedList]);
 
+	const addItemNavigate = (e) => {
+		e.preventDefault();
+		window.location.href = '/manage-list';
+	};
+
 	return (
 		<>
 			<p>
@@ -60,8 +65,10 @@ export function List({ data, userId }) {
 				<BasicModal dataEmpty={dataEmpty} message={message} />
 			)}
 
+			<button onClick={addItemNavigate}> Add item</button>
+
 			<form onSubmit={clearInput}>
-				<label htmlFor="item-name">Item name:</label>
+				<label htmlFor="item-name">Search item: </label>
 				<input
 					id="item-name"
 					name="item-name"
@@ -75,14 +82,14 @@ export function List({ data, userId }) {
 			<ul>
 				{filteredObject &&
 					Object.entries(filteredObject).map(([timeBucket, list]) => (
-						<>
+						<Fragment key={crypto.randomUUID()}>
 							<div>
 								<h3>{labels[timeBucket]}</h3>
 							</div>
 							{list.map((item) => (
-								<ListItem key={item.id} item={item} />
+								<ListItem item={item} key={crypto.randomUUID()} />
 							))}
-						</>
+						</Fragment>
 					))}
 			</ul>
 		</>

src/views/ManageList.jsx

@@ -83,6 +83,7 @@ export function ManageList({ userId, list }) {
 					name: '',
 					frequency: '',
 				});
+				window.location.href = '/list';
 			})
 			.catch((error) => {
 				window.alert(`${formData.name} failed to add to your list.`);