Ho list page

src/App.jsx

@@ -7,6 +7,8 @@ import { useAuth } from './api';
 import { useShoppingListData, useShoppingLists } from './api';
 
 import { useStateWithStorage } from './utils';
+import ProtectedRoutes from './utils/protectedRoutes';
+import AuthProvider from './AuthContext';
 
 export function App() {
 	/**
@@ -43,37 +45,43 @@ export function App() {
 	const data = useShoppingListData(listPath);
 
 	return (
-		<Router>
-			<Routes>
-				<Route path="/" element={<Layout />}>
-					<Route
-						index
-						element={
-							<Home
-								data={lists}
-								setListPath={setListPath}
-								userId={userId}
-								userEmail={userEmail}
+		<AuthProvider>
+			<Router>
+				<Routes>
+					<Route path="/" element={<Layout />}>
+						<Route
+							index
+							element={
+								<Home
+									data={lists}
+									setListPath={setListPath}
+									userId={userId}
+									userEmail={userEmail}
+								/>
+							}
+							// Pass userId and userEmail as props
+						/>
+						<Route element={<ProtectedRoutes />}>
+							<Route
+								path="/list"
+								element={<List data={data} listPath={listPath} />}
 							/>
-						}
-						// Pass userId and userEmail as props
-					/>
-					<Route
-						path="/list"
-						element={<List data={data} listPath={listPath} />}
-					/>
-					<Route
-						path="/manage-list"
-						element={
-							<ManageList
-								listPath={listPath}
-								userId={userId}
-								existingItems={data}
+						</Route>
+						<Route element={<ProtectedRoutes />}>
+							<Route
+								path="/manage-list"
+								element={
+									<ManageList
+										listPath={listPath}
+										userId={userId}
+										existingItems={data}
+									/>
+								}
 							/>
-						}
-					/>
-				</Route>
-			</Routes>
-		</Router>
+						</Route>
+					</Route>
+				</Routes>
+			</Router>
+		</AuthProvider>
 	);
 }

src/AuthContext.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createContext, useState, useEffect } from 'react';
+import { onAuthStateChanged } from 'firebase/auth';
+import { auth } from './api/config';
+
+export const AuthContext = createContext();
+
+export default function AuthProvider({ children }) {
+	const [currentUser, setCurrentUser] = useState(null);
+	const [pending, setPending] = useState(true);
+
+	useEffect(() => {
+		onAuthStateChanged(auth, (user) => {
+			setCurrentUser(user);
+			setPending(false);
+		});
+	}, []);
+
+	if (pending) {
+		return (
+			<div className="flex justify-center items-center h-[100vh]">
+				Loading.....Please wait
+			</div>
+		);
+	}
+
+	return (
+		<AuthContext.Provider value={{ currentUser }}>
+			{children}
+		</AuthContext.Provider>
+	);
+}

src/api/useAuth.jsx

@@ -11,7 +11,9 @@ import { addUserToDatabase } from './firebase.js';
 export const SignInButton = () => (
 	<button
 		type="button"
-		onClick={() => signInWithRedirect(auth, new GoogleAuthProvider())}
+		onClick={() => {
+			signInWithRedirect(auth, new GoogleAuthProvider());
+		}}
 	>
 		Sign In
 	</button>
@@ -21,7 +23,14 @@ 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();
+			window.location.reload();
+		}}
+	>
 		Sign Out
 	</button>
 );

src/components/ListItem.jsx

@@ -3,6 +3,9 @@ import { updateItem, deleteItem } from '../api/firebase';
 import { useState, useEffect } from 'react';
 import { getDaysBetweenDates } from '../utils';
 import { CgDanger } from 'react-icons/cg';
+import Checkbox from '@mui/material/Checkbox';
+import { FaTrashAlt } from 'react-icons/fa';
+import { Button } from '@mui/material';
 
 export function ListItem({ id, listPath, itemData, timeNow }) {
 	const [itemChecked, setItemChecked] = useState(false);
@@ -17,6 +20,7 @@ export function ListItem({ id, listPath, itemData, timeNow }) {
 			}
 		}
 	}, [id]);
+
 	const setItemPurchased = () => {
 		setItemChecked((prev) => !prev);
 		updateItem(listPath, id, itemData);
@@ -58,22 +62,22 @@ export function ListItem({ id, listPath, itemData, timeNow }) {
 		}
 		if (daysTillNextPurchase <= 7) {
 			return (
-				<span>
+				<span className="flex items-center gap-2">
 					--- <CgDanger className="soon" />
 					Soon
 				</span>
 			);
 		}
 		if (daysTillNextPurchase > 7 && daysTillNextPurchase <= 30) {
 			return (
-				<span>
+				<span className="flex items-center gap-2">
 					--- <CgDanger className="kind-of-soon" />
 					Kind of soon
 				</span>
 			);
 		} else {
 			return (
-				<span>
+				<span className="flex items-center gap-2">
 					--- <CgDanger className="not-soon" />
 					Not soon
 				</span>
@@ -82,18 +86,31 @@ export function ListItem({ id, listPath, itemData, timeNow }) {
 	};
 
 	return (
-		<li className="ListItem">
-			<label htmlFor={name}>
-				<input
-					name={name}
-					type="checkbox"
-					checked={itemChecked}
+		<li className="flex gap-10">
+			<label htmlFor={name} className="flex items-center gap-2">
+				<Checkbox
+					size="3"
+					name="name"
 					onChange={setItemPurchased}
+					checked={itemChecked}
 				/>
-				{name}{' '}
-				{getUrgencyIndicator(timeNow, dateNextPurchased, dateLastPurchased)}
+				<p className={`${itemChecked ? 'line-through text-white/50' : ''}`}>
+					{name}
+				</p>
+				{itemChecked ? (
+					<></>
+				) : (
+					getUrgencyIndicator(timeNow, dateNextPurchased, dateLastPurchased)
+				)}
 			</label>
-			<button onClick={handleDelete}>Delete item</button>
+			<Button
+				onClick={handleDelete}
+				className="flex gap-2 md:gap-3 items-center"
+				variant="contained"
+			>
+				<FaTrashAlt className="h-5 w-5 md:h-7 md:w-7" />
+				<span className="md:text-lg font-bold">Delete item</span>
+			</Button>
 		</li>
 	);
 }

src/components/SingleList.jsx

@@ -3,6 +3,7 @@ import './SingleList.css';
 export function SingleList({ name, path, setListPath }) {
 	function handleClick() {
 		setListPath(path);
+		localStorage.setItem('list', name);
 	}
 
 	return (

src/utils/protectedRoutes.jsx

@@ -0,0 +1,8 @@
+import React, { useContext } from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { AuthContext } from '../AuthContext';
+
+export default function ProtectedRoutes() {
+	const { currentUser } = useContext(AuthContext);
+	return currentUser ? <Outlet /> : <Navigate to="/" />;
+}

src/views/Layout.jsx

@@ -33,6 +33,9 @@ export function Layout() {
 					)}
 				</header>
 				<main className="Layout-main">
+					<h1 className="text-center">
+						{localStorage.getItem('list') || 'No list selected'}
+					</h1>
 					<Outlet />
 				</main>
 				<nav className="Nav">

src/views/List.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { getDaysBetweenDates } from '../utils';
 import { comparePurchaseUrgency } from '../api/firebase';
 import { ListItem } from '../components/ListItem';
+import Button from '@mui/material/Button';
 
 export function List({ data, listPath }) {
 	const [searchInput, setSearchInput] = useState('');
@@ -55,7 +56,7 @@ export function List({ data, listPath }) {
 	};
 
 	return (
-		<>
+		<div className="mt-10 flex justify-center">
 			{data.length < 1 ? (
 				<div className="welcome-prompt">
 					<h2>Welcome to Your List!</h2>
@@ -68,33 +69,35 @@ export function List({ data, listPath }) {
 					</button>
 				</div>
 			) : (
-				<>
-					<p>
-						Hello from the <code>/list</code> page!
-					</p>
-					<form>
-						<label htmlFor="search">Search: </label>
-						<input
-							type="search"
-							id="search"
-							value={searchInput}
-							onChange={(e) => setSearchInput(e.target.value)}
-						/>
-						<button type="button" onClick={clearSearchInput}>
-							X
-						</button>
+				<div>
+					<form className="flex flex-col md:flex-row items-center gap-5">
+						<div>
+							<label htmlFor="search">Search: </label>
+							<input
+								type="search"
+								id="search"
+								value={searchInput}
+								onChange={(e) => setSearchInput(e.target.value)}
+								className="p-3 focus:outline-none"
+							/>
+						</div>
+						<Button onClick={clearSearchInput} variant="contained">
+							<span className="text-lg font-bold">Clear</span>
+						</Button>
 					</form>
-					{items.map((item) => (
-						<ListItem
-							key={item.id}
-							id={item.id}
-							listPath={listPath}
-							itemData={item}
-							timeNow={timeNow}
-						/>
-					))}
-				</>
+					<div className="mt-20 flex flex-col gap-5">
+						{items.map((item) => (
+							<ListItem
+								key={item.id}
+								id={item.id}
+								listPath={listPath}
+								itemData={item}
+								timeNow={timeNow}
+							/>
+						))}
+					</div>
+				</div>
 			)}
-		</>
+		</div>
 	);
 }