Merge pull request #57 from the-collab-lab/revert-44-ma/view-list-name

Revert "Issue #43 Users should be able to view the list name"
the-collab-lab · Oct 3, 2024 · cfb98ff · cfb98ff
2 parents 36baf23 + 384722e
commit cfb98ff
Show file tree

Hide file tree

Showing 13 changed files with 12 additions and 245 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -70,10 +70,6 @@ export function App() {
 							path="/list"
 							element={<List data={data} listPath={listPath} />}
 						/>
-						<Route
-							path="/list/:listName"
-							element={<List data={data} listPath={listPath} />}
-						/>
 						<Route
 							path="/manage-list"
 							element={<ManageList listPath={listPath} data={data || []} />}

diff --git a/src/components/AuthenticatedNavBar 2.css b/src/components/AuthenticatedNavBar 2.css
diff --git a/src/components/AuthenticatedNavBar.tsx b/src/components/AuthenticatedNavBar.tsx
@@ -12,7 +12,9 @@ export function AuthenticatedNavBar() {
 				<NavLink to="/" className="Nav__link" aria-label="Home">
 					Home
 				</NavLink>
-
+				<NavLink to="/list" className="Nav__link" aria-label="List">
+					List
+				</NavLink>
 				<NavLink
 					to="/manage-list"
 					className="Nav__link"

diff --git a/src/components/CreateList.tsx b/src/components/CreateList.tsx
@@ -32,8 +32,7 @@ export function CreateList({ user, setListPath }: Props) {
 			toast.success("Success: Your New List is Created!");
 			// Delay for toast notification before redirecting
 			setTimeout(() => {
-				const listName = path.split("/").pop();
-				navigate(`/list/${listName}`);
+				navigate("/list");
 			}, 1500); // 1.5 seconds delay
 		} catch (error) {
 			console.error("Error creating list:", error);

diff --git a/src/components/ListItem 2.css b/src/components/ListItem 2.css
diff --git a/src/components/SingleList 2.css b/src/components/SingleList 2.css
diff --git a/src/components/SingleList.tsx b/src/components/SingleList.tsx
@@ -1,17 +1,14 @@
-
-import "./SingleList.css";
+import * as api from "../api/firebase";
 import Button from "react-bootstrap/Button";
 import "./SingleList.scss";
-import { useNavigate } from "react-router-dom";
-
-export function SingleList({ name }: { name: string }) {
-	const navigate = useNavigate();
 
+interface Props extends Pick<api.List, "name" | "path"> {
+	setListPath: (path: string) => void;
+}
 
+export function SingleList({ name, path, setListPath }: Props) {
 	function handleClick() {
-		setTimeout(() => {
-			navigate(`/list/${name}`);
-		}, 200);
+		setListPath(path);
 	}
 
 	return (

diff --git a/src/components/forms/AddItemForm.tsx b/src/components/forms/AddItemForm.tsx
@@ -87,10 +87,7 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 		}
 	};
 	const navigateToListPage = () => {
-		if (listPath) {
-			const listName = listPath.split("/").pop();
-			navigate(`/list/${listName}`);
-		}
+		navigate("/list");
 	};
 
 	return (

diff --git a/src/index 2.css b/src/index 2.css
diff --git a/src/views/Home 2.css b/src/views/Home 2.css
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
@@ -1,8 +1,4 @@
 import React from "react";
-import "./Home.css";
-import { SingleList, CreateList } from "../components";
-import { List, User } from "../api/firebase";
-
 import "./Home.scss";
 import { List, User } from "../api";
 import { AuthenticatedHome, UnauthenticatedHome } from "../views";
@@ -16,21 +12,6 @@ interface Props {
 export function Home({ data, setListPath, user }: Props) {
 	return (
 		<>
-
-			<div className="Home">
-				<p>
-					Hello from the home (<code>/</code>) page!
-				</p>
-				{user && (
-					<ul>
-						{data.map((list, index) => (
-							<SingleList key={index} name={list.name} />
-						))}
-
-						<CreateList user={user} setListPath={setListPath} />
-					</ul>
-				)}
-			</div>
 			{user ? (
 				<AuthenticatedHome data={data} setListPath={setListPath} user={user} />
 			) : (

diff --git a/src/views/Layout 2.css b/src/views/Layout 2.css
diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx
@@ -1,8 +1,8 @@
-import { useParams, useNavigate } from "react-router-dom";
 import { useState, useMemo } from "react";
 import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
 import { ListItem, comparePurchaseUrgency } from "../../api";
+import { useNavigate } from "react-router-dom";
 import Button from "react-bootstrap/Button";
 
 interface Props {
@@ -12,7 +12,6 @@ interface Props {
 
 export function List({ data: unfilteredListItems, listPath }: Props) {
 	const navigate = useNavigate();
-	const { listName } = useParams<{ listName: string }>();
 	const [searchTerm, setSearchTerm] = useState<string>("");
 
 	const filteredListItems = useMemo(() => {
@@ -39,9 +38,6 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	if (unfilteredListItems.length === 0) {
 		return (
 			<>
-
-				<h1>{listName}</h1>
-
 				<Header />
 				<section>
 					<h3>
@@ -63,9 +59,6 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	// Main content when list is not empty
 	return (
 		<>
-
-			<h1>{listName}</h1>
-
 			<Header />
 
 			<section className="sticky-top bg-dark">
@@ -83,7 +76,6 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 					{"Add items"}
 				</Button>
 			</section>
-
 			<section>
 				{filteredListItems.map((item) => (
 					<ListItemCheckBox key={item.id} item={item} listPath={listPath} />