adding additem, sharelist into list page view

the-collab-lab · Oct 17, 2024 · f76004b · f76004b
1 parent ead409b
commit f76004b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 27 deletions.
diff --git a/src/views/Layout.scss b/src/views/Layout.scss
@@ -32,5 +32,6 @@
 	margin: 0 auto;
 	padding-block: 0;
 	padding-block-end: 6.26rem;
-	width: min(72ch, 100%);
+	//width: min(72ch, 100%);
+	width: 100%;
 }
diff --git a/src/views/authenticated/List.scss b/src/views/authenticated/List.scss
@@ -13,7 +13,6 @@
 	text-align: center;
 }
 
-.ListContainer {
-	max-width: 100%;
-	width: fit-content;
+.ListPageContainer {
+	width: 100%;
 }
diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx
@@ -5,7 +5,9 @@ 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 Button from "react-bootstrap/Button";
+import ShareListForm from "../../components/forms/ShareListForm";
 
 interface Props {
 	data: ListItem[];
@@ -63,34 +65,51 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 
 	// Main content when list is not empty
 	return (
-		<>
+		<Container className="ListPageContainer">
 			<header>
 				<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
-				<Header />
 			</header>
+			<div className="ListContainer d-flex">
+				{/* This is the div for the filter and adding items. */}
+				{/* Width should be 100% */}
+				<div className="ListItemSection">
+					<section className="d-flex sticky-top flex-nowrap align-items-center justify-content-center">
+						{unfilteredListItems.length > 0 && (
+							<FilterListInput
+								searchTerm={searchTerm}
+								setSearchTerm={setSearchTerm}
+							/>
+						)}
 
-			<section className="d-flex sticky-top flex-nowrap align-items-center justify-content-center">
-				{unfilteredListItems.length > 0 && (
-					<FilterListInput
-						searchTerm={searchTerm}
-						setSearchTerm={setSearchTerm}
-					/>
-				)}
+						<Button
+							className="ms-2"
+							onClick={() => navigate("/manage-list")}
+							aria-label="Navigate to add more items to your list"
+						>
+							{"Add items"}
+						</Button>
+					</section>
 
-				<Button
-					className="ms-2"
-					onClick={() => navigate("/manage-list")}
-					aria-label="Navigate to add more items to your list"
-				>
-					{"Add items"}
-				</Button>
-			</section>
+					<section className="ListItemContainer">
+						{filteredListItems.map((item) => (
+							<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
+						))}
+					</section>
+				</div>
 
-			<section className="ListItemContainer">
-				{filteredListItems.map((item) => (
-					<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
-				))}
-			</section>
-		</>
+				{/* Width of this section should be 50%. */}
+				<section className="ItemFunctions">
+					<div>
+						<Header />
+					</div>
+					<div>
+						<AddItemForm listPath={listPath} data={unfilteredListItems || []} />
+					</div>
+					<div>
+						<ShareListForm listPath={listPath} />
+					</div>
+				</section>
+			</div>
+		</Container>
 	);
 }