Merge pull request #24 from the-collab-lab/el-tc-empty-list-prompt

Display prompts to direct user flow on sign in
the-collab-lab · Sep 8, 2024 · e787557 · e787557
2 parents 2d3b1eb + 55abb1f
commit e787557
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 42 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -55,7 +55,7 @@ export function App() {
 							/>
 						}
 					/>
-					<Route path="/list" element={<List data={data} />} />
+					<Route path="/list" element={<List data={data} lists={lists} />} />
 					<Route
 						path="/manage-list"
 						element={<ManageList listPath={listPath} userId={userId} />}

diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -29,22 +29,32 @@ export function Home({ data, setListPath, userId, userEmail }) {
 			setMessage('Failed to create list. Please try again!');
 		}
 	};
+	console.log(data.length);
 
 	return (
 		<div className="Home">
 			<p>
 				Hello from the home (<code>/</code>) page!
 			</p>
-			<ul>
-				{data.map((list, id) => (
-					<SingleList
-						key={id}
-						name={list.name}
-						path={list.path}
-						setListPath={setListPath}
-					/>
-				))}
-			</ul>
+			{data.length === 0 && (
+				<p>
+					{' '}
+					It seems you don&apos;t have any lists yet, Please create a list using
+					the form below
+				</p>
+			)}
+			{data.length > 0 && (
+				<ul>
+					{data.map((list, id) => (
+						<SingleList
+							key={id}
+							name={list.name}
+							path={list.path}
+							setListPath={setListPath}
+						/>
+					))}
+				</ul>
+			)}
 
 			<form onSubmit={handleCreateListButton}>
 				<label htmlFor="listName">List Name:</label>

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -1,7 +1,8 @@
 import { ListItem } from '../components';
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
-export function List({ data }) {
+export function List({ data, lists }) {
 	const [searchItem, setSearchItem] = useState('');
 
 	const handleSearch = (e) => {
@@ -22,36 +23,57 @@ export function List({ data }) {
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
-			<form onSubmit={handleSearch}>
-				<div>
-					<label htmlFor="search-item-in-list"> Search items:</label>
-					<input
-						onChange={handleSearch}
-						type="search"
-						id="search-item-in-list"
-						value={searchItem}
-						placeholder="Search item..."
-					/>
-					{searchItem && (
-						<button type="button" onClick={clearSearch}>
-							x
-						</button>
-					)}
-					{searchItem && (
-						<ul>
-							{filterItems.map((item) => (
-								<ListItem key={item.id} name={item.name} />
-							))}
-						</ul>
-					)}
-				</div>
-			</form>
-
-			<ul>
-				{data.map((item) => (
-					<ListItem key={item.id} name={item.name} />
-				))}
-			</ul>
+
+			{lists.length === 0 && (
+				<p>
+					It looks like you don&apos;t have any shopping lists yet. Head to the{' '}
+					<Link to="/">home page</Link> to create your first list and start
+					organizing your shopping!
+				</p>
+			)}
+
+			{lists.length > 0 && data.length === 0 && (
+				<p>
+					Your list is currently empty. To add items, visit{' '}
+					<Link to="/manage-list">manage list</Link> and start building your
+					shopping list!
+				</p>
+			)}
+
+			{lists.length > 0 && data.length > 0 && (
+				<>
+					<form onSubmit={handleSearch}>
+						<div>
+							<label htmlFor="search-item-in-list"> Search items:</label>
+							<input
+								onChange={handleSearch}
+								type="search"
+								id="search-item-in-list"
+								value={searchItem}
+								placeholder="Search item..."
+							/>
+							{searchItem && (
+								<button type="button" onClick={clearSearch}>
+									x
+								</button>
+							)}
+							{searchItem && (
+								<ul>
+									{filterItems.map((item) => (
+										<ListItem key={item.id} name={item.name} />
+									))}
+								</ul>
+							)}
+						</div>
+					</form>
+
+					<ul>
+						{data.map((item) => (
+							<ListItem key={item.id} name={item.name} />
+						))}
+					</ul>
+				</>
+			)}
 		</>
 	);
 }