refactor: disregard additem navigation logic

Author: eternalmaha

src/components/forms/AddItemForm.scss

@@ -14,7 +14,7 @@
 	color: #001f3f; /* Optional: text color */
 	position: relative;
 	top: -40px;
-	left: 10px;
+	left: 60px;
 	background-color: rgb(241, 230, 204);
-	width: 80%;
+	width: 60%;
 }

src/components/forms/AddItemForm.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, FormEvent, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { addItem, ListItem } from "../../api";
 import { validateItemName } from "../../utils";
 import toast from "react-hot-toast";
@@ -181,7 +181,7 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 						Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
 					</Form.Label>
 					<Button type="submit" aria-label="Add item to shopping list">
-						Submit Item
+						Add Item
 					</Button>
 				</fieldset>
 			</Form>

src/components/forms/ShareListForm.scss

@@ -7,3 +7,7 @@
 	margin-top: 20px;
 	position: relative;
 }
+
+.Share-ListForm {
+	background-color: rgb(241, 230, 204);
+}

src/components/forms/ShareListForm.tsx

@@ -45,10 +45,13 @@ const ShareListForm = ({ listPath }: Props) => {
 
 	return (
 		<Form
-			className="d-flex flex-column align-items-center mt-3"
+			className="Share-ListForm d-flex flex-column align-items-center mt-3"
 			onSubmit={(e) => handleInvite(e, listPath)}
 		>
-			<Form.Label className="h3 text-center " htmlFor="recipient-email">
+			<Form.Label
+				className="h3 Share-ListForm text-center "
+				htmlFor="recipient-email"
+			>
 				Invite friends and family to view your list!
 			</Form.Label>
 			<InputGroup>

src/views/authenticated/List.tsx

@@ -4,10 +4,10 @@ import { useState, useMemo, useRef } from "react";
 import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
 import { ListItem, comparePurchaseUrgency } from "../../api";
-import { Container, Modal } from "react-bootstrap";
+import { Container } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 import ShareListForm from "../../components/forms/ShareListForm";
-import { FaRegShareSquare } from "react-icons/fa";
+import { AddItemForm } from "../../components/forms/AddItemForm";
 
 interface Props {
 	data: ListItem[];
@@ -18,7 +18,6 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	const navigate = useNavigate();
 	const [searchTerm, setSearchTerm] = useState<string>("");
 	const { listName } = useParams<{ listName: string }>();
-	const [showShareModal, setShowShareModal] = useState(false);
 
 	const filteredListItems = useMemo(() => {
 		return unfilteredListItems
@@ -81,24 +80,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 					<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
 				</header>
 
-				<section className="list-functions mt-3 d-flex flex-column sticky-top align-items-center justify-content-center">
-					<div>
-						<Button
-							className="ms-2"
-							onClick={() => navigate("/manage-list")}
-							aria-label="Navigate to add more items to your list"
-						>
-							<span className="text-nowrap">Add items</span>
-						</Button>
-						<Button
-							className="ms-2"
-							onClick={() => setShowShareModal(true)}
-							aria-label="Share your list"
-						>
-							<FaRegShareSquare />
-							<span className="text-nowrap ms-1">Share</span>
-						</Button>
-					</div>
+				<section className="list-functions mt-3 d-flex  sticky-top align-items-center justify-content-center">
 					{unfilteredListItems.length > 0 && (
 						<FilterListInput
 							searchTerm={searchTerm}
@@ -108,26 +90,18 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 				</section>
 
 				<section ref={viewListRef}>
-					{filteredListItems.map((item) => (
-						<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
-					))}
+					<section className="AddItemForm">
+						<AddItemForm listPath={listPath} data={unfilteredListItems || []} />
+					</section>
+					<section className="ListItemCheckBox">
+						{filteredListItems.map((item) => (
+							<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
+						))}
+					</section>
 				</section>
 			</div>
 
-			<Modal show={showShareModal} onHide={() => setShowShareModal(false)}>
-				<Modal.Header closeButton>
-					<Modal.Title>Share Your List</Modal.Title>
-				</Modal.Header>
-				<Modal.Body>
-					<ShareListForm listPath={listPath} />
-				</Modal.Body>
-				<Modal.Footer>
-					<Button variant="secondary" onClick={() => setShowShareModal(false)}>
-						Close
-					</Button>
-				</Modal.Footer>
-			</Modal>
-
+			<ShareListForm listPath={listPath} />
 			<Button className="d-md-none mt-3" onClick={scrollToViewList}>
 				{"View List"}
 			</Button>