feat: Refactor list view components by adding prompts to the differen…

…t forms. Conditionally render buttons to go to and from the "/list" and the "/manage-list" views. Add navigation functionality with useNavigate hook.

Co-authored-by: Falak  <[email protected]>

src/views/authenticated/List.tsx

@@ -2,12 +2,15 @@ import { useState, useMemo } from "react";
 import { ListItem as ListItemComponent } from "../../components/ListItem";
 import { FilterListInput as FilterListComponent } from "../../components/FilterListInput";
 import { ListItem } from "../../api";
+import { useNavigate } from "react-router-dom";
 
 interface Props {
 	data: ListItem[];
 }
 
 export function List({ data: unfilteredListItems }: Props) {
+	const navigate = useNavigate();
+
 	const [searchTerm, setSearchTerm] = useState<string>("");
 
 	const filteredListItems = useMemo(() => {
@@ -16,17 +19,47 @@ export function List({ data: unfilteredListItems }: Props) {
 		);
 	}, [searchTerm, unfilteredListItems]);
 
+	const handleAddItemsClick = () => {
+		navigate("/manage-list");
+	};
+
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
 
+			{unfilteredListItems.length === 0 && (
+				<div>
+					<h2>Your list is ready!</h2>
+					<h3>
+						It looks like you haven’t added any items yet.
+						<br />
+						Let’s get started by adding your first item.
+					</h3>
+					<button
+						onClick={handleAddItemsClick}
+						aria-label="Navigate to add items to your list"
+					>
+						{"Get started!"}
+					</button>
+				</div>
+			)}
+
 			{unfilteredListItems.length > 0 && (
-				<FilterListComponent
-					searchTerm={searchTerm}
-					setSearchTerm={setSearchTerm}
-				/>
+				<div>
+					<FilterListComponent
+						searchTerm={searchTerm}
+						setSearchTerm={setSearchTerm}
+					/>
+					<h3>Want to add more items to your list?</h3>
+					<button
+						onClick={handleAddItemsClick}
+						aria-label="Navigate to add more items to your list"
+					>
+						{"Add items"}
+					</button>
+				</div>
 			)}
 
 			<ul>

src/views/authenticated/ManageList.tsx

@@ -3,6 +3,7 @@ import { addItem } from "../../api";
 import { validateTrimmedString } from "../../utils";
 import toast from "react-hot-toast";
 
+import { useNavigate } from "react-router-dom";
 import ShareListForm from "../../components/forms/ShareListForm";
 
 interface Props {
@@ -22,6 +23,8 @@ const purchaseTimelines = {
 };
 
 export function ManageList({ listPath }: Props) {
+	const navigate = useNavigate();
+
 	const [itemName, setItemName] = useState("");
 	const [itemNextPurchaseTimeline, setItemNextPurchaseTimeline] = useState(
 		PurchaseTime.soon,
@@ -78,6 +81,10 @@ export function ManageList({ listPath }: Props) {
 		}
 	};
 
+	const navigateToListPage = () => {
+		navigate("/list");
+	};
+
 	return (
 		<div>
 			<p>
@@ -86,6 +93,7 @@ export function ManageList({ listPath }: Props) {
 			{listPath && (
 				<>
 					<form onSubmit={(e) => handleSubmit(e, listPath)}>
+						<h3>First, add your item!</h3>
 						<label htmlFor="item-name">
 							Item:
 							<input
@@ -100,6 +108,7 @@ export function ManageList({ listPath }: Props) {
 							/>
 						</label>
 						<br />
+						<h3>Next, pick when you plan on buying this item again!</h3>
 						<fieldset>
 							<legend>When to buy:</legend>
 							<label htmlFor={PurchaseTime.soon}>
@@ -154,6 +163,8 @@ export function ManageList({ listPath }: Props) {
 							Submit Item
 						</button>
 					</form>
+					<h4>Let&apos;s look at your list!</h4>
+					<button onClick={navigateToListPage}>{"Let's go!"}</button>
 				</>
 			)}
 			<ShareListForm listPath={listPath} />