refactor: scrolling back up to top of listpage view when at bottom of…

… listpage

src/components/forms/AddItemForm.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import { ChangeEvent, FormEvent, useState } from "react";
 import { addItem, ListItem } from "../../api";
 import { validateItemName } from "../../utils";
@@ -96,13 +97,6 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 		}
 	};
 
-	const navigateToListPage = () => {
-		if (listPath) {
-			const listName = listPath.split("/").pop();
-			navigate(`/list/${listName}`);
-		}
-	};
-
 	return (
 		<section className="custom-borders d-flex flex-column align-items-center">
 			<Form onSubmit={(e) => handleSubmit(e, listPath)}>
@@ -188,7 +182,6 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 			<Button type="submit" aria-label="Add item to shopping list">
 				Submit Item
 			</Button>
-			<Button onClick={navigateToListPage}>{"View List"}</Button>
 		</section>
 	);
 }

src/views/authenticated/List.tsx

@@ -77,6 +77,15 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 		}
 	};
 
+	const viewListRef = useRef<HTMLElement | null>(null);
+
+	// Function to handle scrolling to the Add-ShareList section
+	const scrollToViewList = () => {
+		if (viewListRef.current) {
+			viewListRef.current.scrollIntoView({ behavior: "smooth" });
+		}
+	};
+
 	// Main content when list is not empty
 	return (
 		<Container className="ListPageContainer">
@@ -102,7 +111,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 					</Button>
 				</section>
 
-				<section>
+				<section ref={viewListRef}>
 					{filteredListItems.map((item) => (
 						<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
 					))}
@@ -120,6 +129,8 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 					<ShareListForm listPath={listPath} />
 				</div>
 			</section>
+
+			<Button onClick={scrollToViewList}>{"View List"}</Button>
 		</Container>
 	);
 }