List path is no longer optional where applicable

the-collab-lab · Sep 22, 2024 · f9e8428 · f9e8428
1 parent 855a7c2
commit f9e8428
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 88 deletions.
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
@@ -6,7 +6,7 @@ import { moreThan24HoursPassed } from "../utils";
 
 interface Props {
 	item: ListItem;
-	listPath: string | null;
+	listPath: string;
 }
 interface None {
 	kind: "none";
@@ -35,11 +35,6 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 		// Temporarily store the updated check state
 		setUpdatedCheckState({ kind: "set", value: newCheckedState });
 
-		if (!listPath) {
-			toast.error("Error: listPath is missing or invalid.");
-			return;
-		}
-
 		try {
 			await toast.promise(updateItem(listPath, item), {
 				loading: `Marking ${item.name} as purchased!`,

diff --git a/src/components/forms/AddItemForm.tsx b/src/components/forms/AddItemForm.tsx
@@ -6,7 +6,7 @@ import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 
 interface Props {
-	listPath: string | null;
+	listPath: string;
 	data: ListItem[];
 }
 
@@ -90,82 +90,73 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 
 	return (
 		<section>
-			{listPath && (
-				<>
-					<form onSubmit={(e) => handleSubmit(e, listPath)}>
-						<h3>First, add your item!</h3>
-						<label htmlFor="item-name">
-							Item:
-							<input
-								id="item-name"
-								type="text"
-								name="item"
-								value={itemName}
-								onChange={handleItemNameTextChange}
-								aria-label="Enter the item name"
-								aria-required
-							/>
-						</label>
-						<br />
-						<h3>Next, pick when you plan on buying this item again!</h3>
-						<fieldset>
-							<legend>When to buy:</legend>
-							<label htmlFor={PurchaseTime.soon}>
-								<input
-									type="radio"
-									id={PurchaseTime.soon}
-									name="when-to-buy"
-									value={PurchaseTime.soon}
-									required
-									onChange={() => handleNextPurchaseChange(PurchaseTime.soon)}
-									checked={itemNextPurchaseTimeline === PurchaseTime.soon}
-									aria-label={`Set buy to soon, within ${purchaseTimelines[PurchaseTime.soon]} days`}
-								/>
-								Soon -- Within {purchaseTimelines[PurchaseTime.soon]} days!
-							</label>
-							<br />
-							<label htmlFor={PurchaseTime.kindOfSoon}>
-								<input
-									type="radio"
-									id={PurchaseTime.kindOfSoon}
-									name="when-to-buy"
-									value={PurchaseTime.kindOfSoon}
-									required
-									onChange={() =>
-										handleNextPurchaseChange(PurchaseTime.kindOfSoon)
-									}
-									checked={itemNextPurchaseTimeline === PurchaseTime.kindOfSoon}
-									aria-label={`Set buy to kind of soon, within ${purchaseTimelines[PurchaseTime.kindOfSoon]} days`}
-								/>
-								Kind of soon -- Within{" "}
-								{purchaseTimelines[PurchaseTime.kindOfSoon]} days!
-							</label>
-							<br />
-							<label htmlFor={PurchaseTime.notSoon}>
-								<input
-									type="radio"
-									id={PurchaseTime.notSoon}
-									name="when-to-buy"
-									value={PurchaseTime.notSoon}
-									required
-									onChange={() =>
-										handleNextPurchaseChange(PurchaseTime.notSoon)
-									}
-									checked={itemNextPurchaseTimeline === PurchaseTime.notSoon}
-									aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
-								/>
-								Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]}{" "}
-								days!
-							</label>
-						</fieldset>
-						<button type="submit" aria-label="Add item to shopping list">
-							Submit Item
-						</button>
-					</form>
-					<h4>Let&apos;s go look at your list!</h4>
-					<button onClick={navigateToListPage}>{"View List"}</button>
-				</>
-			)}
+			<form onSubmit={(e) => handleSubmit(e, listPath)}>
+				<h3>First, add your item!</h3>
+				<label htmlFor="item-name">
+					Item:
+					<input
+						id="item-name"
+						type="text"
+						name="item"
+						value={itemName}
+						onChange={handleItemNameTextChange}
+						aria-label="Enter the item name"
+						aria-required
+					/>
+				</label>
+				<br />
+				<h3>Next, pick when you plan on buying this item again!</h3>
+				<fieldset>
+					<legend>When to buy:</legend>
+					<label htmlFor={PurchaseTime.soon}>
+						<input
+							type="radio"
+							id={PurchaseTime.soon}
+							name="when-to-buy"
+							value={PurchaseTime.soon}
+							required
+							onChange={() => handleNextPurchaseChange(PurchaseTime.soon)}
+							checked={itemNextPurchaseTimeline === PurchaseTime.soon}
+							aria-label={`Set buy to soon, within ${purchaseTimelines[PurchaseTime.soon]} days`}
+						/>
+						Soon -- Within {purchaseTimelines[PurchaseTime.soon]} days!
+					</label>
+					<br />
+					<label htmlFor={PurchaseTime.kindOfSoon}>
+						<input
+							type="radio"
+							id={PurchaseTime.kindOfSoon}
+							name="when-to-buy"
+							value={PurchaseTime.kindOfSoon}
+							required
+							onChange={() => handleNextPurchaseChange(PurchaseTime.kindOfSoon)}
+							checked={itemNextPurchaseTimeline === PurchaseTime.kindOfSoon}
+							aria-label={`Set buy to kind of soon, within ${purchaseTimelines[PurchaseTime.kindOfSoon]} days`}
+						/>
+						Kind of soon -- Within {purchaseTimelines[PurchaseTime.kindOfSoon]}{" "}
+						days!
+					</label>
+					<br />
+					<label htmlFor={PurchaseTime.notSoon}>
+						<input
+							type="radio"
+							id={PurchaseTime.notSoon}
+							name="when-to-buy"
+							value={PurchaseTime.notSoon}
+							required
+							onChange={() => handleNextPurchaseChange(PurchaseTime.notSoon)}
+							checked={itemNextPurchaseTimeline === PurchaseTime.notSoon}
+							aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
+						/>
+						Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
+					</label>
+				</fieldset>
+				<button type="submit" aria-label="Add item to shopping list">
+					Submit Item
+				</button>
+			</form>
+			<h4>Let&apos;s go look at your list!</h4>
+			<button onClick={navigateToListPage}>{"View List"}</button>
 		</section>
 	);
 }
diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx
@@ -44,12 +44,22 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 		);
 	}
 
-	// Main content when list is not empty
-	return (
-		<>
+	const Header = () => {
+		return (
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
+		);
+	};
+
+	if (!listPath) {
+		return <Header />;
+	}
+
+	// Main content when list is not empty
+	return (
+		<>
+			<Header />
 
 			<div>
 				<section>

diff --git a/src/views/authenticated/ManageList.tsx b/src/views/authenticated/ManageList.tsx
@@ -8,11 +8,21 @@ interface Props {
 }
 
 export function ManageList({ listPath, data }: Props) {
-	return (
-		<div>
+	const Header = () => {
+		return (
 			<p>
 				Hello from the <code>/manage-list</code> page!
 			</p>
+		);
+	};
+
+	if (!listPath) {
+		return <Header />;
+	}
+
+	return (
+		<div>
+			<Header />
 			<AddItemForm listPath={listPath} data={data || []} />
 			<ShareListForm listPath={listPath} />
 		</div>