Merge branch 'main' into new-feature

CODEOWNERS

@@ -0,0 +1,35 @@
+# CODEOWNERS file for TCL-75 Smart Shopping List
+#
+# What is this file?
+# This file helps automate the code review process by automatically assigning reviewers
+# to pull requests (PRs) and setting rules for PR approvals.
+#
+# How does it work?
+# 1. Automatic Reviewer Assignment:
+#    - When a PR is opened, GitHub automatically assigns the mentors listed below as reviewers.
+#
+# 2. Review Requirements (set in GitHub branch protection rules, not in this file):
+#    - Each PR needs at least 3 approvals to be merged:
+#      a) 2 approvals from peer developers
+#      b) 1 approval from a mentor (automatically assigned by this file)
+#
+# 3. Mentor Approval:
+#    - At least one of the mentors listed below MUST approve the PR before it can be merged.
+#    - This ensures experienced oversight on all code changes.
+#
+# How to request reviews:
+# 1. In GitHub:
+#    - When opening a PR, manually request reviews from 2 peer developers.
+#    - Mentors will be automatically assigned as reviewers.
+#
+# 2. In Slack:
+#    - Use the following Slack reacji to notify team members:
+#      a) :todo-tcl75-devs: - This will ping developers for a review
+#      b) :todo-tcl75-mentors: - This will ping mentors for a review
+#    - Using these reacji helps communicate review needs efficiently to the team
+#
+# Best Practice:
+# - Use both GitHub assignment and Slack notifications to ensure visibility and prompt reviews.
+#
+# Mentors for TCL-75 (automatically assigned and required for PR approval):
+* @ahsanatzapier @jendevelops @deeheber

CONTRIBUTORS.md

@@ -9,6 +9,7 @@ Add yourself as a contributor to this project as a Markdown link that links your
 - [Gabrielle Lommel](https://github.com/granolagabrielle) :seedling:
 - [Warren Chan](https://github.com/warrenchan13) 💪
 - [Dilek Baykara](https://github.com/dilekbaykara) 👀
+- [Nika Kolesnikova](https://github.com/kweeuhree) 👽
 
 ## Mentors
 

PROJECT-BRIEF.md

@@ -34,7 +34,7 @@ This document serves as your comprehensive guide to all available resources nece
 | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Weekly Sync      | - Demo issues #2 & #3 <br> - Retro <br> - Collabies will be presented with issue #4 and issue #5                                                                                                                                                                                                                                                                                  |
 | Pair Programming | Schedule a pairing session(s) with your partner early in the week to complete the development work required to meet the acceptance criteria of your Github issue.                                                                                                                                                                                                                 |
-| Optional         | Office Hours: Discover the value of effective communication for developers and gain valuable insights to enhance collaboration through our module on [Communication for Devs](https://docs.google.com/presentation/d/1ux4HXGj3XAGZRD7qvOpjl36FYbTcUYGaaBHywc95taY/edit#slide=id.p). If you are unable to attend, please watch [this recording](https://youtu.be/LVjG3qxtQX0). |
+| Optional         | Office Hours: Discover the value of effective communication for developers and gain valuable insights to enhance collaboration through our module on [Communication for Devs](https://docs.google.com/presentation/d/1tD8BH7WmY-ZPUPG1ZYjCmnLLsigMWjxt4xXVyeXrI_c/edit#slide=id.p). If you are unable to attend, please watch [this recording](https://youtu.be/LVjG3qxtQX0). |
 
 | 🤝 Developer pairings | 🖥 Assigned Github issue                                                                                              |
 | --------------------- | --------------------------------------------------------------------------------------------------------------------- |

src/views/Home.jsx

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

src/views/Layout.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { Outlet } from 'react-router-dom';
 import { useAuth, SignInButton, SignOutButton } from '../api/useAuth';
+import { NavLink } from 'react-router-dom';
+// import { Home, List, ManageList } from '../views';
 
 import './Layout.css';
 
@@ -27,15 +29,15 @@ export function Layout() {
 				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
-						<a href="#" className="Nav-link">
+						<NavLink to="/" end className="Nav-link">
 							Home
-						</a>
-						<a href="#" className="Nav-link">
+						</NavLink>
+						<NavLink to="/list" className="Nav-link">
 							List
-						</a>
-						<a href="#" className="Nav-link">
+						</NavLink>
+						<NavLink to="/manage-list" className="Nav-link">
 							Manage List
-						</a>
+						</NavLink>
 					</div>
 				</nav>
 			</div>

src/views/List.jsx

@@ -7,11 +7,9 @@ export function List({ data }) {
 				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.
-				 */}
+				{Object.values(data).map((item) => (
+					<ListItem key={item.id} name={item.name} />
+				))}
 			</ul>
 		</>
 	);