Merge branch 'main' into bb/bootstrap-integration

CONTRIBUTORS.md

@@ -17,6 +17,7 @@ Add yourself as a contributor to this project as a Markdown link that links your
 ## Mentors
 
 - [Alex D'Antonio](https://github.com/alex-andria) 👽
+- [Tanner Gill](https://github.com/tannaurus) 🎈
 
 ## Code of Conduct Contacts
 

src/components/ListItem.tsx

@@ -8,7 +8,7 @@ import Form from "react-bootstrap/Form";
 
 interface Props {
 	item: ListItem;
-	listPath: string | null;
+	listPath: string;
 }
 interface None {
 	kind: "none";
@@ -68,11 +68,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!`,

src/components/forms/AddItemForm.tsx

@@ -8,7 +8,7 @@ import Form from "react-bootstrap/Form";
 import { useNavigate } from "react-router-dom";
 
 interface Props {
-	listPath: string | null;
+	listPath: string;
 	data: ListItem[];
 }
 

src/components/forms/ShareListForm.tsx

@@ -8,7 +8,7 @@ import { InputGroup } from "react-bootstrap";
 import toast from "react-hot-toast";
 
 interface Props {
-	listPath: string | null;
+	listPath: string;
 }
 
 const ShareListForm = ({ listPath }: Props) => {
@@ -22,14 +22,10 @@ const ShareListForm = ({ listPath }: Props) => {
 
 	const handleInvite = async (
 		e: FormEvent<HTMLFormElement>,
-		listPath: string | null,
+		listPath: string,
 	) => {
 		e.preventDefault();
 
-		if (!listPath) {
-			return;
-		}
-
 		try {
 			await toast.promise(shareList(listPath, currentUser, emailName), {
 				loading: "sharing list with existing user",

src/utils/validateTrimmedString.ts

@@ -5,21 +5,21 @@ export function validateItemName(
 	input: string,
 	existingItems: ListItem[],
 ): string | null {
-	const trimmedInput = input.trim(); //removes leading and trailing whitespaces
+	const trimmedInput = input.trim(); // removes leading and trailing white spaces
 
 	// Condition 1: Check if the input is empty
 	if (trimmedInput.length === 0) {
 		return "Item cannot be empty";
 	}
 
-	//Remove punctuation marks and normalize input
+	// Remove punctuation marks and normalize input
 	const punctuationRegex = /[^\p{L}]/gu;
 
 	const normalizedInputName = trimmedInput
 		.replace(punctuationRegex, "")
 		.toLowerCase();
 
-	//Create a list of  normalized existing item names
+	// Create a list of  normalized existing item names
 	const normalizedExistingItemNames = existingItems.map((existingItem) => {
 		return existingItem.name.replace(punctuationRegex, "").toLowerCase();
 	});
@@ -31,7 +31,7 @@ export function validateItemName(
 		);
 	};
 
-	//return error if the item already exists
+	// Return error if the item already exists
 	if (isDuplicateItem(normalizedInputName)) {
 		return ` ${normalizedInputName} already exists in the list`;
 	}

src/views/authenticated/List.tsx

@@ -22,15 +22,24 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 			.sort(comparePurchaseUrgency);
 	}, [searchTerm, unfilteredListItems]);
 
+	const Header = () => {
+		return (
+			<p>
+				Hello from the <code>/list</code> page!
+			</p>
+		);
+	};
+
+	if (!listPath) {
+		return <Header />;
+	}
+
 	// Early return if the list is empty
 	if (unfilteredListItems.length === 0) {
 		return (
 			<>
-				<p>
-					Hello from the <code>/list</code> page!
-				</p>
+				<Header />
 				<section>
-					<h2>Your list is ready!</h2>
 					<h3>
 						You haven’t added any items yet.
 						<br />
@@ -50,9 +59,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	// Main content when list is not empty
 	return (
 		<>
-			<p>
-				Hello from the <code>/list</code> page!
-			</p>
+			<Header />
 
 			<section className="sticky-top bg-dark">
 				{unfilteredListItems.length > 0 && (

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>