Merge pull request #20 from the-collab-lab/fz-rc-read-lists-items

Issue #2: Render the List and list items a user has access to

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.

src/views/Home.jsx

@@ -1,16 +1,23 @@
 import './Home.css';
+import { SingleList } from '../components';
 
 export function Home({ data, setListPath }) {
+	const hasList = 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.
-				 */}
+				{hasList &&
+					data.map((list, index) => (
+						<SingleList
+							key={index}
+							name={list.name}
+							path={list.path}
+							setListPath={setListPath}
+						/>
+					))}
 			</ul>
 		</div>
 	);

src/views/List.jsx

@@ -1,17 +1,15 @@
 import { ListItem } from '../components';
 
 export function List({ data }) {
+	const hasItem = 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.
-				 */}
+				{hasItem &&
+					data.map((item) => <ListItem key={item.id} name={item.name} />)}
 			</ul>
 		</>
 	);