Merge branch 'main' into bm-vy-mark-as-purchased

src/App.jsx

@@ -59,7 +59,7 @@ export function App() {
 					/>
 					<Route
 						path="/list/:path/:path"
-						element={<List listPath={listPath} data={data} />}
+						element={<List data={data} lists={lists} listPath={listPath} />}
 					/>
 					<Route
 						path="/manage-list"

src/api/useAuth.jsx

@@ -21,7 +21,13 @@ export const SignInButton = () => (
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => (
-	<button type="button" onClick={() => auth.signOut()}>
+	<button
+		type="button"
+		onClick={() => {
+			auth.signOut();
+			localStorage.clear();
+		}}
+	>
 		Sign Out
 	</button>
 );

src/views/List.css

@@ -0,0 +1,17 @@
+.containerAddItem {
+	display: flex;
+	flex-direction: column;
+}
+
+.addItemGif {
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	padding: 5px;
+	box-shadow: 0 0 2px 1px rgba(66, 69, 70, 0.5);
+	width: 500px;
+}
+
+#addFirstItem {
+	margin-top: 10px;
+	width: fit-content;
+}

src/views/List.jsx

@@ -1,13 +1,16 @@
 import { useState, useEffect } from 'react';
 import { ListItem } from '../components';
 import SearchList from '../components/SearchList';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { updateItem } from '../api/firebase';
 import { isMoreThanADayAgo } from '../utils';
+import './List.css';
+import addFirstItem from '../pictures/addFirstItem.png';
 
-export function List({ data, listPath }) {
+export function List({ data, lists, listPath }) {
 	const [newList, setNewList] = useState([]);
 	const { path } = useParams();
+	const navigate = useNavigate();
 
 	useEffect(() => {
 		setNewList(data);
@@ -29,21 +32,57 @@ export function List({ data, listPath }) {
 			<h2>
 				You are on the <code>{path}</code> list!
 			</h2>
-			<SearchList data={data} setNewList={setNewList} />
-			<ul>
-				{newList.map((item) => (
-					<ListItem
-						dateLastPurchased={item.dateLastPurchased}
-						isRecentlyPurchased={wasRecentlyPurchased(item)}
-						itemId={item.id}
-						key={item.id}
-						listPath={listPath}
-						name={item.name}
-						purchaseDate={item.dateLastPurchased}
-						updatePurchaseDate={updatePurchaseDate}
+			{data.length === 0 && lists.length === 1 && (
+				<div className="containerAddItem">
+					<p>Well done! You have created your very first list!</p>
+					<p>
+						You can now add some items and specify when you need to purchase
+						them. In the box for "Add item" you put the item you need to
+						purchase and then select how soon you need it on "When do I need it"
+					</p>
+					<img
+						className="addItemPNG"
+						src={addFirstItem}
+						alt="add item example"
 					/>
-				))}
-			</ul>
+
+					<button id="addFirstItem" onClick={() => navigate('/manage-list')}>
+						Start adding items!
+					</button>
+				</div>
+			)}
+			{data.length === 0 && lists.length > 1 && (
+				<div className="containerAddItem">
+					<p>Well done! You have created a new list!</p>
+					<p>
+						You can now add some items and specify when you need to purchase
+						them.
+					</p>
+
+					<button id="addFirstItem" onClick={() => navigate('/manage-list')}>
+						Start adding items!
+					</button>
+				</div>
+			)}
+			{data.length > 0 && (
+				<div>
+					<SearchList data={data} setNewList={setNewList} />
+					<ul>
+						{newList.map((item) => (
+							<ListItem
+								dateLastPurchased={item.dateLastPurchased}
+								isRecentlyPurchased={wasRecentlyPurchased(item)}
+								itemId={item.id}
+								key={item.id}
+								listPath={listPath}
+								name={item.name}
+								purchaseDate={item.dateLastPurchased}
+								updatePurchaseDate={updatePurchaseDate}
+							/>
+						))}
+					</ul>
+				</div>
+			)}
 		</>
 	);
 }

src/views/ManageList.jsx

@@ -83,13 +83,13 @@ export function ManageList({ listPath, userId, userEmail }) {
 				</label>
 				<label htmlFor="time-select">When do I need it?</label>
 				<select name="time" id="time-select">
-					<option value="soon">Soon</option>
-					<option value="soonIsh">Soon-ish</option>
-					<option value="notSoon">Not soon</option>
+					<option value="soon">Soon (within 7 days)</option>
+					<option value="soonIsh">Soon-ish (in 14 days)</option>
+					<option value="notSoon">Not soon (in 30 days)</option>
 				</select>
 				<button type="submit">Submit</button>
 			</form>
-			<hr />
+			<hr></hr>
 			<form method="post" onSubmit={sendInvite}>
 				<label htmlFor="email">
 					Share List with another user