From 879fdefd7d7855454e9bbf2afbeace2f0ed62284 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Wed, 14 Aug 2024 10:33:01 -0600
Subject: [PATCH 1/3] Render name of each shopping list a user has access to

---
 src/App.jsx        |  1 +
 src/views/Home.jsx | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index bc52f1a..f5e6008 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -34,6 +34,7 @@ export function App() {
 	 * Check ./api/firestore.js for its implementation.
 	 */
 	const lists = useShoppingLists(userId, userEmail);
+
 	/**
 	 * This custom hook takes our token and fetches the data for our list.
 	 * Check ./api/firestore.js for its implementation.
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 52bee35..a0faa81 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,16 +1,24 @@
 import './Home.css';
+import { SingleList } from '../components';
 
 export function Home({ data, setListPath }) {
+	const dataPresent = data.length !== 0;
 	return (
 		<div className="Home">
 			<p>
 				Hello from the home (<code>/</code>) page!
 			</p>
 			<ul>
-				{/**
-				 * TODO: write some JavaScript that renders the `lists` array
-				 * so we can see which lists the user has access to.
-				 */}
+				{dataPresent
+					? data.map((list, index) => (
+							<SingleList
+								key={index}
+								name={list.name}
+								path={list.path}
+								setListPath={setListPath}
+							/>
+						))
+					: null}
 			</ul>
 		</div>
 	);

From 26023d4f89d489777b4d77e3f5c1296d5d1f8d45 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Wed, 14 Aug 2024 10:42:17 -0600
Subject: [PATCH 2/3] Render name of each item in a list

---
 src/views/List.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/views/List.jsx b/src/views/List.jsx
index b52303c..17dd00f 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,17 +1,16 @@
 import { ListItem } from '../components';
 
 export function List({ data }) {
+	const dataPresent = data.length !== 0;
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
 			<ul>
-				{/**
-				 * TODO: write some JavaScript that renders the `data` array
-				 * using the `ListItem` component that's imported at the top
-				 * of this file.
-				 */}
+				{dataPresent
+					? data.map((item) => <ListItem key={item.id} name={item.name} />)
+					: null}
 			</ul>
 		</>
 	);

From 136cf25a6846312cd7206497e0bd583dd386a821 Mon Sep 17 00:00:00 2001
From: Falak Zahra <falak.zahra16@gmail.com>
Date: Sun, 18 Aug 2024 15:12:37 -0600
Subject: [PATCH 3/3] Use more contextual variable names, and add inline
 logical && operator

---
 src/views/Home.jsx | 21 ++++++++++-----------
 src/views/List.jsx |  7 +++----
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index a0faa81..b86dadf 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -2,23 +2,22 @@ import './Home.css';
 import { SingleList } from '../components';
 
 export function Home({ data, setListPath }) {
-	const dataPresent = data.length !== 0;
+	const hasList = data.length !== 0;
 	return (
 		<div className="Home">
 			<p>
 				Hello from the home (<code>/</code>) page!
 			</p>
 			<ul>
-				{dataPresent
-					? data.map((list, index) => (
-							<SingleList
-								key={index}
-								name={list.name}
-								path={list.path}
-								setListPath={setListPath}
-							/>
-						))
-					: null}
+				{hasList &&
+					data.map((list, index) => (
+						<SingleList
+							key={index}
+							name={list.name}
+							path={list.path}
+							setListPath={setListPath}
+						/>
+					))}
 			</ul>
 		</div>
 	);
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 17dd00f..a755db0 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,16 +1,15 @@
 import { ListItem } from '../components';
 
 export function List({ data }) {
-	const dataPresent = data.length !== 0;
+	const hasItem = data.length !== 0;
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
 			<ul>
-				{dataPresent
-					? data.map((item) => <ListItem key={item.id} name={item.name} />)
-					: null}
+				{hasItem &&
+					data.map((item) => <ListItem key={item.id} name={item.name} />)}
 			</ul>
 		</>
 	);