From 7d9432b28ee320e54cf6750552cecf34ed6bb0da Mon Sep 17 00:00:00 2001
From: tataw-cl <127490325+tataw-cl@users.noreply.github.com>
Date: Tue, 3 Sep 2024 18:50:36 +0100
Subject: [PATCH 1/4] add conditional for home view prompt
---
src/views/Home.jsx | 25 +++++++++++++++----------
1 file changed, 15 insertions(+), 10 deletions(-)
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index b7cf66f..59d2d8b 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -29,22 +29,27 @@ 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> Please create a list using the form below</p>
+ ) : (
+ <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>
From bbb291873422afcf01c2fabcb5f46cfb2f21bbea Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Thu, 5 Sep 2024 16:29:29 +0200
Subject: [PATCH 2/4] add prompt messages to List view
---
src/App.jsx | 2 +-
src/views/List.jsx | 70 +++++++++++++++++++++++++++++-----------------
2 files changed, 46 insertions(+), 26 deletions(-)
diff --git a/src/App.jsx b/src/App.jsx
index 9e8046d..e800eca 100644
--- 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/List.jsx b/src/views/List.jsx
index 5e7f01c..b868a12 100644
--- 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,30 +23,49 @@ 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>
+
+ {lists.length === 0 && (
+ <p>
+ It looks like you don'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>
+ )}
+
+ {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>
+ )}
+
+ {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) => (
From 28d6bdb4093cf9c2dff5017c2ed9029ae5217a5b Mon Sep 17 00:00:00 2001
From: tataw-cl <127490325+tataw-cl@users.noreply.github.com>
Date: Thu, 5 Sep 2024 21:50:56 +0100
Subject: [PATCH 3/4] update conditional statements for no list
---
src/views/Home.jsx | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 59d2d8b..efaf427 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -36,9 +36,14 @@ export function Home({ data, setListPath, userId, userEmail }) {
<p>
Hello from the home (<code>/</code>) page!
</p>
- {data.length == 0 ? (
- <p> Please create a list using the form below</p>
- ) : (
+ {data.length === 0 && (
+ <p>
+ {' '}
+ It seems you don't have any lists yet, Please create a list using
+ the form below
+ </p>
+ )}
+ {data.length > 0 && (
<ul>
{data.map((list, id) => (
<SingleList
From 55abb1f269d75a9c25161a89e49ed0ae198fa2b9 Mon Sep 17 00:00:00 2001
From: Eva Langerova <langerova_eva@yahoo.com>
Date: Sun, 8 Sep 2024 13:52:15 +0200
Subject: [PATCH 4/4] update conditionals for prompt messages in List view
---
src/views/List.jsx | 66 ++++++++++++++++++++++++----------------------
1 file changed, 34 insertions(+), 32 deletions(-)
diff --git a/src/views/List.jsx b/src/views/List.jsx
index b868a12..e66e593 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -32,7 +32,7 @@ export function List({ data, lists }) {
</p>
)}
- {data.length === 0 && (
+ {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
@@ -40,38 +40,40 @@ export function List({ data, lists }) {
</p>
)}
- {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>
- )}
+ {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>
+ <ul>
+ {data.map((item) => (
+ <ListItem key={item.id} name={item.name} />
+ ))}
+ </ul>
+ </>
+ )}
</>
);
}