refactor: listpage to excluse additem form and refactor sharelist form to appear in form of modal to reduce extra space

Author: eternalmaha

src/components/ListItem.scss

@@ -19,9 +19,7 @@
 	max-width: 50%;
 	width: 80%;
 	border-radius: 4px;
-}
 
-.UrgencyStatus {
 	// Default styles for urgency status
 	font-weight: bold;
 

src/components/forms/AddItemForm.tsx

@@ -1,4 +1,5 @@
 import { ChangeEvent, FormEvent, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { addItem, ListItem } from "../../api";
 import { validateItemName } from "../../utils";
 import toast from "react-hot-toast";
@@ -31,6 +32,9 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 
 	const [addedQuantity, setAddedQuantity] = useState(1);
 
+	const navigate = useNavigate();
+	const listName = listPath.split("/").pop();
+
 	const handleItemNameTextChange = (e: ChangeEvent<HTMLInputElement>) => {
 		setItemName(e.target.value);
 	};
@@ -87,18 +91,20 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 					},
 				},
 			);
+			navigate(`/list/${listName}`);
 			console.log("Quantity added from Add Item form:", addedQuantity);
 		} catch (error) {
 			console.error("Failed to add item:", error);
 		}
 	};
 
 	return (
-		<section className="custom-borders d-flex flex-column align-items-center ">
+		<section className="d-flex flex-column align-items-center ">
 			<Form onSubmit={(e) => handleSubmit(e, listPath)}>
-				<h3 className="text-center">Add Item</h3>
+				<h1 className="text-center mt-5">New Item</h1>
 
 				<Form.Label htmlFor="item-name">
+					<h4>Item Name:</h4>
 					<Form.Control
 						id="item-name"
 						type="text"
@@ -111,6 +117,7 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 					/>
 				</Form.Label>
 				<label htmlFor="item-quantity">
+					<h4>Item Quantity</h4>
 					<Form.Control
 						id="item-quantity"
 						type="number"

src/components/forms/ShareListForm.tsx

@@ -5,6 +5,7 @@ import { getUser } from "../ProtectedRoute";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import { InputGroup } from "react-bootstrap";
+import { FaRegShareSquare } from "react-icons/fa";
 import toast from "react-hot-toast";
 
 interface Props {
@@ -44,7 +45,7 @@ const ShareListForm = ({ listPath }: Props) => {
 
 	return (
 		<Form
-			className="custom-borders d-flex flex-column align-items-center mt-3"
+			className="d-flex flex-column align-items-center mt-3"
 			onSubmit={(e) => handleInvite(e, listPath)}
 		>
 			<Form.Label className="h3 text-center " htmlFor="recipient-email">
@@ -63,7 +64,8 @@ const ShareListForm = ({ listPath }: Props) => {
 					aria-required
 				/>
 				<Button type="submit" aria-label="submits form to share shopping list">
-					Share List
+					<FaRegShareSquare />
+					<span>Share</span>
 				</Button>
 			</InputGroup>
 		</Form>

src/views/authenticated/List.scss

@@ -14,10 +14,12 @@
 	display: flex;
 	flex-wrap: wrap;
 	box-sizing: border-box;
+	flex-direction: column;
 }
 
-.filter-list {
+.list-functions {
 	background-color: rgb(241, 230, 204);
+	z-index: 1020;
 }
 
 .Add-ShareList {

src/views/authenticated/List.tsx

@@ -1,14 +1,13 @@
 import "./List.scss";
 import { useParams, useNavigate } from "react-router-dom";
-import { useRef } from "react";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
 import { ListItem, comparePurchaseUrgency } from "../../api";
-import { Container } from "react-bootstrap";
-import { AddItemForm } from "../../components/forms/AddItemForm";
+import { Container, Modal } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 import ShareListForm from "../../components/forms/ShareListForm";
+import { FaRegShareSquare } from "react-icons/fa";
 
 interface Props {
 	data: ListItem[];
@@ -19,6 +18,7 @@ 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
@@ -64,15 +64,6 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 		);
 	}
 
-	const addShareListRef = useRef<HTMLElement | null>(null);
-
-	// Function to handle scrolling to the Add-ShareList section
-	const scrollToAddShareItem = () => {
-		if (addShareListRef.current) {
-			addShareListRef.current.scrollIntoView({ behavior: "smooth" });
-		}
-	};
-
 	const viewListRef = useRef<HTMLElement | null>(null);
 
 	// Function to handle scrolling to the Add-ShareList section
@@ -84,27 +75,36 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 
 	// Main content when list is not empty
 	return (
-		<Container className="ListPageContainer">
+		<Container className="ListPageContainer ">
 			<div className="ListItemSection">
 				<header>
 					<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
 				</header>
 
-				<section className="filter-list d-flex sticky-top flex-nowrap align-items-center justify-content-center">
+				<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>
 					{unfilteredListItems.length > 0 && (
 						<FilterListInput
 							searchTerm={searchTerm}
 							setSearchTerm={setSearchTerm}
 						/>
 					)}
-
-					<Button
-						className="ms-2 d-md-none"
-						onClick={scrollToAddShareItem}
-						aria-label="Navigate to add more items to your list"
-					>
-						<span className="text-nowrap">Add items</span>
-					</Button>
 				</section>
 
 				<section ref={viewListRef}>
@@ -114,20 +114,23 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 				</section>
 			</div>
 
-			<section
-				ref={addShareListRef}
-				className="Add-ShareList d-flex flex-column justify-content-start align-items-center "
-			>
-				<div className="Add-ItemForm ">
-					<AddItemForm listPath={listPath} data={unfilteredListItems || []} />
-				</div>
-				<div className="Share-ListForm ">
+			<Modal show={showShareModal} onHide={() => setShowShareModal(false)}>
+				<Modal.Header closeButton>
+					<Modal.Title>Share Your List</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
 					<ShareListForm listPath={listPath} />
-				</div>
-				<Button className="d-md-none mt-3" onClick={scrollToViewList}>
-					{"View List"}
-				</Button>
-			</section>
+				</Modal.Body>
+				<Modal.Footer>
+					<Button variant="secondary" onClick={() => setShowShareModal(false)}>
+						Close
+					</Button>
+				</Modal.Footer>
+			</Modal>
+
+			<Button className="d-md-none mt-3" onClick={scrollToViewList}>
+				{"View List"}
+			</Button>
 		</Container>
 	);
 }

src/views/authenticated/ManageList.tsx

@@ -29,7 +29,6 @@ export function ManageList({ listPath, data }: Props) {
 	return (
 		<div>
 			<AddItemForm listPath={listPath} data={data || []} />
-			<ShareListForm listPath={listPath} />
 		</div>
 	);
 }