Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display prompts to direct user flow on sign in #24

Merged
merged 4 commits into from
Sep 8, 2024
Merged

Display prompts to direct user flow on sign in #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7d9432b
add conditional for home view prompt
tataw-cl Sep 3, 2024
bbb2918
add prompt messages to List view
eva-lng Sep 5, 2024
28d6bdb
update conditional statements for no list
tataw-cl Sep 5, 2024
55abb1f
update conditionals for prompt messages in List view
eva-lng Sep 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />}
Expand Down
30 changes: 20 additions & 10 deletions src/views/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
84 changes: 53 additions & 31 deletions src/views/List.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -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>
</>
)}
</>
);
}
Loading